Openlayers: ol package. Exemple Casa de Papel - Historial de revisió

Joan: /* Creació del bundle */

2021-05-17T09:28:59Z

Creació del bundle

Joan: /* Creació del bundle */

2021-05-17T07:58:56Z

Creació del bundle

Joan: /* Rutes BTT Cap de creus 2020 (El Port de la Selva) */

2020-09-14T08:19:57Z

Rutes BTT Cap de creus 2020 (El Port de la Selva)

Joan: /* Rutes BTT Cap de creus 2020 (El Port de la Selva) */

2020-09-01T22:23:17Z

Rutes BTT Cap de creus 2020 (El Port de la Selva)

Pàgina nova

__TOC__
=Introducció=
Es tracta de construir una aplicació OpenLayers amb '''node''' com a servidor, i instal·lar el mòdul '''ol'''. Representa que aquesta és la manera moderna de fer-ho, que anirà reemplaçant la manera clàssica d'utilitzar llibreries.
=Exemple inicial (Hola món)=
==Instal·lació==
*https://openlayers.org/en/latest/doc/tutorials/bundle.html

Create a new empty directory for your project and navigate to it by running
<pre>
$ mkdir new-project && cd new-project
</pre>
Initialize your project with
<pre>
$ npm init (deixar les opcions per defecte)
</pre>
This will create a ''package.json'' file in your working directory. Add OpenLayers as dependency to your application with:
<pre>
$ npm install ol
</pre>
At this point you can ask NPM to add required development dependencies by running
<pre>
$ npm install --save-dev parcel-bundler
</pre>
==Codi de l'aplicació i index.html==
Necessitem dos scripts: ''index.js'' i ''index.html''.

Place your application code in ''index.js''. Here is a simple starting point:
<pre>
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
</pre>
I aquesta és la nostra pàgina web ''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>
==Creació del bundle==
*https://openlayers.org/en/latest/doc/tutorials/bundle.html
*https://parceljs.org/
Per tal de què funcioni tot plegat necessito '''parcel'''. Make sure you have parcel installed:
<pre>
$ npm install -g parcel-bundler (instal·kació global)
$ npm install --save-dev parcel (instal·lació local)
</pre>
(Ho instal·lem localment)

With two additional lines in package.json you can introduce the commands '''npm run build''' and '''npm start''' to manually build your bundle and watch for changes, respectively. The final '''package.json''' with the two additional commands ''start'' and ''build'' should look like this:
<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>
That's it. Now to run your application, enter
<pre>
$ npm run build

> prova_pere@1.0.0 build /home/joan/projectes/OSM/fusionar_geojson/html/prova_pere
> parcel build --public-url . index.html
Built in 21.14s.

dist/prova_pere.64ad700d.js.map ⚠️ 1.82 MB 240ms
dist/prova_pere.64ad700d.js 518.11 KB 18.04s
dist/prova_pere.04a6741d.css.map 7.43 KB 4ms
dist/prova_pere.04a6741d.css 4.14 KB 5.80s
dist/index.html 287 B 2.65s
</pre>
S'ha creat la carpeta ''dist/''
<pre>
$ npm start

> prova_pere@1.0.0 start /home/joan/projectes/OSM/fusionar_geojson/html/prova_pere
> parcel index.html

Server running at http://localhost:1234
Built in 13.38s.
</pre>
in your console. To test your application, open in your browser:
*http://localhost:1234/
Whenever you change something, the page will reload automatically to show the result of your changes. Els canvis automàtics els podem veure perquè tenim el servidor corrent (''npm start'')

Note that a single JavaScript file with all your application code and all dependencies used in your application has been created. From the OpenLayers package, it only contains the required components.

To create a production bundle of your application, simply type
<pre>
npm run build
</pre>
and copy the ''dist/'' folder to your production server.

=Aplicació La Casa de Papel=
[[Fitxer:La casa de papel.png | thumbnail]]
El primer exemple que farem és situar tots els personatges de la banda de '''La Casa de Papel''' sobre les seves ciutats.

El codi d'exemple amb què em baso el trobo dels exemples:
*https://openlayers.org/en/latest/examples/
Concretament, per pintar una icona sobre el mapa:
*https://openlayers.org/en/latest/examples/icon.html
i per utilitzar els mapes de Stamen (watercolor, toner):
*https://openlayers.org/en/latest/examples/stamen.html

Combinant-ho tot puc fer la meva aplicació. Bàsicament és posar icones sobre les ciutats. Quan poso el cursor a sobre, es mostra amb un ''popup'' la informació. I quan clico sobre la icona s'obren en el navegador dues pestanyes: informació sobre la ciutat a la Viquipèdia; i la fitxa del personatge.

'''package.json''':
<pre>
{
"name": "la_casa_de_papel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel casa_papel.html",
"build": "parcel build --public-url . casa_papel.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"parcel": "^1.12.4",
"parcel-bundler": "^1.12.4"
}
}
</pre>
<pre>
$ npm start
</pre>
*localhost:1234
==Descarrega el codi==
*[[Fitxer:La casa de papel.zip]]
=Rutes BTT Cap de creus 2020 (El Port de la Selva)=
[[Fitxer:Cap creus btt.png | thumbnail]]
Tenim vàries rutes GPX i el que volem és pintar-les totes sobre el mapa. No es tracta de pintar tots els punts i unir-los amb una línia com tinc fet fins ara a rutesgps, sinó fer servir la possibilitat de pintar tot el track en una nova capa. L'exemple de partida és:
*https://openlayers.org/en/latest/examples/gpx.html
(El codi està a la mateixa carpeta que La Casa de Papel)
{{Autor}}, març 2020

@@ Línia 75: / Línia 75: @@
 (Ho instal·lem localment)
-'''NOTA maig 2021''': no cal tenir la carpeta ''node_modules''. Aquesta carpeta es creava perquè feia
+'''NOTA maig 2021''': no cal fer:
 <pre>
 $ npm install --save-dev parcel
 </pre>
-en comptes de parcel-bundler, i això creava la carpeta ''node_modules''. Però crec que no cal ni executar aquesta instrucció ni tenir la carpeta node_modules. Quan faig el ''npm start'' ja es crea la carpeta ''dist/''. I si faig el ''npm run build'' també.
+N'hi ha prou amb fer ''parcel-bundler''. Quan faig el ''npm start'' ja es crea la carpeta ''dist/''. I si faig el ''npm run build'' també.
 With two additional lines in package.json you can introduce the commands '''npm run build''' and '''npm start''' to manually build your bundle and watch for changes, respectively. The final '''package.json''' with the two additional commands ''start'' and ''build'' should look like this:

@@ Línia 71: / Línia 71: @@
 <pre>
 $ npm install -g parcel-bundler (instal·kació global)
-$ npm install --save-dev parcel (instal·lació local)
+$ npm install --save-dev parcel-bundler (instal·lació local) (ja ho havia fet)
 </pre>
 (Ho instal·lem localment)
 With two additional lines in package.json you can introduce the commands '''npm run build''' and '''npm start''' to manually build your bundle and watch for changes, respectively. The final '''package.json''' with the two additional commands ''start'' and ''build'' should look like this:

← Versió més antiga	Revisió del 08:19, 14 set 2020
(Cap diferència)