[Gfoss] Buffer con Turf renderizzato in MapBox

[Massimiliano Moraca]

Salve a tutti, mi trovo di fronte a questo problema/dilemma e non so come
comportarmi. Voglio generare un buffer a distanza prestabilita intorno ad
alcuni punti usando le librerie di spatial analysis Turf.js[1] e
renderizzare il tutto con MapBox.
Leggendo la documentazione ufficiale di Turf e di MapBox(che usa comunque
Turf per lo spatial analysis) mi sono trovato di fronte a tre diverse
versioni di questa semplice procedura ma solo una di esse funziona:

map.on('load', function() {

    /// Esempio dal sito Turf.js | https://turfjs.org/docs/#buffer
    console.log('- Usando l\'
esempio preso dal sito Turf.js voglio leggere il punto, generare un
buffer e renderizzare entrambi
\n\n')
    ///////// START
    var point = turf.point([-90.548630, 14.616599]);
    console.log('Ho letto le coordinate del punto')

    var buffered = turf.buffer(point, 500, {units: 'miles'});
    console.log('Con le coordinate del punto ho generato il buffer')
    ///////// FINE



    /// Esempio 1 dal sito MapBox |
https://docs.mapbox.com/help/how-mapbox-works/geospatial-analysis/
    console.log('- Usando l\'
esempio1 preso dal sito MapBox voglio leggere il punto, generare un
buffer e renderizzare entrambi
\n\n')
    ///////// START
    var point = {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [0, 0]
      },
      properties: {
        name: 'Null Island'
      }
    };
    console.log('Ho letto le coordinate del punto')

    var buffered = turf.buffer(point, 200, { unit: 'miles' });
    console.log('Con le coordinate del punto ho generato il buffer')
    ///////// FINE




/// Esempio 2 dal sito MapBox creato visualizzando il codice sorgente
della mappa |
https://docs.mapbox.com/help/demos/turf-intro/nullisland.html
    console.log('- Usando l\'
esempio2 preso dal sito MapBox voglio leggere il punto, generare un
buffer e renderizzare entrambi
\n\n')
    ///////// START
    var point = {
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [0, 0]
      },
      'properties': {
        'name': 'Null Island'
      }
    };
    console.log('Ho letto le coordinate del punto')

    var buffered = turf.buffer(point, 200, 'miles');
    console.log('Con le coordinate del punto ho generato il buffer')
    ///////// FINE



    // Aggiunta dell'url del vettore sorgente
    map.addSource('point_source', {
      type: 'geojson',
      data: point,
    });
    console.log('Ho associato al punto la geometria')

    // Renderizzazione del vettore sorgente
    map.addLayer({
        'id': 'tower',
        'type': 'circle',
        'source': 'point_source',
      paint: {
        'circle-color': '#f30',
        'circle-radius': 3,
        'circle-stroke-width': 1,
        'circle-stroke-color': '#fff'
      }
    });
    console.log('Ed infine l\'ho renderizzato\n\n')

    // Renderizzazione del buffer
    map.addLayer({
          'id': 'buffer',
          'type': 'fill',
          'source': {
              'type': 'geojson',
              'data': buffered
          },
          'layout': {
              // 'line-join': 'round',
              // 'line-cap': 'round'
          },
          'paint': {
              'fill-color': '#fff',
              'fill-opacity': 0.50,
              'fill-outline-color': '#f30'
          }
      });
      console.log('Ora ho renderizzato il buffer\n\n\n\n')

    console.log('Stai vedendo il progetto completamente renderizzato con l\'
aggiunta dei vettori che hai richiesto')
  });


Se volete fare un test commentate due esempi per volta. Sia che si usa
"*Esempio
dal sito Turf.j"* che "*Esempio 1 dal sito MapBox",* si avrà lo stesso
errore in console:

> Uncaught Error: Invalid unit
>     at Object.e.exports.distanceToDegrees (turf.min.js:16)
>     at Object.e.exports [as buffer] (turf.min.js:1)
>     at r.<anonymous> ((index):53)
>     at r.St.fire (evented.js:115)
>     at r._render (map.js:1976)
>     at map.js:2047

Mentre se si usa l'ultimo esempio il buffer viene renderizzato
correttamente e tutto va come deve andare. Per renderizzare la mappa di
sfondo su cui andare ad inserire il tutto ho usato le indicazioni base di
MapBox[2]  e sia MapBox che Turf sono in CDN ed il tutto gira in Django.
Non utilizzo Node.js per il progetto su cui sto lavorando, non so usarlo e
non mi pare sia un obbligo nè per Turf nè per MapBox.

Il mio problema/dilemma sta in questo: è sbagliato il codice di esempio sul
sito delle librerie(può mai essere?) o sono io che sbaglio qualcosa?

____
[1] https://turfjs.org/
[2] https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart

*ing.Massimiliano Moraca*
*Analisi, progettazione e sviluppo di soluzioni GIS e WebGIS*
*P.IVA*: 08700081212
*CELL*: 333 59 49 583 (*lun - ven 9.00 - 18.00*)
*WEB*: www.massimilianomoraca.it
* Attività svolta ai sensi della Legge 4 del 14 gennaio 2013, art.1*