25:["$","title",null,{"children":"LaSalle Street | Armin Akhavan | Observable"}] 4b:Tfa8,viewof map = { // let container = html`

`; let hoveredStateId = null; // Give the container dimensions. yield container; let map = (container.value = new mapboxgl.Map({ container, center: [-87.63516597640799, 41.88645195499595], zoom: 13, style: "mapbox://styles/mapbox/dark-v10" })); // Wait until the map loads. // Wait until the map loads. map.on("load", () => { map.addSource("CHI_LOOP_LIGHT", { type: "geojson", data: "https://services6.arcgis.com/UHBpZPzUwhjEIdAZ/arcgis/rest/services/chicago_loop_upcat_v2/FeatureServer/0/query?f=pgeojson&where=1=1&outFields=*", cluster: false, clusterRadius: 20, // cluster two trailheads if less than 20 pixels apart clusterMaxZoom: 14 // display all trailheads individually from zoom 14 up }); map.addLayer({ id: "chicago_loop_light-fill", type: "circle", source: "CHI_LOOP_LIGHT", // "source-layer": "chicago_loop_light", paint: { "circle-radius": { base: 2.75, stops: [ [12, 3], [22, 180] ] }, "circle-color": [ "match", ["get", "upper_cate"], ...circle_color_spec_export ], "circle-opacity": circles_trans // "circle-radius": ["case", ["get", "cluster"], 10, 5] // 10 pixels for clusters, 5 pixels otherwise } }); map.on("click", "chicago_loop_light-fill", (e) => { // Copy coordinates array. const coordinates = e.features[0].geometry.coordinates.slice(); const nametext = e.features[0].properties.name; const upper_cate = e.features[0].properties.upper_cate; const typet = e.features[0].properties.type; const subtypes = e.features[0].properties.subtypes; const full_addre = e.features[0].properties.full_addre; const working_ho = e.features[0].properties.working_ho; const categoryt = e.features[0].properties.category; // 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; } let popupinfo = ""; new mapboxgl.Popup() .setLngLat(coordinates) .setHTML( `

Name: ${nametext}

Activity Category: ${upper_cate}

Type: ${typet}

Subtypes: ${subtypes}

Category: ${categoryt}

Address: ${full_addre}

` ) .addTo(map); }); map.addSource("mapbox-dem", { type: "raster-dem", url: "mapbox://mapbox.mapbox-terrain-dem-v1", tileSize: 512, maxzoom: 14 }); // add the DEM source as a terrain layer with exaggerated height map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 }); // add a sky layer that will show when the map is highly pitched map.addLayer({ id: "sky", type: "sky", paint: { "sky-type": "atmosphere", "sky-atmosphere-sun": [0.0, 0.0], "sky-atmosphere-sun-intensity": 15 } }); // Change the cursor to a pointer when the mouse is over the places layer. map.on("mouseenter", "chicago_loop_light-fill", () => { map.getCanvas().style.cursor = "pointer"; }); // Change it back to a pointer when it leaves. map.on("mouseleave", "chicago_loop_light-fill", () => { map.getCanvas().style.cursor = ""; }); // map.on("mousemove", (e) => { // container.value = e.lngLat; // container.dispatchEvent(new CustomEvent("input")); // }); container.value = map; container.dispatchEvent(new CustomEvent("input")); }); }4c:T5c2,function executeQuery(whereClause, geometry, opts) { if (upper_cats.length > 0) { whereClause = "(" + whereClause + ") "; let listClause = "("; let upper_cats_str = upper_cats.map((c) => { return "'" + c + "'"; }); let list_clause_cats = upper_cats_str.join(", "); listClause = listClause + list_clause_cats + ")"; whereClause = whereClause + " and upper_cate IN " + listClause; } if (business_s) { whereClause = whereClause + " and business_s = 'OPERATIONAL' "; } if (verfied_only) { whereClause = whereClause + ` and ("verified" = 'True') `; } // console.log(whereClause); arcgisRest .queryFeatures({ url: "https://services6.arcgis.com/UHBpZPzUwhjEIdAZ/arcgis/rest/services/chicago_loop_upcat_v2/FeatureServer/0", // geometry: geometry, geometryType: "esriGeometryEnvelope", inSR: 4326, // EPSG:4326 uses latitudes and longitudes spatialRel: "esriSpatialRelIntersects", where: whereClause, f: "geojson", returnDistinctValues: opts["returnDistinctValues"], supportsAdvancedQueries: true, returnGeometry: opts["returnGeometry"], // resultRecordCount:1, outFields: ["*"] }) .then((response) => { // console.log(response); if (data.length > 0) { while (data.length > 0) { data.pop(); } } data.push(response); map.getSource("CHI_LOOP_LIGHT").setData(response); }); }4d:[] 47:{"id":"65eebea99dd48407","slug":"lasalle-street","title":"LaSalle Street","thumbnail":"85fe0754f8d6a1890cd53e0b70b077232345734ce4ad2f3c136294d4299fbc43","access_level":"public","create_time":"$D2022-02-28T13:17:14.722Z","update_time":"$D2022-08-10T21:22:00.085Z","view_time":null,"first_public_time":"$D2022-02-28T13:45:20.034Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"92e740786daf87d8","login":"arminakvn","name":"Armin Akhavan","avatar_url":"https://avatars-next.observableusercontent.com/cbd8e47f76e54ac717c9df251e0a675c321dfb4126db5704e7475155390eb3b7","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1495,"publish_version":1495,"role":null,"authored":false,"authors":[{"type":"individual","id":"86206b14aff34f9b","login":"arminakvn","name":"Armin Akhavan","avatar_url":"https://avatars-next.observableusercontent.com/cbd8e47f76e54ac717c9df251e0a675c321dfb4126db5704e7475155390eb3b7","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"86206b14aff34f9b","login":"arminakvn","name":"Armin Akhavan","avatar_url":"https://avatars-next.observableusercontent.com/cbd8e47f76e54ac717c9df251e0a675c321dfb4126db5704e7475155390eb3b7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"LaSalle Street","cells":[{"id":4,"value":"# LaSalle Street\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1274,"value":"viewof str_name_cks = Inputs.radio(terms, {\n label: \"by streets\",\n format: (x) => x.name,\n value: terms.find((t) => t.name === \"All\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"key = Swatches(\n d3.scaleOrdinal([...color_values_mappedout], circle_colors_mappedout),\n { columns: \"180px\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"container = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"viewof upper_cats = Inputs.checkbox(color_values_mappedout, {\n label: \"by activity category\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"viewof business_s = Inputs.toggle({\n label: \"filter: 'operational'\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1068,"value":"// viewof verfied_only = Inputs.select([\"true\",\"false\"],{label: \"verfied only\"})\nviewof verfied_only = Inputs.toggle({ label: \"filter: 'verified'\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"viewof circles_trans = Inputs.range([0, 1], {\n step: 0.25,\n value: 0.75,\n label: \"opacity\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1383,"value":"{\n const bounds = map.getBounds().toArray().flat();\n executeQuery(str_name_cks.location, bounds, {\n returnDistinctValues: false,\n returnGeometry: true\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"terms = [\n { name: \"LaSalle str\", location: \"full_addre like '%LaSalle%' \" },\n { name: \"Clark str\", location: \"full_addre like '%Clark%' \" },\n { name: \"Wells str\", location: \"full_addre like '% _ Wells%' \" },\n\n { name: \"Franklin str\", location: \"full_addre like '%Franklin%' \" },\n { name: \"Dearborn str\", location: \"full_addre like '%Dearborn%' \" },\n { name: \"State str\", location: \"full_addre like '%State%' \" },\n { name: \"Wabash ave\", location: \"full_addre like '%Wabash%' \" },\n { name: \"All\", location: \"full_addre like '%' \" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"all_cats_data = [];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"import {\n circle_color_spec_export,\n color_values_mappedout,\n circle_colors_mappedout,\n data\n} from \"@arminakvn/mapfunctions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"bounds = map.getBounds().toArray().flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"mapboxgl = {\n let mapboxgl = await require(\"mapbox-gl@2.7.0\");\n mapboxgl.accessToken =\n \"pk.eyJ1IjoidGFkaXJhbWFuIiwiYSI6ImNrMHExc3BuMzAzeXEzY25ieGR0YzUyanEifQ.-DtKkrkkxhpdz0YIn_NX5g\";\n\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"arcgisRest = await require(\"https://unpkg.com/@esri/arcgis-rest-feature-layer@3.4.3/dist/umd/feature-layer.umd.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null