Catalunya Màgica

De wikijoan
Salta a la navegació Salta a la cerca

Introducció

Vull cercar a OpenStreetMap per les paraules clau infern, dimoni, diable, bruixa, bruixes, drac, zones maleïdes, i pintar-ho sobre un mapa.

OpenStreetMap

Faig una consulta a Overpass Turbo:

[out:json];
area["name"="Catalunya"]->.boundaryarea;
(
nwr(area.boundaryarea)[name~"bruixa",i];
);
out center;

22 nodes, 26 vies, 1 relació

...
  "elements": [
{
  "type": "node",
  "id": 1241569916,
  "lat": 42.0060708,
  "lon": 1.9847071,
  "tags": {
    "name": "Carena del Cingle de la Bruixa",
    "place": "locality"
  }
},
...

Ara bé hi ha unes consultes que em costen molt més i surt el timeout. El que faig és dividir Catalunya en 4x4 quadrícules i utilitzar bbox. Per exemple:

[out:json][bbox:41.42384,1.78462,41.85616,2.48016];
(
way[name~"diables",i];
);
out center;

que dóna com a resultat:

...
[

{
  "type": "way",
  "id": 177868781,
  "center": {
    "lat": 41.6023535,
    "lon": 1.8208948
  },
  "tags": {
    "name": "Paret dels Diables",
    "natural": "cliff",
    "source": "Institut Cartogràfic de Catalunya"
  }
},
...
]
...

Per tant, puc recopilar tota la informació, nodes i vies, relacionat amb infern, diable, dimoni, bruixa, i ho recopilo i ho netejo en els fitxers:

  • nodes_combinats.json
  • ways_combinats.json

He cercat per name, però els tags que m'interessen també és saber a què fa referència aquest node o via. Pot ser un riu, una cinglera, una cosa, el local social dels Diables del poble, etc:

"place": "locality"
"natural": "spring"
"natural": "cave_entrance"
"natural": "peak"
"natural": "rock"
"natural": "saddle"
...

Programació

Catalunya magica.png

Programarem la web amb OpenLayers 6.5.0, i amb mòduls.

El primer que fem és convertir el nostre fitxer json als fitxers javascript que contenen la mateixa informació:

  • nodes_combinats.js
  • ways_combinats.js

(al final d'aquest fitxer hi ha un export, doncs estic utilitzant mòduls).

Resum de comandes

Dins de catalunya_magica/ fem: (veure per exemple la pràctica de dòlmens)

$ mkdir html
$ cd html
$ npm init
$ npm install ol
$ npm install --save-dev parcel-bundler

De fet, en aquesta ocació he copiat i enganxat la carpeta de dolmens/ de la pràctica dels alumnes, i he modificat directament els arxius i el package.json.

$ npm start

i ja funciona en local, en mode desenvolupament:

  • localhost:1234

Creo la distribució:

$ npm run build

i la carpeta dist/ l'associo a un àlies d'Apache i ja està llest per publicar. Primer en local:

  • localhost/catalunya_magica

i després públicament com es comenta a continuació:

En aquesta app podem escollir entre dos layers de tiles (OSM o TRESC), tenim un layer per a nodes i un altre layer per a ways. Tinc un pop-up i un tool-tip. I hem posat una font xula de Google Fonts.

Hi ha moltes coses per millorar però de moment ja està bé.

Desplegament

Publicar la web en el servidor OVH

Configurar el servidor OVH per tal de què la web sigui pública. Això només ho haurem de fer la primera vegada

$ cd /etc/apache2/sites-available/
$ sudo joe 000-default.conf

    Alias /catalunya_magica "/var/www/catalunya_magica/dist/"
    <Directory "/var/www/catalunya_magica/dist/">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride all
        Order deny,allow
        #Deny from all
        #Allow from 127.0.0.0/255.0.0.0 ::1/128
        Allow from all
        DirectoryIndex index.html default.html index.php
    </Directory>

$ sudo /etc/init.d/apache2 restart

i ja funciona (públicament):

o bé:

o bé si sabem la IP que té la màquina (ho sabem fent un ping):

Ara volem publicar-ho al domini http://catalunyamagica.joanillo.org

$ sudo cp romanic.joanillo.org.conf catalunyamagica.joanillo.org.conf
$ sudo joe catalunyamagica.joanillo.org.conf
...
        ServerName catalunyamagica.joanillo.org
        ServerAlias catalunyamagica.joanillo.org
        DocumentRoot /var/www/catalunya_magica/dist/
...
    <Directory "/var/www/catalunya_magica/dist/">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride all
        Order deny,allow
        #Deny from all
        #Allow from 127.0.0.0/255.0.0.0 ::1/128
        Allow from all
        DirectoryIndex index.html default.html index.php
    </Directory>

$ sudo a2ensite catalunyamagica.joanillo.org.conf
$ sudo /etc/init.d/apache2 reload

Però amb això no n'hi ha prou. Ara hem de tocar els DNS públics, anem a la nostra empresa de hosting on tenim el domini joanillo.org, a Arsys, i afegeixo una nova entrada DNS:

  • entrada: catalunyamagica.joanillo.org
  • tipus: CNAME
  • valor: joanqc.no-ip.biz
$ ping catalunyamagica.joanillo.org (no està disponible immediatament, el DNS s'ha de propagar)
PING joanqc.no-ip.biz (51.210.179.7) 56(84) bytes of data.
64 bytes from vps-f5d83567.vps.ovh.net (51.210.179.7): icmp_seq=1 ttl=46 time=30.3 ms

i hem d'esperar a què l'entrada DNS sigui pública. Quan el ping em respongui ja podrem fer:

NOTA: Recordar que al servidor Arsys li hem dit que el domini joanillo.org el vagi a cercar a joanqc.noip. I dins del servidor OVH tinc un script de NoIP que es refresca cada mitja hora i que actualitza la IP pública en el cas de què hagi canviat. Ara bé, el meu servidor OVH ja té una IP pública (http://vps-f5d83567.vps.ovh.net/), i per tant ara ja no em cal per res el servei de NoIP. El que s'ha de fer (ToDo) és anar a l'entrada DNS d'Arsys i dir que vagi directament a OVH.

Actualitzar el servidor (desplegament)

Això ho haurem de fer cada vegada que fem canvis a la web, després d'executar

$ npm run build

Ens connectem via SSH al servidor. Per ex:

$ ssh ubuntu@vps-f5d83567.vps.ovh.net

En el servidor, donem accés d'escriptura a la carpeta:

$ cd /var/www/catalunya_magica/dist
$ sudo chmod -R 777 .

En el portàtil:

cd ~/projectes/OSM/catalunya_magica/html/dist
scp -r * ubuntu@vps-f5d83567.vps.ovh.net:/var/www/catalunya_magica/dist

En el servidor, tornem a restaurar els permisos:

$ cd /var/www/catalunya_magica/dist
$ sudo chmod -R 755 .
$ exit

update maig 2021: les accions que faig en el servidor es poden fer remotament via SSH:

ssh ubuntu@vps-f5d83567.vps.ovh.net 'sudo chmod -R 777 /var/www/catalunya_magica/dist'
ssh ubuntu@vps-f5d83567.vps.ovh.net 'sudo chmod -R 755 /var/www/catalunya_magica/dist'

Això és important perquè vol dir que tot el procés de desplegament es pot fer de forma desatesa amb un script.


creat per Joan Quintana Compte, abril 2021