3e:null 3f:["$","title",null,{"children":"Hello MapLibre | Dakota Sexton | Observable"}] 45:[] 43:{"id":"2990159ecf3db82d","slug":null,"title":"Hello MapLibre","thumbnail":"48e83d9ffc7cde5fd77fbab30b3a0ed7465b34e1e3c0fdff9face71956eb9369","access_level":"public","create_time":"$D2023-08-04T16:01:53.778Z","update_time":"$D2023-08-04T16:01:53.778Z","view_time":null,"first_public_time":"$D2023-08-04T16:01:53.778Z","has_unpublished_edits":null,"fork":{"id":"42df7f7d9c9d50c8","slug":"hello-maplibre","title":"Hello MapLibre","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"stars":0,"starred":false,"owner":{"type":"team","id":"18d7081107b59c45","login":"tinykite","name":"Dakota Sexton","avatar_url":"https://avatars-next.observableusercontent.com/63c5a6fbb6adf7745e0911664c8d38575c0865e8bed0e1864cde5a185141e0c4","tier":"starter_2024","bio":"Designer, writer, and developer exploring how to tell more engaging stories with interactive, data-driven experiences.","following":false},"version":971,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"428f131441cafcf0","login":"tinykite","name":"Dakota Sexton","avatar_url":"https://avatars-next.observableusercontent.com/63c5a6fbb6adf7745e0911664c8d38575c0865e8bed0e1864cde5a185141e0c4","tier":null,"bio":"Designer, writer, and developer exploring how to tell more engaging stories with interactive, data-driven experiences.","following":false}],"members":[{"type":"individual","id":"428f131441cafcf0","login":"tinykite","name":"Dakota Sexton","avatar_url":"https://avatars-next.observableusercontent.com/63c5a6fbb6adf7745e0911664c8d38575c0865e8bed0e1864cde5a185141e0c4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hello MapLibre","cells":[{"id":0,"value":"# Hello MapLibre","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"[MapLibre GL](https://maplibre.org/) is a community-led fork derived from mapbox-gl-js before their switch to a non-OSS license. Documentation available [here](https://maplibre.org/maplibre-gl-js-docs/api/). Examples available [there](https://maplibre.org/maplibre-gl-js-docs/example/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":419,"value":"To start, you just have to load the maplibre js library and a CSS file.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"maplibregl = require(\"maplibre-gl@2.1.9\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"## 1. Display a map (Paris, France)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"Paris = {\n const container = yield html`

`;\n const map = (container.value = new maplibregl.Map({\n //interactive: false,\n boxZoom: true,\n pitch: 0,\n bearing: 0,\n maplibreLogo: true,\n container,\n center: [2.3374205901589185, 48.8581402090239],\n zoom: 12,\n style: \"https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json\",\n scrollZoom: true\n }));\n\n map.addControl(new maplibregl.NavigationControl());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"## 2. Add a Marker","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"myOffice = [2.3829584757128286, 48.82680791172154]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"OdG = {\n const container = yield html`

`;\n const map = (container.value = new maplibregl.Map({\n container,\n center: myOffice,\n zoom: 16,\n style: \"https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json\",\n scrollZoom: true\n }));\n\n var marker = new maplibregl.Marker()\n .setLngLat(myOffice)\n .setPopup(\n new maplibregl.Popup({ closeButton: false }).setHTML(\n \"

Université Paris Cité

\"\n )\n )\n .addTo(map);\n\n //invalidation.then(() => map.remove());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"## 3. Add a geojson file (submarine cables)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"import { cables } from \"@neocartocnrs/gafam-et-cables-sous-marins\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"*NB: TeleGeography's submarine cable map is based on our authoritative Global Bandwidth research. The map depicts active and planned submarine cable systems, their landing stations, cable length, ready for service (RFS) date, owners, suppliers, and website. Visit https://www.submarinecablemap.com.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"{\n const container = html`

`;\n yield container;\n const map = (container.value = new maplibregl.Map({\n container,\n zoom: 2,\n style: \"https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json\",\n scrollZoom: true\n }));\n\n map.on(\"load\", function () {\n map.addSource(\"cables\", {\n type: \"geojson\",\n data: cables\n });\n map.addLayer({\n id: \"cables\",\n type: \"line\",\n source: \"cables\",\n layout: {\n \"line-join\": \"round\",\n \"line-cap\": \"round\"\n },\n paint: {\n \"line-color\": \"#8a1968\",\n \"line-width\": 1\n }\n });\n });\n\n //invalidation.then(() => map.remove());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"### Fly to...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":868,"value":"locations = [\n {\n id: \"World\",\n fly: { bearing: 0, pitch: 0, center: [-0.15591514, 51.51830379], zoom: 1.3 }\n },\n {\n id: \"Central Park\",\n fly: {\n bearing: 27.752687101447123,\n center: [-73.97207136663621, 40.773315076721644],\n zoom: 14.834319125281045,\n pitch: 60\n }\n },\n {\n id: \"Manhattan\",\n fly: {\n bearing: -129.84731289855284,\n center: [-73.972867598471, 40.781062781661205],\n zoom: 13.287537762737648,\n pitch: 60\n }\n },\n {\n id: \"University of Paris-Cité\",\n fly: {\n bearing: 54.74715438484645,\n center: [2.380411807598648, 48.829166649879625],\n zoom: 18.07357175851171,\n pitch: 60\n }\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"html`${select}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"world2 = {\n const container = html`

`;\n yield container;\n const map = (container.value = new maplibregl.Map({\n container,\n style:\n \"https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL\",\n center: locations[0].fly.center,\n zoom: locations[0].fly.zoom,\n bearing: locations[0].fly.bearing,\n pitch: locations[0].fly.pitch\n }));\n\n document.getElementById(\"loc-select\").addEventListener(\"change\", function () {\n map.flyTo(flybylocation.get(document.getElementById(\"loc-select\").value));\n });\n\n map.on(\"click\", function () {\n console.log({\n bearing: map.getBearing(),\n center: \"[\" + map.getCenter().lng + \",\" + map.getCenter().lat + \"]\",\n zoom: map.getZoom(),\n pitch: map.getPitch()\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"flybylocation = new Map(locations.map((d) => [d.id, d.fly]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"select = {\n let str = [\n `Fly to `);\n\n return str.join(\"\\n\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"