2d:null 2e:["$","title",null,{"children":"CARTO-VL: Update Vis Layer | Chris Henrick | Observable"}] 33:T9c4,// this cell renders the map above! viewof map = { // create the DOM element where the map will be rendered and // make sure to "yield" it before using it with mapboxgl let container = html`

`; yield container; // create the map object let map = new mapboxgl.Map({ container, center: [-98.35, 39.5], zoom: 3, style: carto.basemaps.positron // use Carto's dark matter basemap }); // sets up the zoom & pitch controls map.addControl(new mapboxgl.NavigationControl()); // creates the vis object which allows for data styling const viz = rampInterpolateViz(); // the layer is added to the map to render the data overlay const layer = new carto.Layer('counties', cartoSource, viz); layer.addTo(map); // we can attach a callback for the layer "loaded" event layer.on('loaded', () => { mutable layerLoaded = true; }); // as well as on the "updated" event to watch for changes layer.on("updated", event => { mutable layerUpdate = event; }); // enable event listeners on the data overlay const interactivity = new carto.Interactivity(layer); // bind a click event listener to our data overlay that // will display a popup in response to the event interactivity.on('featureClick', featureEvent => { const feature = featureEvent.features && featureEvent.features[0]; if (!feature) return; const { coordinates, variables: { name, pctWithoutInternet } } = feature; const coords = featureEvent.coordinates; const html = getPopupHtml(name.value, pctWithoutInternet.value.toFixed(0)); new mapboxgl.Popup() .setLngLat([coords.lng, coords.lat]) .setHTML(html) .addTo(map); }); // change the style of the feature when mousing over it interactivity.on('featureEnter', featureEvent => { featureEvent.features.forEach(feature => { feature.strokeWidth.blendTo(2, 0); }); }); // change the style of the feature when mousing away from it interactivity.on('featureLeave', featureEvent => { featureEvent.features.forEach(feature => { feature.strokeWidth.reset(); }); }); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. (this is an ObservableHQ thing) invalidation.then(() => { interactivity.disable(); layer.remove(); map.remove(); mutable layerLoaded = false; }); container.value = { map, layer, viz }; return container; }34:[] 31:{"id":"4acbf2d0353564a6","slug":"carto-vl-update-vis-layer","title":"CARTO-VL: Update Vis Layer","thumbnail":"3f0eb930152338559f56851a700f2f750c53574f6a6dd900afad8b44fdb80f7f","access_level":"public","create_time":"$D2020-08-17T23:48:36.066Z","update_time":"$D2020-08-18T18:54:41.284Z","view_time":null,"first_public_time":"$D2020-08-19T01:18:58.516Z","fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":"starter_2024"},"version":668,"publish_version":668,"role":null,"authored":false,"authors":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null}],"members":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"0f1b93b67af83521","slug":"maps","title":"maps and geo","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"type":"notebook","body":{"title":"CARTO-VL: Update Vis Layer","cells":[{"id":0,"value":"md`# CARTO-VL: Update Vis Layer\n\nA continuation of an exploration of [CARTO-VL](https://carto.com/developers/carto-vl/) with [MapBoxGL-JS](https://docs.mapbox.com/mapbox-gl-js/api/) (See [part one](https://observablehq.com/@clhenrick/hello-carto-vl)). MapBoxGL is used for the map rendering engine that draws the basemap and data overlays. CARTO-VL is used for rendering data from a [CARTO](https://carto.com/) account database with MapBoxGL. Both the basemap and data overlay are rendered using [Vector Tiles](https://wiki.openstreetmap.org/wiki/Vector_tiles#:~:text=Vector%20tiles%20are%20a%20way,the%20features%20in%20the%20tile.) which is helpful for rendering lots of geographic data efficiently and providing a responsive user experience when interacting with the map.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"viewof scrollZoom = checkbox({\n description:\n \"Toggles the mouse wheel scroll zoom on the map.
It can be helpful to disable this when the whole page also scrolls.\",\n options: [{ value: \"enabled\", label: \"Scroll Zoom\" }],\n value: \"enabled\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"viewof visClassification = radio({\n title: \"Vis Classification Scheme\",\n description: \"Changes the classification scheme in the map's data overlay\",\n options: [\n {\n label: \"Linear\",\n value: \"setRampInterpolate\"\n },\n {\n label: \"Quantiles\",\n value: \"setRampQuantiles\"\n },\n {\n label: \"Equal Interval\",\n value: \"setRampEqualIntervals\"\n },\n {\n label: \"Custom Buckets\",\n value: \"setRampManual\"\n },\n {\n label: \"Mean Std Dev\",\n value: \"setRampStandardDev\"\n }\n ],\n value: \"setRampInterpolate\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"mutable layerUpdate = \"none\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"mutable layerLoaded = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":657,"value":"md`Side effect that handles toggling the map's scrollZoomHandler.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":644,"value":"scrollZoomEnabled = {\n if (!map.map) return false;\n\n if (map.map.scrollZoom.isEnabled() && scrollZoom !== \"enabled\") {\n map.map.scrollZoom.disable();\n } else {\n map.map.scrollZoom.enable();\n }\n\n return map.map.scrollZoom.isEnabled();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":425,"value":"md`## Updating the Vis / Data Overlay`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":399,"value":"md`Side effect that updates the viz's color scheme when the value of the \\`visClassification\\` radio input above changes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"map.layer && setRamp[visClassification](map.layer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":586,"value":"md`Helper function that creates the Layer object which is added to the MapBoxGL map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":495,"value":"cartoLayer = () =>\n new carto.Layer('counties', cartoSource, rampInterpolateViz())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":431,"value":"md`Define some **Viz** types that use different data classification schemes. These were borrowed from the CARTO-VL example [style by number](https://carto.com/developers/carto-vl/examples/#example-style-by-number) and tweaked to the \\`${cartoTable}\\` dataset.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"commonStyles = `\n @name: $name\n @pctWithoutInternet: $pct_without_internet\n strokeColor: rgba(255,255,255,0.8)\n strokeWidth: 0.5\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":608,"value":"md`Note that in the above style block that the \n\n~~~\n@ : $\n~~~\n\nconvention here allows for referencing values from the data overlay for things like interactivity.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":434,"value":"rampInterpolateViz = () =>\n new carto.Viz(`\n ${commonStyles}\n color: ramp(linear($${dataField},3,71),pinkyl)\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":442,"value":"rampQuantilesViz = () =>\n new carto.Viz(`\n ${commonStyles}\n color: ramp(globalQuantiles($${dataField}, 5), pinkyl)\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":444,"value":"rampEqualIntervalsViz = () =>\n new carto.Viz(`\n ${commonStyles}\n color: ramp(globalEqIntervals($${dataField}, 5), pinkyl)\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":446,"value":"rampManualViz = () =>\n new carto.Viz(`\n ${commonStyles}\n color: ramp(buckets($${dataField},[20,30,50]),pinkyl)\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":463,"value":"rampStandardDevViz = () =>\n new carto.Viz(`\n ${commonStyles}\n color: ramp(globalStandardDev($${dataField}, 5), tealrose)\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":474,"value":"md`Helper functions that handle updating the Viz style. Really this transitions to the new Viz type.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":554,"value":"setRamp = ({\n setRampInterpolate(layer) {\n layer.blendToViz(rampInterpolateViz());\n },\n setRampQuantiles(layer) {\n layer.blendToViz(rampQuantilesViz());\n },\n setRampEqualIntervals(layer) {\n layer.blendToViz(rampEqualIntervalsViz());\n },\n setRampStandardDev(layer) {\n layer.blendToViz(rampStandardDevViz());\n },\n setRampManual(layer) {\n layer.blendToViz(rampManualViz());\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"md`## Data Source Set Up`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"md`The database table in the \\`${cartoUser}\\` CARTO account used by the Viz data overlay in the map is called \\`${cartoTable}\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"cartoTable = \"us_internet_access_by_county\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"md`The field from the \\`${cartoTable}\\` table used in the data overlay / Viz.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"dataField = \"pct_without_internet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"md`The SQL query used to load the data source. In order to render data on the map we need to specify the \\`cartodb_id\\` and \\`the_geom_webmercator\\` columns. Using an SQL query to load our data allows for a lot of flexibility in how we render our data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"query = `\n SELECT \n cartodb_id, \n the_geom_webmercator, \n name,\n pct_without_internet\n FROM ${cartoTable}\n ORDER BY pct_without_internet asc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":594,"value":"md`Define our SQL Source object used by our visualization.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":488,"value":"cartoSource = new carto.source.SQL(query, {\n apiKey: cartoApiKey,\n username: cartoUser\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":617,"value":"md`## Map Pop-Up`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"md`The data overlay's popup HTML & CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"getPopupHtml = (name, value) => `\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":620,"value":"md`## Credentials`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"md`CARTO account credentials / config. Not sure what the limits of the \\`${cartoApiKey}\\` API key are TBH.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"cartoApiKey = \"default_public\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"cartoUser = \"henrick2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":280,"value":"md`## Dependencies\n\n3rd party JS modules as well as imports from other Observable Notebooks.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"carto = {\n const c = await require(\"@carto/carto-vl@1.4.6/dist/carto-vl.min.js\");\n c.setDefaultAuth({\n username: cartoUser,\n apiKey: cartoApiKey\n });\n return c;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.12.0\");\n if (!gl.accessToken) {\n gl.accessToken =\n 'pk.eyJ1IjoiY2hlbnJpY2siLCJhIjoiLVhZMUZZZyJ9.HcNi26J3P-MiOmBKYHIbxw';\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"mapboxglCSS = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"import { checkbox, radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"