31:T1dac,roadsOnlyStyle = (background, roads) => { return { version: 8, name: "onlyroads", metadata: { "mapbox:autocomposite": false, "mapbox:type": "template", "maputnik:renderer": "mbgljs", "openmaptiles:version": "3.x", "openmaptiles:mapbox:owner": "openmaptiles", "openmaptiles:mapbox:source:url": "mapbox://openmaptiles.4qljc88t" }, center: [13.4154285697145, 52.523369340680944], zoom: 12.241790506353492, bearing: 0, pitch: 0, sources: { openmaptiles: { type: "vector", url: `https://maps.targomo.com/data/openmaptiles.json?key=${targomoKey()}` } }, glyphs: `https://maps.targomo.com/fonts/{fontstack}/{range}.pbf?key=${targomoKey()}`, layers: [ { id: "background", type: "background", paint: { "background-color": background } }, { id: "road_path", type: "line", source: "openmaptiles", "source-layer": "transportation", filter: [ "all", ["==", "$type", "LineString"], ["in", "class", "path", "track"] ], layout: { "line-cap": "square", "line-join": "bevel" }, paint: { "line-color": roads, "line-dasharray": [1, 1], "line-width": { base: 1.55, stops: [ [4, 0.25], [20, 10] ] } } }, { id: "road_minor", type: "line", source: "openmaptiles", "source-layer": "transportation", filter: [ "all", ["==", "$type", "LineString"], ["in", "class", "minor", "service"] ], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": roads, "line-width": { base: 1.55, stops: [ [4, 0.25], [20, 30] ] } } }, { id: "tunnel_minor", type: "line", source: "openmaptiles", "source-layer": "transportation", filter: [ "all", ["==", "$type", "LineString"], ["==", "brunnel", "tunnel"], ["==", "class", "minor_road"] ], layout: { "line-cap": "butt", "line-join": "miter" }, paint: { "line-color": roads, "line-width": { base: 1.55, stops: [ [4, 0.25], [20, 30] ] }, "line-dasharray": [0.36, 0.18] } }, { id: "tunnel_major", type: "line", source: "openmaptiles", "source-layer": "transportation", filter: [ "all", ["==", "$type", "LineString"], ["==", "brunnel", "tunnel"], ["in", "class", "primary", "secondary", "tertiary", "trunk"] ], layout: { "line-cap": "butt", "line-join": "miter" }, paint: { "line-color": roads, "line-width": { base: 1.4, stops: [ [6, 0.5], [20, 30] ] }, "line-dasharray": [0.28, 0.14] } }, { id: "road_trunk_primary", type: "line", source: "openmaptiles", "source-layer": "transportation", filter: [ "all", ["==", "$type", "LineString"], ["in", "class", "trunk", "primary"] ], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": roads, "line-width": { base: 1.4, stops: [ [6, 0.5], [20, 30] ] } } }, { id: "road_secondary_tertiary", type: "line", source: "openmaptiles", "source-layer": "transportation", filter: [ "all", ["==", "$type", "LineString"], ["in", "class", "secondary", "tertiary"] ], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": roads, "line-width": { base: 1.4, stops: [ [6, 0.5], [20, 20] ] } } }, { id: "road_major_motorway", type: "line", source: "openmaptiles", "source-layer": "transportation", filter: [ "all", ["==", "$type", "LineString"], ["==", "class", "motorway"] ], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": roads, "line-width": { base: 1.4, stops: [ [8, 1], [16, 10] ] }, "line-offset": 0 } }, { id: "bridge_minor case", type: "line", source: "openmaptiles", "source-layer": "transportation", filter: [ "all", ["==", "$type", "LineString"], ["==", "brunnel", "bridge"], ["==", "class", "minor_road"] ], layout: { "line-cap": "butt", "line-join": "miter" }, paint: { "line-color": roads, "line-width": { base: 1.6, stops: [ [12, 0.5], [20, 10] ] }, "line-gap-width": { base: 1.55, stops: [ [4, 0.25], [20, 30] ] } } }, { id: "bridge_major case", type: "line", source: "openmaptiles", "source-layer": "transportation", filter: [ "all", ["==", "$type", "LineString"], ["==", "brunnel", "bridge"], ["in", "class", "primary", "secondary", "tertiary", "trunk"] ], layout: { "line-cap": "butt", "line-join": "miter" }, paint: { "line-color": roads, "line-width": { base: 1.6, stops: [ [12, 0.5], [20, 10] ] }, "line-gap-width": { base: 1.55, stops: [ [4, 0.25], [20, 30] ] } } }, { id: "bridge_minor", type: "line", source: "openmaptiles", "source-layer": "transportation", filter: [ "all", ["==", "$type", "LineString"], ["==", "brunnel", "bridge"], ["==", "class", "minor_road"] ], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": roads, "line-width": { base: 1.55, stops: [ [4, 0.25], [20, 30] ] } } }, { id: "bridge_major", type: "line", source: "openmaptiles", "source-layer": "transportation", filter: [ "all", ["==", "$type", "LineString"], ["==", "brunnel", "bridge"], ["in", "class", "primary", "secondary", "tertiary", "trunk"] ], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": roads, "line-width": { base: 1.4, stops: [ [6, 0.5], [20, 30] ] } } } ], id: "roadsonly" }; }32:[] 2f:{"title":"Re-usable Targomo Resources","cells":[{"id":16,"value":"md`# Re-usable Targomo Resources\nThese contain API keys for demos. The keys will be changed periodically. Please get your own API key for Targomo's services [here](https://targomo.com/developers/pricing/), and your own MapTiler API key [here](https://www.maptiler.com/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"tgm = {\n let tgm = await require(\"@targomo/core\");\n await L;\n let tgmLeaflet = await require(\"@targomo/leaflet@0.1.1/targomo-leaflet-full.umd.min.js\");\n tgm.leaflet = tgmLeaflet;\n return tgm;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"tgmCore = require('@targomo/core')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"function tgmClient(endpoint, key = targomoKey()) {\n return new tgm.TargomoClient(endpoint, key);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"function tgmCoreClient(endpoint, key = targomoKey()) {\n return new tgmCore.TargomoClient(endpoint, key);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"COLOR_RANGE = [\n d3.rgb(26, 152, 80),\n d3.rgb(145, 207, 96),\n d3.rgb(217, 239, 139),\n d3.rgb(254, 224, 139),\n d3.rgb(252, 141, 89),\n d3.rgb(215, 48, 39)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":449,"value":"tgmColors = COLOR_RANGE.map((d) => d.toString())","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"tgmColorInterpolator = (max) => {\n return d3.scaleQuantize().domain([0, max]).range(tgmColors);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"tgmIntro = function(headline, serviceTitle, serviceLink) {\n const serviceText =\n serviceTitle && serviceLink\n ? `The [${serviceTitle}](${serviceLink}) overview page collects the available resources.`\n : '';\n return md`# ${headline}\n\n[Targomo](http://targomo.com/) is a Location Intelligence software company hailing from Berlin. We provide many powerful APIs for visualizing and analyzing location data - our first and most popular being our isochrone polygon API. You can check out our other services at our [developer center](https://targomo.com/developers/apis/). ${serviceText}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"tgmMultiIntro = function (headline, services) {\n const serviceLinks = services.map((s) => {\n const [serviceTitle, serviceLink] = s;\n return `${serviceTitle}`;\n });\n console.log(serviceLinks);\n const serviceTexts = `The ${serviceLinks.join(\n \" and \"\n )} overview pages collect the available resources.`;\n\n console.log(serviceTexts);\n\n return md`# ${headline}\n\n[Targomo](http://targomo.com/) is a Location Intelligence software company hailing from Berlin. We provide many powerful APIs for visualizing and analyzing location data - our first and most popular being our isochrone polygon API. You can check out our other services at our [developer center](https://targomo.com/developers/apis/). ${serviceTexts}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"attribution = `© Targomo © OpenStreetMap contributors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"simpleAttribution = `© Targomo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"function tileOptions() {\n return {\n tileSize: 512,\n zoomOffset: -1,\n minZoom: 1,\n attribution: attribution,\n crossOrigin: true\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"function targomoKey() {\n return \"C3ZL606Z00FWB6JJ00W0229241900\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"function tgmNotice(text) {\n const notice = html` ${text}. See plans for more details.`;\n return notice;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"function* tgmLoader(show, n, defaultText) {\n if (!show) return yield defaultText ? md`**${defaultText}**` : md``;\n while (true)\n yield md`_loading${'.'.repeat(Math.floor(((Date.now() / 500) % n) + 1))}_`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"function* datatable(data, options = {}) {\n options.height =\n options.height || `${Math.min(25 * (data.length + 1) + 15, 300)}px`;\n let container = html`

`;\n yield container;\n const tableRef = new Handsontable(container, {\n data,\n readOnly: true,\n colHeaders: Object.keys(data[0]),\n height: options.height || \"300px\",\n width: \"100%\",\n cells: options.cells,\n afterGetColHeader: options.afterGetColHeader,\n manualColumnResize: options.manualColumnResize,\n colWidths: options.colWidths,\n licenseKey: \"non-commercial-and-evaluation\"\n });\n invalidation.then(() => tableRef.remove());\n yield container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"tableStyle = {\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"Handsontable = {\n const styles = html``;\n document.head.appendChild(styles);\n return require(\"handsontable\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"import { teaserList } from \"@mootari/notebook-teasers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"divingDeeper(\n [\n {\n slug: \"custom-colors-with-isochrone-polygons\",\n thumbnail:\n \"bf9bbfeed7c76485ec7aff985a3c22f82189a3bec13011d7f4fef827417fca38\",\n title: \"Custom Colors with Isochrone Polygons\",\n update_time: \"2022-04-21T12:54:41.424Z\",\n likes: 0,\n owner: {\n name: \"Targomo\",\n login: \"targomo\",\n avatar_url:\n \"https://avatars.observableusercontent.com/avatar/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf\"\n }\n }\n ],\n \"Let' see some more stuff about isochrones\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"divingDeeper = (extras, subtitle) => {\n return md`
\n ## Diving Even Deeper\n ${\n subtitle ||\n \"Here are some more specific explorations into applications of the Places API\"\n }\n \n ${teaserList(extras)}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"resourcesSpacer = 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":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"`tacos`","pinned":false,"hidden":false,"mode":"md"},{"id":348,"value":"codeStyle = {\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}