31:T11bd,mapRender = { // Create the \`map\` object with the mapboxgl.Map constructor, referencing let map = new mapboxgl.Map({ container, center: [ -87.960, 43.049 ], style: 'mapbox://styles/milwaukeejournalsentinel/cko35k2lw0q1218mfnpwto8x1', zoom: 10, bearing: 0, pitch: 0, scrollZoom: true }); var nav = new mapboxgl.NavigationControl(); map.addControl(nav, 'top-right'); map.on("load", function () { map.addSource('street-lights', { type: 'geojson', data: points, }); map.addLayer({ id: 'years', type: 'circle', source: 'street-lights', paint: { 'circle-radius': ['interpolate', ['linear'], ['zoom'], 10, 2, 15, 5], 'circle-color': '#009bff' } }); // 'circle-color': { // property: 'zip', // type: 'categorical', // stops: [ // ['53201','randomColors'], // ['53202','randomColors'], // ['53203','randomColors'], // ['53204','randomColors'], // ['53205','randomColors'], // ['53206','randomColors'], // ['53207','randomColors'], // ['53208','randomColors'], // ['53209','randomColors'], // ['53210','randomColors'], // ['53211','randomColors'], // ['53212','randomColors'], // ['53213','randomColors'], // ['53214','randomColors'], // ['53215','randomColors'], // ['53216','randomColors'], // ['53217','randomColors'], // ['53218','randomColors'], // ['53219','randomColors'], // ['53220','randomColors'], // ['53221','randomColors'], // ['53222','randomColors'], // ['53223','randomColors'], // ['53224','randomColors'], // ['53225','randomColors'], // ['53226','randomColors'], // ['53227','randomColors'], // ['53228','randomColors'], // ['53233','randomColors'], // ['53234','randomColors'], // ['53235','randomColors'], // ['53237','randomColors'], // ['53259','randomColors'], // ['53263','randomColors'], // ['53274','randomColors'], // ['53278','randomColors'], // ['53288','randomColors'], // ['53290','randomColors'], // ['53293','randomColors'], // ['53295','randomColors'] // ] // }, // 'circle-opacity': 0.8, // 'circle-radius': { // 'base': 1.75, // 'stops': [[12, 2], [22, 180]] // }, map.on('click', 'years', function (e) { var coordinates = e.features[0].geometry.coordinates.slice(); var dateCreated = e.features[0].properties.dateCreated; var dateClosed = e.features[0].properties.dateClosed; var full_address = e.features[0].properties.full_address; var caseDescription = e.features[0].properties.caseDescription; var zip = e.features[0].properties.zip; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } new mapboxgl.Popup() .setLngLat(coordinates) .setHTML( '

' + full_address + ', ' + zip + '

' + '

' + 'Submitted: ' + dateCreated + '

' + '

' + 'Closed: ' + dateClosed + '

' + '

' + 'Case Info: ' + caseDescription + '

' ) .addTo(map); }); // Change the cursor to a pointer when the mouse is over the packers-data layer. map.on('mouseenter', 'years', function () { map.getCanvas().style.cursor = 'pointer'; }); // Change it back to a pointer when it leaves. map.on('mouseleave', 'years', function () { map.getCanvas().style.cursor = ''; }); }); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. try { yield map; yield invalidation; } finally { map.remove(); } }32:T506,randomColors = { var colors = {}; colors.names = { aqua: "#00ffff", azure: "#f0ffff", beige: "#f5f5dc", black: "#000000", blue: "#0000ff", brown: "#a52a2a", cyan: "#00ffff", darkblue: "#00008b", darkcyan: "#008b8b", darkgrey: "#a9a9a9", darkgreen: "#006400", darkkhaki: "#bdb76b", darkmagenta: "#8b008b", darkolivegreen: "#556b2f", darkorange: "#ff8c00", darkorchid: "#9932cc", darkred: "#8b0000", darksalmon: "#e9967a", darkviolet: "#9400d3", fuchsia: "#ff00ff", gold: "#ffd700", green: "#008000", indigo: "#4b0082", khaki: "#f0e68c", lightblue: "#add8e6", lightcyan: "#e0ffff", lightgreen: "#90ee90", lightgrey: "#d3d3d3", lightpink: "#ffb6c1", lightyellow: "#ffffe0", lime: "#00ff00", magenta: "#ff00ff", maroon: "#800000", navy: "#000080", olive: "#808000", orange: "#ffa500", pink: "#ffc0cb", purple: "#800080", violet: "#800080", red: "#ff0000", silver: "#c0c0c0", white: "#ffffff", yellow: "#ffff00" } colors.random = function() { var result; var count = 0; for (var prop in this.names) if (Math.random() < 1/++count) result = prop; return result; } return colors }33:[{"id":"dbaf27742d54d58578b76fccc7a2977dac881e4df35f5c89802fe520541ab66d9386ac44920f13e9a441e6f1d21724d16370e5d59a4522e8e76ddb54ba4e781d","href":"https://static.observableusercontent.com/files/dbaf27742d54d58578b76fccc7a2977dac881e4df35f5c89802fe520541ab66d9386ac44920f13e9a441e6f1d21724d16370e5d59a4522e8e76ddb54ba4e781d","name":"2018.geojson","type":"application/geo+json","lastModified":1620055691355.069,"size":9353169},{"id":"f9f1ca3d1c2cb3d2042266e16534e15061cd28628f04578b8d875e5c3adfe8bb03c33acf2cb370be0e99545b79fb0bfe0c7e90c4fd31751e7fbd4c184ca98722","href":"https://static.observableusercontent.com/files/f9f1ca3d1c2cb3d2042266e16534e15061cd28628f04578b8d875e5c3adfe8bb03c33acf2cb370be0e99545b79fb0bfe0c7e90c4fd31751e7fbd4c184ca98722","name":"2019.geojson","type":"application/geo+json","lastModified":1620055689672.942,"size":11025024},{"id":"5aed9309a611b2fc3600eaf37da331554a6589603d4ffb66670d29e66b0e9ce960b256f53163270d0d60019fabb24cbb4db6a3c84c7c814d7fa69a98c9270228","href":"https://static.observableusercontent.com/files/5aed9309a611b2fc3600eaf37da331554a6589603d4ffb66670d29e66b0e9ce960b256f53163270d0d60019fabb24cbb4db6a3c84c7c814d7fa69a98c9270228","name":"2020.geojson","type":"application/geo+json","lastModified":1620055688060.436,"size":7479194},{"id":"24fc9e8ff1f5af67b98dcb85b27be520d9d25dd50c265dd0739db57c5bdab5ff3eef1953da398ef71e46b6a5240d9301bd480cdc57eb1aa8d39c80383d15c355","href":"https://static.observableusercontent.com/files/24fc9e8ff1f5af67b98dcb85b27be520d9d25dd50c265dd0739db57c5bdab5ff3eef1953da398ef71e46b6a5240d9301bd480cdc57eb1aa8d39c80383d15c355","name":"2017.geojson","type":"application/geo+json","lastModified":1620055684502.694,"size":6850719},{"id":"09283444862f5609acf95616d091147beaa60d3a9278f5eed19f037a367fcad7560f00a0216e54573160775c45f0711123255ca64935dbe921f222d51000d7c0","href":"https://static.observableusercontent.com/files/09283444862f5609acf95616d091147beaa60d3a9278f5eed19f037a367fcad7560f00a0216e54573160775c45f0711123255ca64935dbe921f222d51000d7c0","name":"2016.geojson","type":"application/geo+json","lastModified":1620055682224.266,"size":6090255},{"id":"b9a3b8b655af6f8b34cbb3d7b98c0656de563bf39a9072afefbc29bfad3a5d33c1e0282866b420b75aaae22a95e961e25fd4e76fdad11a66eae7582533543645","href":"https://static.observableusercontent.com/files/b9a3b8b655af6f8b34cbb3d7b98c0656de563bf39a9072afefbc29bfad3a5d33c1e0282866b420b75aaae22a95e961e25fd4e76fdad11a66eae7582533543645","name":"2015.geojson","type":"application/geo+json","lastModified":1620055678069.959,"size":4954899},{"id":"b12f40cf18733cf080b5c283c45d9226b2733dfa00d61812e917e1b0b18418f482e10662d78b63969b7e785f51643b0f1fde61b1dd37aa942091e948538ee507","href":"https://static.observableusercontent.com/files/b12f40cf18733cf080b5c283c45d9226b2733dfa00d61812e917e1b0b18418f482e10662d78b63969b7e785f51643b0f1fde61b1dd37aa942091e948538ee507","name":"2013.geojson","type":"application/geo+json","lastModified":1620055671274.382,"size":3305240},{"id":"faff6aecad81d5bc1904082b584db247315125380eee50b806096999aa1f05d9ba74c966add6ffc285688ba64694137f6a632c24780e26ca8d137225253761d1","href":"https://static.observableusercontent.com/files/faff6aecad81d5bc1904082b584db247315125380eee50b806096999aa1f05d9ba74c966add6ffc285688ba64694137f6a632c24780e26ca8d137225253761d1","name":"2014.geojson","type":"application/geo+json","lastModified":1620055670352.21,"size":3114799},{"id":"782916a5295cb888c2bcbec76e12006a63a8f3d16dfd4e825ab0eeaadbc5b5b7be88d2a4e471ba475db12c95c33f9ffe7992c68ff691e14468bf7d0533e1c6e0","href":"https://static.observableusercontent.com/files/782916a5295cb888c2bcbec76e12006a63a8f3d16dfd4e825ab0eeaadbc5b5b7be88d2a4e471ba475db12c95c33f9ffe7992c68ff691e14468bf7d0533e1c6e0","name":"2012.geojson","type":"application/geo+json","lastModified":1620055667741.245,"size":2516781},{"id":"d9f8b324796d0c77760255e36724a367a53d9b65f52005e24d5b5732f351c0c46d47dc8bd9bd532e8d4e60dca4a566f726b40df362761bda4d917c75c154e73b","href":"https://static.observableusercontent.com/files/d9f8b324796d0c77760255e36724a367a53d9b65f52005e24d5b5732f351c0c46d47dc8bd9bd532e8d4e60dca4a566f726b40df362761bda4d917c75c154e73b","name":"2021.geojson","type":"application/geo+json","lastModified":1620055653989.926,"size":106198},{"id":"2d020c492d19c7a1a8d7ff5f7af1f51bf4ed4e0a619c18f608fa1d2431b1bb263a6e09b4300a1e2b1e9749e135c2b18733f6e90e54c956b65710fce32373046c","href":"https://static.observableusercontent.com/files/2d020c492d19c7a1a8d7ff5f7af1f51bf4ed4e0a619c18f608fa1d2431b1bb263a6e09b4300a1e2b1e9749e135c2b18733f6e90e54c956b65710fce32373046c","name":"2011.geojson","type":"application/geo+json","lastModified":1620055571225.612,"size":109101}] 2f:{"title":"City of Milwaukee street light outages by year and aldermanic district","cells":[{"id":0,"value":"md`# City of Milwaukee street light outages by year and aldermanic district`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"viewof yearSelect = Select(years, {label: \"Search by year\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"years = [\"points2011\", \"points2012\", \"points2013\", \"points2014\", \"points2015\", \"points2016\", \"points2017\", \"points2018\", \"points2019\", \"points2020\", \"points2021\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"points = {\n return {\n 'points2011': points2011,\n 'points2012': points2012,\n 'points2013': points2013,\n 'points2014': points2014,\n 'points2015': points2015,\n 'points2016': points2016, \n 'points2017': points2017, \n 'points2018': points2018, \n 'points2019': points2019, \n 'points2020': points2020, \n 'points2021': points2021, \n }[yearSelect]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"points2011 = await FileAttachment(\"2011.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"points2012 = await FileAttachment(\"2012.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"points2013 = await FileAttachment(\"2013.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"points2014 = await FileAttachment(\"2014.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"points2015 = await FileAttachment(\"2015.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"points2016 = await FileAttachment(\"2016.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"points2017 = await FileAttachment(\"2017.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"points2018 = await FileAttachment(\"2018.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"points2019 = await FileAttachment(\"2019.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"points2020 = await FileAttachment(\"2020.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"points2021 = await FileAttachment(\"2021.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"popupCSS = html\n`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"mapHeight = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.49.0');\n mapboxgl.accessToken = 'pk.eyJ1IjoibWlsd2F1a2Vlam91cm5hbHNlbnRpbmVsIiwiYSI6IkhmS0lZZncifQ.WemgYJ9P3TcgtGIcMoP2PQ';\n \n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"Inputs = require(\"@observablehq/inputs@0.7.21/dist/inputs.umd.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"Select = Inputs.Select","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"mapboxglCSS = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}