Mòduls amb Javascript. Mapes amb OpenLayers - Historial de revisió

Joan: /* Feina per l'alumne */

2022-04-08T15:10:20Z

Feina per l'alumne

Joan: /* Feina per l'alumne */

2022-03-31T17:09:08Z

Feina per l'alumne

Joan: /* Feina per l'alumne */

2022-03-29T17:45:52Z

Feina per l'alumne

Joan a 09:30, 23 març 2022

2022-03-23T09:30:19Z

Joan: Es crea la pàgina amb «=Cas pràctic. Dibuixar un mapa amb la llibreria OpenLayers= ==Treballar amb llibreries== A high-performance, feature-packed library for all your mapping needs. *https...».

2022-03-23T09:25:46Z

Es crea la pàgina amb «=Cas pràctic. Dibuixar un mapa amb la llibreria OpenLayers= ==Treballar amb llibreries== A high-performance, feature-packed library for all your mapping needs. *https...».

Pàgina nova

=Cas pràctic. Dibuixar un mapa amb la llibreria OpenLayers=
==Treballar amb llibreries==
A high-performance, feature-packed library for all your mapping needs.
*https://openlayers.org/

Donar una ullada a tots els exemples que podem fer a:
*https://openlayers.org/en/latest/examples/

Però el ''hola món'' de com pintar un mapa és a:
*https://openlayers.org/en/latest/doc/quickstart.html

En el primer exemple no utilitzem els mòduls, ho fem amb les llibreries:

script ''pintar_mapa.html'':
<pre>
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
</pre>
*Pintar el mapa sobre la teva ciutat amb un nivell de zoom adequat.
*Provar una altra servidor de ''tiles'':
<pre>
source: new ol.source.Stamen({layer: 'toner'})
</pre>
Ara farem aquest mateix exercici amb mòduls. Els exemples que hem vist anteriorment estan tots amb mòduls.

==Treballar amb mòduls==
Per treballar amb mòduls, que és la manera recomanable, hem d'anar als ''Tutorials'', i anar al primer de tots: ''Building an OpenLayers Application'':
*https://openlayers.org/en/latest/doc/tutorials/
*https://openlayers.org/en/latest/doc/tutorials/bundle.html
<pre>
$ mkdir app
$ cd app
</pre>
Per crear l'aplicació i importar tots els mòduls de Openlayers, utilitzarem ''npm''.
<pre>
$ npm init
</pre>
Quan et pregunta, pots deixar totes les opcions per defecte. S'ha creat el fitxer package.json.

This will create a package.json file in your working directory. Add OpenLayers as dependency to your application with
<pre>
$ npm install ol
</pre>
Es crea la carpeta ''node_modules'' amb totes les dependències.
At this point you can ask NPM to add required development dependencies by running
<pre>
$ npm install --save-dev parcel-bundler
</pre>
Què és parcel?
*https://parceljs.org/
Blazing fast, zero configuration web application bundler

Ara necessitem construir l'aplicació, amb els fitxers ''index.js'' i ''index.html''.

script ''index.js'':
<pre>
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import {fromLonLat} from 'ol/proj'; //línia nova
import OSM from 'ol/source/OSM';

const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
//center: [0, 0],
center: fromLonLat([1.9858, 41.9176]), //línia modificada
zoom: 0
})
});
</pre>

script ''index.html'':
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using Parcel with OpenLayers</title>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>
</pre>

Modifiquem el fitxer ''package.json'' per definir com es fa el ''build'' de l'aplicació i com s'engega (''start''):

''package.json'':
<pre>
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html",
"build": "parcel build --public-url . index.html"
},
"author": "",
"license": "ISC"
}
</pre>
Finalment, per fer córrer l'aplicació, farem:
<pre>
$ npm start

> app@1.0.0 start /home/joan/M06_WEC_2021/UF2/openlayers/app
> parcel index.html

Server running at http://localhost:1234
✨ Built in 13.21s.
</pre>
*localhost:1234
Per crear un production bundle (es crea la carpeta dist/)
<pre>
$ npm run build

> app@1.0.0 build /home/joan/M06_WEC_2021/UF2/openlayers/app
> parcel build --public-url . index.html

✨ Built in 21.59s.

dist/app.ef0d89f9.js.map ⚠️ 1.95 MB 248ms
dist/app.ef0d89f9.js 540.56 KB 19.16s
dist/app.bb28b584.css.map 7.18 KB 3ms
dist/app.bb28b584.css 3.96 KB 5.42s
dist/index.html 273 B 2.06s

</pre>
and copy the ''dist/'' folder to your production server.

Aquesta carpeta '''dist/''' conté totes les llibreries i el codi comprimit. L'objectiu és ara posar aquesta carpeta ''dist/'' dins el teu Apache/XAMP i veure que funciona. Per tant, distingim entre l'entorn de desenvolupament, i l'entorn de desplegament en la fase de producció.

{{Autor}}, març 2022

@@ Línia 269: / Línia 269: @@
 </pre>
 Dóna com a resultat més de 7000 nodes
 ===Pics de la província de Tarragona===
 <pre>
 [out:json];
-area[admin_level=4][official_name="Tarragona"]->.boundaryarea;
+area[admin_level=6][name="Tarragona"]->.boundaryarea;
+(
 node[natural=peak](area.boundaryarea);
@@ Línia 286: / Línia 291: @@
 (._;>;);
 out meta;
 </pre>

@@ Línia 256: / Línia 256: @@
 *https://umap.openstreetmap.fr/es/map/muralla-medieval-de-malaga_563990#16/36.7246/-4.4135
-Com extreure la informació de OpenStreetMap? 3 exemples:
+Com extreure la informació de OpenStreetMap? Hem d'utilitzar el servei de Overpass Turbo, que fa una consulta sobre la base de dades de OpenStreetMap.
 ===Pics de Catalunya===
 <pre>

@@ Línia 255: / Línia 255: @@
 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
 =Desplegament de l'aplicatiu=
 Mira aquest projecte similar:

← Versió més antiga		Revisió del 09:30, 23 març 2022
Línia 176:		Línia 176:

	Aquesta carpeta '''dist/''' conté totes les llibreries i el codi comprimit. L'objectiu és ara posar aquesta carpeta ''dist/'' dins el teu Apache/XAMP i veure que funciona. Per tant, distingim entre l'entorn de desenvolupament, i l'entorn de desplegament en la fase de producció.		Aquesta carpeta '''dist/''' conté totes les llibreries i el codi comprimit. L'objectiu és ara posar aquesta carpeta ''dist/'' dins el teu Apache/XAMP i veure que funciona. Per tant, distingim entre l'entorn de desenvolupament, i l'entorn de desplegament en la fase de producció.
		+
		+	=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:
		+	<pre>
		+	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
		+	})
		+	});
		+	</pre>
		+	==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 dolment.
		+
		+	=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:
		+	<pre>
		+	https://wiki.openstreetmap.org/wiki/ES:Tag:man_made%3Dsurvey_point
		+	man_made=survey_point
		+	</pre>
		+	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
		+	=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.

	{{Autor}}, març 2022		{{Autor}}, març 2022