Issue 29 better visibility of map icons using markers (#30)

We put icons on map markers where appropriate, and added hover tooltips on our dashboard map, too.


* Add hover tooltip showing asset name.

* Add empty marker to custom webfont.
Overlay map icons on empty marker.

* Pan on click such that the asset lies just below map center.

* Fix icon alignment on map markers.

* Use new marker in asset.html

Co-authored-by: F.N. Claessen <felix@seita.nl>

flexmeasures/ui/static/css/flexmeasures.css

@@ -318,24 +318,47 @@ i.center-icon:after, i.center-icon:before {
 
 /* map icons */
 .map-icon {
+    color: #ffffff;
     display: flex;
-    flex-wrap: nowrap;
     align-items: center;
     justify-content: center;
     font-size: 24px;
 }
+.map-icon > i.overlay:before, .map-icon > i.overlay:after {
+    font-size: 20px;
+    z-index: 9;
+    right: -13px;
+    top: -40px;
+}
 .map-icon > i:before, .map-icon > i:after {
     position: absolute;
-    top: -22px;
-    left: -16.5px;
+    right: -33px;
+    top: -50px;
 }
 .map-icon.opportunity {
     color: #c21431;
 }
 .leaflet-marker-popup {
     min-width: 240px;
 }
+.icon-empty-marker {
+    color: #000000;
+    opacity: 0.7;
+}
 
+/* map icon alignment */
+.map-icon > i.icon-wind:before, .map-icon > i.icon-wind:after {
+    right: -16px !important;
+}
+.map-icon > i.icon-solar:before, .map-icon > i.icon-solar:after {
+    right: -14.5px !important;
+}
+.map-icon > i.icon-charging_station:before, .map-icon > i.icon-solar:after {
+    right: -15.5px !important;
+}
+.map-icon > i.icon-building:before, .map-icon > i.icon-solar:after {
+    right: -13px !important;
+}
 
 /* rotating icons, because why not? */
 i.icon-wind:hover:before {
@@ -377,12 +400,12 @@ i.icon-wind:hover:before {
 
 @font-face {
   font-family: 'seita-webfont';
-  src: url('../font/seita-webfont.eot?93228496');
-  src: url('../font/seita-webfont.eot?93228496#iefix') format('embedded-opentype'),
-       url('../font/seita-webfont.woff2?93228496') format('woff2'),
-       url('../font/seita-webfont.woff?93228496') format('woff'),
-       url('../font/seita-webfont.ttf?93228496') format('truetype'),
-       url('../font/seita-webfont.svg?93228496#seita-webfont') format('svg');
+  src: url('../font/seita-webfont.eot?7470033');
+  src: url('../font/seita-webfont.eot?7470033#iefix') format('embedded-opentype'),
+       url('../font/seita-webfont.woff2?7470033') format('woff2'),
+       url('../font/seita-webfont.woff?7470033') format('woff'),
+       url('../font/seita-webfont.ttf?7470033') format('truetype'),
+       url('../font/seita-webfont.svg?7470033#seita-webfont') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -392,7 +415,7 @@ i.icon-wind:hover:before {
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'seita-webfont';
-    src: url('../font/seita-webfont.svg?93228496#seita-webfont') format('svg');
+    src: url('../font/seita-webfont.svg?7470033#seita-webfont') format('svg');
   }
 }
 */
@@ -401,7 +424,7 @@ i.icon-wind:hover:before {
   font-family: "seita-webfont";
   font-style: normal;
   font-weight: normal;
-  speak: none;
+  speak: never;
 
   display: inline-block;
   text-decoration: inherit;
@@ -452,6 +475,7 @@ i.icon-wind:hover:before {
 .icon-seita:before { content: '\e80d'; } /* '' */
 .icon-wind-blades:before { content: '\e80e'; } /* '' */
 .icon-wind-tower:before { content: '\e80f'; } /* '' */
+.icon-empty-marker:before { content: '\e810'; } /* '' */
 
 .icon-batteries:before { content: '\e801'; } /* '' */
 .icon-buildings:before { content: '\e803'; } /* '' */

flexmeasures/ui/static/js/map-init.js

@@ -16,6 +16,11 @@ function addTileLayer(leafletMap, mapboxAccessToken) {
 }
 
 
-function clickZoom(e) {
-    assetMap.setView(e.target.getLatLng());
+function clickPan(e, data) {
+    // set view such that the target asset lies slightly below the center of the map
+    targetLatLng = e.target.getLatLng()
+    targetZoom = assetMap.getZoom()
+    targetPoint = assetMap.project(targetLatLng, targetZoom).subtract([0, 50]),
+    targetLatLng = assetMap.unproject(targetPoint, targetZoom);
+    assetMap.setView(targetLatLng, targetZoom);
 }

flexmeasures/ui/templates/crud/asset.html

@@ -209,10 +209,10 @@ <h3>Location</h3>
     // create marker
     var {{ asset.asset_type_name | parameterize }}_icon = new L.DivIcon({
         className: 'map-icon',
-        html: '<i class="{{ asset.asset_type_name | asset_icon }}"></i>',
-        iconSize: [24, 24], // size of the icon
-        iconAnchor: [12, 12], // point of the icon which will correspond to marker's location
-        popupAnchor: [0, -12] // point from which the popup should open relative to the iconAnchor
+        html: '<i class="icon-empty-marker center-icon supersize"></i><i class="overlay center-icon {{ asset.asset_type_name | asset_icon }}"></i>',
+        iconSize: [100, 100], // size of the icon
+        iconAnchor: [50, 50], // point of the icon which will correspond to marker's location
+        popupAnchor: [0, -50] // point from which the popup should open relative to the iconAnchor
     });
     var marker = L
         .marker(

flexmeasures/ui/templates/crud/asset_new.html

@@ -178,10 +178,10 @@ <h3>Location</h3>
 
     var location_icon = new L.DivIcon({
         className: 'map-icon',
-        html: '<i class="icon-attribution"></i>',
-        iconSize: [24, 24], // size of the icon
-        iconAnchor: [12, 12], // point of the icon which will correspond to marker's location
-        popupAnchor: [0, -12] // point from which the popup should open relative to the iconAnchor
+        html: '<i class="icon-empty-marker center-icon supersize"></i>',
+        iconSize: [100, 100], // size of the icon
+        iconAnchor: [50, 50], // point of the icon which will correspond to marker's location
+        popupAnchor: [0, -50] // point from which the popup should open relative to the iconAnchor
     });
 
     // dummy location somewhere else

flexmeasures/ui/templates/views/dashboard.html

@@ -171,10 +171,10 @@ <h3>
 
     var {{ asset_groups[asset_group].parameterized_name }}_icon = new L.DivIcon({
         className: 'map-icon',
-        html: '<i class="{{ asset_groups[asset_group].unique_asset_types[0].name | asset_icon }}"></i>',
-        iconSize: [24, 24], // size of the icon
-        iconAnchor: [12, 12], // point of the icon which will correspond to marker's location
-        popupAnchor: [0, -12] // point from which the popup should open relative to the iconAnchor
+        html: '<i class="icon-empty-marker center-icon supersize"></i><i class="overlay center-icon {{ asset_groups[asset_group].unique_asset_types[0].name | asset_icon }}"></i>',
+        iconSize: [100, 100], // size of the icon
+        iconAnchor: [50, 50], // point of the icon which will correspond to marker's location
+        popupAnchor: [0, -50] // point from which the popup should open relative to the iconAnchor
     });
 
     var {{ asset_groups[asset_group].parameterized_name }}_opportunity_icon = new L.DivIcon({
@@ -250,7 +250,12 @@ <h4>{{ asset.display_name }}</h4>
                 next();
             });
         })
-        .on('click', clickZoom)
+        .bindTooltip("{{ asset.display_name }}",
+        {
+            permanent: false,
+            direction: 'right'
+        })
+        .on('click', clickPan)
         .on('click', lookForState);
     // .openPopup();
     {{ asset_groups[asset_group].parameterized_name }}_markers.push(marker_for_{{ (asset.name | parameterize) }});