2c:null 2d:["$","title",null,{"children":"Using Vector Tiles with MapLibre | Nicolas Lambert | Observable"}] 32:[{"id":"d5b1b85d3e3ac7ed8a08f92077a9c67ae277f97bc0ef9b739d89addb824aac08db36664172f5d87754b9b521f5709c47aa457c559f321704e20a9cf74adab5cf","href":"https://static.observableusercontent.com/files/d5b1b85d3e3ac7ed8a08f92077a9c67ae277f97bc0ef9b739d89addb824aac08db36664172f5d87754b9b521f5709c47aa457c559f321704e20a9cf74adab5cf","name":"paris.geojson","type":"application/geo+json","lastModified":1760022194526,"size":194788}] 30:{"id":"0172db1af8275f59","slug":"vector-tiles-with-maplibre","title":"Using Vector Tiles with MapLibre","thumbnail":"e333cd3c489783450798631ad0f1d5606a34081c830f0931042a7c66d588e0cd","access_level":"public","create_time":"$D2026-10-06T07:47:38.782Z","update_time":"$D2026-10-06T10:17:13.350Z","view_time":null,"first_public_time":"$D2026-10-06T10:05:26.622Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024","bio":"Front-end cartographer. Research Engineer in Geographic Information Science at CNRS & UAR RIATE. Author of Mad Maps (2019), Practical Handbook of Thematic Cartography (2016, 2020, 2025) and Cartographia (2025)."},"version":286,"publish_version":286,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"bio":"Front-end cartographer. Research Engineer in Geographic Information Science at CNRS & UAR RIATE. Author of Mad Maps (2019), Practical Handbook of Thematic Cartography (2016, 2020, 2025) and Cartographia (2025)."}],"members":[{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"f142dac3033cdfa9","slug":"geographic-libs","title":"Geographic libraries","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"titling":"auto","title":"Using Vector Tiles with MapLibre","cells":[{"id":1,"value":"# Using Vector Tiles with MapLibre","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"**Vector tiles** are a way of delivering geographic data over the web by dividing vector features into small tiles that can be downloaded and displayed dynamically. Unlike raster tiles, which are pre-rendered images, vector tiles contain the underlying geometries and attributes, allowing the client to style, filter, and interact with the data in real time. **MapLibre GL** is an open-source JavaScript library designed to display interactive maps using vector tiles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"Let's import MapLibre GL","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import * as maplibregl from \"npm:maplibre-gl\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"const css = document.head.appendChild(Object.assign(document.createElement(\"link\"), {\n rel: \"stylesheet\",\n href: \"https://cdn.jsdelivr.net/npm/maplibre-gl/dist/maplibre-gl.css\"\n}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"Several providers offer vector tiles in different forms: open data, commercial services, or servers that can be self-hosted. Here, we use the vector tiles provided by the French National Geographic Institute (IGN).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"const styleUrl =\n \"https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json\";\nconst style = await d3.json(styleUrl);\ndisplay(style);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"The `standard.json` contains:\n\n- the data sources, with the URLs used to retrieve the .pbf vector tiles;\n- the names of the vector layers available in these tiles (bati_surf, routes, etc.);\n- the rendering rules: colors, line widths, opacities, zoom levels, etc.;\n- metadata: style name, attribution, version, and possibly a description, etc.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"Let’s display a first map of Paris and its suburbs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const container = display(html`

`);\nconst map = new maplibregl.Map({\n container,\n style: styleUrl,\n center: [2.35, 48.85],\n zoom: 10\n});\nmap.addControl(new maplibregl.NavigationControl());","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Since these are vector tiles, we don’t have to display everything. We can retrieve any layer we want. For example, here, we are displaying only the roads.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":" const routes = style.layers.filter((l) => l[\"source-layer\"] === \"routier_route\");\n const mapRoutes = new maplibregl.Map({\n container: display(html`

`),\n style: {\n version: 8,\n sources: style.sources,\n layers: [\n {id: \"fond\", type: \"background\", paint: {\"background-color\": \"#f4f1ea\"}},\n ...routes\n ]\n },\n center: [2.35, 48.855],\n zoom: 15\n });\n mapRoutes.addControl(new maplibregl.NavigationControl());;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"Or here, only the buildings.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":" const routes = style.layers.filter((l) => l[\"source-layer\"] === \"routier_route\");\n const mapRoutes = new maplibregl.Map({\n container: display(html`

`),\n style: {\n version: 8,\n sources: style.sources,\n layers: [\n {\n id: \"fond\",\n type: \"background\",\n paint: { \"background-color\": \"#f4f1ea\" },\n },\n {\n id: \"bati\",\n type: \"fill\",\n source: \"plan_ign\",\n \"source-layer\": \"bati_surf\",\n paint: {\n \"fill-color\": \"#c96\",\n \"fill-opacity\": 0.9,\n },\n },\n ],\n },\n center: [2.35, 48.855],\n zoom: 15\n });\n mapRoutes.addControl(new maplibregl.NavigationControl());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"We can also modify the style to add any other layer. Here, we add a GeoJSON layer below the roads showing the districts of Paris.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"const paris = FileAttachment(\"paris.geojson\").url()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"const stParis = structuredClone(style);\n\nstParis.sources.paris = {type: \"geojson\", data: paris};\nstParis.layers.splice(\n stParis.layers.findIndex((l) => l[\"source-layer\"] === \"routier_route\"),\n 0,\n {\n id: \"paris\",\n type: \"fill\",\n source: \"paris\",\n paint: {\"fill-color\": \"#e07b39\", \"fill-opacity\": 0.5}\n }\n);\n\nconst mapParis = new maplibregl.Map({\n container: display(html`

`),\n style: stParis,\n center: [2.34, 48.857],\n zoom: 11.5\n});\nmapParis.addControl(new maplibregl.NavigationControl());","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"This is really powerful. For example, we can tilt the map and display buildings in 3D, creating a much more immersive representation of the urban environment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"const style3d = structuredClone(style);\n\nconst building3d = {\n id: \"bati_surf-3d\",\n type: \"fill-extrusion\",\n source: \"plan_ign\",\n \"source-layer\": \"bati_surf\",\n paint: {\n \"fill-extrusion-color\": \"#d8cfc0\",\n \"fill-extrusion-height\": [\"coalesce\", [\"to-number\", [\"get\", \"hauteur\"], null], 12],\n \"fill-extrusion-base\": 0,\n \"fill-extrusion-opacity\": 0.9\n }\n};\n\nconst symbols = style3d.layers.filter((l) => l.type === \"symbol\");\nconst others = style3d.layers.filter((l) => l.type !== \"symbol\");\nstyle3d.layers = [...others, building3d, ...symbols];\n\nconst map3d = new maplibregl.Map({\n container: display(html`

`),\n style: style3d,\n center: [2.3376, 48.8606],\n zoom: 16,\n pitch: 60,\n bearing: -20,\n maxPitch: 85\n});\nmap3d.addControl(new maplibregl.NavigationControl({visualizePitch: true}));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"2"}} 31:"$30:body"