31:T494,isochroneMap = { apiKey; const container = html`

`; yield container; let originMarker = null; let pos = { lat: 40.1177, lng: -83.1265 }; const nbmap = (container.value = new nextbillion.maps.Map({ container: document.getElementById("nbmap"), center: pos, zoom: 9, maxZoom: 15, minZoom: 5, style: "https://api.nextbillion.io/maps/streets/style.json", scrollZoom: true })); document.getElementById("clearMap").onclick = function () { clearMap(nbmap, originMarker); originMarker = null; }; // click on map actions - create origin nbmap.map.on("click", (e) => { if (!originMarker) { originMarker = new nextbillion.maps.Marker({ color: "green", draggable: true, scale: 0.8 }) .setLngLat({ lat: e.lngLat.lat, lng: e.lngLat.lng }) .addTo(nbmap.map); originMarker.on("dragend", (e) => { isochroneMe(nbmap, originMarker); }); } if (originMarker) { isochroneMe(nbmap, originMarker); } }); }32:T54b,async function isochroneMe(nbmap, origin) { let resp = fetch( `https://api.nextbillion.io/isochrone/json?key=${apiKey}&mode=${ panel.routeStyles.value }&coordinates=${origin.getLngLat().lat},${ origin.getLngLat().lng }&context=inrix&denoise=1&generalize=25&contours_colors=ad6800&contours_minutes=${ panel.driveTime1 },${panel.driveTime2},${panel.driveTime3}&departure_time=${ Date.parse(panel.departureTime) / 1000 }` ) .then((response) => response.json()) .then((response) => { mutable fences = response; response.features.forEach((ft, idx) => { // convert LineString that is returned to a polygon so we can 'fill' let isopoly = turf.lineToPolygon(ft.geometry); response.features[idx] = isopoly; }); if (!nbmap.map.getSource("isochrone")) { nbmap.map.addSource("isochrone", { type: "geojson", data: null }); } nbmap.map.getSource("isochrone").setData(response); if (nbmap.map.getLayer("isochrone")) { nbmap.map.removeLayer("isochrone"); } nbmap.map.addLayer({ id: "isochrone", type: "fill", source: "isochrone", layout: {}, paint: { "fill-color": panel.fillColor, "fill-opacity": 0.5 } }); }); }33:T4aa,params = { let newBase = new Date(new Date().getTime() + 86400 * 1000); const inputs = { city: Inputs.select(cities, { label: "Select city", format: (x) => x.name, value: cities.find((t) => t.name === "New York") }), styles: Inputs.select(styles, { label: "Map Style", format: (x) => x.name, value: styles.find((t) => t.name === "Day") }), routeStyles: Inputs.select(routeStyles, { label: "Route Style", format: (x) => x.name, value: routeStyles.find((t) => t.name === "Auto") }), departureTime: Inputs.datetime({ label: "Departure Time", value: newBase.toISOString().slice(0, -1) }), driveTime1: Inputs.range([5, 40], { label: "Drive Time 1", step: 5, placeholder: "5-40", value: 15 }), driveTime2: Inputs.range([5, 40], { label: "Drive Time 2", step: 5, placeholder: "5-40", value: 30 }), driveTime3: Inputs.range([5, 40], { label: "Drive Time 3", step: 5, placeholder: "5-40", value: 40 }), fillColor: Inputs.color({ label: "Isochrone Palette", value: "#c34b18" }) }; return inputs; }34:[] 2f:{"title":"Isochrone Generation - API","cells":[{"id":0,"value":"# [Isochrone Generation - API](https://docs.nextbillion.ai)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"viewof apiKey = secret2(\"apiKey\", {\n title: \"NextBillion.ai API Key\",\n submit: \"Set\",\n description:\n \"Contact support@nextbillion.ai to get your API key\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"{\n nextbillion.setApiKey(apiKey);\n return html`Set API key
nextbillion.setApiKey(${apiKey.substr(\n 0,\n 4\n )}....)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"html`Add the stylesheet for the NB.ai SDK
<link href=\"https://maps-gl.nextbillion.io/maps/v2/api/css\" rel=\"stylesheet\">`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":14,"value":"viewof panel = Inputs.form(params, {\n template: (v) => htl.html`\n

\n ${v.styles}\n ${v.city}\n ${v.routeStyles}\n ${v.departureTime}\n ${v.driveTime1}\n ${v.driveTime2}\n ${v.driveTime3}\n ${v.fillColor}\n

\n`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"

Click on map to select point to set origin position. Three drive time isochrones will render from the selected point. You can also move the point to a new location to get an updated set of isochrones from the new location.

","pinned":false,"hidden":false,"mode":"html"},{"id":40,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"inputData_a","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"mutable fences = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"cities","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {\n secret2,\n nextbillion,\n cities,\n styles,\n routeStyles\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"mutable inputData_a = Object({\n city: {\n name: \"New York\",\n centroid: \"40.717602548458224,-74.05982864151417\",\n value: \"newyork\"\n },\n styles: {\n name: \"Day\",\n value: \"https://api.nextbillion.io/maps/streets/style.json\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"async function clearMap(nbmap, origin) {\n if (nbmap.map.getLayer(\"isochrone\")) {\n nbmap.map.removeLayer(\"isochrone\");\n }\n if (origin) {\n origin.remove();\n }\n const popups = [...document.getElementsByClassName(\"mapboxgl-popup\")];\n popups.forEach((pu) => {\n pu.remove();\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"turf = {\n let turf = await require(\"https://unpkg.com/@turf/turf/turf.min.js\");\n return turf;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"styling = html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}