Use labels instead of popups for plat info

This commit is contained in:
Chandler Swift 2024-11-27 20:35:22 -06:00
parent 73ea6a9413
commit b2a9c1eaf8
Signed by: chandlerswift
GPG key ID: A851D929D52FB93F

View file

@ -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) {