Use labels instead of popups for plat info
This commit is contained in:
parent
73ea6a9413
commit
b2a9c1eaf8
28
map.html
28
map.html
|
@ -20,6 +20,17 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-top: -1em;
|
||||
}
|
||||
.label div {
|
||||
position: relative;
|
||||
left: -50%;
|
||||
top: 10px;
|
||||
text-shadow: 0 0 2px white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -49,8 +60,21 @@
|
|||
}).addTo(map);
|
||||
|
||||
L.geoJSON(plats, {
|
||||
}).bindPopup(function (layer) {
|
||||
return layer.feature.properties.TAO_NAME;
|
||||
onEachFeature: function(feature, layer) {
|
||||
const latLngs = layer.getLatLngs()[0];
|
||||
const centerish = [ // TODO: actual centroid
|
||||
latLngs.reduce((acc, i) => acc + i.lat, 0) / latLngs.length,
|
||||
latLngs.reduce((acc, i) => acc + i.lng, 0) / latLngs.length,
|
||||
];
|
||||
|
||||
const label = L.marker(centerish, {
|
||||
icon: L.divIcon({
|
||||
iconSize: null,
|
||||
className: "label",
|
||||
html: "<div>" + feature.properties.TAO_NAME + "</div>"
|
||||
})
|
||||
}).addTo(map);
|
||||
},
|
||||
}).addTo(map);
|
||||
|
||||
for (let stand of data.stands) {
|
||||
|
|
Loading…
Reference in a new issue