Catalunya Màgica
Contingut
Introducció
Vull cercar a OpenStreetMap per les paraules clau infern, dimoni, diable, bruixa, bruixes, drac, zones maleïdes, ecncantats i encantades, 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ó
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
