Browse Source

Merge branch 'multicolor-map-icons'

Baptiste Jonglez 10 years ago
parent
commit
279a14c31e

BIN
assets/leaflet/images/marker-icon-green.png


BIN
assets/leaflet/images/marker-icon-red.png


BIN
assets/leaflet/images/marker-icon-yellow.png


+ 30 - 2
assets/map.js

@@ -7,6 +7,25 @@ $( document ).ready(function() {
         zoom: 13,
     }
 
+    // Icons
+
+	var leecherIcon = L.icon({
+		//iconUrl: '../assets/leaflet/images/marker-blue.png',
+        iconUrl: '../assets/leaflet/images/marker-icon.png',
+		iconSize: [25, 41],
+		iconAnchor: [12, 41],
+		popupAnchor: [0, -28]
+	});
+
+
+    var seederIcon = L.icon({
+        iconUrl: '../assets/leaflet/images/marker-icon-red.png',
+		iconSize: [25, 41],
+		iconAnchor: [12, 41],
+		popupAnchor: [0, -28]
+	});
+
+
     // Create map
     var map = L.map('map', {scrollWheelZoom: false}).setView([defaults.lat,defaults.lng], defaults.zoom);
     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -33,7 +52,7 @@ $( document ).ready(function() {
                 if (feature.properties.place.hasOwnProperty('floor')) feature.properties.popupContent += '<li>Étage: '+feature.properties.place.floor+'</li>';
                 if (feature.properties.place.orientations[0]) feature.properties.popupContent += '<li>Orientation: '+feature.properties.place.orientations.join(', ')+'</li>';
                 if (feature.properties.place.roof) feature.properties.popupContent += '<li>Accès au toit'+'</li>';
-                feature.properties.popupContent += '</ul>'
+                feature.properties.popupContent += '</ul>';
             }
 
             if (feature.properties.comment) {
@@ -60,7 +79,16 @@ $( document ).ready(function() {
         var featureLayer = L.geoJson(data, {
             onEachFeature: function(feature, layer) {
                 buildPopupContent(feature, layer);
-                drawSemiCircles(feature, layer); }
+                drawSemiCircles(feature, layer); },
+            pointToLayer: function(feature, latlng) {
+                var icon;
+                if (feature.properties.contrib_type == 'connect') {
+                    icon = leecherIcon;
+                } else {
+                    icon = seederIcon;
+                }
+                return L.marker(latlng, {icon: icon});
+            }
         }).addTo(map);
 
         // Auto Zoom

+ 2 - 1
backend.py

@@ -314,6 +314,7 @@ def build_geojson():
                     'orientations' : orientations,
                     'angles' : angles,
                     'roof' : row['roof'],
+                    'contrib_type' : row['contrib_type']
                 },
                 "comment" : row['comment']
              }
@@ -331,7 +332,7 @@ def build_geojson():
                  "coordinates": [row['longitude'], row['latitude']],
             },
              "id" : row['id'],
-             "properties": {}
+             "properties": {'contrib_type': row['contrib_type']}
         }
 
         # Add optionnal variables

+ 4 - 0
views/map.tpl

@@ -6,6 +6,10 @@
 
 <div id="map" class="results" data-json="{{geojson}}"></div>
 <script src="assets/map.js" type="text/javascript"></script>
+<p>Légende : <br />
+  <img src="assets/leaflet/images/marker-icon-red.png" /> Personne souhaitant partager sa connexion Internet<br />
+  <img src="assets/leaflet/images/marker-icon.png" /> Personne souhaitant se connecter au réseau radio
+</p>
 <p>
   Télécharger le fichier <a href="{{geojson}}">GeoJSON</a>.
 </p>