add origin and destination icons

res/marker-icon-green.svg

@@ -0,0 +1,106 @@
+<?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:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg1130"
+   width="25pt"
+   height="41pt"
+   viewBox="0 0 33.333332 54.666668"
+   sodipodi:docname="marker-icon-green.svg"
+   inkscape:export-filename="/home/nomoketo/Projekte/c3nav/c3nav/res/marker-icon-2x-green.blank.png.png"
+   inkscape:export-xdpi="144"
+   inkscape:export-ydpi="144"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
+  <metadata
+     id="metadata1136">
+    <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>
+  <defs
+     id="defs1134" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1025"
+     id="namedview1132"
+     showgrid="false"
+     inkscape:zoom="5.0769403"
+     inkscape:cx="-31.715832"
+     inkscape:cy="25.132327"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1130"
+     units="pt" />
+  <image
+     sodipodi:absref="/home/nomoketo/Projekte/c3nav/c3nav/res/marker-icon-green-2x.blank.png"
+     xlink:href="marker-icon-green-2x.blank.png"
+     width="33.333332"
+     height="54.666668"
+     preserveAspectRatio="none"
+     style="image-rendering:optimizeSpeed"
+     id="image1164"
+     x="0"
+     y="3.2658954e-07" />
+  <path
+     transform="matrix(0.87482977,0,0,0.94272629,2.8563277,0.73384328)"
+     inkscape:export-ydpi="72"
+     inkscape:export-xdpi="72"
+     inkscape:transform-center-x="-1.9744604"
+     d="m 24.730864,17.61657 -6.770898,3.909179 -6.770896,3.909179 0,-7.818359 0,-7.8183578 6.770897,3.9091788 z"
+     inkscape:randomized="0"
+     inkscape:rounded="0"
+     inkscape:flatsided="false"
+     sodipodi:arg2="1.0471976"
+     sodipodi:arg1="0"
+     sodipodi:r2="4.5139313"
+     sodipodi:r1="9.0278625"
+     sodipodi:cy="17.61657"
+     sodipodi:cx="15.703001"
+     sodipodi:sides="3"
+     id="path1154"
+     style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:4.21591997;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.16470588"
+     sodipodi:type="star" />
+  <path
+     sodipodi:type="star"
+     style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#339d33;stroke-width:1.30399597;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path1140"
+     sodipodi:sides="3"
+     sodipodi:cx="15.703001"
+     sodipodi:cy="17.61657"
+     sodipodi:r1="9.0278625"
+     sodipodi:r2="4.5139313"
+     sodipodi:arg1="0"
+     sodipodi:arg2="1.0471976"
+     inkscape:flatsided="false"
+     inkscape:rounded="0"
+     inkscape:randomized="0"
+     d="m 24.730864,17.61657 -6.770898,3.909179 -6.770896,3.909179 0,-7.818359 0,-7.8183578 6.770897,3.9091788 z"
+     inkscape:transform-center-x="-1.9744604"
+     inkscape:export-xdpi="72"
+     inkscape:export-ydpi="72"
+     transform="matrix(0.87482977,0,0,0.94272629,2.8563277,0.73384328)" />
+</svg>

res/marker-icon-red.svg

@@ -0,0 +1,82 @@
+<?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:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg1130"
+   width="25pt"
+   height="41pt"
+   viewBox="0 0 33.333332 54.666668"
+   sodipodi:docname="marker-icon-red.svg"
+   inkscape:export-filename="/home/nomoketo/Projekte/c3nav/c3nav/res/marker-icon-red.blank.png.png"
+   inkscape:export-xdpi="72"
+   inkscape:export-ydpi="72"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
+  <metadata
+     id="metadata1136">
+    <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>
+  <defs
+     id="defs1134" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1025"
+     id="namedview1132"
+     showgrid="false"
+     inkscape:zoom="14.359756"
+     inkscape:cx="16.603704"
+     inkscape:cy="27.395784"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1130"
+     units="pt" />
+  <image
+     sodipodi:absref="/home/nomoketo/Projekte/c3nav/c3nav/res/marker-icon-red.blank.png"
+     xlink:href="marker-icon-red.blank.png"
+     width="33.333332"
+     height="54.666668"
+     preserveAspectRatio="none"
+     style="image-rendering:optimizeSpeed"
+     id="image1209"
+     x="0"
+     y="-1.2715658e-06" />
+  <rect
+     y="11.243177"
+     x="10.65666"
+     height="12.020013"
+     width="12.020013"
+     id="rect1188"
+     style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.81042576;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.16470588" />
+  <rect
+     style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#b4242e;stroke-width:1.20959759;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect1186"
+     width="12.020013"
+     height="12.020013"
+     x="10.65666"
+     y="11.243177" />
+</svg>

src/c3nav/site/static/site/js/c3nav.js

