From ab595ed3cbeea8703a503021515883a37d769d1b Mon Sep 17 00:00:00 2001 From: W1CDN Date: Fri, 19 Jan 2024 11:08:12 -0600 Subject: [PATCH] Add better labels to main page map. --- templates/index.html | 29 +++++++++++++++++++++++++---- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/templates/index.html b/templates/index.html index 493a1e2..9b3aad8 100644 --- a/templates/index.html +++ b/templates/index.html @@ -18,6 +18,11 @@ border: 1px solid black; } #map { height: 250px; } + .leaflet-tooltip.my-labels { + background-color: transparent; + border: transparent; + box-shadow: none; + } @@ -39,7 +44,7 @@ //{{markers|safe}} // Show station location - var station = L.marker([{{station_lat}}, {{station_lon}}]).addTo(map).bindTooltip('{{station_call}}', permanent=true).openTooltip(); + var station = L.marker([{{station_lat}}, {{station_lon}}]).addTo(map).bindTooltip('{{station_call}}', {permanent: true}).openTooltip(); // Show GeoJSON of markers var group = L.geoJSON({{geojs|safe}}, @@ -47,9 +52,25 @@ style: function (feature) { return {color: feature.properties.color}; } - }).bindTooltip(function (layer) { - return 'Object '+layer.feature.properties.object_name+' from '+layer.feature.properties.from; - }, permanent=true).addTo(map); + }); + + // group.bindTooltip(function (layer) { + // return 'Object '+layer.feature.properties.object_name+' from '+layer.feature.properties.from; + // }, {permanent: false}).openTooltip().addTo(map); + // Hacked together from https://gis.stackexchange.com/a/246919 + var pointLayer = L.geoJSON(null, { + pointToLayer: function(feature,latlng){ + //(true condition) ? "true" : "false" + label = (feature.properties.object_name === null) ? String(feature.properties.from) : String(feature.properties.object_name) + //label = String('Object '+feature.properties.object_name+' from '+feature.properties.from) // Must convert to string, .bindTooltip can't use straight 'feature.properties.attribute' + return new L.CircleMarker(latlng, { + radius: 1, + }).bindTooltip(label, {permanent: true, opacity: 0.7, className: "my-labels"}).openTooltip(); + } + }); + pointLayer.addData({{geojs|safe}}); + map.addLayer(pointLayer); + // Zoom to show all map.fitBounds(group.getBounds().pad(0.3));