31:T66b,map = { let map = this if (!map) { map = new mapboxgl.Map({ container: container, center: [ 4.915, 52.367 ], zoom: 8, style: 'mapbox://styles/mapbox/light-v9' }) } function addLayers (map) { const emptyGeoJSON = { type: 'FeatureCollection', features: [] } map.addSource('points', { type: 'geojson', data: emptyGeoJSON }) map.addLayer({ id: 'points', type: 'circle', source: 'points', paint: { 'circle-radius': [ 'interpolate', ['linear'], ['zoom'], 8, 3, 16, 10, ], 'circle-color': 'orange' } }) map.on('click', 'points', (event) => { console.log('click') const feature = event.features[0] const coordinates = feature.geometry.coordinates.slice() const html = `

${feature.properties.place}

${feature.properties.date}

${feature.properties.description}

` new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(html) .addTo(map) }) map.on('mouseenter', 'points', () => { map.getCanvas().style.cursor = 'pointer' }) map.on('mouseleave', 'points', ()=> { map.getCanvas().style.cursor = '' }) } yield new Promise((resolve) => { if (map.loaded()) resolve(map) else map.on('load', () => { addLayers(map) resolve(map) }) }) map.getSource('points').setData(locations) }32:[] 2f:{"title":"Foto's Meetpunten Rijksdriehoeksmeting","cells":[{"id":0,"value":"md`# Foto's Meetpunten Rijksdriehoeksmeting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"csvRows = d3.csv(csvUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"iiifImages = d3.csv(iiifImagesUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"iiifImagesByFilename = R.fromPairs(iiifImages\n .map((row) => [filenameFromIiifImage(row), row]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"csvRowsByFilename = R.fromPairs(csvRows\n .map((row) => [filenameFromCsvRow(row), row]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"correctCsvRows = csvRows\n .filter(checkCoordinates)\n .filter((row) => iiifImagesByFilename[filenameFromCsvRow(row)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"features = byLocation(correctCsvRows)\n .map((location) => ({\n type: 'Feature',\n properties: {\n number: location.number,\n place: getFirst('Plaats', location.rows),\n name: getFirst('Puntnaam', location.rows),\n description: getFirst('Omschrijving', location.rows),\n photos: location.rows.map((row) => ({ \n sequence: parseInt(row.Volgnummer),\n iiifId: iiifImagesByFilename[filenameFromCsvRow(row)].ID,\n date: parseDate(row.datum),\n direction: row.direction,\n filename: row.Picture,\n remarks: row.Opmerkingen\n }))\n },\n geometry: {\n type: 'Point',\n coordinates: project.forward([\n parseFloat(getFirst('X', location.rows)), parseFloat(getFirst('Y', location.rows))\n ])\n }\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"md`__Download this cell by clicking _Download JSON_ in its cell menu, and update \\`locations.geojson\\` in the [\\`bertspaan/rijksdriehoeksmeting-data\\`](https://github.com/bertspaan/rijksdriehoeksmeting-data) GitHub repository:__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"locations = ({\n type: 'FeatureCollection',\n features\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"md`## Incorrect Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"csvRowsWithIncorrectCoordinates = csvRows\n .filter((row) => !checkCoordinates(row))","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"csvRowsWithMissingIiifImage = csvRows\n .filter((row) => !iiifImagesByFilename[filenameFromCsvRow(row)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"iiifImagesWithoutCSVRow = iiifImages\n .filter((row) => !csvRowsByFilename[filenameFromIiifImage(row)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`\n## Constants\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"csvUrl = `https://bertspaan.nl/rijksdriehoeksmeting-data/inventaris-rd-dossiers-totaal.csv`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"iiifImagesUrl = `https://bertspaan.nl/rijksdriehoeksmeting-data/iiif-ingest-complete.csv`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"mapHeight = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"epsg4326 = '+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees' ","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"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":177,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"filenameFromCsvRow = (row) => decodeURIComponent(decodeURIComponent(row.Picture))","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"filenameFromIiifImage = (row) => decodeURIComponent(row.Origin)","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"parseDate = (row) => ''\n// parseInt(row.datum.substr(row.datum.length - 4)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"getFirst = (prop, rows) => R.prop(prop, rows[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"checkCoordinates = (row) => parseFloat(row.X) && parseFloat(row.Y)","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"byLocation = R.compose(R.map(R.zipObj(['number', 'rows'])), R.toPairs, R.groupBy(R.prop('Puntnaam')))","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"getYear = (dateStr) => parseInt(dateStr.substr(dateStr.length - 4)) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"project = proj4(epsg28992, epsg4326)","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"imageUrl = (iiifId) => `https://dlc.services/thumbs/7/1/${iiifId}/full/,400/0/default.jpg`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"leafletStyle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"proj4 = require('proj4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.43.0')\n mapboxgl.accessToken = 'pk.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg'\n return mapboxgl\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"R = require('//cdn.jsdelivr.net/npm/ramda@0.25.0/dist/ramda.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = {\n let d3 = await require('d3@5')\n let d3GeoVoronoi = await require('d3-geo-voronoi') \n return Object.assign(d3, d3GeoVoronoi)\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}