@@ -25,13 +25,14 @@ c3nav = {
     },
     _location_buttons_route_click: function () {
         c3nav._set_view('route-search');
+        c3nav.update_map_locations();
         c3nav._locationinput_focus_next();
     },
     _route_buttons_swap_click: function () {
         var $origin = $('#origin-input'),
             $destination = $('#destination-input');
         tmp = $origin.data('location');
-        c3nav._locationinput_set($origin, $destination.data('location'));
+        c3nav._locationinput_set($origin, $destination.data('location'), false);
         c3nav._locationinput_set($destination, tmp);
         $origin.stop().css('top', '55px').animate({top: 0}, 150);
         $destination.stop().css('top', '-55px').animate({top: 0}, 150);
@@ -41,9 +42,9 @@ c3nav = {
         var $origin = $('#origin-input'),
             $destination = $('#destination-input');
         if ($origin.is('.selected') && !$destination.is('.selected')) {
-            c3nav._locationinput_set($destination, $origin.data('location'));
+            c3nav._locationinput_set($destination, $origin.data('location'), false);
         }
-        c3nav._locationinput_set($origin, null);
+        c3nav._locationinput_set($origin, null, false);
         if ($destination.is('.selected')) {
             c3nav._set_view('location');
         } else {
@@ -51,6 +52,7 @@ c3nav = {
             $destination.find('input').focus();
         }
         c3nav._set_view($destination.is('.selected') ? 'location' : 'search');
+        c3nav.update_map_locations();
     },
 
     init_locationinputs: function () {
@@ -78,7 +80,7 @@ c3nav = {
             .on('click', '.location', c3nav._locationinput_click_suggestion);
         $('html').on('focus', '*', c3nav._locationinput_global_focuschange);
     },
-    _locationinput_set: function (elem, location) {
+    _locationinput_set: function (elem, location, update_map) {
         // set a location input
         c3nav._locationinput_reset_autocomplete();
         var $search = $('#search'),
@@ -112,7 +114,7 @@ c3nav = {
                 }
                 break;
         }
-        c3nav.update_map_locations();
+        if (update_map === undefined || update_map) c3nav.update_map_locations();
         if (location !== null) {
             c3nav.fly_to_bounds();
         }
@@ -330,8 +332,10 @@ c3nav = {
         });
         c3nav.map.fitBounds(c3nav.bounds, {padding: [30, 50]});
 
-        // fix marker paths
-        L.Icon.Default.imagePath = '/static/leaflet/images/'
+        // set up icons
+        L.Icon.Default.imagePath = '/static/leaflet/images/';
+        c3nav._add_icon('origin');
+        c3nav._add_icon('destination');
 
         // setup scale control
         L.control.scale({imperial: false}).addTo(c3nav.map);
@@ -353,18 +357,31 @@ c3nav = {
         c3nav.schedule_refresh_tile_access();
 
     },
+    _add_icon: function (name) {
+        c3nav[name+'Icon'] = new L.Icon({
+            iconUrl: '/static/img/marker-icon-'+name+'.png',
+            iconRetinaUrl: '/static/img/marker-icon-\'+name+\'-2x.png',
+            shadowUrl: '/static/leaflet/images/marker-shadow.png',
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+            tooltipAnchor: [16, -28],
+            shadowSize: [41, 41]
+        });
+    },
     update_map_locations: function () {
         var $origin = $('#origin-input'),
             $destination = $('#destination-input'),
+            single = !$('main').is('[data-view^=route]'),
             bounds = {};
         for (var level_id in c3nav._locationLayers) {
             c3nav._locationLayers[level_id].clearLayers()
         }
         if ($origin.is('.selected')) {
-            c3nav._merge_bounds(bounds, c3nav._add_location_to_map($origin.data('location')))
+            c3nav._merge_bounds(bounds, c3nav._add_location_to_map($origin.data('location'), single ? new L.Icon.Default() : c3nav.originIcon))
         }
         if ($destination.is('.selected')) {
-            c3nav._merge_bounds(bounds, c3nav._add_location_to_map($destination.data('location')));
+            c3nav._merge_bounds(bounds, c3nav._add_location_to_map($destination.data('location'), single ? new L.Icon.Default() : c3nav.destinationIcon));
         }
         c3nav._locationLayerBounds = bounds;
     },
@@ -393,7 +410,7 @@ c3nav = {
             });
         }
     },
-    _add_location_to_map: function(location) {
+    _add_location_to_map: function(location, icon) {
         if (location.locations !== undefined) {
             var bounds = {};
             for (var i=0; i<location.locations.length; i++) {
@@ -402,7 +419,9 @@ c3nav = {
             return bounds;
         }
         var latlng = L.GeoJSON.coordsToLatLng(location.point.slice(1));
-        L.marker(latlng).addTo(c3nav._locationLayers[location.point[0]]);
+        L.marker(latlng, {
+            icon: icon
+        }).addTo(c3nav._locationLayers[location.point[0]]);
 
         result = {};
         result[location.point[0]] = L.latLngBounds(