diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css index 5c30c8c9b..1f8677512 100644 --- a/flexmeasures/ui/static/css/flexmeasures.css +++ b/flexmeasures/ui/static/css/flexmeasures.css @@ -318,16 +318,22 @@ 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; @@ -335,7 +341,24 @@ i.center-icon:after, i.center-icon:before { .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'; } /* '' */ diff --git a/flexmeasures/ui/static/font/seita-webfont.eot b/flexmeasures/ui/static/font/seita-webfont.eot index c85aa94ca..9fa03a85b 100644 Binary files a/flexmeasures/ui/static/font/seita-webfont.eot and b/flexmeasures/ui/static/font/seita-webfont.eot differ diff --git a/flexmeasures/ui/static/font/seita-webfont.svg b/flexmeasures/ui/static/font/seita-webfont.svg index 0fa11412a..29431c076 100644 --- a/flexmeasures/ui/static/font/seita-webfont.svg +++ b/flexmeasures/ui/static/font/seita-webfont.svg @@ -1,7 +1,7 @@ -Copyright (C) 2019 by original authors @ fontello.com +Copyright (C) 2021 by original authors @ fontello.com @@ -37,6 +37,8 @@ + + \ No newline at end of file diff --git a/flexmeasures/ui/static/font/seita-webfont.ttf b/flexmeasures/ui/static/font/seita-webfont.ttf index b8b514e4e..71562bf7e 100644 Binary files a/flexmeasures/ui/static/font/seita-webfont.ttf and b/flexmeasures/ui/static/font/seita-webfont.ttf differ diff --git a/flexmeasures/ui/static/font/seita-webfont.woff b/flexmeasures/ui/static/font/seita-webfont.woff index 2a78964a7..f38b016ea 100644 Binary files a/flexmeasures/ui/static/font/seita-webfont.woff and b/flexmeasures/ui/static/font/seita-webfont.woff differ diff --git a/flexmeasures/ui/static/font/seita-webfont.woff2 b/flexmeasures/ui/static/font/seita-webfont.woff2 index 94867702b..b637d9570 100644 Binary files a/flexmeasures/ui/static/font/seita-webfont.woff2 and b/flexmeasures/ui/static/font/seita-webfont.woff2 differ diff --git a/flexmeasures/ui/static/js/map-init.js b/flexmeasures/ui/static/js/map-init.js index 4d8552409..a7c836855 100644 --- a/flexmeasures/ui/static/js/map-init.js +++ b/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); } diff --git a/flexmeasures/ui/templates/crud/asset.html b/flexmeasures/ui/templates/crud/asset.html index a4d7be970..3e461fd16 100644 --- a/flexmeasures/ui/templates/crud/asset.html +++ b/flexmeasures/ui/templates/crud/asset.html @@ -209,10 +209,10 @@

Location

// create marker var {{ asset.asset_type_name | parameterize }}_icon = new L.DivIcon({ className: 'map-icon', - html: '', - 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: '', + 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( diff --git a/flexmeasures/ui/templates/crud/asset_new.html b/flexmeasures/ui/templates/crud/asset_new.html index 74b455c96..4cc1b6d5b 100644 --- a/flexmeasures/ui/templates/crud/asset_new.html +++ b/flexmeasures/ui/templates/crud/asset_new.html @@ -178,10 +178,10 @@

Location

var location_icon = new L.DivIcon({ className: 'map-icon', - html: '', - 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: '', + 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 diff --git a/flexmeasures/ui/templates/views/dashboard.html b/flexmeasures/ui/templates/views/dashboard.html index 5cb06f6bf..923d96f6f 100644 --- a/flexmeasures/ui/templates/views/dashboard.html +++ b/flexmeasures/ui/templates/views/dashboard.html @@ -171,10 +171,10 @@

var {{ asset_groups[asset_group].parameterized_name }}_icon = new L.DivIcon({ className: 'map-icon', - html: '', - 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: '', + 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 @@

{{ asset.display_name }}

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) }});