take in account asked changes on PLAN

jm2l/templates/Public/Plan.mako

@@ -1,12 +1,26 @@
 <%inherit file="jm2l:templates/layout.mako"/>
 <%def name="jsAddOn_head()">
     <script src="/vendor/leaflet/js/leaflet.js"></script>
+    <script src="/vendor/leaflet/js/leaflet-routing-machine.min.js"></script>
 </%def>
 <%def name="cssAddOn()">
   <link rel="stylesheet" href="/vendor/leaflet/css/leaflet.css" />
   <style>
     #come_map {
-        height: 300px;
+        height: 400px;
+    }
+    div.circle_place {
+        background-color: #8080AF77;
+        border-color: light-gray;
+        border-radius: 15px;
+        border-style: dashed;
+        border-width: 1px;
+    }
+    div.car_place {
+        background-image: url('img/tr_voiture_.png');
+        background-size: 28px;
+        fillOpacity: 0.5;
+        background-repeat: no-repeat;
     }
   </style>
 </%def>
@@ -56,10 +70,29 @@
             var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
             var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
             var osm = new L.TileLayer(osmUrl, {minZoom: 7, maxZoom: 18, attribution: osmAttrib});
-            // start the map on specified GPS Coords
+            map.setView(new L.LatLng(43.6137, 7.07502),16);
-            map.setView(new L.LatLng(43.61562,7.0724),15);
+            marker = L.marker([43.61556, 7.07176], {
-            marker = L.marker([43.615693, 7.0726221]).addTo(map);
+                icon: L.divIcon({ className: 'circle_place',
+                iconSize: [30, 30] })}).addTo(map);
+            marker.bindTooltip('Accueil<br/><b>JM2L</b>', {direction: 'top', offset:L.point(0, -10)}).openTooltip();
             map.addLayer(osm);
+            // start the map on specified GPS Coords
+            var car_route = L.Routing.control({
+                autoRoute: false,
+                show: false,
+                waypoints: [ L.latLng([43.61201, 7.07812]), L.latLng([43.6144, 7.07326]) ],
+                createMarker: function(i, wp) {
+                    if (i==1) {
+				        return L.marker(wp.latLng, {
+				            icon: L.divIcon({ className: 'car_place', iconSize: [30, 30] })
+				        }).bindTooltip('Parking P2 (conseillé)', {direction: 'right'})
+				    } else {
+				        return L.marker(wp.latLng).bindTooltip('Suivre Campus Poly\'tech', {direction: 'bottom'});
+				    }
+				}
+            });
+            car_route.route({geometryOnly: true});
+            car_route.addTo(map);
         </script>
     </div>
 </div>
@@ -67,7 +100,7 @@
 <div class="row-fluid">
     <div class="span8 offset2">
         <div id="parking">
-            <img src="/img/plan_masse_jm2l.png" >
+            <img src="/img/SophiaTech%20-%20plan.png" >
         </div>
     </div>
 </div>