faire marcher le popup sur les marqueurs de points d'interêt

panorama/static/panorama/img/marker-circle.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="51.689384"
+   height="51.914726"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   inkscape:export-filename="/home/pec/Bureau/marker-circle-green.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90"
+   sodipodi:docname="Nouveau document 1">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="10.621374"
+     inkscape:cy="15.687343"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1280"
+     inkscape:window-height="742"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-267.13827,-430.56392)">
+    <path
+       sodipodi:type="arc"
+       style="fill:#40fe20;fill-opacity:0.49789029;fill-rule:nonzero;stroke:#3ffd20;stroke-width:18.29789351999999880;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:0.82278477999999999;stroke-dasharray:none;stroke-dashoffset:0"
+       id="path2985"
+       sodipodi:cx="348.57144"
+       sodipodi:cy="403.79074"
+       sodipodi:rx="74.285713"
+       sodipodi:ry="71.428574"
+       d="m 422.85715,403.79074 c 0,39.44891 -33.25884,71.42857 -74.28571,71.42857 -41.02686,0 -74.28571,-31.97966 -74.28571,-71.42857 0,-39.44891 33.25885,-71.42857 74.28571,-71.42857 41.02687,0 74.28571,31.97966 74.28571,71.42857 z"
+       transform="matrix(0.30974912,0,0,0.32213908,185.01603,326.44253)"
+       inkscape:export-filename="/home/pec/Documents/rezine/celutz/panorama/static/panorama/img/marker-circle-green.png"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90" />
+  </g>
+</svg>

panorama/templates/panorama/main.html

@@ -66,6 +66,12 @@
             iconAnchor: [11, 35],
             popupAnchor: [0,-50]
         });
+        var poiIcon = L.icon({
+            iconUrl: '{% static "panorama/img/marker-circle-green.png" %}',
+            iconSize: [20, 20],
+            iconAnchor: [10, 10],
+            popupAnchor: [0,-20]
+        });
     
         function accordionMenus() {
             $("ul.side-nav").children().click(function(e) {
@@ -140,14 +146,14 @@
             map.addLayer( markerClusters );
             // Add POI
             var pointsOfInterest = L.layerGroup();
-            var options = {radius: 10, color: '#0f0', opacity: 0.6, fillOpacity: 0.3, riseOnHover: true};
+            var options = {icon: poiIcon, riseOnHover: true};
             {% for poi in poi_list %}
-                var poiMarker = L.circleMarker([{{ poi.latitude }}, {{ poi.longitude }}], options);
+                var poiMarker = L.marker([{{ poi.latitude }}, {{ poi.longitude }}], options);
                 var poiPopup = poiMarker.bindPopup('{{ poi.name }}', {className : 'markerpopup', closeButton: false});
                 /* TODO: la ligne suivante ne fonctionne pas, et donne une erreur lors du mouseover :
                    leaflet.js:6 Uncaught TypeError: Cannot read property 'lat' of null
                 */
-                //poiPopup.on('mouseover', poiMarker.openPopup);
+                poiPopup.on('mouseover', poiMarker.openPopup);
                 poiPopup.on('mouseout', poiMarker.closePopup);
                 pointsOfInterest.addLayer(poiMarker);
             {% endfor %}