31:[{"id":"b1f1422a3d31e2c88dc386c5f44452a7cc5833dbaf9850ed530d0a561ef8b901128f7e534d4d8bb1a03a33730ea20c1eddac072d5b856213497e0954febd0c9f","href":"https://static.observableusercontent.com/files/b1f1422a3d31e2c88dc386c5f44452a7cc5833dbaf9850ed530d0a561ef8b901128f7e534d4d8bb1a03a33730ea20c1eddac072d5b856213497e0954febd0c9f","name":"cities.csv","type":"text/csv","lastModified":1664437377510.59,"size":37073},{"id":"6f519d1fe4f825941f4f9414e85c42b120c8368c80576b2b38552c60a3a36f6b37605e1d721a5a2733081d3d32792d8c39555f6805557eab743fd3ef309ad4e3","href":"https://static.observableusercontent.com/files/6f519d1fe4f825941f4f9414e85c42b120c8368c80576b2b38552c60a3a36f6b37605e1d721a5a2733081d3d32792d8c39555f6805557eab743fd3ef309ad4e3","name":"banner.png","type":"image/png","lastModified":1664443210477.364,"size":600960},{"id":"571c442dd3470b1e6457642a74b1c364af10e78308328011e8ecc60ca3180f04dceb416a57cf98e09888260da990a9edc9ab149e975530916a0bf7ccede238b0","href":"https://static.observableusercontent.com/files/571c442dd3470b1e6457642a74b1c364af10e78308328011e8ecc60ca3180f04dceb416a57cf98e09888260da990a9edc9ab149e975530916a0bf7ccede238b0","name":"austria-1.topojson","type":"application/octet-stream","lastModified":1662990399044.284,"size":414472},{"id":"f235e5853e03f0006ed0d58cd34be53098449d95a4ce00863fb772bdd34efeb06ec2d15c723aec965afacb0b1c8caaed4c59044afab87c178ca0524bc36281ed","href":"https://static.observableusercontent.com/files/f235e5853e03f0006ed0d58cd34be53098449d95a4ce00863fb772bdd34efeb06ec2d15c723aec965afacb0b1c8caaed4c59044afab87c178ca0524bc36281ed","name":"afghanistan.gpkg","type":"application/x-sqlite3","lastModified":1662990398957.054,"size":315392},{"id":"ae311b4ca4f9b9648509a3a1a387b93d37885c349759a5a387643600a73d6838e330062ef0a8d297d23a4acf2f48738b7cf096f9ccb768ad586821aed4a7a559","href":"https://static.observableusercontent.com/files/ae311b4ca4f9b9648509a3a1a387b93d37885c349759a5a387643600a73d6838e330062ef0a8d297d23a4acf2f48738b7cf096f9ccb768ad586821aed4a7a559","name":"cuba.zip","type":"application/zip","lastModified":1662990398621.185,"size":181996},{"id":"980e342a4a1cc195461207bcac06b1aa1194c9053418e88b6bdcf0f5d05322858a367b09e07f8abb5430996235fb731a29c7f1b9baf82aee938ff7ee2fdc601f","href":"https://static.observableusercontent.com/files/980e342a4a1cc195461207bcac06b1aa1194c9053418e88b6bdcf0f5d05322858a367b09e07f8abb5430996235fb731a29c7f1b9baf82aee938ff7ee2fdc601f","name":"bhutan.json","type":"application/json","lastModified":1662990398560.668,"size":338467},{"id":"2ca8383fb9af4e82ce34754c377a9b0f854e45a2094179d8f825d5740b0dece829e6d2650f0dcd59c2ac3c2dc917326c93d4d902717c9fcdd1e9dbb799dbcf68","href":"https://static.observableusercontent.com/files/2ca8383fb9af4e82ce34754c377a9b0f854e45a2094179d8f825d5740b0dece829e6d2650f0dcd59c2ac3c2dc917326c93d4d902717c9fcdd1e9dbb799dbcf68","name":"bolivia.kmz","type":"application/zip","lastModified":1662991941535.786,"size":287144}] 2f:{"title":"Geographical features imports","cells":[{"id":0,"value":"# Geographical features imports","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"In this notebook, we show how to import different geographic data formats into Observable. For that, several libraries are used. The solutions proposed here are not exclusive. ","pinned":false,"hidden":false,"mode":"md"},{"id":390,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":137,"value":"## 1. Geojson","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"GeoJSON (Geographic JSON) is an open format for encoding simple geospatial datasets using the JSON (JavaScript Object Notation) standard. It allows for the description of point, line, string, polygon, and sets and subsets of these data types and for the addition of non-spatial information attributes.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"bhutan = FileAttachment(\"bhutan.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"In Observable, you just have to attach the file. ","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"view(bhutan, { width: 700, height: 350 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"## 2. Topojson","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"TopoJSON is an extension of GeoJSON that encodes topology. Rather than representing geometries discretely, geometries in TopoJSON files are stitched together from shared line segments called arcs. TopoJSON eliminates redundancy, allowing related geometries to be stored efficiently in the same file. ","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"aus = FileAttachment(\"austria-1.topojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"In Observable, you don't have to install anything. You can get a geojson with the instruction ```topojson.feature()```.","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"austria = topojson.feature(aus, \"level2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"view(austria, { width: 700, height: 350 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"## 3. csv","pinned":false,"hidden":false,"mode":"md"},{"id":226,"value":"Sometimes you will find data in CSV (coma separated value) format containing geographical locations in latitude and longitude.","pinned":false,"hidden":false,"mode":"md"},{"id":238,"value":"cities = FileAttachment(\"cities.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"Inputs.table(cities)","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"In Observable, you can easily convert these data to geoJSON with the [```geotoolbox```](https://www.npmjs.com/package/geotoolbox) library. ","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"geo = require(\"geotoolbox@1.7.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"geocities1 = geo.coords2geo(cities, { lat: \"lat\", lon: \"lng\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"if the coordinates are contained in a single field, you can also do like this","pinned":false,"hidden":false,"mode":"md"},{"id":248,"value":"geocities2 = geo.coords2geo(cities, { coords: \"coords\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"view(geocities1, { width: 700, height: 350 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"## 4. Shapefile","pinned":false,"hidden":false,"mode":"md"},{"id":148,"value":"The shapefile format is a geospatial vector data format developed and regulated by Esri. It is actually as a set of associated files (.shp, .shx, .dbf, .prj, ...). The main way of making shapefile data available is to add it to a .zip file.","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"In Observable, one way to read shapefiles is to attach a zip file and load it as an ArrayBuffer, then convert it to geoJSON with the [```shpjs```](https://www.npmjs.com/package/shpjs) library. ","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"shp = require(\"https://unpkg.com/shpjs@latest/dist/shp.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"archive = FileAttachment(\"cuba.zip\").arrayBuffer()","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"cuba = shp(archive)","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"view(cuba, { width: 700, height: 350 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"## 5. Geopackage","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"GeoPackage is an open, standards-based, platform-independent, portable, self-describing, compact format for transferring geospatial information. A GeoPackage (*.gpkg) is constructed as a SQLite database file that contains data and metadata tables containing geometries. ","pinned":false,"hidden":false,"mode":"md"},{"id":266,"value":"In Observable, the best way to deal with geopackages is to use the [```spl.js```](https://www.npmjs.com/package/spl.js) library. spl.js is actually a wasm implementation of [spatialite](https://www.gaia-gis.it/fossil/libspatialite/index) in javascript. It allows to do a lot of GIS computations. ","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"spl = import(\"https://cdn.skypack.dev/spl.js@0.1.0-beta.5?min\").then((d) =>\n d.default()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"db = FileAttachment(\"afghanistan.gpkg\")\n .arrayBuffer()\n .then((buffer) => spl.db(buffer))","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"columns = Inputs.table(db.exec(\"pragma table_info(afghanistan);\").get.objs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"afghanistan = db\n .exec(\n \"select json_object('id', GID_1, 'name', NAME_1) as properties, geom as geometry from afghanistan\"\n )\n .get.objs.then((d) => ({ type: \"FeatureCollection\", features: d }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"view(afghanistan, { width: 700, height: 350 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"## 6. Kmz/kml","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"Keyhole Markup Language (KML) is an XML notation for expressing geographic annotation. KML became an international standard of the Open Geospatial Consortium in 2008. A KMZ file is actually a zipped KML.","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"bol = FileAttachment(\"bolivia.kmz\").zip()","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"bol.filenames[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"xml = new DOMParser().parseFromString(\n await bol.file(bol.filenames[0]).text(),\n \"text/xml\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"bol.file(\"gadm41_BOL_2.kml\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"tj = require(\"@tmcw/togeojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"bolivia = tj.kml(xml)","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"view(bolivia, { width: 700, height: 350 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"## 7. OpenStreetMap","pinned":false,"hidden":false,"mode":"md"},{"id":304,"value":"[OpenStreetMap](https://www.openstreetmap.org/) (OSM) is a collaborative online mapping project that aims to build a free geographic database of the world (e.g., to create open source maps), using GPS and other open source data. Thanks to the OverPass API, it is possible to fetch all the data contained in the database. Here, I have retrieved the basemap and the location of bars and pubs in Paris. The map below does not use any other data. ","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"In Observable, to retrieve OSM data, you have to use the [Overpass API](https://wiki.openstreetmap.org/wiki/Overpass_API). It is actually a read-only API that serves up custom selected parts of the OSM map data. Then, you have to use the [```osmtogeojson```](https://www.npmjs.com/package/osmtogeojson) library for converting OSM data to GeoJSON. This OSM conversion code was written for and is maintained by the overpass-turbo project.","pinned":false,"hidden":false,"mode":"md"},{"id":380,"value":"In this example, we retrieve the [bakeries](https://wiki.openstreetmap.org/wiki/Tag:shop%3Dbakery) in Paris. To do this, we need to define a query with a spatial scope, as below. ","pinned":false,"hidden":false,"mode":"md"},{"id":371,"value":"query = `\n[out:json]\n[timeout:10000];\n(\nnode[shop=bakery](48.814,2.222,48.904,2.472);\n);\nout;\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"The, we are able to launch the query to the API.","pinned":false,"hidden":false,"mode":"md"},{"id":342,"value":"osmdata = overpass(query)","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"And finally, we convert it to geojson.","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"bakery = ({\n type: \"FeatureCollection\",\n features: osmtogeojson(osmdata).features.filter(\n (d) => d.geometry.type == \"Point\" // to keep only the dots\n )\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"view(bakery, { width: 700, height: 350 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":320,"value":"server = \"https://overpass-api.de/api/interpreter\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"function overpass(query) {\n let overpass_api_url = `${server}?data=${encodeURIComponent(query)}`;\n return d3.json(overpass_api_url);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"osmtogeojson = require(\"osmtogeojson@3.0.0-beta.4/osmtogeojson.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"## Todo","pinned":false,"hidden":false,"mode":"md"},{"id":295,"value":"Geoparquet, FlatGeoBuff, R (sf), wkt, ...","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"## (Appendix)","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"view = require(\"geoverview@1.2\").then((f) => f.view)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}