lunedì 2 gennaio 2017

Integrazione Google Maps e Firebase per mappatura collaborativa

Firebase puo' essere utilizzato come base dati per salvare anche dati semplici di tipo cartografico.
Il vantaggio di questo approccio e' che ogni modifica effettuata da un client viene immediatamente visualizzato sugli altri client senza necessita' di aggiornare la pagina (utile quindi nel caso si voglia fare per esempio il tracking di un oggetto che si muove)
Un esempio live puo' essere provato a questo link


La struttura dati e' molto semplice: un alberi in cui ad ogni entrata sono presenti una longitudine ed una latitudine. Cliccando sulla mappa si aggiunge un nuovo nodo alla mappa
Esempio del sistema in uso




Attenzione : Firebase non conosce il tipo float per cui ci sono un po' di magheggi nel convertire i dati float da e per tipi stringhe
------------------------
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>
   
    <script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>
    <script type="text/javascript">  

    var latitudine = 0.0;
    var longitudine = 0.0;
    var conta = 0;
    // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAchx8oVeLUgYnGujAEfwOxxxxxxxxxxxxxxxx",
    authDomain: "notifica-23xxxxxxfirebaseapp.com",
    databaseURL: "https://notifica-23xxxxxfirebaseio.com",
    storageBucket: "notifica-2xxxxxx.appspot.com",
    messagingSenderId: "392723xxxxxxx"
  };
  firebase.initializeApp(config);
</script>
<script type="text/javascript">

/*
questi sono solo esempi di come si possano inserire dati in Firebase in Javascript
le righe sono commentate e quindi non in uso/
firebase.database().ref('punti/').set({
    lat: 43,
    lng : 11
  });*/

/*

firebase.database().ref('punti/').push({
    lat: 43.0,
    lng : 12.0
  });

firebase.database().ref('punti/').push({

    lat: 42,
    lng: 11
  });
*/

  </script>


  </head>
  <body>
    <div id="map"></div>

   

  <script>

  function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
        lat: 43,
        lng: 11
    },
    zoom: 6,
    styles: [{
        featureType: 'poi',
        stylers: [{
                visibility: 'off'
            }] // Turn off points of interest.
    }, {
        featureType: 'transit.station',
        stylers: [{
                visibility: 'off'
            }] // Turn off bus stations, train stations, etc.
    }],
    disableDoubleClickZoom: false
   });

  //questa e' la funzione che all'evento click sulla mappa aggiunge il corrispondente
  // punto nel database    map.addListener('click', function(e) {
    firebase.database().ref('punti/').push({
    lat: JSON.stringify(e.latLng.lat()),
    lng : JSON.stringify(e.latLng.lng())
   });
  var marker = new google.maps.Marker({
    position: {
      lat: e.latLng.lat(),
      lng: e.latLng.lng()
    },
    map: map
    });
  });
 //fine della funzione di inserimento
 // crea un evento sull'aggiornamento dei punti
//sicuramente esiste un sistema piu' furbo di fare la stessa cosa
  const dbRefPunti = firebase.database().ref().child('punti');
  dbRefPunti.on('child_added',function(snap,prevChildKey)
    {
      var la1;
      var lo1;
      snap.forEach(function (snapshot) {

           var obj = snapshot.val();

           var nome = snapshot.key;
           if (snapshot.key == "lat")
              {
                latitudine = JSON.stringify(obj);
                la1 = obj;
                console.log("latitudine : "+latitudine);
              }
           if (snapshot.key == "lng")
                {
                longitudine = JSON.stringify(obj);
                lo1 = obj;
                console.log("longitudine : "+longitudine);
              }
            conta++;
            console.log("Conta : "+conta);

            if (conta%2 == 0) 

              {
              console.log("Stampa : " + latitudine+":"+longitudine);
              console.log(isNaN(la1));


               //var latLng = new google.maps.LatLng(parseFloat(latitudine),parseFloat(longitudine));

               var latLng = new google.maps.LatLng(la1,lo1);

               var marker = new google.maps.Marker({position: latLng,map: map});



              }

           });
       }

    );

  // fine evento

  //fine initMaps

  google.maps.event.addDomListener(window, "load", initMap);

  };


  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkeozFISVmCAB3ta1rEXvMNDDzSxxxxxxxx&callback=initMap">
    </script>
   
  </body>
</html>
------------------------