Openlayers: ol package. Exemple Casa de Papel

De wikijoan
Salta a la navegació Salta a la cerca

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ó

Create a new empty directory for your project and navigate to it by running

$ mkdir new-project && cd new-project

Initialize your project with

$ npm init (deixar les opcions per defecte)

This will create a package.json file in your working directory. Add OpenLayers as dependency to your application with:

$ npm install ol

At this point you can ask NPM to add required development dependencies by running

$ npm install --save-dev parcel-bundler

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:

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
  })
});

I aquesta és la nostra pàgina web index.html:

<!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>

Creació del bundle

Per tal de què funcioni tot plegat necessito parcel. Make sure you have parcel installed:

$ npm install -g parcel-bundler (instal·kació global)
$ npm install --save-dev parcel-bundler (instal·lació local) (ja ho havia fet)

(Ho instal·lem localment)

NOTA maig 2021: no cal fer:

$ npm install --save-dev parcel

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:

{
  "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"
}

That's it. Now to run your application, enter

$ 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

S'ha creat la carpeta dist/

$ 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.

in your console. To test your application, open in your browser:

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

npm run build

and copy the dist/ folder to your production server.

Aplicació La Casa de Papel

La casa de papel.png

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:

Concretament, per pintar una icona sobre el mapa:

i per utilitzar els mapes de Stamen (watercolor, toner):

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:

{
  "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"
  }
}
$ npm start
  • localhost:1234

Descarrega el codi

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

Cap creus btt.png

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:

(El codi està a la mateixa carpeta que La Casa de Papel)


creat per Joan Quintana Compte, març 2020