La Palma Volcano Resort

De wikijoan
Salta a la navegació Salta a la cerca

Introducció

App Openlayers

La palma new ressort.png
Captura de pantalla 2021-10-02 20-33-38.png
Captura de pantalla 2021-10-05 23-58-10.png

carpeta de treball:

  • ~/projectes/OSM/la_palma/

versions

(TBD)

Routing

És una SPA (Single Page Application), però jo vull tenir diferents pàgines:

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