Compare commits

...

3 commits

View file

@ -28,7 +28,7 @@
.label div { .label div {
position: relative; position: relative;
left: -50%; left: -50%;
top: 10px; top: -50%;
text-shadow: 0 0 2px white; text-shadow: 0 0 2px white;
} }
.leaflet-popup-content-wrapper { .leaflet-popup-content-wrapper {
@ -139,15 +139,37 @@
</div>`; </div>`;
document.getElementById('lightbox').style.display = 'block'; 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() { (async function() {
const map = L.map('map', { const map = L.map('map', {
minZoom: 12, minZoom: 15,
maxZoom: 21, maxZoom: 21,
maxBounds: [ maxBounds: [
[47.517085, -93.427584], [47.517085, -93.427584],
[47.457925, -93.340026], [47.457925, -93.340026],
], ],
}).setView([94.505, -0.09], 13); });
// L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { // L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
// maxZoom: 19, // maxZoom: 19,
// attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' // attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
@ -177,13 +199,8 @@
L.geoJSON(plats, { L.geoJSON(plats, {
filter: feature => !feature.properties.TAO_NAME.toLowerCase().includes("lawrence deer club"), filter: feature => !feature.properties.TAO_NAME.toLowerCase().includes("lawrence deer club"),
onEachFeature: function(feature, layer) { onEachFeature: function(feature, layer) {
const latLngs = layer.getLatLngs()[0]; const centroid = calculateCentroid(layer.getLatLngs()[0]);
const centerish = [ // TODO: actual centroid const label = L.marker(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({ icon: L.divIcon({
iconSize: null, iconSize: null,
className: "label", className: "label",