diff --git a/map.html b/map.html index 923f826..c11341f 100644 --- a/map.html +++ b/map.html @@ -28,7 +28,7 @@ .label div { position: relative; left: -50%; - top: 10px; + top: -50%; text-shadow: 0 0 2px white; } .leaflet-popup-content-wrapper { @@ -139,6 +139,28 @@ `; document.getElementById('lightbox').style.display = 'block'; } + function calculateCentroid(points) { + // https://en.wikipedia.org/wiki/Centroid#Of_a_polygon + let area = 0; + let centroidLat = 0; + let centroidLng = 0; + + for (let i = 0; i < points.length; i++) { + const { lat: lat1, lng: lng1 } = points[i]; + const { lat: lat2, lng: lng2 } = points[(i + 1) % points.length]; // Next vertex, wrapping around + + const determinant = lat1 * lng2 - lng1 * lat2; + area += determinant; + centroidLat += (lat1 + lat2) * determinant; + centroidLng += (lng1 + lng2) * determinant; + } + + area *= 0.5; + centroidLat /= (6 * area); + centroidLng /= (6 * area); + + return [centroidLat, centroidLng]; + } (async function() { const map = L.map('map', { minZoom: 15, @@ -177,13 +199,8 @@ L.geoJSON(plats, { filter: feature => !feature.properties.TAO_NAME.toLowerCase().includes("lawrence deer club"), 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, { + const centroid = calculateCentroid(layer.getLatLngs()[0]); + const label = L.marker(centroid, { icon: L.divIcon({ iconSize: null, className: "label",