Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MapLibre MVT Point Tiles</title>
    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/pmtiles@3.2.0/dist/pmtiles.js"></script>
​
    <style>
        body {
            margin: 0;
            padding: 0;
        }
​
        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
​
<body>
    <div id="map"></div>
    <script>
        maplibregl.setRTLTextPlugin(
            'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.3.0/dist/mapbox-gl-rtl-text.js',
            false // Lazy load the plugin
        );
        const protocol = new pmtiles.Protocol();
        maplibregl.addProtocol('pmtiles', protocol.tile);
​
        const map = new maplibregl.Map({
            container: 'map',
            style: {
                "version": 8,
                "sources": {
                    "protomaps": {
                        "type": "vector",
                        "attribution": "<a href=\"https://github.com/protomaps/basemaps\">Protomaps</a> © <a href=\"https://openstreetmap.org\">OpenStreetMap</a>",
                        "url": "https://tiles.swiss-map.cc/v4.json"
                    }
                },
                "layers": [
                    {
                        "id": "background",
                        "type": "background",
                        "paint": {
                            "background-color": "#ffffff"
                        }
                    },
                    {
                        "id": "earth",
                        "type": "fill",
                        "filter": [
                            "==",
                            "$type",
                            "Polygon"
                        ],
                        "source": "protomaps",
                        "source-layer": "earth",
                        "paint": {
                            "fill-color": "#ffffff"
                        }
                    },
                    {
                        "id": "water",
                        "type": "fill",
                        "filter": [
                            "==",
                            "$type",
                            "Polygon"
                        ],
                        "source": "protomaps",
                        "source-layer": "water",
                        "paint": {
                            "fill-color": "#dcdcdc"
                        }
                    }
                ],
                "sprite": "https://protomaps.github.io/basemaps-assets/sprites/v4/white",
                "glyphs": "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf"
            },
            center: [0, 0],
            zoom: 2,
            hash: 'map',
        });
​
        map.on('load', () => {
            map.addSource("places-main", {
                "type": "vector",
                "url": "pmtiles://https://protomaps.dev/~wipfli/places-main.pmtiles"
            })
            map.addLayer(
                {
                    "id": "points-layer-places-main",
                    "type": "circle",
                    "source": "places-main",
                    "source-layer": "places",
                    "paint": {
                        "circle-radius": 15,
                        "circle-color": "rgba(255, 165, 0, 0.35)"
                    }
                }
            );
​
            map.addSource("places-437", {
                "type": "vector",
                "url": "pmtiles://https://protomaps.dev/~wipfli/places-437.pmtiles"
            })
            map.addLayer(
                {
                    "id": "points-layer-places-437",
                    "type": "circle",
                    "source": "places-437",
                    "source-layer": "places",
                    "paint": {
                        "circle-radius": 5,
                        "circle-color": "rgba(255, 0, 0, 0.75)"
                    }
                }
            );
        })
        map.showTileBoundaries = true;
        map.on('click', 'points-layer-main', (e) => {
            if (e.features && e.features.length > 0) {
                console.log(e.features[0].properties['kind_detail']);
                console.log(JSON.stringify(Object.fromEntries(
                    Object.entries(e.features[0].properties).sort(([keyA], [keyB]) => keyA.localeCompare(keyB))
                ), null, 2));
            }
        });
    </script>
</body>
​
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers