// JavaScript source code weaponMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width / 1.6}px` }); yield container; var mymap = L.map(container).setView([41.835832, -87.623177], 10); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiemVhZiIsImEiOiJjanZxdTNzOTIwbnFqNDlvejV5Z2theDh1In0.i5rEU42TIXyyy4frojTIIg', { attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', maxZoom: 18, id: 'mapbox.streets', accessToken: 'pk.eyJ1IjoiemVhZiIsImEiOiJjanZxdTNzOTIwbnFqNDlvejV5Z2theDh1In0.i5rEU42TIXyyy4frojTIIg' }).addTo(mymap); var data = districtData.sort((a, b) => (a.area > b.area) ? 1 : ((b.area > a.area) ? -1 : 0)); function style(feature) { let color = "#000" if(ch3){ var iter = parseInt(feature.properties.area_numbe-1); color = colorPick(weaponData[iter].number,1100,100); } else{ var iter = parseInt(feature.properties.area_numbe) - 1; console.log(data[iter]) color = colorPick(data[iter].number,35000,1000); } return { fillColor: color, color: color, weight: 1, fillOpacity: 0.75 }; } function onEachFeature(feature, layer) { if (feature.properties.community !== "") { if(ch3){ var iter = parseInt(feature.properties.area_numbe) - 1; let value = weaponData[iter].number; // define the popup content let content = `

Area Name: ${factors[iter]["COMMUNITY AREA NAME"]}

Number of weapon violations ${value}

` layer.bindPopup(content); } else { var iter = parseInt(feature.properties.area_numbe) - 1; let value = data[iter].number; // define the popup content let content = `

Area Name: ${factors[iter]["COMMUNITY AREA NAME"]}

Number of crimes ${value}

` layer.bindPopup(content); } // bind the popup to the layer layer.on('mouseover', function (e) { this.openPopup(); }); layer.on('mouseout', function (e) { this.closePopup(); }); } } let areas = L.geoJson(areasData, { style: style, onEachFeature: onEachFeature }).addTo(mymap); }