map = { // 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:${730}px;height:${730 / 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).setView([35.5, -97], 9); let southWest = L.latLng(35, -97.5); let northEast = L.latLng(36, -95.5); map.options.maxBounds = L.latLngBounds(southWest, northEast); let osmLayer = L.tileLayer( 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' } ).addTo(map); let fuentesPoints = []; Data.forEach(d => { if (isNaN(parseFloat(d.Long)) || isNaN(parseFloat(d.Lat))) { return; } else { var Weight = 1; for (let i = 0; i < ElectionDates.length; i++) { if (d[ElectionDates[i]] != null) { Weight++; } } fuentesPoints.push([d.Lat, d.Long, Weight]); } }); let fuentesLayer = heatLayer(fuentesPoints, { minOpacity: 0.1 }).addTo(map); var myRenderer = L.canvas({ padding: 0.5 }); function myFunction(item, index) { var list = "

Name: " + item.FullName + "
Address: " + item.FormattedAddress + "
Voted in Elections in Past 10 Years: " + item.Count + "

Purpose-built for displays of data