Vincent

backend/routes.py

@@ -267,6 +267,10 @@ def map():
     sql_map = text(sql_map_str)
     townships_result = db.engine.execute(sql_map).fetchall()
     townships = [dict(row) for row in townships_result]
+
+    for site in sites:
+        site['ville'] = next(township for township in townships if township.get('id') == site.get('township'))
+
     dbs = {
         'themes': themes,
         'subthemes': subthemes,

backend/static/css/map.css

@@ -11,7 +11,7 @@
     z-index: 10000;
     height: 100%;
     color: #FFF;
-    width: 320px;
+    width: 270px;
     transition: transform .3s;
 }
 
@@ -39,8 +39,8 @@
 }
 
 .app-map .sidebar .card-group-header-btn {
-    background: #000;
-    border: 1px solid #000;
+    background: rgba(0,0,0,.3);
+    border: none;
     font-weight: 700;
     text-transform: uppercase;
 }
@@ -59,6 +59,11 @@
   width: 100%;
 }
 
+.app-map .sidebar .filters .card-header .btn .icon {
+    right: auto;
+    left: -10px;
+}
+
 .app-map .sidebar .filters .card {
     border: none;
     background: transparent;
@@ -74,15 +79,8 @@
     border-top: none;
 }
 
-.app-map .sidebar .filters .card-header .btn.collapsed {
-    border: 1px solid #FFF;
-}
-
 .app-map .sidebar .filters .card-header .btn:not(.collapsed) {
-    background: #FFF;
-    border-color: #FFF;
-    border-bottom-color: var(--color-primary);
-    color: #000;
+    color: #FFF;
 }
 
 .app-map .sidebar .filters .card-body {
@@ -91,20 +89,22 @@
   border: none;
 }
 
