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; border: 1px solid black;
} }
#map { height: 250px; } #map { height: 250px; }
.leaflet-tooltip.my-labels {
background-color: transparent;
border: transparent;
box-shadow: none;
}
</style> </style>
</head> </head>
<body> <body>
@ -39,7 +44,7 @@
//{{markers|safe}} //{{markers|safe}}
// Show station location // 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 // Show GeoJSON of markers
var group = L.geoJSON({{geojs|safe}}, var group = L.geoJSON({{geojs|safe}},
@ -47,9 +52,25 @@
style: function (feature) { style: function (feature) {
return {color: feature.properties.color}; 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 // Zoom to show all
map.fitBounds(group.getBounds().pad(0.3)); map.fitBounds(group.getBounds().pad(0.3));