La Palma Volcano Resort
Contingut
Introducció
App Openlayers
carpeta de treball:
- ~/projectes/OSM/la_palma/
versions
(TBD)
Routing
És una SPA (Single Page Application), però jo vull tenir diferents pàgines:
- http://localhost:1234
- http://localhost:1234/info
- http://localhost:1234/FAQS
- http://localhost:1234/SQL
Fem servir el projecte vanilla-router
però l'adaptem i no cal instal·lar cap paquet. I el simplifiquem fins a obtenir un funcionament correcte del router. El que no he aconseguit encara és canviar la plantilla html en funció de la ruta. De moment, totes les plantilles es basen en index.html.
Un codi mínim per fer un router seria:
script router.js:
function Router(options) {
var settings = this._getSettings(options);
...
}
Router.Page = function (uri, query, params, state, options) {
this.uri = uri || "";
this.query = query || {};
this.params = params || [];
this.state = state || null;
this.options = options || {};
};
...
export default Router;
I en el main.js:
import Router from './router.js';
var router = new Router({
mode: 'hash',
root: './index.html',
hooks: {
before: function (newPage) {
console.info('Before page loads hook', newPage);
}
},
page404: function (path) {
console.log('"/' + path + '" Page not found');
}
});
router
.add('', function () {
console.log('Home page');
//document.getElementById('title').innerHTML = "Home Page";
})
.add('search', function () {
console.log('Search Page');
//document.getElementById('title').innerHTML = 'Search for: ' + this.query.q;
}, {
unloadCb: function (async) {
if (async){
console.warn("You have unsaved data!");
return confirm("You have unsaved data! Continue?");
}
return false;
}
})
.add('hello/(:any)', function (name) {
console.log('Hello, ' + name, this.state);
//document.getElementById('title').innerHTML = 'Hello, ' + name;
})
.add('about', function () {
console.log('About Page');
//document.getElementById('title').innerHTML = 'About Page';
})
//.remove('about')
.check()
.addUriListener()
//.navigateTo('hello/World', {foo: "bar"})
.refresh();
window.router = router;
Parcel·lació
Els voluntaris de OSM agafen les imatges del satèl·lit, i modifiquen el coastline de La Palma. Per exemple, les fotos del satèl·lit Sentinel-2 es poden trobar a:
En el bbox ajustant, la consulta Overpass per saber quines són les coordenades de la costa és:
[out:json][timeout:25];
// gather results
(
( node["natural"="coastline"]({{bbox}}); );
( way["natural"="coastline"]({{bbox}}); );
( relation["type"="multipolygon"]["natural"="coastline"]({{bbox}}); );
);
// print results
out body;
>;
out skel qt;
Obtenim:
{
"version": 0.6,
"generator": "Overpass API 0.7.56.9 76e5016d",
"osm3s": {
"timestamp_osm_base": "2021-10-04T10:20:14Z",
"copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL."
},
"elements": [
{
"type": "way",
"id": 239193220,
"nodes": [
33341517,
3707683476,
3707683474,
1043743187,
...
3707804847,
3707804850,
7628381053
],
"tags": {
"natural": "coastline",
"source": "landsat"
}
},
{
"type": "node",
"id": 33341561,
"lat": 28.6294112,
"lon": -17.9341471
},
{
"type": "node",
"id": 33341562,
"lat": 28.6291044,
"lon": -17.9339946
},
...
{
"type": "node",
"id": 6382140824,
"lat": 28.6448780,
"lon": -17.9425082
}
]
}
Si sabem el punt nord i el punt sud on comença l'aflorament, podem trobar els punts nous de la costa. (això ho farem amb un script i calculant la distància mínima.)
punt nord: 28.61442/-17.92517
{
"type": "node",
"id": 9132975371,
"lat": 28.6144529,
"lon": -17.9251417
}
punt sud: 28.60865/-17.92326
{
"type": "node",
"id": 3707683230,
"lat": 28.6082124,
"lon": -17.9232966
}
El que s'ha de fer a partir d'ara és la parcel·lació GeoJSON, tenint en compte que la forma de l'aflorament anirà canviant amb els dies, i a mida que els satèl·lits recullin noves fotos i les dades s'actualitzin a OSM.
Desplegament
Github
creat per Joan Quintana Compte, octubre 2021
