2b:null 2c:["$","title",null,{"children":"Vector Tiles Viewer (without cache) | Chris | Observable"}] 31:T58c,{ const input = html``; const button = html``; const updateActiveTileUrl = () => { const mask = mutable tileMask = (`${input.value}&t={${Date.now()}}` || ''); let value = ''; if (selectedTile) { const { x, y, z } = selectedTile; value = mask .replace('{x}', x) .replace('{y}', y) .replace('{z}', z); } mutable activeTileUrl = value; } button.addEventListener('click', updateActiveTileUrl); input.addEventListener('change', updateActiveTileUrl); updateActiveTileUrl(); const masks = ['https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key=KDhMfHvorAFkFe64wlZb']; function renderMask(mask) { const maskView = html`${mask}`; maskView.addEventListener('click', (ev) => { ev.preventDefault(); ev.stopPropagation(); mutable tileMask = mask; input.value = mask; }); return maskView; } return md`Please enter here an URL mask used to generate a Vector Tile URL: ${input} ${button} This URL is used to show the content of the corresponding tile. Coordinates of the tile to show you can define below by clicking on the map. Examples of the Tile URL Masks: ${masks.map(mask => md`* ${renderMask(mask)}`)} To apply an URL mask please click on the link above and push the "Load" button. ` }32:T7e6,function newTilesSelector({ container, onTileSelect = (()=>{}), ...mapConfig }) { const map = newLeafletMap(container, mapConfig); const MyGridLayer = L.GridLayer.extend({ _selectTile(info) { if (this._selection) { this._selection.remove(); this._selection = null; } info = info || this._selectedTileInfo; if (!info) return ; const { x, y, z } = info || {}; this._selectedTileInfo = { x, y, z }; const bounds = L.latLngBounds([ [ tileUtils.tile2lat(y, z), tileUtils.tile2long(x+1, z)], [ tileUtils.tile2lat(y+1, z), tileUtils.tile2long(x, z)] ]); this._selection = L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(this._map); }, getEvents: function (...args) { const events = L.GridLayer.prototype.getEvents.apply(this, args); return { ...events, click(e){ const size = this.getTileSize(); const map = this._map; const zoom = map.getZoom(); const pixelPoint = map.project(e.latlng, zoom).floor(); const coords = pixelPoint.unscaleBy(size).floor(); const tileInfo = { ...coords, z : zoom }; this._selectTile(tileInfo); this.fire('selecttile', tileInfo); } }; }, createTile: function(coords){ const zoom = map.getZoom(); const size = this.getTileSize(); const style = { width : `${size.x}px`, height : `${size.y}px`, // cursor: 'pointer !important', border : `2px solid rgba(255, 0, 0, 0.3)`, 'font-size' : '1.5em', } const tile = L.DomUtil.create('div'); for (const [key, value] of Object.entries(style)) { tile.style[key] = value; } tile.innerHTML = `[${zoom} : ${coords.x} : ${coords.y}]`; return tile; } }); const grid = new MyGridLayer({}); grid .addTo(map) .on('selecttile', ({x,y,z}) => onTileSelect({ x, y, z })) .bringToFront(); return map; }33:[{"id":"429ff1aa2483c58569c2a668d915394399f7cd10b4e49a965486092170cb87f320b7d9c7a53110fc35575c12d58578da58f0e73aceeb488e8ecb28e2f0ff9659","href":"https://static.observableusercontent.com/files/429ff1aa2483c58569c2a668d915394399f7cd10b4e49a965486092170cb87f320b7d9c7a53110fc35575c12d58578da58f0e73aceeb488e8ecb28e2f0ff9659","name":"tile-13-4153-2818.pbf","type":"application/octet-stream","lastModified":1765030859347.026,"size":80555}] 2f:{"id":"c8eb54831c0a81dd","slug":null,"title":"Vector Tiles Viewer (without cache)","thumbnail":"f1e2d200333eee388436af5b4db963af85b97fe75d97dfc7d2b4339265f0e25f","access_level":"public","create_time":"$D2025-12-06T14:20:59.347Z","update_time":"$D2026-06-15T10:45:37.760Z","view_time":null,"first_public_time":"$D2025-12-06T14:47:23.075Z","has_unpublished_edits":null,"fork":{"id":"53957fa6ce0ac39a","slug":"vector-tiles-viewer","title":"Vector Tiles Viewer","owner":{"id":"d4c65cdf77f8f4fd","login":"kotelnikov","name":"Mikhail Kotelnikov"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b3cbcf8cea7592d7","login":"chrstnbwnkl","name":"Chris","avatar_url":"https://avatars-next.observableusercontent.com/c78ca7d50d746a4e6b46bca4bfcfb94104fa40427f57416db9d2a19925d11e9e","tier":"starter_2024","bio":""},"version":1619,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d80c2781ca2cc46","login":"chrstnbwnkl","name":"Chris","avatar_url":"https://avatars-next.observableusercontent.com/a658e60d1a094188a4081d754368a023daa77ddf9ef81c9e933474fdff5424ad","tier":null,"bio":""}],"members":[{"type":"individual","id":"3d80c2781ca2cc46","login":"chrstnbwnkl","name":"Chris","avatar_url":"https://avatars-next.observableusercontent.com/a658e60d1a094188a4081d754368a023daa77ddf9ef81c9e933474fdff5424ad","tier":null,"role":"editor"},{"type":"team","id":"b3cbcf8cea7592d7","login":"chrstnbwnkl","name":"Chris","avatar_url":"https://avatars-next.observableusercontent.com/c78ca7d50d746a4e6b46bca4bfcfb94104fa40427f57416db9d2a19925d11e9e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vector Tiles Viewer (without cache)","cells":[{"id":0,"value":"md`# Vector Tiles Viewer (without cache)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"{\n let msg;\n if (!activeTileUrl) {\n msg = `No external tiles selected (no URL mask defined?). A tile attached to this page is visualized.`;\n } else {\n msg = `Tile URL: \"${activeTileUrl}\".`;\n }\n const tileCoords = ['z', 'x', 'y'].map(_=>selectedTile[_]).join('/');\n return md`\n**Information about the currently rendered tile** (${tileCoords}):\n* ${msg}\n* zoom: ${selectedTile.z}\n* x: ${selectedTile.x}\n* y: ${selectedTile.y}\n\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"{\n let blob;\n const tileUrl = activeTileUrl;\n if (tileUrl) {\n \n try {\n const resp = await fetch(tileUrl);\n blob = await resp.arrayBuffer();\n yield getMessage(`Tile \"${tileUrl}\" was successfully loaded`)\n } catch (err) {\n yield getMessage(`ERROR on loading tile \"${tileUrl}\" - ${err}`)\n }\n \n } else {\n yield getMessage(`Default tile is loaded from attachements`)\n }\n if (!blob) blob = FileAttachment(`tile-13-4153-2818.pbf`).arrayBuffer();\n mutable tileBlob = blob;\n\n function getMessage(msg) {\n return html`

${msg}

`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"viewof config = {\n const minSize = 256;\n const maxSize = width;\n const size = 512;\n const tileUrl = '';\n const sizeView = html`${size}`;\n const result = form(html``);\n result.addEventListener('input', (ev) => {\n const size = ev.target.value.viewSize;\n if (size) sizeView.innerText = size;\n })\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"{\n const size = config.viewSize;\n const context = DOM.context2d(size, size, 1);\n \n const tileSize = context.canvas.width * 0.75;\n const delta = (context.canvas.width - tileSize) / 2; \n\n context.clearRect(0, 0, context.canvas.width, context.canvas.height);\n context.strokeStyle = 'rgba(128, 128, 128, 0.5)';\n context.setLineDash([15, 5]);\n context.rect(delta, delta, tileSize, tileSize);\n context.stroke();\n context.setLineDash([]);\n \n \n const layerStyles = drawTile({\n tile : tileBlob,\n tileSize,\n layers, \n shiftX : delta,\n shiftY : delta\n }); \n const draw = (context, params) => layerStyles.forEach((s) => s.apply(context, params));\n \n {\n const start = Date.now();\n draw(context, {});\n const end = Date.now();\n console.log(`Draw on canvas: ${end - start}ms`);\n } \n return context.canvas;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1579,"value":"md`You can select a tile on the map. Coordinates of this tile will be applied to the URL mask and the corresponding vector tile will be loaded and shown above.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"viewof mapView={\n const container = html`

`;\n yield container;\n const map = newTilesSelector({\n ...mapConfig,\n container,\n onTileSelect : ({ x, y, z })=>{ mutable selectedTile = {x, y, z}; }\n });\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1576,"value":"mutable tileMask=''","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1556,"value":"mutable activeTileUrl = ''","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1553,"value":"mutable selectedTile=({ x : 0, y : 0, z : 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1595,"value":"md`Rendering styles applied to all geometries:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"layers=[{\n default : {\n lines : { strokeStyle : 'gray', lineWidth : 1, lineJoin : 'round', lineCap : 'round' },\n polygons : { strokeStyle : 'rgba(0,0,255,0.1)', fillStyle : 'rgba(0,0,255,0.1)', lineWidth : 1, lineJoin : 'round', lineCap : 'round' },\n points : { strokeStyle : 'red', fillStyle : 'rgba(255,0,0,0.3)', lineWidth : 1, radius : 5 },\n }\n}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"mutable tileBlob=FileAttachment(`tile-13-4153-2818.pbf`).arrayBuffer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"viewof clearCache=html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"md`## Utilities and External Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"mapConfig=({\n minZoom : 1,\n maxZoom: 18,\n zoom: 12,\n center : [2.35, 48.85],\n // tilesUrl : 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',\n tilesUrl : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',\n // tilesUrl : 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1544,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1317,"value":"function newLeafletMap(container, mapConfig) {\n const config = {\n zoom : mapConfig.zoom,\n center : [...(mapConfig.center || [0, 0])].reverse(),\n minZoom : mapConfig.minZoom,\n maxZoom : mapConfig.maxZoom,\n };\n const map = L.map(container, config);\n L.tileLayer(mapConfig.tilesUrl, {\n attribution: mapConfig.attribution || '© OpenStreetMap contributors'\n }).addTo(map);\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1322,"value":"L = {\n const L = await require('leaflet');\n L.cssUrl = resolve('leaflet/dist/leaflet.css');\n document.head.appendChild(html``);\n return L;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1470,"value":"tileUtils={\n // See https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29\n function long2tile(lon,zoom) { return (Math.floor((lon+180)/360*Math.pow(2,zoom))); }\n function lat2tile(lat,zoom) { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom))); }\n // Inverse process:\n function tile2long(x,z) { return (x/Math.pow(2,z)*360-180); }\n function tile2lat(y,z) {\n var n=Math.PI-2*Math.PI*y/Math.pow(2,z);\n return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n))));\n }\n return {\n long2tile,\n lat2tile,\n tile2long,\n tile2lat\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"import { newTileContext, drawTile } from \"@kotelnikov/mapbox-vector-tiles-rendering\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"import { pbftile } from \"@kotelnikov/mapbox-vector-tiles-rendering\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"