Barebones Leaflet

2d:null 2e:["$","title",null,{"children":"Day One Map Making with Leaflet 🍃 | Columbia Data Club | Observable"}] 33:T4e4,## The Gear This notebook has a bare-bones HTML file for making a full-sized Leaflet map attached. Downloading the file and opening it in your browser should automatically draw a map for you without all the Observable overhead. It looks something like this: ```html Barebones Leaflet

```34:T572,### The JavaScript Loading Leaflet in the ` ```36:[{"id":"d062ddc01358c6a0f57983f5c98f726a6e945a4c66b2c9f3099304426e4e3266dbba8c90d4621f5bac90edeff12cbf5b2474b06600e2351629b368c5f0bfa891","href":"https://static.observableusercontent.com/files/d062ddc01358c6a0f57983f5c98f726a6e945a4c66b2c9f3099304426e4e3266dbba8c90d4621f5bac90edeff12cbf5b2474b06600e2351629b368c5f0bfa891","name":"ipeds_directory_2021.csv","type":"text/csv","lastModified":1728584161884.758,"size":3863203}] 31:{"id":"72539e317c219c35","slug":"day-one-map-making-with-leaflet","title":"Day One Map Making with Leaflet 🍃","thumbnail":"c98341b61fec60e231c8ab76e89b7b840dce966f49546e4c8378cee8fc77e690","access_level":"public","create_time":"$D2024-10-08T21:37:28.764Z","update_time":"$D2024-10-11T00:22:13.902Z","view_time":null,"first_public_time":"$D2024-10-10T18:27:45.752Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f3f52b173ba201f8","login":"columbia-data-club","name":"Columbia Data Club","avatar_url":"https://avatars-next.observableusercontent.com/e6b3343170e39213bc309b37e1e139465a1c559c724d49b4fc1b80c5a448e611","tier":"starter_2024"},"version":198,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"63a5ffaa3676a673","login":"muziejus","name":"Moacir P. de Sá Pereira","avatar_url":"https://avatars-next.observableusercontent.com/cc3c8fd655f4dbc8aa79039971f79a8d1ff772444ef95b0d01e1969963bb7ef6","tier":null}],"members":[{"type":"team","id":"f3f52b173ba201f8","login":"columbia-data-club","name":"Columbia Data Club","avatar_url":"https://avatars-next.observableusercontent.com/e6b3343170e39213bc309b37e1e139465a1c559c724d49b4fc1b80c5a448e611","tier":"starter_2024","role":"editor"},{"type":"individual","id":"63a5ffaa3676a673","login":"muziejus","name":"Moacir P. de Sá Pereira","avatar_url":"https://avatars-next.observableusercontent.com/cc3c8fd655f4dbc8aa79039971f79a8d1ff772444ef95b0d01e1969963bb7ef6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Day One Map Making with Leaflet 🍃","cells":[{"id":143,"value":"# Day One Map Making with Leaflet 🍃\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"map = {\n const container = DOM.element(\"div\", {\n style: `width: ${width}px; height: ${0.4 * width}px`\n });\n yield container;\n\n const centerCoordinates = [40.8075, -73.961944];\n const map = L.map(container).setView(centerCoordinates, 17);\n L.tileLayer(\"https://tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n maxZoom: 19,\n attribution: `© OpenStreetMap`\n }).addTo(map);\n\n const markers = L.layerGroup();\n ipeds_directory_2021\n .filter((row) => row.state_abbr == \"NY\")\n .map((row) => {\n const marker = L.marker([row.latitude, row.longitude]).bindPopup(\n `${row.inst_name}`\n );\n markers.addLayer(marker);\n });\n markers.addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"This notebook owes a lot to [this notebook](https://observablehq.com/@tmcw/leaflet) by [Tom MacWright](https://observablehq.com/@tmcw). \n\n[Leaflet](https://leafletjs.com) is a sort of default mapping library for JavaScript, which means it is ubiquitous on the web and a great solution for incorporating cartographic information in one’s website or webapp. \n\nEven though Observable has _robust_ mapping capabilities via [d3-geo](https://observablehq.com/collection/@d3/d3-geo), the Leaflet workflow is very straightforward, especially to newcomers to JavaScript.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"### The HTML\n\nStarting Leaflet requires doing three things:\n\n1. loading the Leaflet CSS to style the map inside a `