Add better labels to main page map.

This commit is contained in:
W1CDN 2024-01-19 11:08:12 -06:00
parent 3758ac21cb
commit ab595ed3cb

View File

@ -18,6 +18,11 @@
border: 1px solid black;
}
#map { height: 250px; }
.leaflet-tooltip.my-labels {
background-color: transparent;
border: transparent;
box-shadow: none;
}
</style>
</head>
<body>
@ -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));