2c:null 2d:["$","title",null,{"children":"Mapbox - Data Driven Styling of Circles | Rob | Labs | Observable"}] 32:T7ba,md`# Mapbox - Data Driven Styling of Circles Using Mapbox GL Expressions to style circle radius and color. ## Notes & Links * https://www.mapbox.com/help/mapbox-gl-js-expressions/ * GeoJSON data is randomly placed in (long, lat) with random data, \`circle-data\`, in the range (0, 100). See https://www.npmjs.com/package/geojson-random. ## Color Ramps * http://colorbrewer2.org/#type=sequential&scheme=Reds&n=9 > which generated the ramp \`\`\` json ['#fff5f0','#fee0d2','#fcbba1','#fc9272','#fb6a4a','#ef3b2c','#cb181d','#a50f15','#67000d'] \`\`\` > which is then used in the Mapbox function method \`\`\` "circle-color": { "property": "circle-data", "stops": [ [10, "#fff5f0"], [20, "#fee0d2"], [30, "#fcbba1"], [40, "#fc9272"], [50, "#fb6a4a"], [60, "#ef3b2c"], [70, "#cb181d"], [80, "#a50f15"], [90, "#67000d"] ] } \`\`\` Future Research * https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-interpolate-hcl > Interpolation is performed in the Hue-Chroma-Luminance color space. * https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-interpolate-lab > Interpolation is performed in the CIELAB color space. `33:T914,centerpoint = { // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container: mapContainer, center: [0, 0], zoom: 0, style: "https://demotiles.maplibre.org/style.json" }); map.on("click", "fire", function (e) { console.log(e.features[0].properties); new mapboxgl.Popup() .setLngLat(e.lngLat) .setHTML(e.features[0].properties.name) .addTo(map); }); map.addControl(new mapboxgl.NavigationControl()); map.addControl(new mapboxgl.FullscreenControl()); var colorRampCB2 = { "property": "circle-data", "stops": [ [10, "#fff5f0"], [20, "#fee0d2"], [30, "#fcbba1"], [40, "#fc9272"], [50, "#fb6a4a"], [60, "#ef3b2c"], [70, "#cb181d"], [80, "#a50f15"], [90, "#67000d"] ] } var colorRampLAB = ["interpolate-lab", ["linear"], ["get", "circle-data"], 10, "white", 100, "blue" ] var colorRampHCL = ["interpolate-hcl", ["linear"], ["get", "circle-data"], 10, "white", 100, "blue" ] // set color ramp based on input var colorramp = colorRampCB2 switch (dd) { case 'cb2': colorramp = colorRampCB2 break; case 'lab': colorramp = colorRampLAB break; case 'hcl': colorramp = colorRampHCL break; // default: // console.log('Sorry, we are out of ' + expr + '.'); } map.on("load", function () { console.log(dd) map.addLayer({ "id": "circle-id", "type": "circle", "source": { "type": "geojson", "data": randomCircleData }, "paint": { "circle-radius": [ "/", ["get", "circle-data"], 2], "circle-opacity": 0.8, "circle-color": colorramp } }); }); return Generators.observe(change => { map.on("mousemove", e => { change(e.lngLat); }); }); }34:T956,randomCircleData = { return {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[36.214609,24.400504]},"properties":{"circle-data":96}},{"type":"Feature","geometry":{"type":"Point","coordinates":[6.571283,-89.566305]},"properties":{"circle-data":23}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2.150509,58.137608]},"properties":{"circle-data":50}},{"type":"Feature","geometry":{"type":"Point","coordinates":[100.630211,64.643565]},"properties":{"circle-data":99}},{"type":"Feature","geometry":{"type":"Point","coordinates":[164.248507,19.07508]},"properties":{"circle-data":43}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-97.692543,42.080184]},"properties":{"circle-data":73}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-81.824347,-42.513566]},"properties":{"circle-data":83}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-13.275121,65.178593]},"properties":{"circle-data":2}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.405624,33.858736]},"properties":{"circle-data":23}},{"type":"Feature","geometry":{"type":"Point","coordinates":[67.706301,-11.455498]},"properties":{"circle-data":71}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-13.689622,69.785563]},"properties":{"circle-data":64}},{"type":"Feature","geometry":{"type":"Point","coordinates":[179.537137,-61.464481]},"properties":{"circle-data":76}},{"type":"Feature","geometry":{"type":"Point","coordinates":[54.592453,55.392963]},"properties":{"circle-data":14}},{"type":"Feature","geometry":{"type":"Point","coordinates":[149.602349,51.658245]},"properties":{"circle-data":50}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-63.29626,-50.844373]},"properties":{"circle-data":37}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-131.672586,-15.3948]},"properties":{"circle-data":12}},{"type":"Feature","geometry":{"type":"Point","coordinates":[47.538539,22.188638]},"properties":{"circle-data":42}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-94.725219,-65.490414]},"properties":{"circle-data":52}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-21.836629,52.990272]},"properties":{"circle-data":74}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-77.387943,-16.329055]},"properties":{"circle-data":6}}]} }35:[] 30:{"id":"0717a6d799e1187d","slug":"mapbox-data-driven-styling-of-circles","title":"Mapbox - Data Driven Styling of Circles","thumbnail":"f3a1ddeceee3d61896ac875f289e6cf978e0f2ce9ac55ac813d120bd1e94149d","access_level":"public","create_time":"$D2018-09-21T00:24:27.602Z","update_time":"$D2022-10-02T19:52:52.809Z","view_time":null,"first_public_time":"$D2018-09-21T01:28:15.942Z","has_unpublished_edits":null,"fork":{"id":"4e774b8d2ea30816","slug":"mapbox-empty-style","title":"Mapbox - Empty style","owner":{"id":"4fb28e57b1ee7ad7","login":"roblabs","name":"Rob | Labs"}},"stars":3,"starred":false,"owner":{"type":"team","id":"4fb28e57b1ee7ad7","login":"roblabs","name":"Rob | Labs","avatar_url":"https://avatars-next.observableusercontent.com/a46c63fe02259f75113a4e65721ca91dcd78e54ad768500cc6c0975a9fe307a2","tier":"starter_2024"},"version":184,"publish_version":184,"role":null,"authored":false,"authors":[{"type":"individual","id":"979e07e6bb09b05a","login":"roblabs","name":"Rob | Labs","avatar_url":"https://avatars-next.observableusercontent.com/a46c63fe02259f75113a4e65721ca91dcd78e54ad768500cc6c0975a9fe307a2","tier":null}],"members":[{"type":"individual","id":"979e07e6bb09b05a","login":"roblabs","name":"Rob | Labs","avatar_url":"https://avatars-next.observableusercontent.com/a46c63fe02259f75113a4e65721ca91dcd78e54ad768500cc6c0975a9fe307a2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mapbox - Data Driven Styling of Circles","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"\n // [\"\", \"\", \"\"]\nviewof dd = {\n const colorRamp = select({\n title: \"Pick your Color Ramp\",\n options: [\n { label: \"ColorBrewer2.org - red hue\", value: \"cb2\" },\n { label: \"Mapbox interpolate-lab - white to blue\", value: \"lab\" },\n { label: \"Mapbox interpolate-hcl - white to blue\", value: \"hcl\" }\n ],\n value: \"hmmm\"\n });\n return colorRamp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"mapContainer = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"md`\n### Mapbox JS API\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.49.0');\n\n // mapboxgl.accessToken = '';\n return mapboxgl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`\n### Mapbox CSS\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"md`---\n### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"import {blankStyle} from \"@roblabs/mapbox-empty-style\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"// Test for import\n// import {nullIsland, nullIslandGrid, blankStyle} from \"@roblabs/mapbox-empty-style\"\n// nullIsland\n// nullIslandGrid\nblankStyle\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`---\n## Dropdown Menus and Multiselects\n\n\\`import {select} from \"@jashkenas/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"