|
mapboxgl.accessToken = "pk.eyJ1IjoibWluZHJvbmVzIiwiYSI6ImNqOWNxb2libzF5OXgycXQ0Y2tvOGhrbGMifQ.BhUb7T8FceWj45x-ikQmHg"; |
|
|
|
const earthRadius = 6371; // km |
|
const people = 7.6e9; |
|
const viewHeight = 300; // meters |
|
const horizonRatio = Math.acos(1 / (1 + viewHeight / (1000 * earthRadius))); // horizonRadius / earthRadius |
|
const POICenter = new mapboxgl.LngLat(2.2945, 48.858222); // eiffel tower |
|
|
|
const toDeg = radians => radians * 180 / Math.PI; |
|
const toRad = degrees => Math.PI * degrees / 180; |
|
const dLng = (dlat, lat) => Math.acos( |
|
(Math.cos(dlat) - Math.pow(Math.sin(lat), 2)) |
|
/ Math.pow(Math.cos(lat), 2) |
|
); |
|
|
|
const makeGeojson = coordinates => ({ |
|
type: "FeatureCollection", |
|
features: [{ |
|
type: "Feature", |
|
geometry: { |
|
type: "LineString", |
|
coordinates |
|
} |
|
}] |
|
}); |
|
|
|
const mapsStyles = { |
|
"light_v9": "mapbox://styles/mapbox/light-v9", |
|
"satellite_streets_v10": "mapbox://styles/mapbox/satellite-streets-v10", |
|
"streets_v10": "mapbox://styles/mapbox/streets-v10", |
|
} |
|
|
|
const map = new mapboxgl.Map({ |
|
container: "app", |
|
style: mapsStyles.streets_v10, |
|
center: POICenter.toArray(), |
|
zoom: 7, |
|
renderWorldCopies: false |
|
}); |
|
|
|
map.on("load", function() { |
|
map.addLayer({ |
|
"id": "humans", |
|
"type": "line", |
|
"source": { |
|
"type": "geojson", |
|
"data": makeSquare(POICenter) |
|
}, |
|
"layout": { |
|
"line-cap": "round", |
|
"line-join": "round" |
|
}, |
|
"paint": { |
|
"line-color": "red", |
|
"line-width": 2, |
|
"line-opacity": 1 |
|
} |
|
}); |
|
|
|
map.addLayer({ |
|
"id": "horizon", |
|
"type": "line", |
|
"source": { |
|
"type": "geojson", |
|
"data": makeHorizon(POICenter) |
|
}, |
|
"layout": { |
|
"line-cap": "round", |
|
"line-join": "round" |
|
}, |
|
"paint": { |
|
"line-color": "black", |
|
"line-width": 1, |
|
"line-opacity": 1 |
|
} |
|
}); |
|
|
|
["move", "resize", |
|
"dragstart", "drag", "dragend", |
|
"zoomstart", "zoom", "zoomend" |
|
].forEach(eventName => { |
|
map.on(eventName, () => { |
|
const center = map.getBounds().getCenter(); |
|
updateHumans(center) |
|
updateHorizon(center) |
|
}); |
|
}); |
|
}); |
|
|
|
function updateHumans(center) { |
|
map.getSource("humans").setData(makeSquare(center)); |
|
} |
|
|
|
function updateHorizon(center) { |
|
map.getSource("horizon").setData(makeHorizon(center)); |
|
} |
|
|
|
function makeSquare (center) { |
|
const peoplePerSide = Math.sqrt(people); |
|
const dLat = peoplePerSide / (2 * 1000 * earthRadius); |
|
const northLat = toRad(center.lat) + dLat; |
|
const southLat = toRad(center.lat) - dLat; |
|
const N = 10; |
|
const yStep = (northLat - southLat) / N; |
|
const coordinates = [] |
|
const sides = {west: [], east: []} |
|
for (let lat = southLat; lat <= northLat; lat += yStep) { |
|
const y = toDeg(lat); |
|
const dx = toDeg(dLng(dLat, lat)); |
|
sides.west.push([center.lng + dx, y]) |
|
sides.east.push([center.lng - dx, y]) |
|
} |
|
|
|
return geojsonLineString([ |
|
...sides.west, |
|
...sides.east.reverse(), |
|
sides.west[0] |
|
]); |
|
} |
|
|
|
function makeHorizon (center) { |
|
return d3.geoCircle() |
|
.center(center.toArray()) |
|
.radius(toDeg(horizonRatio))(); |
|
} |
|
|
|
function geojsonLineString (coordinates) { |
|
return { |
|
type: "FeatureCollection", |
|
features: [{ |
|
type: "Feature", |
|
geometry: { |
|
type: "LineString", |
|
coordinates |
|
} |
|
}] |
|
}; |
|
} |
