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;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -49,8 +60,21 @@
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
L.geoJSON(plats, {
|
L.geoJSON(plats, {
|
||||||
}).bindPopup(function (layer) {
|
onEachFeature: function(feature, layer) {
|
||||||
return layer.feature.properties.TAO_NAME;
|
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);
|
}).addTo(map);
|
||||||
|
|
||||||
for (let stand of data.stands) {
|
for (let stand of data.stands) {
|
||||||
|
|
Loading…
Reference in a new issue