2b:null 2c:["$","title",null,{"children":"SF Maps | Arogya Koirala | Observable"}] 31:T660,viewof small_multiples = { let container = html`

Grassland

Some description. Actually two lines work.

Coastal

Some description. Actually two lines work.

Dunes

Some description. Actually two lines work.

Riparian

Some description. Actually two lines work.

Wetland

Some description. Actually two lines work.

Woodland

Some description. Ally two lines work.

`; yield container; console.log(container) // getMap(dunes, container, '#ffcc33') getMap(grassland, "grassland", fills[0]) getMap(coastal, "coastal", fills[1]) getMap(dunes, "dunes", fills[2]) getMap(riparian, "riparian", fills[3]) getMap(wetland, "wetland", fills[4]) getMap(woodland, "woodland", fills[5]) }32:T860,getLargerMap = (container, fills) => { let map = new mapboxgl.Map({ container: container, center: [-122.4397, 37.7649], zoom: 11, style: "mapbox://styles/mapbox/light-v9", interactive: false, dragPan: false, }); // disable map zoom when using scroll map.scrollZoom.disable(); map.on("load", () => { // container.value = map; // container.dispatchEvent(new CustomEvent("input")); map.addSource('coastal', { type: 'geojson', data: coastal }); map.addLayer({ 'id': 'coastal-layer', 'type': 'fill', 'source': 'coastal', 'paint': { 'fill-color': fills[1], // blue color fill 'fill-opacity': 0.5 } }); map.addSource('grassland', { type: 'geojson', data: grassland }); map.addLayer({ 'id': 'grassland-layer', 'type': 'fill', 'source': 'grassland', 'paint': { 'fill-color': fills[0], // blue color fill 'fill-opacity': 0.5 } }); map.addSource('dunes', { type: 'geojson', data: dunes }); map.addLayer({ 'id': 'dunes-layer', 'type': 'fill', 'source': 'dunes', 'paint': { 'fill-color': fills[2], // blue color fill 'fill-opacity': 0.5 } }); map.addSource('riparian', { type: 'geojson', data: riparian }); map.addLayer({ 'id': 'riparian-layer', 'type': 'fill', 'source': 'riparian', 'paint': { 'fill-color': fills[3], // blue color fill 'fill-opacity': 0.5 } }); map.addSource('wetland', { type: 'geojson', data: wetland }); map.addLayer({ 'id': 'wetland-layer', 'type': 'fill', 'source': 'wetland', 'paint': { 'fill-color': fills[5], // blue color fill 'fill-opacity': 0.5 } }); map.addSource('woodland', { type: 'geojson', data: woodland }); map.addLayer({ 'id': 'woodland-layer', 'type': 'fill', 'source': 'woodland', 'paint': { 'fill-color': fills[6], // blue color fill 'fill-opacity': 0.5 } }); }); return container }33:[{"id":"b2967ea771b77b6863809822c394ea1a26ff0c3805d040ee738c8b20bd923ed8d86de5ec5adbd84b9e5b8327430312f7f5e3e1f55d79a2c9bf7a0b383f218ca2","href":"https://static.observableusercontent.com/files/b2967ea771b77b6863809822c394ea1a26ff0c3805d040ee738c8b20bd923ed8d86de5ec5adbd84b9e5b8327430312f7f5e3e1f55d79a2c9bf7a0b383f218ca2","name":"coastal.geojson","type":"application/geo+json","lastModified":1683325906680.823,"size":51036},{"id":"fcf9c8a99f869ce6c5e461bedbbe46ac12d8b80db0b5095180a4c054823a1d7bc07edd90c7bea185e44f3ee2e893fbacb8c85b7afd54191b953e59f3ad7bbf56","href":"https://static.observableusercontent.com/files/fcf9c8a99f869ce6c5e461bedbbe46ac12d8b80db0b5095180a4c054823a1d7bc07edd90c7bea185e44f3ee2e893fbacb8c85b7afd54191b953e59f3ad7bbf56","name":"wetland.geojson","type":"application/geo+json","lastModified":1683325906955.017,"size":17721},{"id":"d7a034f947c6532a54b8d936a82e06851cd28f807b2e127e46c753809219a11ec17fff8fff3044c646988d77080a4bfb4e84488a1e28f686a87339bd53f195b4","href":"https://static.observableusercontent.com/files/d7a034f947c6532a54b8d936a82e06851cd28f807b2e127e46c753809219a11ec17fff8fff3044c646988d77080a4bfb4e84488a1e28f686a87339bd53f195b4","name":"woodland.geojson","type":"application/geo+json","lastModified":1683325907022.443,"size":28619},{"id":"31b8b80278ba129c4eebb31aad384e8fba476636cab6861d95523aba38d0c65cebba7c020fdae114318798a8918ed719ee72e221eb034cc7f0ba1abf53bd3423","href":"https://static.observableusercontent.com/files/31b8b80278ba129c4eebb31aad384e8fba476636cab6861d95523aba38d0c65cebba7c020fdae114318798a8918ed719ee72e221eb034cc7f0ba1abf53bd3423","name":"riparian.geojson","type":"application/geo+json","lastModified":1683325907096.256,"size":42024},{"id":"f75b995a3f3757794a78e32c583f33887cbbba1d6c3cf6ac1c49f780789711172614c2271c59488de930ae7c09d1fc53594153289e36270fe0786d809d4ca740","href":"https://static.observableusercontent.com/files/f75b995a3f3757794a78e32c583f33887cbbba1d6c3cf6ac1c49f780789711172614c2271c59488de930ae7c09d1fc53594153289e36270fe0786d809d4ca740","name":"dunes.geojson","type":"application/geo+json","lastModified":1683325909055.869,"size":266561},{"id":"73fe12eb14c30526dfa41435f34e7cb2a1a3e4e314483680083cd6c127e1aa5fc9969f012521a4e477d7e789f84290b47faa9e578b06d837a80ff45d8d310c78","href":"https://static.observableusercontent.com/files/73fe12eb14c30526dfa41435f34e7cb2a1a3e4e314483680083cd6c127e1aa5fc9969f012521a4e477d7e789f84290b47faa9e578b06d837a80ff45d8d310c78","name":"grassland.geojson","type":"application/geo+json","lastModified":1683325909841.499,"size":445331}] 2f:{"id":"3707aa81742f274d","slug":null,"title":"SF Maps","thumbnail":"e613aed4c690c55cea8f1a6eea1948fb5060b9af8fee1b6f836ddfd5ff147801","access_level":"public","create_time":"$D2023-05-05T22:24:25.113Z","update_time":"$D2023-05-06T00:06:44.700Z","view_time":null,"first_public_time":"$D2023-05-05T22:24:25.113Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3eb6175bfef7a73a","login":"akoirala","name":"Arogya Koirala","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":"starter_2024"},"version":314,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f16655bda0a03677","login":"akoirala","name":"Arogya Koirala","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":null}],"members":[{"type":"individual","id":"f16655bda0a03677","login":"akoirala","name":"Arogya Koirala","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"SF Maps","cells":[{"id":0,"value":"# SF Maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"viewof larger_map = {\n let container = html`

\n \n

`;\n yield container;\n\n console.log(container)\n // getMap(dunes, container, '#ffcc33')\n getLargerMap(\"larger-map\", fills)\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"getMap = (data, container, fill) => {\n // mapboxgl.accessToken = 'pk.eyJ1IjoiYXJrb2Jsb2ciLCJhIjoiY2pmZ2RsNGpqNDE1OTJxazdrNzVxNnl2ZSJ9.Qj1ryjt2_OWUmlTKlcEmtA';\n let map = new mapboxgl.Map({\n container: container,\n center: [-122.4194, 37.7249],\n zoom: 9,\n style: \"mapbox://styles/mapbox/light-v9\",\n interactive: false,\n dragPan: false,\n });\n\n // disable map zoom when using scroll\n map.scrollZoom.disable(); \n\n map.on(\"load\", () => {\n // container.value = map;\n // container.dispatchEvent(new CustomEvent(\"input\"));\n\n map.addSource('data', {\n type: 'geojson',\n data: data\n });\n \n map.addLayer({\n 'id': 'data-layer',\n 'type': 'fill',\n 'source': 'data',\n 'paint': {\n 'fill-color': fill, // blue color fill\n 'fill-opacity': 0.5\n }\n });\n });\n\n return container\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"fills=['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"## Data\nLoading individual JSON Files","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"coastal = FileAttachment(\"coastal.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"dunes = FileAttachment(\"dunes.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"grassland = FileAttachment(\"grassland.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"riparian = FileAttachment(\"riparian.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"wetland = FileAttachment(\"wetland.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"woodland = FileAttachment(\"woodland.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiYXJrb2Jsb2ciLCJhIjoiY2pmZ2RsNGpqNDE1OTJxazdrNzVxNnl2ZSJ9.Qj1ryjt2_OWUmlTKlcEmtA\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"import { compose } from \"@dralletje/compose-viewof\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"