Mòduls amb Javascript

Mòduls. Introducció

• https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Modules
• https://github.com/mdn/js-examples

$ unzip js-examples-master.zip

Anem al primer exemple:

$ cd js-examples-master/modules/basic-modules/
$ ls
index.html
main.js
modules/
    canvas.js
    square.js

Trobem els exports en els scripts de la carpeta modules/: canvas.js i square.js. Les funcions definides en aquests mòduls s'importen en el main.js, que és el fitxer principal de Javascript. El index.html és el punt d'entrada de la web/html, i fa referència al main.js com has fet moltes vegades.

Has de tindre en compte els problemes que et trobaràs amb les proves locals (si intentes carregar l'arxiu HTML localment, és a dir, amb una URL file:///, ettrobaràs amb errors de CORS degut als requisits de seguretat del mòdul JavaScript. Necessites fer les teves proves en el teu servidor web:

• http://ruta_apache/index.html

Comprovar que el primer exemple funciona correctament (basic-modules), i comprovar que funciona la resta d'exemples.

Utilitzar mòduls a la consola.

En aquesta cas hem d'utilitzar l'extensió .mjs (mòduls de js en comptes de .js). El codi mínim i que no té interfície gràfica seria:

script square.mjs:

const name = 'square';

function instanciar(length, color) {
  return {
    length: length,
    color: color
  };
}

function reportArea(length) {
  console.log(length*length);
}

function reportPerimeter(length) {
    console.log(4*length);
}

export { name, instanciar, reportArea, reportPerimeter };

script main.mjs:

import { name, instanciar, reportArea, reportPerimeter } from './square.mjs';

let square1 = instanciar(100, 'blue');
reportArea(square1.length);
reportPerimeter(square1.length);

I si fem:

$ node main.mjs 
10000
400

Podem provar aquest codi en l'espai que tens en el servidor vps-89148e22.vps.ovh.net.

Tasques a realitzar

(TBD)

Entrega al Classroom

(TBD)

---

creat per Joan Quintana Compte, març 2022

Dòlmens de Catalunya

Posar una icona sobre un mapa

Se't proporciona el codi mínim per pintar una icona sobre un mapa. En aquest cas, com a mapa escollim el render de OSM:

import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {Icon, Style} from 'ol/style';
import {LineString, Point} from 'ol/geom';
import {getVectorContext} from 'ol/render';
import {fromLonLat} from 'ol/proj';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import OSM from 'ol/source/OSM';

var features = new Array();
var feature = new Feature({
  'geometry': new Point(fromLonLat([1.9858, 41.9176])),
  'name': 'nom element',
});

features.push(feature)

var iconStyle = new Style({
  image: new Icon({
    anchor: [0.5,20],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: 'img/dolmen_16.png'
  })
});

var vectorSource = new VectorSource({
  features: features,
  wrapX: false,
});

var vector = new VectorLayer({
  source: vectorSource,
  style: iconStyle,
});

var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM({
        layer: 'OSM'
      })
    }),
    vector
  ],
  target: 'map',
  view: new View({
    center: fromLonLat([1.9858, 41.9176]),
    zoom: 9
  })
});

Dibuixar tots els dòlmens. Solució

Fitxer:Dolmens.zip En el següent fitxer se't proporciona:

• dolmens.js (llistat dels dòlmens en format json, geolocalitzats, a punt per exportar el mòdul, veure la última línea)
• img/dolmen_16.png: és la icona que farem servir.
• solució_v0: index_v0.html i main_v0.html. Pintem només una icona (un dolmen) sobre el mapa.
• solució_v1: index_v1.html i main_v1.html. Pintem tots els dòlmens. En l'exercici anterior havies aconseguit pintar un marker (icona). Ara es tracta de recórrer tots els dòlmens, omplir tota la matriu, i posar una icona ben geolocalitzada per cada dolmen.
• solució_v2: index_v2.html i main_v2.html. Volem ampliar la funcionalitat. Quan cliquem sobre el dolmen se'ns mostra una caixa de text amb el nom i el municipi del dolmen.

Feina per l'alumne

• El primer objectiu és fer funcionar (i entendre) tots els exemples proposats
• Partint de l'aplicatiu dels dòlmens, ara l'objectiu és pintar sobre un mapa una altra informació de nodes geolocalitzats que puguis aconseguir de OSM (consulta a Overpass Turbo). Per exemple, se't proposa el llistat de vèrtex geodèsics de Catalunya:

https://wiki.openstreetmap.org/wiki/ES:Tag:man_made%3Dsurvey_point
man_made=survey_point

O bé qualsevol altra informació que consideris d'interès (però han de ser nodes/punts, no vies). En cas de dubte, consultar el professor.

Exemple real: mapa interactiu de les restes de la muralla medieval de Màlaga:

• https://umap.openstreetmap.fr/es/map/muralla-medieval-de-malaga_563990#16/36.7246/-4.4135

Un altre exemple: Catalunya Màgica, topònims catalans amb les paraueles bruixa, dimoni, diable, drac, infern:

• https://catalunyamagica.joanillo.org/

Desplegament de l'aplicatiu

Mira aquest projecte similar:

• http://wiki.joanillo.org/index.php/Catalunya_M%C3%A0gica

i llegeix atentament l'apartat de desplegament. Ho comentarem a classe.

Entrega al Classroom

Entregaràs al Classroom la teva solució, dins del termini previst per fer-ho.

---

creat per Joan Quintana Compte, març 2022