31:T91a,md`## Why Observable? Observable is a new web-based tool for creating interactive documents. Observable makes it very easy to create documents you can explore and change, using code and data. Instead of explaining Observable in detail here, I’ll point you to a few documents with more information. Before you start, you should at least have a look at the following two: - [Why Observable?](https://beta.observablehq.com/@mbostock/why-observable) - [Five-Minute Introduction](https://beta.observablehq.com/@mbostock/five-minute-introduction) If you want to read more, here’s some more: - More information about [how Observable notebooks work](https://beta.observablehq.com/@mbostock/introduction-to-notebooks). - Mike Bostock introducing Observable: [A Better Way to Code](https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3a0 ). Observable was heavily inspired by the work of Brett Victor and Stephen Wolfram. I encourage you to read some of their work, too: - [Up and Down the Ladder of Abstraction](http://worrydream.com/LadderOfAbstraction/) by Brett Victor. - Stephen Wolfram’s [What Is a Computational Essay?](http://blog.stephenwolfram.com/2017/11/what-is-a-computational-essay/) ### Explorable documents Some explorable documents, from Observable’s [Explorables](https://beta.observablehq.com/collection/explorables) and [Algorithms](https://beta.observablehq.com/collection/algorithms) collections: - [Predator and Prey](https://beta.observablehq.com/@mbostock/predator-and-prey) 🐈🐁! - [Finding Random Points in a Polygon ](https://beta.observablehq.com/@scarysize/finding-random-points-in-a-polygon) - [Sounds - Interactive sound wave primer](https://beta.observablehq.com/@freedmand/sounds) [Understanding point-in-polygon ](https://beta.observablehq.com/@tmcw/understanding-point-in-polygon) ### Maps Of course you can use Observable to make maps as well. Here are a few examples, from the [Maps](https://beta.observablehq.com/collection/maps) collection: - [How well does population density predict U.S. voting outcomes? ](https://beta.observablehq.com/@jake-low/how-well-does-population-density-predict-u-s-voting-outcome) - [Night Skies — Lights and Light Pollution WebGL Globe ](https://beta.observablehq.com/@jashkenas/night-skies-lights-and-light-pollution-globe) `32:T41d,map = { let container = DOM.element('div', { style: `width:${width}px; height:${mapHeight}px` }) yield container let map = L.map(container, { minZoom: 13, maxZoom: 19 }) let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', { attribution: 'Wikimedia maps beta | © OpenStreetMap contributors', maxZoom: 19 }).addTo(map) function createPhotoMarker (feature, latlng) { let options = { radius: 10, fillColor: 'white', color: 'black', weight: 2, opacity: 1, fillOpacity: 1 } return L.circleMarker(latlng, options ); } function onEachFeature(feature, layer) { if (feature.properties && feature.properties.src) { layer.bindPopup(createPopup(feature.properties)) } } let geojsonLayer = L.geoJSON(geojson, { style: mapStyle, pointToLayer: createPhotoMarker, onEachFeature }).addTo(map) map.fitBounds(geojsonLayer.getBounds()) }33:[] 2f:{"title":"Maptime Amsterdam — Deep Mapping","cells":[{"id":0,"value":"md`\n# Maptime Amsterdam — Deep Mapping\n\n_This document is part of the September 1st edition of Maptime Amsterdam: [Deep Mapping – Explore Amsterdam with Arita Baaijens](https://www.meetup.com/Maptime-AMS/events/253643793/)._\n\nToday, we’re going to learn how to use Observable to create a map of a GPS route and place images along this route.\n\nPrerequisites:\n \n - a GitHub account, to log into Observable;\n - a laptop or desktop computer with a modern browser (Observable works on your mobile device, but you cannot edit documents).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"md`__Let’s start! First, _fork_ this notebook by clicking the Fork button in the top of the page!__ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"md`Now, you have your own copy of this notebook. You can edit every cell, and if you wish, you can _Publish_ your notebook and share your work with the world.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"md`## GPS Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"md`\nDuring your walk, you have recorded a GPS route with [Relive](https://www.relive.cc/). Relive will supply each group with a CSV file with GPS data, which you can load from a URL.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"csvUrl = `https://gist.githubusercontent.com/bertspaan/61b9575ecf9447d79782c6295ea573e2/raw/bea197a874ad276908f81f6601cd5860fc3e39e2/1_relive-tracker_1534868008125-iPhone8,4.csv`","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"md`Edit the URL in the cell above, and the data will automatically be loaded.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"md`The following cell contains all the GPS points recorded during your walk:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"data = d3.csv(csvUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"md`The CSV file with GPS data can contain thousands of points. Usually, we don’t need all these points, and we can use a line simplification algorithm to remove some of them. This makes the data smaller and easier to work with. If you want, you can [read more about how line simplification works](http://mourner.github.io/simplify-js/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"points = L.LineUtil.simplify(data.map((point) => ({ \n x: parseFloat(point.lon),\n y: parseFloat(point.lat),\n timestamp: new Date(point.time)\n })), simplifyTolerance)","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"md`\nThe cells above just contain point data. In order to vizualize the points as a single line with [Leaflet](https://leafletjs.com/), we will turn the points into a [GeoJSON \\`LineString\\`](https://en.wikipedia.org/wiki/GeoJSON):\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"lineString = ({\n type: 'LineString', coordinates: points.map((point) => ([point.x, point.y])) \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"md`Now, we can compute how long the walk was, in distance and in time:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"date = data[0].time.slice(0, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"timespan = [\n getTime(data[0].time),\n getTime(data[data.length - 1].time) \n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"length = turf.length(lineString, {\n units: 'kilometers'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"md `__On ${new Date(date).toLocaleDateString()}, from ${timespan[0]} to ${timespan[1]}, I walked ${round(length, 2)} kilometer!__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"md`## Images`","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"md`\nDuring the walk, you made sketches or took photos. If you took photos, download them to your computer, if you made sketches, take photos of them first, and then download them.\n\nThen, upload all the images to [Imgur](https://imgur.com/upload). Copy the URL of each photo, add \\`.jpg\\`, and you have a public URL of each photo that you can use below.\n\nExample:\n\n- \\`https://imgur.com/hmdbdI0\\` ⟶ \\`https://imgur.com/hmdbdI0.jpg\\`\n\nOf course, you can also use a different way to publish your images online. You can put them on Dropbox, on your own web server, on Google Photos, or anywhere else. As long as they’re publicly available, you can use them in this tutorial.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"md`\nTo add your images to the route, edit the data structure below. Add all your images, and add the time you took the photo or made the sketch.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"images = [\n {\n src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Durgerdam_harbour.jpg/1920px-Durgerdam_harbour.jpg',\n time: '18:17'\n },\n {\n src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/EYE_Filmmuseum.jpg/1920px-EYE_Filmmuseum.jpg',\n time: '18:35' \n },\n {\n src: 'https://upload.wikimedia.org/wikipedia/commons/d/da/Meeuwenlaan_Motorwal_IJplein.jpg',\n time: '18:40'\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"html`

\n \n
${image.time}
\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"md`## Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"md`\nNow it’s time to combine the GPS route and the images, and create a map. For this we will use [Leaflet](https://leafletjs.com/), a JavaScript library for interactive maps. See [Observable’s page about Leaflet](https://beta.observablehq.com/@tmcw/leaflet) to learn more about combining the two technologies.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"md`First, create a GeoJSON object with the route and the images:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"geojson = ({\n type: 'FeatureCollection',\n features: [\n {\n type: 'Feature',\n properties: {},\n geometry: lineString\n },\n ...images.map((image) => ({\n type: 'Feature',\n properties: image,\n geometry: pointFromTimestamp(fullDateFromTime(date, image.time))\n }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":578,"value":"md`__That was all! Here’s the map:__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`\n## Exercises\n\n- Check if all images are in the right location on the map. If they are not, try changing the time they were taken.\n- Give each photo a title or short description! You can do this by adding a \\`title\\` field to each image in the [\\`images\\` cell](#images). Then, edit the [\\`createPopup\\` function](#createPopup) and replace its contents with the contents of the [\\`createPopupWithTitle\\` function](#createPopupWithTitle).\n- You can change properties of the route like color and line width by changing the [\\`style\\` cell](#mapStyle). For documentation about the properties you can change, see [Leaflet's documentation](https://leafletjs.com/reference-1.3.4.html#path-stroke). \n- Change the line simlipication tolerance by editing the [\\`simplifyTolerance\\` cell](#simplifyTolerance). Make sure the simplified line is detailed enough, but does not contain thousands of points.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`## Done!\nWhen you’re done, _Publish_ your notebook, and send the URL [by email to Bert Spaan](mailto:hello@bertspaan.nl)! We will then combine all the routes from all the participant’s notebooks in one big map!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`\n## Constants\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"mapHeight = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"simplifyTolerance = 0.000002","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"mapStyle = ({\n weight: 5,\n color: '#2e33af'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"createPopup = (image) => html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"createPopupWithTitle = (image) => html`\n

${image.title}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"fullDateFromTime = (date, time) => new Date(`${date} ${time} GMT+02:00`) // In summer, Holland is two hours ahead of Greenwhich Mean Time","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"pointFromTimestamp = (date) => {\n let foundIndex = 0\n points.some((point, index) => {\n foundIndex = index\n return point.timestamp > date\n })\n \n const point = points[foundIndex]\n \n return {\n type: 'Point',\n coordinates: [point.x, point.y]\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"getTime = (timestamp) => new Date(timestamp).toLocaleTimeString('NL', {\n hour: 'numeric',\n minute: 'numeric'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"round = (num, decimals) => Math.round(num * 10**decimals) / (10**decimals)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"turf = require('@turf/turf')","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"leafletStyle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}