Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save plantvsbirds/f63fcb79db4dee894b9ef8907a6005c8 to your computer and use it in GitHub Desktop.
Save plantvsbirds/f63fcb79db4dee894b9ef8907a6005c8 to your computer and use it in GitHub Desktop.
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import Overlay from 'ol/Overlay.js';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj'
window.view = new View({
center: [-13591396.2749238, 4545162.573881949],
zoom: 9
})
window.map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
view: window.view
});
fetch('/all.json').then(d => d.json()).then(dat => {
init(dat)
})
function runWith(dat) {
return (f) => {
f(dat)
}
}
function applyTransform(cords) {
/*
map.getPixelFromCoordinate(view.calculateExtent(map.getSize()))
*/
return cords
}
function renderPoints(pnts) {
let canvasCtx = document.querySelector('canvas').getContext("2d")
let [ xSize, ySize ] = map.getSize()
let [ xMin, yMin, xMax, yMax ] = view.calculateExtent(map.getSize())
let ratio = [xSize / (xMax - xMin), ySize / (yMax - yMin)]
let [ xC, yC ] = view.getCenter()
let [ xL, yL ] = [xC - (xMax - xMin)/2, yC - (yMax - yMin)/2]
let { clientHeight, clientWidth } = canvasCtx.canvas
let draw = ([x, y]) => {
canvasCtx.beginPath();
canvasCtx.arc(x, y, 2, 0, 2 * Math.PI);
canvasCtx.stroke();
}
let renderMap = {}
pnts.forEach((crds) => {
let pxds = map.getPixelFromCoordinate(crds)
renderMap[pxds.map(Math.round).join(',')] = true
})
// todo search github for getPixelFromCoordinate
// todo seperate to different canvas
setTimeout(() => {
Object.keys(renderMap).map(x => draw(x.split(',').map(x => parseInt(x))))
// debugger
}, 0)
}
function init(dat) {
let pnts = []
let ks = Object.keys(dat)
for (let ki = 0; ki < ks.length; ki ++) {
let cs = dat[ks[ki]].coords
for (let ci = 0; ci < cs.length; ci ++) {
let {lng, lat} = cs[ci]
pnts.push(fromLonLat([lng, lat]))
}
}
window.df = runWith(pnts)
}
window.map.on('moveend', () => {
console.log("lol")
window.df && window.df(renderPoints)
// debugger
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment