30:T9fc,// 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.darkmatter // use Carto's dark matter basemap }); // sets up the zoom & pitch controls map.addControl(new mapboxgl.NavigationControl()); // points to a dataset on my carto account const source = new carto.source.SQL(query, { apiKey: cartoApiKey, username: cartoUser }); // creates the vis object which allows for data styling const viz = new carto.Viz(visStyles); // the layer is added to the map to render the data overlay const layer = new carto.Layer('counties', source, 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(() => map.remove()); container.value = { map, layer, viz }; return container; }31:[] 2e:{"title":"Hello, CARTO-VL","cells":[{"id":0,"value":"md`# Hello, CARTO-VL\n\nA demonstration of making an interactive web map using [CARTO-VL](https://carto.com/developers/carto-vl/) with [MapBoxGL-JS](https://docs.mapbox.com/mapbox-gl-js/api/). 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\nAlso see a follow up notebook, [Updating the Vis Layer in CARTO-VL](https://observablehq.com/@clhenrick/carto-vl-update-vis-layer).\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":245,"value":"mutable layerUpdate = \"none\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"mutable layerLoaded = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"md`Side effect that handles toggling the map's scrollZoomHandler.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"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"},{"id":135,"value":"md`The database table in the \\`${cartoUser}\\` CARTO account used by the data overlay in the map is called \\`${cartoTable}\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"cartoTable = \"us_internet_access_by_county\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`The SQL query used to load the data source. Instead of using SQL, we could specify the table name if we want access to all columns and rows by doing: \n\n~~~js\nnew carto.source.Dataset(\"${cartoTable}\")\n~~~\n\nIn 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"},{"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"},{"id":131,"value":"md`The style declaration for our map's data overlay. Note 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"},{"id":102,"value":"visStyles = `\n @currentFeatures: viewportCount()\n @name: $name\n @pctWithoutInternet: $pct_without_internet\n color: ramp($pct_without_internet, [midnightblue, deeppink, gold])\n strokeWidth: 0\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"md`The data overlay's popup HTML & CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"getPopupHtml = (name, value) => `\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`CARTO credentials. Not sure what the limits of the \\`${cartoApiKey}\\` API key are TBH.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"cartoApiKey = \"default_public\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"cartoUser = \"henrick2\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":41,"value":"mapboxglCSS = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}