2b:null 2c:["$","title",null,{"children":"Publishing Map Data with Observable | RRCHNM | Observable"}] 31:T76f,// We'll start by creating a div in this cell we're assigning to a variable 'map'. map = { // Typically, you might see Leaflet examples initialize a map with code // that looks something like L.map('map'), which will tell the Leaflet // library to look for a div on the page with the id of 'map'. In our case // we're doing some rather unnatural things in Observable by creating the // div in the cell. let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); // This component uses "yield" to pause execution of this code block // and return the value of the cell back to the notebook. Behind // the scenes, we're telling the notebook to create the div on the page. // We're doing this here because Leaflet uses .offsetWidth and .offsetHeight (which // grabs the size of the div) to size the map correctly. Otherwise, we might get // a map that isn't properly sized. yield container; // Now, let's make a map and create a center position and default zoom level. let map = L.map(container).setView([41.90, 12.49], 5); // If we stopped here, we'd have successfully initiated a Leaflet map but you'd // simply be given a blank, grey square. Our next step requires us to tell Leaflet // what basemap we'd like to use. In this case, we're going to pull in map tiles from // OpenStreetMaps. The code below adds the tile layer to the map, which will dynamically // load tiles based on the current viewport of the map. It's also a good practice // to include your attributions here, not only for the basemap but any additonal // sources you might use (such as historical basemaps). let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors | David Rumsey Map Collection' }).addTo(map); }32:T569,// We'll instantiate a new cell to hold a new map for us to display our polygons. italy = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([41.90, 12.49], 5); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); // Now let's add our neighborhood layer. We're going to initiate a new GeoJSON layer using Leaflet's // built-in GeoJSON method. We do this by simply calling L.geoJson and passing in our variable // for our GeoJSON file above. We'll store this in a variable called `it`. let it = L.geoJson(italy_regions, { // We can do some styling of the polygons here as well. Below, we'll include // a weight (which sets the thickness of the boundaries in pixels) and color (which // lets us set the polygon color). weight: 1, color: "#000000", }).addTo(map); // Finally, if we didn't set a center or zoom level above with L.map, we can tell // Leaflet to get the boundaries (or, the edges in each direction) of our polygon. // We'll use Leaflet's .fitBounds method for this. We need to pass in our `it` variable // for Leaflet to do its work. // map.fitBounds(it.getBounds()); }33:T4f0,map_marker = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([41.90, 12.49], 5); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); // Here is our loop for plotting the point data. We launch this with a for loop, which will simply // continue through each line of data until it hits the end. We assign a new variable called `datum` // and tell Leaflet to create a marker for each X and Y coordinate in our dataset by providing the arguments // to Leaflet's .circleMarker method. // We also do a couple of quality-of-life improvements: we use filter() to narrow down our results // (there's a lot of data!), and we use Leaflet's `.bindPopup` method to allow click events on the markers. // We also apply our own `markerstyle` to the points. for (let datum of data) { // Create a marker for each row of data. const marker = L.circleMarker([+datum.Y,+datum.X], markerstyle).bindPopup(datum.Name).openPopup() // Add the marker to the map. marker.addTo(map); } }34:T552,map_historic = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([41.90, 12.49], 5); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); // Similar to the way we pull in basemaps from OpenStreetMaps, we can use the .tileLayer method // to display a georectified map. For this to work properly, a georectified map like this // needs to be in a Google Maps/OSM schema. Most geoservers that host georectified map tiles // should provide this kind of information for you. In some cases, you may need to sign // up for an account and use a unique API key to access the tiles. // Map from: http://maps.nypl.org/warper/maps/33698#Export_tab let italy_historic = L.tileLayer('https://maps.georeferencer.com/georeferences/64d5b28c-851b-5d6d-b03a-9c681443cb58/2017-04-18T17:47:57.114177Z/map/{z}/{x}/{y}.png?key=KPlLnmp6U0gZTmAcJ4Ob', { attribution: '© David Rumsey Map Collection', // We can change the transparency of the historic map to reveal more (or less) of // the modern day map underneath. The number ranges between 0.0 and 1.0. opacity: 0.5 }).addTo(map); }35:T4a7,full_map = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([41.90, 12.49], 5); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); // Add our historic basemap let italy_historic = L.tileLayer('https://maps.georeferencer.com/georeferences/64d5b28c-851b-5d6d-b03a-9c681443cb58/2017-04-18T17:47:57.114177Z/map/{z}/{x}/{y}.png?key=KPlLnmp6U0gZTmAcJ4Ob', { attribution: '© David Rumsey Map Collection', opacity: 0.4 }).addTo(map); // Add our polygons // Note that order matters here. If we applied our markers first and then our polygons, // the markers would appear undernear the polygons. let it = L.geoJson(italy_regions, { weight: 2, color: "black" }).addTo(map); // Add our markers for (let datum of data.filter(d => d.Year == 1943)) { const marker = L.circleMarker([+datum.Y,+datum.X], markerstyle2).bindPopup(datum.Name).openPopup() marker.addTo(map); } }36:[{"id":"6bb33ecefe714eca3254c4af4737a78da5d58f5a137b85cd8b62938a44e362d22e96d738159ed376614f5e4b4b8ea7fbd8fbb011a542e3cb2fcea2e91afa4dc4","href":"https://static.observableusercontent.com/files/6bb33ecefe714eca3254c4af4737a78da5d58f5a137b85cd8b62938a44e362d22e96d738159ed376614f5e4b4b8ea7fbd8fbb011a542e3cb2fcea2e91afa4dc4","name":"limits_IT_regions.geojson","type":"application/geo+json","lastModified":1667333705273.744,"size":2913351},{"id":"1c1b2b41df252bdd54f0563b18ab201e4a5096f0543143fbbcb2224a419ca586ca34347e3e9e26af637bc7157fba94b58da84d6f9d30963e8653524d2ed3d874","href":"https://static.observableusercontent.com/files/1c1b2b41df252bdd54f0563b18ab201e4a5096f0543143fbbcb2224a419ca586ca34347e3e9e26af637bc7157fba94b58da84d6f9d30963e8653524d2ed3d874","name":"DMH_Workshop_Ship_Losses.csv","type":"text/csv","lastModified":1667334148845.872,"size":388485}] 2f:{"id":"1a106e6fc45f58cb","slug":null,"title":"Publishing Map Data with Observable","thumbnail":"c25b542e4a874685b38fc9e62969891e425af07d22f95df61a2de4058d3182e3","access_level":"public","create_time":"$D2022-11-01T19:44:41.541Z","update_time":"$D2022-11-08T00:13:01.545Z","view_time":null,"first_public_time":"$D2022-11-01T19:44:41.541Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"05f1c37d9cb13d91","login":"chnm","name":"RRCHNM","avatar_url":"https://avatars-next.observableusercontent.com/0110c56b598cedda5bc8de28e6c9c2abec82463836578798fadefca3c624aa7d","tier":"starter_2024","bio":"Roy Rosenzweig Center for History and New Media"},"version":221,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6c513de3a61b655d","login":"hepplerj","name":"Jason Heppler, PhD","avatar_url":"https://avatars-next.observableusercontent.com/b137b1b68b9f07d03f16d6f42fd27148efa89ee7751c9aae13dc42537996f57e","tier":null,"bio":"Digital historian at the Roy Rosenzweig Center for History and New Media, George Mason University"}],"members":[{"type":"team","id":"05f1c37d9cb13d91","login":"chnm","name":"RRCHNM","avatar_url":"https://avatars-next.observableusercontent.com/0110c56b598cedda5bc8de28e6c9c2abec82463836578798fadefca3c624aa7d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"6c513de3a61b655d","login":"hepplerj","name":"Jason Heppler, PhD","avatar_url":"https://avatars-next.observableusercontent.com/b137b1b68b9f07d03f16d6f42fd27148efa89ee7751c9aae13dc42537996f57e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"25df7466edd7c7fd","slug":"data-working-group","title":"Data Working Group","owner":{"id":"05f1c37d9cb13d91","login":"chnm","name":"RRCHNM"}},"type":"notebook","body":{"titling":"auto","title":"Publishing Map Data with Observable","cells":[{"id":0,"value":"# Publishing Map Data with Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"This notebook exists for demonstrating a way to publish your QGIS or other spatial data using Observable notebooks. To do so, we are using Leaflet. [Leaflet](http://leafletjs.com/) is a JavaScript library for creating interactive maps. Leaflet lets us create a map that supports zooming and panning, loading in map tiles from a server, and pull in other GIS data sources to zoom, pan, and add interactive layers on top.\n\nTo get started, you'll need to [export](https://gist.github.com/YKCzoli/b7f5ff0e0f641faba0f47fa5d16c4d8d) your GeoJSON or CSV files from QGIS. Add more text here.\n\nWe have to include Leaflet and its CSS file to make our maps. We'll do that using Observable's `require()` and link to the CSS file for styling.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n return L;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"## Reading Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"There are some limitations when it comes to getting data into Leaflet. One to be aware of up front is that Leaflet cannot read in a file format known as TopoJSON; if you're working with a TopoJSON file, you'll need to convert it into a GeoJSON file instead. You can do this from the terminal (using, for example, Python) or by using mapshaper.org.\n\nTypically, the easiest way to get polygon, line, or point data into Leaflet is for that data to be structured as a GeoJSON file. There are ways to iterate over a CSV file for Leaflet to map out points, which is provided as an example below. But having that data available in GeoJSON is easiest when working with Leaflet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"## Creating the Basemap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"If you're looking for a way to figure out where to center your map on the correct lat/lon coordinates, you can try using [bboxfinder](http://bboxfinder.com/#0.000000,0.000000,0.000000,0.000000).\n\nIf you're not a fan of the OpeStreetMaps basemap, there are many options available for additional basemap tiles. We could use, for example, a dark basemap provided by CARTO.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"map_positron = {\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n yield container;\n \n let map = L.map(container).setView([41.90, 12.49], 5);\n\n // Take note that we've changed the L.tileLayer URL from osm to cartocdn as outlined \n // in the above link. Note I've also updated our attribution to credit CARTO.\n let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {\n \tattribution: '© OpenStreetMap contributors © CARTO'\n }).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Adding Data: Polygons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"As you might expect, we can add data to the map utilizing the typical spatial data types: points, polygons, and lines. Let's start by adding a layer to this map. We'll use Observable's `FileAttachment()` method to include the file locally attached to a notebook and parse the JSON with the `d3.js` library.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"italy_regions = FileAttachment(\"limits_IT_regions.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"With our data ready and parsed as `json`, we can map it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"## Adding Data: Points\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"Like the GeoJSON data above, I've attached a local file to this notebook that we'll import and parse. Note above with the GeoJSON file we had to provide the `.json()` method to parse the data correctly. Here, since we're reading in a CSV file, we instead provide the `.csv()` method. (Thanks to [Chris Golding](https://observablehq.com/@gmurrchnm/golding) for the data.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"data = FileAttachment(\"DMH_Workshop_Ship_Losses.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"We'll take a look at this data by importing the `Inputs` library and using that to display a table of the data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"Inputs.table(data, {\n format: {\n year: d3.format(\"d\") // format as \"1960\" rather than \"1,960\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"In Leaflet, making markers is slightly complicated because we have to tell JavaScript to loop through the available data and plot it. The good news is once you have this set up for one map, you can reuse this code for any other map you create.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"The following code sets up a custom marker style for our points.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"markerstyle = ({\n radius: 5,\n fillColor: \"red\",\n color: \"#000\",\n weight: 0.5,\n opacity: 1,\n fillOpacity: 0.6\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"## Adding Historic Basemaps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"With Leaflet, we can also add our own georectified historic basemaps. If you're creating your own, this process will require you to have a web server where you can host the tiles. Otherwise, there are a few services that provide map tiling for maps that they host, including the [David Rumsey Map Collection](https://mapwarper.net), [MapWarper](https://mapwarper.net), NYPL, and [EarthWorks](https://earthworks.stanford.edu).\n\n**Note**: The map tiles may take a moment to load.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"## Putting it all together","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"Here's how things look if we add all of these approaches together.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"markerstyle2 = ({\n radius: 5,\n fillColor: \"forestgreen\",\n color: \"#000\",\n weight: 0.5,\n opacity: 1,\n fillOpacity: 0.6\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"Now that we have a map we want to publish, we can embed it. On the left side of the map cell, click the three verticle dots and select \"Embed.\" From here, you can embed the entire notebook or select named cells. Note that only named cells can be embedded.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 30:"$2f:body"