32:T69d,md`# Stadsarchief: Kaarten en Controlepunten uit Vele Handen Dit [Observable-notebook](https://beta.observablehq.com/@mbostock/why-observable) laat zien hoe de controlepunten uit Vele Handen gebruikt en opgeslagen kunnen worden. __Deze controlepunten zijn belangrijk! We hebben ze nodig!__ Als we deze gegevens hebben, kunnen we: - als het nodig is gegeorefereerde kaarten verbeteren en fouten corrigeren; - kaarten uitsnijden zodat alleen cartografisch beeld overblijft, en atlasbladen beter aan elkaar plakken; - pixelcoördinaten naar geografische coördinaten transformeren; - een zoek-API maken waarmee gebruikers historische kaarten kunnen vinden die een bepaalde geografische locatie tonen. Deze transformaties kunnen onder andere worden uitgevoerd met [GDAL](https://www.gdal.org/gdaltransform.html), zo kunnen we [een kaartuitsnede naar een kaartoppervlakte converteren](https://github.com/nypl-spacetime/mask-to-geojson), maar ook toepassingen ontwikkelen zoals bijvoorbeeld [Building Inspector](https://buildinginspector.nypl.org/), waar gebruikers gebouwen en huisnummers van historische kaarten overtrekken en invoeren. Voor [HackaLOD 2018](http://hackalod.com/) [maakte ik met Menno den Engelse](https://github.com/bertspaan/hackalod) een [prototype van een applicatie](https://bertspaan.nl/amsterdam-op-de-kaart) waarmee eenvoudig gezocht kan worden in de collectie gegeorefereerde historische kaarten van het Stadsarchief. Echter, omdat we geen toegang hadden tot de controlepunten en er geen uitsnedes beschikbaar waren is het resultaat veel minder precies dan de [oorspronkelijke applicatie](http://spacetime.nypl.org/maps-by-decade/) van de New York Public Library. `33:T915,md` ## Ground Control Points Op de detailpagina van gegeorefereerde kaarten in Vele Handen zijn de via crowdsourcing verkregen referentiepunten te bekijken. In Vele Handen heten deze punten _markers_, in andere software, zoals bijvoorbeeld [GDAL](https://www.gdal.org/gdaltransform.html), noemt men deze punten _ground control points_ (of GCP’s). Zo’n GCP definieert een relatie tussen een punt op de gescande kaart en een geografische locatie. Zie bijvoorbeeld de [detailpagina voor scan ${veleHandenScanId}](https://velehanden.nl/projecten/scanbeheer/scandetails/project/amsterdam_kaarten/scan_id/${veleHandenScanId}) (alleen toegankelijk met juiste inlogrechten):

marker: id : marker_1
title :
imageLat : ${markers[0].imageLat}
imageLng : ${markers[0].imageLat}
imageGeoLat : ${markers[0].imageGeoLat}
imageGeoLng : ${markers[0].imageGeoLng}
geoLat : ${markers[0].geoLat}
geoLng : ${markers[0].geoLng}

In totaal zijn er op deze scan ${markers.length} markers geplaatst. Per marker zijn we geïnteresseerd in de volgende vier velden: 1. \`geoLat\`: breedtegraad van controlepunt op doelkaart; 2. \`geoLng\`: lengtegraad van controlepunt op doelkaart; 3. \`imageGeoLng\`: X-coördinaat van controlepunt op oorspronkelijk beeld, in pixels; 4. \`imageGeoLat\`: Y-coördinaat van controlepunt op oorspronkelijk beeld, in pixels. Zowel veld 1 als 2 kunnen worden [afgerond naar ${decimalPlaces} cijfers achter de komma](https://gis.stackexchange.com/questions/8650/measuring-accuracy-of-latitude-and-longitude), en veld 3 en 4 kunnen worden afgerond als geheel getal, het gaat hier immers om pixelcoördinaten. __Voor alle gegeorefereerde kaarten hebben we de locaties nodig van alle markers, in de volgende vorm__: \`\`\`json [ { veleHandenScanId: "${veleHandenScanId}", memorixId: "${memorixId}", beeldbankId: "${beeldbankId}", gcps: [ ${JSON.stringify(gcps[0])}, ${JSON.stringify(gcps[1])}, ${JSON.stringify(gcps[2])}, … ] }, … ] \`\`\` Alle markers van scan ${veleHandenScanId} zijn te bekijken in de volgende array: `34:T8b3,markers = [ { imageLat: 85.01238691260396, imageLng: -179.49565887451172, imageGeoLat: 2606, imageGeoLng: 2938, geoLat: 52.43386671918819, geoLng: 4.914686679840088 }, { imageLat: 85.02702112195713, imageLng: -179.32365417480466, imageGeoLat: 1624, imageGeoLng: 3940, geoLat: 52.43535806973726, geoLng: 4.91663932800293 }, { imageLat: 85.02553283741706, imageLng: -179.01329040527344, imageGeoLat: 1724.0000000004657, imageGeoLng: 5747.999999999884, geoLat: 52.43522725153305, geoLng: 4.921574592590332 }, { imageLat: 84.99944574792733, imageLng: -179.02908325195312, imageGeoLat: 3472.0000000001164, imageGeoLng: 5655.999999999884, geoLat: 52.43259118196672, geoLng: 4.921445846557617 }, { imageLat: 84.98319966622375, imageLng: -179.0380096435547, imageGeoLat: 4555.999999999418, imageGeoLng: 5604, geoLat: 52.430923116049314, geoLng: 4.921284914016724 }, { imageLat: 84.98331975612903, imageLng: -179.43626403808594, imageGeoLat: 4547.999999999651, imageGeoLng: 3284, geoLat: 52.43088386667927, geoLng: 4.915491342544556 }, { imageLat: 84.98569094431616, imageLng: -179.53857421875, imageGeoLat: 4389.9999999993015, imageGeoLng: 2687.9999999998836, geoLat: 52.43115207001123, geoLng: 4.914010763168335 }, { imageLat: 84.990489926488, imageLng: -179.78988647460938, imageGeoLat: 4070.0000000003492, imageGeoLng: 1223.9999999998836, geoLat: 52.431596891451406, geoLng: 4.9104273319244385 }, { imageLat: 85.0010016510577, imageLng: -179.89768981933594, imageGeoLat: 3368.000000000233, imageGeoLng: 595.9999999998836, geoLat: 52.432669677631004, geoLng: 4.908764362335205 }, { imageLat: 85.04220594792918, imageLng: -179.68997955322263, imageGeoLat: 602.0000000003492, imageGeoLng: 1806.0000000001164, geoLat: 52.4368820732006, geoLng: 4.911746978759766 }, { imageLat: 85.04600233423471, imageLng: -179.42150115966797, imageGeoLat: 345.99999999965075, imageGeoLng: 3369.9999999998836, geoLat: 52.43729740406079, geoLng: 4.91564154624939 } ]35:[] 30:{"title":"Stadsarchief: Kaarten en Controlepunten uit Vele Handen","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"md`\n## Identifiers\n\nHet voorbeeld hieronder is gebaseerd op de kaart met de volgende identifiers (in drie verschillende systemen):\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"beeldbankId = 'DUIZ00010000001'","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"veleHandenScanId = '1151'","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"memorixId = '7070f470-d561-966f-e8c5-236b9f6fff28'","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"md`[Open deze afbeelding in de Beeldbank](https://beeldbank.amsterdam.nl/beeldbank/weergave/record/?id=${beeldbankId}).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"md`\n## Scan met controlepunten\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"html`\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"md`\n## Kaart met controlepunten\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"map = {\n let container = DOM.element('div', {\n style: `width:${width}px; height:${mapHeight}px` \n })\n \n yield container\n \n let map = L.map(container, {\n minZoom: 10,\n maxZoom: 18\n }) \n \n let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', {\n attribution: 'Wikimedia maps beta | © OpenStreetMap contributors'\n }).addTo(map)\n \n let wmsLayer = L.tileLayer.wms('https://geoserver.memorix.nl/geoserver/ams/wms?', {\n opacity: 0.7,\n transparent: true,\n format: 'image/png',\n layers: `ams:${memorixId}`,\n crs: L.CRS.EPSG3857\n }).addTo(map)\n \n function pointToLayer (point, latlng) { \n return new L.Marker(latlng, {\n icon:\tnew L.NumberedMarker({\n number: point.properties.id\n })\n })\n }\n \n const geojsonLayer = L.geoJSON(geojson, {\n pointToLayer\n }).addTo(map);\n \n map.fitBounds(geojsonLayer.getBounds(), {\n padding: [20, 20]\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`\n---\n## Berekende Velden\n\nDe velden hieronder zijn de controlepunten en andere eigenschappen van de kaart, berekend in dit notebook aan de hand van Beeldbank-identifier _${beeldbankId}_.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"gcps = markers.map((marker) => ({\n geo: [roundDecimals(marker.geoLat, decimalPlaces), roundDecimals(marker.geoLng, decimalPlaces)],\n image: [Math.round(marker.imageGeoLng), Math.round(marker.imageGeoLat)]\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"geojson = ({\n type: 'FeatureCollection',\n features: gcps.map((gcp, index) => ({\n type: 'Feature',\n properties: {\n id: index + 1\n },\n geometry: {\n type: 'Point',\n coordinates: [gcp.geo[1], gcp.geo[0]]\n }\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"scale = roundDecimals(dimensions[0] / width, 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"dimensions = getDimensions(getImageUrl(beeldbankId))","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"md`\n---\n## Functies & Imports\n\nDe functies en constanten hieronder worden elders in dit notebook gebruikt.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"viewof style = html`