add location popups

src/c3nav/site/static/site/css/c3nav.css

@@ -176,6 +176,27 @@ main:not([data-view=route-search]) #route-search-buttons {
     pointer-events:none;
 }
 
+#popup-buttons {
+    display: none;
+}
+.location-popup .leaflet-popup-content {
+    font-size: 16px;
+    color: #606c76;
+    overflow: hidden;
+    line-height: 1.6;
+}
+.location-popup .leaflet-popup-content .location {
+    padding: 0;
+    height: auto;
+    margin-bottom: 10px;
+}
+.location-popup .leaflet-popup-content .button-clear {
+    display:block;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+}
+
 .buttons {
     display: flex;
     flex-direction: row;

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

@@ -330,7 +330,6 @@ c3nav = {
             minZoom: 0,
             crs: L.CRS.Simple,
             maxBounds: L.GeoJSON.coordsToLatLngs(c3nav.bounds),
-            closePopupOnClick: false,
             zoomControl: false
         });
         c3nav.map.fitBounds(c3nav.bounds, {padding: [30, 50]});
@@ -406,13 +405,18 @@ c3nav = {
         if (bounds !== null) {
             var left = 0,
                 top = (left === 0) ? $('#search').height()+10 : 10;
-            c3nav.map.flyToBounds(bounds, {
-                paddingTopLeft: L.point(left+13, top+41),
-                paddingBottomRight: L.point(50, 20),
+            c3nav.map.flyToBounds(bounds, c3nav._add_map_padding({
                 duration: 1
-            });
+            }, 'paddingTopLeft', 'paddingBottomRight'));
         }
     },
+    _add_map_padding: function(options, topleft, bottomright) {
+        var left = 0,
+            top = (left === 0) ? $('#search').height()+10 : 10;
+        options[topleft] = L.point(left+13, top+41);
+        options[bottomright] = L.point(50, 20);
+        return options;
+    },
     _add_location_to_map: function(location, icon) {
         if (location.locations !== undefined) {
             var bounds = {};
@@ -424,7 +428,9 @@ c3nav = {
         var latlng = L.GeoJSON.coordsToLatLng(location.point.slice(1));
         L.marker(latlng, {
             icon: icon
-        }).addTo(c3nav._locationLayers[location.point[0]]);
+        }).bindPopup(location.elem[0].outerHTML+$('#popup-buttons').html(), c3nav._add_map_padding({
+            className: 'location-popup'
+        }, 'autoPanPaddingTopLeft', 'autoPanPaddingBottomRight')).addTo(c3nav._locationLayers[location.point[0]]);
 
         result = {};
         result[location.point[0]] = L.latLngBounds(

src/c3nav/site/templates/site/map.html

@@ -22,6 +22,11 @@
         <h1>c3nav</h1>
     </header>
     <main class="map">
+        <section id="popup-buttons">
+            <button class="button-clear as-location">Show only this location</button>
+            <button class="button-clear as-destination">Route to here</button>
+            <button class="button-clear as-origin">Route from here</button>
+        </section>
         <section id="map" data-bounds="{{ bounds }}" data-levels="{{ levels }}"></section>
         <section id="sidebar">
             <section id="search">