31:T598,macrostratMap = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell, so it's // completely self-contained. let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); // Note that I'm yielding the container pretty early here: this allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight to size the map. If I were // to only return the container at the end of this method, Leaflet might // get the wrong idea about the map's size. yield container; // Now we create a map object and add a layer to it. let map = L.map(container); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); let macrostratColumnLayer = L.geoJson(macrostratColumns, { style: () => { return { weight: 1, color: '#432' } }, onEachFeature: (feature, layer) => { layer.bindPopup(`

${feature.properties.col_name}

${feature.properties.col_area} km2

`) } }).addTo(map); map.fitBounds(macrostratColumnLayer.getBounds()); }32:T479,md`## Leaflet plugins Most Leaflet plugins are written in a style that makes them easy to include as \`