30:Tcdd,map = { let container = DOM.element('div',{style: `width:${width}px; height:${width / 1.6}px`}); yield container; let map = L.map(container).setView([37.8, -96], 4); let osmLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', maxZoom: 5, id: 'mapbox.light', accessToken: 'pk.eyJ1IjoibWFyZ2FyZXR3dyIsImEiOiJjam9ieGlucTUwZjdxM3JwYmxub2tiZ3AwIn0.cwdLeCUHIJb56gMxced16w' }).addTo(map); L.geoJson(statesdata2017,{style:style}).addTo(map); // add popup info var info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); // create a div with a class "inf this.update(); return this._div; }; // method that we will use to update the control based on feature properties passed info.update = function (props) { this._div.innerHTML = '

US Search trends scores

' + (props ? '' + props.name + '
' + props.scores : 'Hover over a state'); console.log(props); }; info.addTo(map); info._div.style["background"] = "rgba(255,255,255,0.8)"; info._div.style["padding"] = "6px 8px"; info._div.style["font"] = "14px/16px Arial, Helvetica, sans-serif"; info._div.style["box-shadow"] = "0 0 15px rgba(0,0,0,0.2)"; info._div.style["border-radius"] = "5px"; // Add interaction !!!!!!!!!! function highlightFeature(e){ var layer = e.target; layer.setStyle({ weight: 5, color :'#666', dashArray:' ', fillOpacity: 0.7 }); if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { layer.bringToFront(); } info.update(layer.feature.properties); } var geojson; function resetHighlight(e){ geojson.resetStyle(e.target); info.update(); } function zoomToFeature(e){ map.fitBounds(e.target.getBounds()); } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature }); } geojson = L.geoJson(statesdata2017, { style: style, onEachFeature: onEachFeature }).addTo(map); //add legend var legend = L.control({position:"bottomright"}); legend.onAdd = function(map) { var div = L.DomUtil.create('div','info legend'), grades = [0,40,55,70,85], labels = []; //loop for (var i = 0; i < grades.length; i ++){ div.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); } return div; }; legend.addTo(map); legend._container.style["line-height"] = "18px"; legend._container.style["color"] = "#555"; legend._container.style["background"] = "rgba(255,255,255,0.8)"; legend._container.style["padding"] = "6px 8px"; legend._container.style["box-shadow"] = "0 0 15px rgba(0,0,0,0.2)"; legend._container.style["border-radius"] = "5px"; }31:[] 2e:{"title":"Map","cells":[{"id":0,"value":"md`# Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"title = html`

Topic: Air Pollution Year: 2015

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"buttons = {\n \n const buttons =html`

Choose years:

\n \n\n `\n function myfunc(p) {\n \n var ss = title.innerHTML;\n console.log(ss)\n ss= ss.split(\" \").slice(0,-1).join(\" \");\n title.innerHTML = ss + \" \"+ p.innerHTML;\n }\n \n buttons.querySelector(\"#a\").onclick = () => {\n var ss = title.innerHTML;\n ss= ss.split(\" \").slice(0,-1).join(\" \");\n title.innerHTML = ss + \" 2015\";\n }\n buttons.querySelector(\"#b\").onclick = () => {\n var ss = title.innerHTML;\n ss= ss.split(\" \").slice(0,-1).join(\" \");\n title.innerHTML = ss + \" 2016\";}\n buttons.querySelector(\"#c\").onclick = () => {\n var ss = title.innerHTML;\n ss= ss.split(\" \").slice(0,-1).join(\" \");\n title.innerHTML = ss + \" 2017\";}\n return buttons\n }\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"function myfunc(p) {\n \n var ss = title.innerHTML;\n console.log(ss)\n ss= ss.split(\" \").slice(0,-1).join(\" \");\n title.innerHTML = ss + \" \"+ p.innerHTML;\n }\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"getColor = d => {\n return d > 85 ? '#800026' :\n d > 70 ? '#BD0026' :\n d > 55 ? '#E31A1C' :\n d > 40 ? '#FD8D3C':\n '#FFEDA0';\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"style = feature=>{\n return {\n fillColor: getColor(feature.properties.scores),\n weight : 2,\n opacity:1,\n color: 'white',\n dashArray: '3',\n fillOpacity:0.5\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"statesdata2017 = await d3.json(\"https://gist.githubusercontent.com/MargretWG/f00942ba82cb8cb9abafd65ac8746e16/raw/a434e0b82e35d55971106de8782d3f0b87256248/2017_state_data.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"statesdata2016 = await d3.json(\"https://gist.githubusercontent.com/MargretWG/0436e59fbf0d02a1a478c1251c2fdecf/raw/a07f766c3beeeba4cf42228e6a4fc9742534befd/2016_state_data.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"statesdata2015 = await d3.json(\"https://gist.githubusercontent.com/MargretWG/78006391b83336b241307dfb6b88b1f7/raw/2a92105a584840213dcfb074a9e642856ac00d63/2015_state_data.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}