-.app-map .sidebar .filters .card-body .btn {
+.app-map .sidebar .filters .card-body .btn,
+.app-map .sidebar .btn-site {
     text-transform: none;
     white-space: normal;
-    font-size: 12px;
+    font-size: 14px;
     text-align: left;
+    background: transparent;
+    color: #FFF;
+    border-color: transparent;
+    margin-bottom: 1px;
 }
-
-/* .app-map .sidebar .filters .card:not(:last-child) .card-body .btn {
-    border-bottom: none;
-} */
-
-.app-map .sidebar .filters .collapse.show .card-body,
-.app-map .sidebar .filters .collapsing .card-body {
-    border-bottom: 1px solid #FFF;
+.app-map .sidebar .filters .card-body .btn:hover,
+.app-map .sidebar .filters .card-body .btn.active,
+.app-map .sidebar .btn-site:hover {
+    background: #99D6EA;
+    color: #000;
 }
 
 .app-map .sidebar .card-group {
@@ -116,30 +116,24 @@
     border-bottom: 1px solid transparent;
 }
 
-.app-map .sidebar .btn-site {
-    text-align: left;
-    text-transform: none;
-    white-space: normal;
-}
-
-.app-map .sidebar .btn-site:hover {
-    background: #111;
-}
-
 .app-map .leaflet-popup-content {
     text-align: center;
     margin: 0;
 }
 
 .app-map .leaflet-popup-content-wrapper {
     border-radius: 0;
+    background: rgba(0, 0, 0, .8);
+    color: #FFF;
+    box-shadow: none;
 }
 
 .app-map .leaflet-popup-content .title {
     width: 150px;
     text-align: left;
     padding: 3px;
-    font-size: 14px;
+    padding-left: 5px;
+    font-size: 12px;
 }
 
 .app-map .leaflet-popup-content .img {

backend/static/css/style.css

@@ -181,6 +181,13 @@ button{
 
 /* End of bootstrap */
 
+/* Leaflet */
+
+.leaflet-container .easy-button-container .icon {
+    font-size: 1.5em;
+    vertical-align: sub;
+}
+
 body, html {
     font-family: 'Crimson Text', serif;
 }

backend/static/js/map.js

@@ -10,34 +10,73 @@ oppv.initMap = (options) => {
   const filters = _.cloneDeep(options.filters)
   let map;
   let markers = []
+  let mapBounds;
 
   new Vue({
     el: '#js-app-map',
     data: () => {
       return {
         isSidebarCollapsed: false,
         filters: filters,
-        sites: options.sites
+        sites: options.sites,
+        selectedSites: []
       }
     },
     mounted() {
       this.initMap()
     },
     methods: {
       initMap() {
+        const layerConfs = [{
+          label: "OSM classic",
+          layer: L.tileLayer(
+            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+              maxZoom: 18,
+              attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+            }
+          )
+        }, {
+          label: "OSM grayscale",
+          layer: L.tileLayer(
+            'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
+              maxZoom: 18,
+              attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+            }
+          )
+        }]
+
         map = L.map(this.$refs.map, {
-          zoomControl: false
+          zoomControl: false,
+          layers: [layerConfs[0].layer]
         })
-        const tileLayer = L.tileLayer(
-          'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            maxZoom: 18,
-            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-          }
-        )
+
+        L.control.scale({
+          position: 'bottomright',
+          imperial: false
+        }).addTo(map);
+
         L.control.zoom({
           position: 'topright'
         }).addTo(map);
-        tileLayer.addTo(map)
+
+        L.easyButton({
+          position: 'topright',
+          states: [{
+            stateName: 'reset',
+            onClick: function (button, map) {
+              if (mapBounds)
+                map.fitBounds(mapBounds.bbox, mapBounds.options)
+            },
+            icon: 'icon ion-md-locate'
+          }]
+        }).addTo(map)
+
+        const controlLayers = {};
+        layerConfs.forEach(layerConf => {
+          controlLayers[layerConf.label] = layerConf.layer
+        })
+        L.control.layers(controlLayers).addTo(map);
+
         this.setFilters()
       },
       onFilterClick(filter, item) {
@@ -81,6 +120,7 @@ oppv.initMap = (options) => {
 
         let selectedSites = []
         options.sites.forEach(site => {
+          site.marker = null
           unmatchedProp = selectedFilters.find(filter => {
             let prop = _.get(site, filter.name)
             if (!Array.isArray(prop))
@@ -102,6 +142,7 @@ oppv.initMap = (options) => {
           lats.push(site.latlon[0])
           lons.push(site.latlon[1])
           let marker = L.marker(site.latlon)
+          site.marker = marker
           marker.bindPopup('<div class="img" style="background-image: url(' + site.photos[site.photos.length - 1].url + ');"></div><div class="title">' + site.name_site + '</div>', {
             closeButton: false
           })
@@ -112,21 +153,34 @@ oppv.initMap = (options) => {
             marker.closePopup()
           })
           marker.on('click', (e) => {
+            //TODO
             window.location.href = site.link.replace('http://127.0.0.1:8000', '')
           })
           marker.addTo(map)
           markers.push(marker)
         });
+        this.selectedSites = selectedSites;
         if (!markers.length)
           return
         lats.sort()
         lons.sort()
-        map.fitBounds([
-          [lats[0], lons[0]],
-          [lats[lats.length - 1], lons[lons.length - 1]]
-        ], {
-          maxZoom: 11
-        })
+        mapBounds = {
+          bbox: [
+            [lats[0], lons[0]],
+            [lats[lats.length - 1], lons[lons.length - 1]]
+          ],
+          options: {
+            maxZoom: 11
+          }
+        }
+        map.fitBounds(mapBounds.bbox, mapBounds.options)
+      },
+      onSiteMousover(site) {
+        site.marker.openPopup()
+        map.panTo(site.latlon)
+      },
+      onSiteMouseout(site) {
+        site.marker.closePopup()
       }
     }
   })

backend/static/vendor/leaflet-easybutton/easy-button.css

@@ -0,0 +1,56 @@
+.leaflet-bar button,
+.leaflet-bar button:hover {
+  background-color: #fff;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  color: black;
+}
+
+.leaflet-bar button {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  overflow: hidden;
+  display: block;
+}
+
+.leaflet-bar button:hover {
+  background-color: #f4f4f4;
+}
+
+.leaflet-bar button:first-of-type {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.leaflet-bar button:last-of-type {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom: none;
+}
+
+.leaflet-bar.disabled,
+.leaflet-bar button.disabled {
+  cursor: default;
+  pointer-events: none;
+  opacity: .4;
+}
+
+.easy-button-button .button-state{
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+
+.leaflet-touch .leaflet-bar button {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+}