32:T450,In previous lessons we've talked about cartographic visualizations using the GeoJSON or TopoJSON data formats—formats that denote geographic features and objects as _geometries_ that can be rendered by a library like Vega-Lite or D3. Drawing geometries (paths, polygons, etc.) directly has some benefits: - You get complete control over styling, interaction, and animations at the feature level (e.g., controlling region fill for choropleths). - You can integrate with other visualizations (e.g., to coordinate with multiple views). - You have flexibility to choose map projections, which may be important depending on what you're depicting. These types of maps are useful when **the geography is the data** (e.g., when states or counties or values of a nominal variable you'd like to depict, for example). However, they also have some limitations: - They don't scale well to high zoom levels; lines would become fuzzy and you'd need impractically large geometry files to show street-level detail. - Performance can degrade with very complex geometries or interactions that cause frequent redraws.33:T44a,## Tile-based mapping In a tile-based web map, the map is drawn by stitching together a grid of images (or "tiles"), rather than by drawing individual features. The image below from [Wikipedia](https://en.wikipedia.org/wiki/Tiled_web_map) illustrates it well.

By Stevage - Own work, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=34728162

When you zoom in and out, or pan (move) around the map, new tiles are downloaded from a [_tile server_](https://wiki.openstreetmap.org/wiki/Raster_tile_providers). Tiles are downloaded from the tile server following a URL template, something like `http://.../Z/X/Y.png`, where `Z` is the current zoom level, and `X` and `Y` identify the tile. There also be other URL elements specifying things like desired resolution, etc. **You typically won't be responsible for computing `Z`, `X` and `Y` values to handle user interactions.** That's where a tool like [Leaflet.js](https://leafletjs.com/) comes in. 34:T6d8,First, we create a simple HTML `div` and give it some dimensions. Then `yield` it. `yield` is kind of like `return`, except execution of the rest of the cell will complete after giving up the `div` as the cell's value. ```js const container = yield htl.html`

`; ``` `htl.html` — this is Observable's hypertext literal: it's creating an HTML element and providing a reference to it that we can access from a JS variable. --- Then, we create a map using Leaflet. We use the [`setView`](https://leafletjs.com/reference.html#map-setview) method to center the map on Cal Poly by providing it coordinates (`[35.305278, -120.665556]`). The second argument to `setView` is the zoom level. Try changing the number to get a sense of its effects. You can also optionally provide a third argument to specify [zoom/pan options](https://leafletjs.com/reference.html#zoom/pan-options) (e.g., maximum zoom level). ```js const map = L.map(container).setView([35.305278, -120.665556], 19); ``` --- Finally, once the map object is created, add tiles. In this case, we're adding tiles from openstreetmap.org and including an attribution. OpenStreetMap and some other tile servers provide these services for free, so it's important to include the attributions in your maps! The `{z}/{x}/{y}.png` part of the URL specifies the zoom level and tiles that must be downloaded. Different tile servers have different URL templates and policies; see more info [here](https://wiki.openstreetmap.org/wiki/Raster_tile_providers). ```js L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors" }).addTo(map); ``` 35:[] 30:{"title":"Tile-based Cartographic Visualization using Leaflet.js","cells":[{"id":0,"value":"# Tile-based Cartographic Visualization using Leaflet.js","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"## Leaflet\n\nLeaflet is a small JavaScript library for interactive tile-based mapping. It is available by default in Observable notebooks through the `L` variable.","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"L","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"The code below draws a really basic basemap using Leaflet. The following cell describes each part of the code.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"map = {\n // Create a container and \"yield\" it. The container a simple HTML div with some styling attached.\n const container = yield htl.html`

`;\n\n // We create the map using Leaflet, and center it on Cal Poly, with a zoom level \n const map = L.map(container).setView([35.305278, -120.665556], 19);\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"## Using other basemaps\n\nYou're not limited to OpenStreetMap's basemaps (the one which was used in the example above).\n\nIn the example above, we used a basemap from OpenStreetMap, which came with street names and such.\nHowever, depending on our visualization goals, we may not want all of that information.\n\nOpenStreetMap is just one such basemap provider. Leaflet's documentation describes [a number of additional basemap providers](https://leafletjs.com/plugins.html#basemap-providers), though some require API keys and aren't free.\n\nFor example, below we have another map showing an \"empty\" basemap with no labels.\nYou might do this and then add data layers to highlight features of interest.\n\nThe map below is a basemap from CartoDB. See the documentation at [their GitHub page](https://github.com/CartoDB/basemap-styles) for information about their basemap styles.\n","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"{\n const container = yield htl.html`

`;\n const map = L.map(container).setView([35.305278, -120.665556], 19);\n\n // Uisng a CARTO basemap\n L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {\n attribution: '© OpenStreetMap contributors © CARTO'\n }).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"To get the above map going using geometry-based mapping, you would download GeoJSON data from the [Cal Poly GIS website](https://guides.lib.calpoly.edu/GIS/ArcGISOnline) or the [city of SLO website](https://www.slocity.org/government/open-government/gis-mapping-division).","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"## Beyond drawing the map\n\nYou can also use Leaflet to add markers, popups, and styling to your map at specific coordinates, or even [make an interactive choropleth](https://leafletjs.com/examples/choropleth/). Leaflet is extremely well-documented and contains many tutorials.\n\n**When should you use tile-based mapping?** There's obviously not a fixed set of rules, but here are some situations where you might consider using something like Leaflet over drawing geometries using Vega-Lite or D3.\n\n- You're expecting plenty of interaction, especially zooming and panning, that in a geometry-based setting would result in expensive redrawings.\n- You are expecting to show lots of detail (e.g., topography, cities, streets, buildings, etc.) that would require impractically large GeoJSON or TopoJSON files.","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"---\n\n## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"import {stylesheet} from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W35","stdlib":"1","titling":"auto"}