31:T737,function* display (wmsLayer, geojson) { let parent = DOM.element('div', { class: 'map-container' }) let container = parent.appendChild(DOM.element('div')) yield parent const createPopup = (text) => html`${text}` let map = L.map(container, { minZoom: 10, maxZoom: 19 }) // const tileUrl = 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png' const tileUrl = 'https://a.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXFhYTA2bTMyeW44ZG0ybXBkMHkifQ.gUGbDOPUN1v1fTs5SeOR4A' let osmLayer = L.tileLayer(tileUrl, { maxZoom: 19 }).addTo(map) function onEachFeature(feature, layer) { const text = feature.properties.sheet layer.bindPopup(createPopup(text)) } let geojsonLayer = L.geoJSON(geojson.value, { style: { weight: 3, color: '#e32e27', fillOpacity: 0.1 }, onEachFeature }).addTo(map) let leafletWmsLayer = L.tileLayer.wms(wmsUrl, { layers: wmsLayer.value, srs: 'EPSG:4326', transparent: true, format: 'image/png' }).addTo(map) // let leafletWmsLayer2 = L.tileLayer.wms('http://mapwarper.net/maps/wms/37248', { // srs: 'EPSG:4326', // transparent: true, // format: 'image/png' // }).addTo(map) map.setView([52.367,4.915], 12) function updateData () { geojsonLayer.clearLayers() geojsonLayer.addData(geojson.value) } function updateWmsLayer () { leafletWmsLayer.setParams({ layers: wmsLayer.value }) } updateData() geojson.addEventListener('input', updateData) wmsLayer.addEventListener('input', updateWmsLayer) return Generators.disposable(container, () => { geojson.removeEventListener('input', updateData) geojson.removeEventListener('input', updateWmsLayer) }) }32:[] 2f:{"title":"Publieke Werken","cells":[{"id":0,"value":"md`# Publieke Werken`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`\nInteractive notebook to explore the borders of the 1:1000 maps of the Dienst der Publieke Werken.\n\nhttps://beeldbank.amsterdam.nl/beeldbank/indeling/grid/tmpl/index?q_searchfield=publieke+werken&f_sk_documenttype=kaart\n\n![](https://amsterdam.github.io/data-blog-assets/images/posts/historical-maps/bladwijzer-1909.jpg)\n\n![](https://amsterdam.github.io/data-blog-assets/images/posts/historical-maps/bladwijzer-1966.jpg)\n\nhttps://beeldbank.amsterdam.nl/afbeelding/DUIZ00003000001\nhttps://beeldbank.amsterdam.nl/afbeelding/DUIZ00004000001\n\nSee also: https://github.com/Amsterdam/historical-maps\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"origin = [-44950, 30750]","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"gridSize = [24, 24]","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"indexToCell = (index) => [\n index % gridSize[0],\n Math.floor(index / gridSize[0])\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"sheets = Array.from(new Array(gridSize[0] * gridSize[1]), (_, index) => indexToCell(index))\n .map(([x, y]) => ({\n cell: [x, y],\n sheet: sheetFromGrid([x, y])\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"rows = sheets.reduce((lines, cell, index) => { \n const lineNumber = Math.floor(index / gridSize[0])\n\n if(!lines[lineNumber]) {\n lines[lineNumber] = []\n }\n\n lines[lineNumber].push(cell)\n return lines\n}, [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"html`${rows.map((row) => html`${row.map((cell) => html``)}`)}

${cell.sheet}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"sheetFromGrid = ([x, y]) => {\n const number = x < 8 ? 8 - x : x - 7\n const letter = sheetLettersFromGrid([x, y])\n return `${letter}${number}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"sheetLettersFromGrid = ([x, y]) => {\n const sheetLetters = [\n 'AB', 'A', 'B', 'C', 'D', 'E', 'F', 'G', \n 'H', 'J', 'K', 'L', 'M', 'N', 'O', 'P', \n 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X'\n ]\n \n const letter = sheetLetters[y]\n return x < 8 ? `${letter[0]}${letter}` : letter\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"features = sheets.map((sheet) => featureFromSheet(sheet))","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"coordinateTransform = method === 'new' ? transformNew : transformOld","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"featureFromSheet = (sheet) => ({\n type: 'Feature',\n properties: {\n sheet: sheet.sheet\n },\n geometry: polygonFromSheet(sheet, coordinateTransform)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"transformNew = ([x, y]) => ([\n x + 155000,\n y + 463000\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"transformOld = ([x, y]) => {\n x += 33552\n y -= 24000\n \n // Omrekening PW-coordinaten vóór 1940 (rotatie: 2 graden, nulpunt: Prinsenhof):\n const degrees = -2\n const radians = (degrees / 180) * Math.PI\n \n // return [\n // x * Math.cos(radians) - y * Math.sin(radians) + 154220,\n // x * Math.sin(radians) + y * Math.cos(radians) + 461923\n // ]\n return [\n x * Math.cos(radians) - y * Math.sin(radians) + 121528,\n x * Math.sin(radians) + y * Math.cos(radians) + 487081\n ]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof method = radio({\n title: 'Method',\n // description: '',\n options: [\n { label: 'Old (< 1943)', value: 'old' },\n { label: 'New (≥ 1943)', value: 'new' }\n ],\n value: 'old'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"map = display(viewof wmsLayer, viewof geojson)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"polygonFromSheet = (sheet, coordinateTransform) => {\n const corner1 = [\n origin[0] + sheet.cell[0] * sheetDimensions[0],\n origin[1] - sheet.cell[1] * sheetDimensions[1]\n ] \n \n const corner2 = [\n corner1[0] + sheetDimensions[0],\n corner1[1] - sheetDimensions[1]\n ]\n \n const bbox = [\n [corner1[0], corner2[1]],\n corner2,\n [corner2[0], corner1[1]],\n corner1,\n [corner1[0], corner2[1]]\n ]\n\n const latlngBbox = bbox.map(coordinateTransform).map(project.forward)\n\n return {\n type: 'Polygon',\n coordinates: [\n latlngBbox\n ]\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"wmsLayers = ({\n old: [\n 'ams:0c5f8df5-8b98-dfb8-a563-116287bf7611',\n 'ams:e4982d0e-2452-dbd4-1cd8-c7a88cc0e6c7',\n 'ams:317ce398-4236-f78a-3803-0f69ac46a154'\n ].join(',')\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"(viewof geojson).value = ({\n type: 'FeatureCollection',\n features\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"(viewof wmsLayer).value = wmsLayers.old","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`## Constants, Imports & Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"sheetDimensions = [950, 750] // dimensions, in meters, of 1:1000 maps","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"height = Math.round(width / (sheetDimensions[0] / sheetDimensions[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"wmsUrl = 'https://geoserver.memorix.nl/geoserver/ams/wms'","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"viewof geojson = new View({\n type: 'FeatureCollection',\n features: []\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"viewof wmsLayer = new View(wmsLayers.old)","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"project = proj4(epsg28992, 'WGS84')","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"epsg28992 = '+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.417,50.3319,465.552,-0.398957,0.343988,-1.8774,4.0725 +units=m +no_defs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"leafletStyle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"css = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"import { View } from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"import {radio} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"proj4 = require('proj4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}