Compare commits
3 commits
a9ec95272b
...
f7f662bed1
Author | SHA1 | Date | |
---|---|---|---|
Chandler Swift | f7f662bed1 | ||
Chandler Swift | 2842dd75ab | ||
Chandler Swift | f6dac0bbb9 |
37
map.html
37
map.html
|
@ -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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
// attribution: '© <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",
|
||||||
|
|
Loading…
Reference in a new issue