gistfile1.txt

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
})