2d:null 2e:["$","title",null,{"children":"The Earth is not flat | mbschissell | Observable"}] 33:T4f7,md`## References * OpenLayers examples * [GeoJSON example](https://openlayers.org/en/latest/examples/geojson.html) shows how to load and style GeoJSON * [Advanced view positioning](https://openlayers.org/en/latest/examples/center.html) * [View animation](https://openlayers.org/en/latest/examples/animation.html) * [Limited layer extent](https://openlayers.org/en/latest/examples/layer-extent.html) * [D3 integration](https://openlayers.org/en/latest/examples/d3.html) * OpenLayers API docs * [ol.format.GeoJSON](https://openlayers.org/en/latest/apidoc/module-ol_format_GeoJSON-GeoJSON.html) * [ol.feature.Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html) * [ol.style.Style](https://openlayers.org/en/latest/apidoc/module-ol_style_Style.html) * [ol.style.Fill](https://openlayers.org/en/latest/apidoc/module-ol_style_Fill-Fill.html) * [ol.style.Stroke](https://openlayers.org/en/latest/apidoc/module-ol_style_Stroke-Stroke.html) * D3 API docs * [d3.geoStitch()](https://github.com/d3/d3-geo-projection/blob/master/README.md#transformations) * [Introduction to views](https://observablehq.com/@observablehq/introduction-to-views) * [Form Input](https://observablehq.com/@mbostock/form-input)`34:[] 31:{"id":"dce8a89ba7a2d4a3","slug":"the-earth-is-not-flat","title":"The Earth is not flat","thumbnail":"4957e85ffc42ad8ec6600e88be71f3b2c32edba6c59f94cb2b86aef1005e352e","access_level":"public","create_time":"$D2019-05-09T23:31:58.232Z","update_time":"$D2019-05-09T23:51:45.236Z","view_time":null,"first_public_time":"$D2019-05-09T23:41:36.262Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"801c2f61e7096b3e","login":"mbschissell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5b7f73b7c3326d5f055212bc0ac2958f75a1e1f283f9a7593d4a867802a25bb1","tier":"starter_2024","bio":""},"version":1079,"publish_version":1079,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa5b7e29c53870f6","login":"mbschissell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5b7f73b7c3326d5f055212bc0ac2958f75a1e1f283f9a7593d4a867802a25bb1","tier":null,"bio":""}],"members":[{"type":"individual","id":"aa5b7e29c53870f6","login":"mbschissell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5b7f73b7c3326d5f055212bc0ac2958f75a1e1f283f9a7593d4a867802a25bb1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The Earth is not flat","cells":[{"id":0,"value":"md`# The Earth is not flat\n\nVisualizing the earth on a flat screen is a topographic challenge.\nFor many geographic software packages, \nit leads to visual artifacts at the antimeridian (±180° longitude).\nD3 implemented an elegant solution to the problem back in 2013: [Antimeridian Cutting](https://bl.ocks.org/mbostock/3788999). \nD3 does things that defy the eye: [Antimeridian Cutting II](https://bl.ocks.org/mbostock/aaa69d969b714ecb05bac01e2a29dd41).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"viewof view = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"country = {\n // Get the feature when you click on the map\n let feature = targetValue[0];\n return feature ? feature.getProperties().NAME : 'Click on a country'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"viewof datasource = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"target = html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"md`### Update the map\n\nForm elements allow the user to select: (1) data source, and (2) displayed feature(s).\nThe following cells implement these choices.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"update = {\n let data = [geosource, geostitch, toposource];\n let data_choice = data[datasource.choice];\n let filtered_data = filtered(data_choice);\n\n // Read the filtered data into a new OpenLayers Feature instance.\n // ol.format.GeoJSON() is what OpenLayers uses to read and write GeoJSON\n let geojson_reader = new ol.format.GeoJSON();\n // .readFeatures() returns an object that represents one or more OpenLayers Features\n let filtered_features = geojson_reader.readFeatures(filtered_data, options)\n \n // Reset the layer displaying only the filtered features\n countryLayer.getSource().clear()\n countryLayer.getSource().addFeatures( filtered_features ) \n \n // Zoom to the desired \"center\" and \"zoom\" based on the UI selection\n let location = locations[ view.choice ];\n map.getView().animate({\n center: ol.proj.fromLonLat( location.lonlat ),\n zoom: location.zoom,\n duration: 2000\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"filtered = function(data) {\n if (view.choice == 'Earth') return data;\n return data.features.filter(d => d.properties.ADMIN == view.choice)[0];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"locations = {\n return {\n Earth : { lonlat: [0,0], zoom: 1.5 },\n Russia: { lonlat: [ 99, 61], zoom: 2 },\n Fiji: { lonlat: [178.860, -17.786], zoom: 6 },\n Belgium: { lonlat: [4.4699, 50.5039], zoom: 6 },\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`## Country layer\n\nThis cell adds the GeoJSON country data to the map using 3 OpenLayers objects:\n\n1. [ol.layer.Vector](https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html)\n2. [ol.source.Vector](https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html) \n3. [ol.format.GeoJSON](https://openlayers.org/en/latest/apidoc/module-ol_format_GeoJSON.html)\n\nThe \\`ol.format.GeoJSON\\` instance reads the GeoJSON data into the \\`ol.source.Vector\\` instance.\nYou add the \\`ol.source.Vector\\` to the \\`ol.layer.Vector\\`,\nand you add the \\`ol.layer.Vector\\` to the map.\n\nThe default input projection is \n[EPSG:4326](https://epsg.io/4326) (WG84 Lat & Lon). \nThe default map projection is the same as the input projection. You must specify\nEPSG:3857 if you want the Web Mercator (the slippy map default).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"options = {\n // Specify the original and final projections\n let options = {\n // dataProjection: 'EPSG:4326', // \"EPSG:4326\" = default data projection = WGS84 (Latitute & Longitude)\n featureProjection: 'EPSG:3857', // Specify the map projection or it will be returned in the dataProjection\n }\n\n return options\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"countryLayer = {\n \n // Read the GeoJSON into a Vector source\n let vectorSource = new ol.source.Vector({\n features: (new ol.format.GeoJSON()).readFeatures(geosource, options) // GeoJSON data source\n });\n\n // Create a Vector layer\n let vectorLayer = new ol.layer.Vector({\n source: vectorSource,\n style: styleFunction\n });\n \n map.addLayer(vectorLayer);\n \n return vectorLayer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"md`## Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"map = {\n width;\n target.dispatchEvent(new CustomEvent(\"input\"));\n let tileLayer = new ol.layer.Tile({\n source: new ol.source.OSM()\n });\n \n const map = new ol.Map({\n// layers: [ tileLayer ], // Uncomment this line to add the OpenStreetMap layer in the background\n target: target,\n view: new ol.View({\n center: [0, 0],\n zoom: 2\n }),\n controls: ol.control.defaults().extend([ new ol.control.ScaleLine() ]),\n })\n \n // Add custom interaction to the map\n target.value = []; // Initial empty selection.\n const select = new ol.interaction.Select();\n select.on(\"select\", event => {\n target.value = select.getFeatures().getArray();\n target.dispatchEvent(new CustomEvent(\"input\"));\n })\n map.addInteraction(select);\n // Initialize the target value\n target.dispatchEvent(new CustomEvent(\"input\"));\n invalidation.then(() => map.dispose()); // Specific to OpenLayers\n \n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"md`Add custom interaction to the map. This is specific to Observable. For some reason, OpenLayers won't initialize using [viewof](https://observablehq.com/@observablehq/a-brief-introduction-to-viewof).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"targetValue = Generators.input(target)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"md`The next cell shows how to access the \\`properties\\` of one of the GeoJSON features.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"properties = countryLayer.getSource().getFeatures()[0].getProperties()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"md`The next cell displays the \\`ISO_A2\\` property of one feature.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"properties.ISO_A2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"md`### My TopoJSON`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"topo = d3.json(\"https://pbogden.com/mapping/data/world/topojson/110m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"toposource = {\n let simplify = 0;\n let topo2 = topojson.presimplify(topo)\n topo2 = topojson.simplify(topo2, simplify);\n let geojson = topojson.feature(topo2, topo2.objects.countries);\n\n return geojson;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"md`### My GeoJSON`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"md` # IMPORTANTE `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"//Pull out array of country names\ngeosource.features.map(d => d.properties.ADMIN)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"geosource = d3.json(\"https://pbogden.com/mapping/data/world/geojson/110m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"md`Filter everything except Fiji, which crosses the antimeridian.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"geostitch = d3.geoStitch(geosource)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"md`## Data-dependent styling\n\n\\`countryLayer\\` uses \\`styleFunction\\` for data-dependent styling of each country.\nEach country is an [OpenLayers feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html). \nTo get the original GeoJSON properties, you need to use the \\`.getProperties()\\` method on the\nOpenLayers \\`feature\\` object.\nThe current implementation adds random colors that\nupdate every time the map renders (e.g., on pan and zoom).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"\nstyleFunction = function(feature) {\n let colors = d3.schemeCategory10;\n let stroke = new ol.style.Stroke({ color: 'black', width: '1px' });\n let randomIndex = Math.floor( Math.random() * 9 );\n // let fill = new ol.style.Fill({ color: colors[randomIndex] });\n \n let fill = new ol.style.Fill({ color: \"rgba(0,0,0,.5)\" });\n \n let style = new ol.style.Style({ stroke: stroke, fill: fill }); \n return style;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@5\", \"d3-geo-projection\", \"d3-scale-chromatic@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"ol = {\n // OpenLayers doesn’t publish a build to npm, so we can’t use unpkg. :(\n const ol = await require(\"https://openlayers.org/en/v5.3.0/build/ol.js\").catch(() => window.ol);\n if (!ol.css) ol.css = document.head.appendChild(html``);\n return ol;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"topojson = require(\"topojson-client@3\", \"topojson-simplify@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 32:"$31:body"