diff --git a/map.html b/map.html index c11341f..d7dec41 100644 --- a/map.html +++ b/map.html @@ -28,7 +28,7 @@ .label div { position: relative; left: -50%; - top: -50%; + top: 10px; text-shadow: 0 0 2px white; } .leaflet-popup-content-wrapper { @@ -139,37 +139,15 @@ `; 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, + minZoom: 12, maxZoom: 21, maxBounds: [ [47.517085, -93.427584], [47.457925, -93.340026], ], - }); + }).setView([94.505, -0.09], 13); // L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { // maxZoom: 19, // attribution: '© OpenStreetMap' @@ -199,8 +177,13 @@ L.geoJSON(plats, { filter: feature => !feature.properties.TAO_NAME.toLowerCase().includes("lawrence deer club"), onEachFeature: function(feature, layer) { - const centroid = calculateCentroid(layer.getLatLngs()[0]); - const label = L.marker(centroid, { + 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",