31:T4fe,md`### Answer to Review Exercise #5 1. Add another line to the row of radio buttons in the *viewof view* cell. Our first guess at the "value" attribute is the string 'United States'. We may have to revisit this, the string is used for filtering data elsewhere. 2. If we create a cell (below) that contains only "view" then we can see the object that changes as we select different radio buttons. 3. Scanning the code, we find that view.choice is used to selection an element in the *locations* Array/cell, which is where we define a center position (longitude, latitude), and a zoom level for each location. So we add values for the United States in here. 4. If we try to run the code, we get a TypeError in the update cell with the message: Cannot read property 'crs' of undefined. Something is wrong, but we're not sure what. So we look for another place where we use view.choice. 5. The *filtered* cell uses it to filter data with the line \`d.properties.ADMIN == view.choice\`. This gives us a clue that we might have chosen the wrong value for *view.choice* in step #1. So we need to find the value for the ADMIN property that we need for the United States, and we do that by scanning all the values of ADMIN. In the next cell, we create an array of all possible values.`32: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)`33:[] 2f:{"title":"The Earth is not flat -- Review exercise #5","cells":[{"id":0,"value":"md`# The Earth is not flat -- Review exercise #5\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"},{"id":1078,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"geosource.features.map(d => d.properties.ADMIN)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1094,"value":"md`6. From the 5th element, we see that the appropriate string for the U.S. is \"United States of America\". So we go back to step #1 and change \"United States\" with \"United States of America\".\n7. We do the same thing in the *locations* cell. \n8. Re-run the code, and it should work.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"view","pinned":true,"hidden":false,"mode":"ojs"},{"id":830,"value":"viewof view = form(html``)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":731,"value":"viewof datasource = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"target = html`

`;","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":945,"value":"locations = {\n return {\n Earth : { lonlat: [0,0], zoom: 1.5 },\n France: { lonlat: [ 2, 46], zoom: 5 },\n Fiji: { lonlat: [178.860, -17.786], zoom: 6 },\n \"United States of America\": { lonlat: [-98, 39], zoom: 3 }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":459,"value":"md`## Map`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":363,"value":"targetValue = Generators.input(target)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":519,"value":"properties = countryLayer.getSource().getFeatures()[0].getProperties()","pinned":true,"hidden":false,"mode":"ojs"},{"id":535,"value":"md`The next cell displays the \\`ISO_A2\\` property of one feature.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"properties.ISO_A2","pinned":true,"hidden":false,"mode":"ojs"},{"id":553,"value":"md`### My TopoJSON`","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"topo = d3.json(\"https://pbogden.com/mapping/data/world/topojson/110m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":627,"value":"md`### My GeoJSON`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"geosource.features.map(d => d.properties.ADMIN)","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"geosource = d3.json(\"https://pbogden.com/mapping/data/world/geojson/110m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"md`Filter everything except Fiji, which crosses the antimeridian.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"geostitch = d3.geoStitch(geosource)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":40,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@5\", \"d3-geo-projection\", \"d3-scale-chromatic@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":551,"value":"topojson = require(\"topojson-client@3\", \"topojson-simplify@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}