30:Tb4f,viewof map = { let container = html`

`; // Give the container dimensions. yield container; // Create the "map" object with the maplibre.Map constructor, referencing // the container div const mapRef = (container.value = new maplibre.Map({ container, center: { lat: view.center[0], lng: view.center[1] }, zoom: view.zoom, pitch: view.pitch, style: view.basemap, attributionControl: true })); await new Promise((resolve, reject) => { mapRef.on("load", async () => { mapRef.addSource("jazz_targets", { type: "geojson", data: jazz_venues }); mapRef.addLayer({ id: "jazz_targetsLayer", type: "circle", source: "jazz_targets", paint: { "circle-radius": 7, "circle-color": "blue", "circle-stroke-color": "white", "circle-stroke-width": 3 } }); mapRef.addSource("jazz_routes", { type: "geojson", data: turf.featureCollection([]), attribution: '© Targomo' }); mapRef.addLayer( { id: "jazz_routesLayer", type: "line", source: "jazz_routes", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "blue", "line-width": 5 }, filter: ["==", "$type", "LineString"] }, "jazz_targetsLayer" ); mapRef.addSource("edm_targets", { type: "geojson", data: edm_venues }); mapRef.addLayer({ id: "edm_targetsLayer", type: "circle", source: "edm_targets", paint: { "circle-radius": 7, "circle-color": "red", "circle-stroke-color": "white", "circle-stroke-width": 3 } }); mapRef.addSource("edm_routes", { type: "geojson", data: turf.featureCollection([]), attribution: '© Targomo' }); mapRef.addLayer( { id: "edm_routesLayer", type: "line", source: "edm_routes", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "red", "line-width": 5 }, filter: ["==", "$type", "LineString"] }, "edm_targetsLayer" ); resolve(); }); }); // Create a popup, but don't add it to the map yet. var popup = new maplibre.Popup({ closeButton: false, closeOnClick: false }); invalidation.then(() => mapRef.remove()); yield container; }31:[{"id":"7ed9f2e9981abe4260769f6be15f8e5c764e834e053de92abfdb2ef5a3749d526670bb477730fb7b88bfafef083b8b9918d271a15a3bd7aa96441bcd9eb760ae","href":"https://static.observableusercontent.com/files/7ed9f2e9981abe4260769f6be15f8e5c764e834e053de92abfdb2ef5a3749d526670bb477730fb7b88bfafef083b8b9918d271a15a3bd7aa96441bcd9eb760ae","name":"musicvenues@1.csv","type":"text/csv","lastModified":1669391557277.738,"size":1820}] 2e:{"title":"Music Journeys","cells":[{"id":0,"value":"# Music Journeys\n\n2 friends (Miles and Martin) just arrived at Berlin Hauptbahnhof. They have the evening to spend in Berlin._UNFORTUNATELY_, they don't like the same style of music at all! Miles is a Jazz cat, and Martin only listens to EDM/House!\n\nThey are OK with solo clubbing - so let's see if we can get them each to the top clubs of their genre. They rented bicycles, so we'll find the best bike route to visit their respective clubs. We're using Targomo's [Fleet API](https://www.targomo.com/developers/apis/fleet/) to calculate the optimized routes.","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"

Jazz Clubs

EDM Clubs

","pinned":false,"hidden":false,"mode":"html"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"{\n const marker = new maplibre.Marker();\n marker.setLngLat([13.369369, 52.52509]).addTo(map);\n\n const jazzConfig = routingConfig(marker.getLngLat(), jazz_venues);\n const edmConfig = routingConfig(marker.getLngLat(), edm_venues);\n\n const url = `https://api.targomo.com/fleetplanner/v1/api/key-auth/optimizations?key=${targomoKey()}`;\n\n const jazz_route = await fetch(url, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(jazzConfig)\n }).then((response) => response.json());\n\n map.getSource(\"jazz_routes\").setData(jazz_route.tours[0].featureCollection);\n\n const edm_route = await fetch(url, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(edmConfig)\n }).then((response) => response.json());\n\n console.log(edm_route, jazz_route);\n\n map.getSource(\"edm_routes\").setData(edm_route.tours[0].featureCollection);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"view = ({\n name: \"Berlin\",\n center: [52.51, 13.4],\n zoom: 11.75,\n pitch: 0,\n basemap: tgmCoreClient(\"westcentraleurope\").basemaps.getGLStyleURL(\"Light\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"edm_venues = turf.featureCollection(\n musicvenues\n .filter((d) => d[\"Music\"] === \"Electronic Music\")\n .map((d) => {\n return turf.point([d.lon, d.lat], {\n name: d[\"Club name\"]\n });\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"jazz_venues = turf.featureCollection(\n musicvenues\n .filter((d) => d[\"Music\"] === \"Jazz\" && d.lat < 52.6)\n .map((d) => {\n return turf.point([d.lon, d.lat], {\n name: d[\"Club name\"]\n });\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"musicvenues = await FileAttachment(\"musicvenues@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"function routingConfig(sourceLngLat, targets) {\n return {\n optimizationAlgorithm: \"CONSTRAINT_SATISFACTION\",\n stores: [\n {\n uuid: \"depot1\",\n address: sourceLngLat\n }\n ],\n orders: targets.features.map((f) => {\n return {\n uuid: f.properties.id,\n storeUuid: \"depot1\",\n address: {\n lat: f.geometry.coordinates[1],\n lng: f.geometry.coordinates[0],\n avgHandlingTime: 250\n }\n };\n }),\n transports: [\n {\n vehicle: {\n uuid: \"v1\",\n storeUuid: \"depot1\"\n },\n metadata: {\n end: sourceLngLat\n }\n }\n ],\n optimizationMetadata: {\n geojsonCreation: \"ROUTING_SERVICE\",\n travelOptions: {\n travelType: \"bike\",\n maxEdgeWeight: 7200,\n serviceUrl: \"https://api.targomo.com/westcentraleurope/\",\n serviceKey: targomoKey()\n }\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"maplibre = {\n const gl = await require(\"maplibre-gl@2.4.0\");\n const href = await require.resolve(\"maplibre-gl@2.4.0/dist/maplibre-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {\n tgmCoreClient,\n tgmNotice,\n targomoKey,\n tgmIntro,\n codeStyle\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}