Εφαρμογή σε Leaflet για δεικτές ανάπτυξης

Έχει καιρό που δεν έβαλα κάτι στο ιστολόγιο μας.

Σήμερα βάζω ένα άρθρο για μια διαδικτυακή εφαρμογή.
Προκείται για μια εφαρμογή που είναι γνωστή και ενδιαφέρον όταν θέλουμε τη διάχυση γεω-δεδομένων.

Στο πλαίσιο επεξεργασίας πληροφοριών από τα τμηματά του δήμου, πήρα την αποστολή να δείξω πώς να εκμεταλλεύουμε τις πληροφορίες για να τα αξιοποίησουμε.

Η εφαρμογή που βάζω στο ιστολόγιο είναι μια που χρησιμοποιεί το Leaflet.

Ο στόχος είναι τη διάχυση από την εξέλιξη του αριθμού υπαλλήλων στο δήμου Βretagne romantique Γαλλίας κάθε 5 χρόνια από το 1995.

Η εφαρμογή είναι εδώ

http://geotest.bretagneromantique.fr/indicateurs/indic1.html
Παρουσιάζει ένα δείκτη = η  εξέλιξη του αριθμού υπαλλήλων στο δήμου

Η χαρτογράφηση των δεδομένων είναι σε  αναλογικούς  κύκλους.

Τα στρώματα  δεδομένων είναι 5 και σε σχέση με το έτος δηλαδή 1995, 2000, 2005, 2010, 2013.


ΚΩΔΙΚΟΣ

Ο κώδικος της εφαρμογής δείχνει τη σύνδεση με το Leaflet

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>

Τα γεωγραφικά δεδομένα είναι σε μορφή JS (JSON με εντολή μέσα) για τους υπαλληλούς. Το άλλο αρχείο είναι για τα πολύγωνα κοινοτητών του δήμου.

<script src="centroo.js"></script>
<script src="ccbr6.js"></script>

Ο χάρτης εμφανίζεται στο κλίμακα του δήμου με

  // create a map in the "map" div, set the view to a given place and zoom
    map = L.map('map').setView([48.4, -1.75], 11);

και χρησιμοποιεί το OpenStreetMap

  

    // add an CloudMade tile layer
    var CM=L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
     key: "1888026d32d54955951f16e5c6f490ce",
     attribution: '©  href="http://osm.org/copyright">OpenStreetMap</a> contributors, &copy  href="http://cloudmade.com/">CloudMade</a>',
     styleId: 22677
     }).addTo(map);

Ο υπολογισμός για να χαρτογραφήσουμε τους αναλογικούς κύκλους είναι από 

function setSizeIcon(a){
    return rayon=Math.sqrt(a)*(50/Math.sqrt(30));
   }   
 

Κάθε στρώμα δεδομένων είναι ενσωματώμενο με 

 // add geojson
    communeCentroProd=L.geoJson(centro, {
     pointToLayer: function (feature, latlng) {
      return L.circleMarker(latlng,{
       radius:setSizeIcon(feature.properties.ETP_1995),
       color : '#B0F2B6',
       fillOpacity: 1,
       fillColor: '#005824'
       }).bindPopup("Nombre d'ETP : " +feature.properties.ETP_1995);
     }
    }).addTo(map);