31:[] 2f:{"title":"Web Map Components","cells":[{"id":0,"value":"md`# Web Map Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`## Some history and anatomy`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`Early internet maps were very slow and clunky because they were similar in design to desktop GIS software. When users would try to pan across the map to see a different area or zoom in, an entirely new static image had to load each time.\n\n**Map tiles** were a hack that transformed web maps into much more user-friendly tech. Maps are broken up into 256x256-pixel chunks at varying zoom levels, and when panning or zooming requests for tiles load accordingly.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"html`

This is a zoom level 0 tile.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"html`

These are zoom level 1 tiles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"md`Each tile level multiplies by 4. Zoom level 2 has 16 tiles, zoom level 3 has 64.\n\nUp until 2015-ish, map tiles were primarily stored in **raster** form–as image files. Advances in WebGL and new rendering engines led to the development of **vector** tiles: still approximately 256x256 chunks, but stored as data rendered on the fly instead of as static image files.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"md`The text in the image above is a representation of spatial data as a **geojson**–a file format for storing spatial data as a javascript object.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`You can load spatial data in formats other than geojson, like a csv, but when working with web stuff it's the format you're probably going to end up using the most.\n\nThere are some free sources for raster tiles but for vector and in general (unless you really want to set up your own server and infrastructure) you're going to be using the services of some company and using an API key. The good news is most of the stuff we're going to use will be free tools so it's not like a huge hurdle to overcome.\n\n**Why We're Not Doing Google Maps Stuff In This Class**\n- Personal preference (sorry)\n- Open source tools offer somewhat more flexibility in how you do things\n- Why enter into a situation where you might eventually have to give Google more money they are already rich\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`***\n## Leaflet`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`[Leaflet](https://leafletjs.com/) is an open source javascript library originally developed by Vladimir Agafonkin. It relies on map tiles–it was originally developed for raster tiles, but vector tiles can be used as well–and can also render static data layers. It can be used to create maps with similar functionality as Google or Bing maps (routing, location search, etc.).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"md`### Pros and Cons, Leaflet\n- ✅ easy to implement, built-in interactivity features\n- ✅ can use raster or vector tiles\n- ✅ lots of plug-ins\n- 🚫 web mercator only\n- 🚫 generally reliant on someone else's stuff for tiles/data and hosting\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"md`### Let's Make a Leaflet Map\nFirst, let's load the javascript library and required CSS underlying Leaflet.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"import { color } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"c = color()","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"c.value","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"c","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`setting some parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"w = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"h = width/1.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"container = {\n // this is a javascript thing\n const div = DOM.element(\"div\", { style: `height:800px;` });\n //yield div;\n //this is a Leaflet thing\n const map = L.map(div).setView([40.7299, -85], 5);\n\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution:\n '© OpenStreetMap contributors'\n }).addTo(map);\n\n const mystyle = {\n color: \"red\",\n weight: 2,\n opacity: 0.5,\n flavor: \"red\"\n };\n //adding static data to the map\n const json = L.geoJSON(geojson.features, { style: mystyle });\n json.addTo(map);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`*** \n## D3\n[D3](http://d3js.org) (Data-Driven Documents) is a javascript library originally developed by Mike Bostock. It does a *lot* more than maps–it's basically a catch-all data visualization library. A lot of the map-related stuff for D3 is actually in a separate library called d3-geo.\n\nD3 is in some respects just a tool for DOM manipulation. Its visualizations tend to be output as SVG files (you can also render visualizations to canvas). \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`### Pros and Cons, D3-geo\n- ✅ multiple projections\n- ✅ large user base\n- ✅ lots of plug-ins\n- 🚫 implementing a base map layer is a little more annoying/not the default\n- 🚫 requires more implementation of stuff that Leaflet has really simple APIs for\n- 🤷🏻‍♀️ heavily defined by How Mike Bostock Likes To Write Code\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`### Let's Make a D3 Map\nFirst, some required libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"d3 = require('d3', 'd3-geo')","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"topojson = require('topojson')","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`Then, let's load some static data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"json = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"geojson = topojson.feature(json, json.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"md `We'll need to convert this data into geojson here.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"projection = d3\n .geoOrthographic()\n .center([-73.9888682, 40.6916651])\n .translate([width / 2, h / 2])\n //.scale(width / (2 * Math.PI))\n .fitSize([width, h], geojson)","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"path(graticule)","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"svg = d3\n .select(\"#d3map\")\n .style(\"background-color\", \"cyan\")\n .attr(\"height\", h)\n .attr(\"width\", width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"svg\n .selectAll(\"path\")\n .data(geojson.features)\n .enter()\n .append(\"path\")\n .attr(\"stroke\", \"gray\")\n .attr(\"stroke-width\", \"1\")\n .attr(\"fill\", \"chartreuse\")\n .attr(\"d\", path)\n .attr(\"id\", function (n) {\n return n.id;\n })\n .exit()","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"path(geojson.features[1])","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}