2e:null 2f:["$","title",null,{"children":"Custom Colors with Isochrone Polygons | Targomo | Observable"}] 34:[] 32:{"id":"db2d8092950a3a17","slug":"custom-colors-with-isochrone-polygons","title":"Custom Colors with Isochrone Polygons","thumbnail":"bf9bbfeed7c76485ec7aff985a3c22f82189a3bec13011d7f4fef827417fca38","access_level":"public","create_time":"$D2021-06-28T15:25:07.625Z","update_time":"$D2023-01-24T10:53:48.049Z","view_time":null,"first_public_time":"$D2021-06-28T18:34:39.289Z","has_unpublished_edits":null,"fork":{"id":"5d1d736a10a7f709","slug":"deep-dive-on-isochrone-polygons","title":"Deep Dive on Isochrone Polygons","owner":{"id":"b873ed05f5a7d959","login":"targomo","name":"Targomo"}},"stars":1,"starred":false,"owner":{"type":"team","id":"b873ed05f5a7d959","login":"targomo","name":"Targomo","avatar_url":"https://avatars-next.observableusercontent.com/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf","tier":"starter_2024"},"version":1242,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a217b68901b4272f","login":"targomo","name":"Targomo","avatar_url":"https://avatars-next.observableusercontent.com/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf","tier":null},{"type":"individual","id":"59ca7144f8ccf1d1","login":"abenrob","name":"Adam Roberts","avatar_url":"https://avatars-next.observableusercontent.com/35b4f71c800d4e6c9e2cfa93d55a4f89515f41428620d3050060df33504db2e1","tier":null}],"members":[{"type":"individual","id":"a217b68901b4272f","login":"targomo","name":"Targomo","avatar_url":"https://avatars-next.observableusercontent.com/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"86da3780f1d0f8ca","slug":"topic-tutorials","title":"Topic Tutorials","owner":{"id":"b873ed05f5a7d959","login":"targomo","name":"Targomo"}},"type":"notebook","body":{"title":"Custom Colors with Isochrone Polygons","cells":[{"id":0,"value":"tgmIntro(\n \"Custom Colors with Isochrone Polygons\",\n \"Isochrone API\",\n \"https://www.targomo.com/developers/apis/isochrone/\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`## Basic Leaflet Polygons - Standard Colors\n\nHere's a Leaflet map with our basic isochrone polygons.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":855,"value":"tgmLoader(loaderBasic, 5, `5 - 30 minutes of travel by bike, standard colors`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"map = {\n mutable loaderBasic = true;\n let container = DOM.element(\"div\", {\n style: `width:${width}px;height:${width / 1.6}px`\n });\n // allow for correct sizing by yielding the container early\n yield container;\n\n // set the targomo client\n const client = tgmClient(\"britishisles\");\n\n // starting out with one source\n const source = sourcePoints[0];\n\n // set the map\n const map = L.map(container, {\n scrollWheelZoom: false,\n layers: [new tgm.leaflet.TgmLeafletTileLayer(client, \"Light\")]\n }).setView(source, 12);\n\n // add our starting point\n L.marker(source).addTo(map);\n\n // define the polygon overlay\n const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({\n strokeWidth: 20\n });\n polygonOverlayLayer.addTo(map);\n\n // get the polygons\n const polygons = await client.polygons.fetch(\n [source],\n travelOptions.set(\"bike\", travelTimes)\n );\n polygonOverlayLayer.setData(polygons);\n mutable loaderBasic = false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"md`## These colors are built into the library, defaulting to 6 classes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"defaultColors = ({\n 300: '#006837',\n 600: '#39B54A',\n 900: '#8CC63F',\n 1200: '#F7931E',\n 1500: '#F15A24',\n 1800: '#C1272D'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"html`

\n ${Object.keys(defaultColors).map(\n key =>\n '

' +\n '

'\n )}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"md`## Changing the color scheme is a matter of defining a new color lookup\n## _Let's go with RAINBOWS!_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"rainbowColors = ({\n 300: \"#750787\",\n 600: \"#004DFF\",\n 900: \"#008026\",\n 1200: \"#FFED00\",\n 1500: \"#FF8C00\",\n 1800: \"#E40303\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"html`

\n ${Object.keys(rainbowColors).map(\n key =>\n '

' +\n '

'\n )}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"md`\n\\`\\`\\`js\n// define the polygon overlay\nconst polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({\n strokeWidth: 20,\n colors: {\n 300: \"#750787\", 600: \"#004DFF\",\n 900: \"#008026\", 1200: \"#FFED00\",\n 1500: \"#FF8C00\", 1800: \"#E40303\"\n }\n});\npolygonOverlayLayer.addTo(map);\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"value":"tgmLoader(\n loaderColorSeries,\n 5,\n `5 - 30 minutes of travel by bike, _RAINBOW_ colors`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"rainbowMap = {\n mutable loaderRainbow = true;\n let container = DOM.element(\"div\", {\n style: `width:${width}px;height:${width / 1.6}px`\n });\n // allow for correct sizing by yielding the container early\n yield container;\n\n // set the targomo client\n const client = tgmClient(\"britishisles\");\n\n // starting out with one source\n const source = sourcePoints[0];\n\n // set the map\n const map = L.map(container, {\n scrollWheelZoom: false,\n layers: [new tgm.leaflet.TgmLeafletTileLayer(client, \"Light\")]\n }).setView(source, 12);\n\n // add our starting point\n L.marker(source).addTo(map);\n\n // define the polygon overlay\n const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({\n strokeWidth: 20,\n colors: rainbowColors\n });\n\n polygonOverlayLayer.addTo(map);\n // get the polygons\n const polygons = await client.polygons.fetch(\n [source],\n travelOptions.set(\"bike\", travelTimes)\n );\n\n polygonOverlayLayer.setData(polygons);\n mutable loaderRainbow = false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1147,"value":"md`## Let's grab a bunch of [color brewer scales](https://colorbrewer2.org)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"colorScales = ({\n rdYlBl: [\n '#d73027',\n '#fc8d59',\n '#fee090',\n '#e0f3f8',\n '#91bfdb',\n '#4575b4'\n ].reverse(),\n rdYlGr: [\n '#d73027',\n '#fc8d59',\n '#fee08b',\n '#d9ef8b',\n '#91cf60',\n '#1a9850'\n ].reverse(),\n pkPl: ['#feebe2', '#fcc5c0', '#fa9fb5', '#f768a1', '#c51b8a', '#7a0177'],\n ylBl: ['#ffffcc', '#c7e9b4', '#7fcdbb', '#41b6c4', '#2c7fb8', '#253494'],\n grays: ['#f7f7f7', '#d9d9d9', '#bdbdbd', '#969696', '#636363', '#252525'],\n purples: ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f']\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1154,"value":"function parseColors() {\n return colorScales[colorLookup].reduce((acc, cur, i) => {\n acc[(i + 1) * 300] = cur;\n return {\n ...acc\n };\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"viewof colorLookup = Inputs.select(Object.keys(colorScales), {\n label: \"Color Brewer Scale\",\n value: \"rdYlBl\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"html`

\n ${colorScales[colorLookup].map(\n color =>\n '

' +\n '

'\n )}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"colorsMap = {\n mutable loaderColorSeries = true;\n let container = DOM.element(\"div\", {\n style: `width:${width}px;height:${width / 1.6}px`\n });\n // allow for correct sizing by yielding the container early\n yield container;\n\n // set the targomo client\n const client = tgmClient(\"britishisles\");\n\n // starting out with one source\n const source = sourcePoints[0];\n\n // set the map\n const map = L.map(container, {\n scrollWheelZoom: false,\n layers: [new tgm.leaflet.TgmLeafletTileLayer(client, \"Light\")]\n }).setView(source, 12);\n\n // add our starting point\n L.marker(source).addTo(map);\n\n // define the polygon overlay\n const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({\n strokeWidth: 20,\n colors: parseColors()\n });\n polygonOverlayLayer.addTo(map);\n // get the polygons\n const polygons = await client.polygons.fetch(\n [source],\n travelOptions.set(\"bike\", travelTimes)\n );\n polygonOverlayLayer.setData(polygons);\n mutable loaderColorSeries = false;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"md`

\n## General utilities used for the examples\n\nMost of what you'll find here is similar to how you'd do it outside of [observable](https://observablehq.com), but there are several differences... Refer to our [developer resources](https://targomo.com/developers/documentation/javascript/) for a more direct path!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.6.0\");\n const href = await require.resolve(\"mapbox-gl@1.6.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"sourcePoints = { \n return [\n { id: 0, lat: 51.5133, lng: -0.1582 },\n { id: 1, lat: 51.5096, lng: -0.1973 }\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"travelTimes = [300, 600, 900, 1200, 1500, 1800]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"travelOptions = {\n return {\n set: (mode, edgeWeights, intersection_mode) => {\n const iMode = intersection_mode? intersection_mode : 'union'\n return {\n travelType: mode,\n travelEdgeWeights: edgeWeights,\n maxEdgeWeight: Math.max(...edgeWeights),\n edgeWeight: 'time',\n serializer: 'json',\n intersectionMode: iMode\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"md`Loader refs:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"mutable loaderBasic = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"mutable loaderRainbow = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"mutable loaderColorSeries = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"md`__Get re-usable targomo elements__`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"import {\n tgm,\n tgmClient,\n tileOptions,\n maptilerKey,\n tgmNotice,\n attribution,\n tgmLoader,\n tgmIntro\n} from '@targomo/re-usable-targomo-resources'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"md`Make sure you get your _own_ API key!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"