Affichage des admin_level depuis les tuiles vectorielles OpenMapTiles

boundaries.json

{

    "version": 8,
    "name": "Klokantech Basic",
    "metadata": {
        "mapbox:autocomposite": false,
        "mapbox:type": "template",
        "maputnik:renderer": "mbgljs",
        "openmaptiles:version": "3.x",
        "openmaptiles:mapbox:owner": "openmaptiles",
        "openmaptiles:mapbox:source:url": "mapbox://openmaptiles.4qljc88t"
    },
    "center": [
        8.54806714892635,
        47.37180823552663
    ],
    "zoom": 12.241790506353492,
    "bearing": 0,
    "pitch": 0,
    "sources": {
        "openmaptiles": {
            "type": "vector",
            "url": "https://free.tilehosting.com/data/v3.json?key=XXXX"
        }
    },
    "glyphs": "https://free.tilehosting.com/fonts/{fontstack}/{range}.pbf?key=XXXX",
    "layers": [{
            "id": "background",
            "type": "background",
            "paint": {
                "background-color": "hsl(47, 26%, 88%)"
            }
        },
        {
            "id": "water",
            "type": "fill",
            "source": "openmaptiles",
            "source-layer": "water",
            "filter": [
                "==",
                "$type",
                "Polygon"
            ],
            "layout": {
                "visibility": "visible"
            },
            "paint": {
                "fill-color": "hsl(205, 56%, 73%)"
            }
        },
        {
            "id": "place_label_other",
            "type": "symbol",
            "source": "openmaptiles",
            "source-layer": "place",
            "minzoom": 8,
            "filter": [
                "all", [
                    "==",
                    "$type",
                    "Point"
                ],
                [
                    "!=",
                    "class",
                    "city"
                ]
            ],
            "layout": {
                "text-field": "{name}",
                "text-font": [
                    "Klokantech Noto Sans Regular",
                    "Klokantech Noto Sans CJK Regular"
                ],
                "text-max-width": 6,
                "text-size": {
                    "stops": [
                        [
                            6,
                            10
                        ],
                        [
                            12,
                            14
                        ]
                    ]
                },
                "visibility": "visible",
                "text-anchor": "center"
            },
            "paint": {
                "text-color": "hsl(0, 10%, 25%)",
                "text-halo-color": "hsl(0, 0%, 100%)",
                "text-halo-blur": 0,
                "text-halo-width": 2
            }
        },
        {
            "id": "place_label_city",
            "type": "symbol",
            "source": "openmaptiles",
            "source-layer": "place",
            "maxzoom": 16,
            "filter": [
                "all", [
                    "==",
                    "$type",
                    "Point"
                ],
                [
                    "==",
                    "class",
                    "city"
                ]
            ],
            "layout": {
                "text-field": "{name}",
                "text-font": [
                    "Klokantech Noto Sans Regular",
                    "Klokantech Noto Sans CJK Regular"
                ],
                "text-max-width": 10,
                "text-size": {
                    "stops": [
                        [
                            3,
                            12
                        ],
                        [
                            8,
                            16
                        ]
                    ]
                }
            },
            "paint": {
                "text-color": "hsl(0, 0%, 0%)",
                "text-halo-color": "hsla(0, 0%, 100%, 0.75)",
                "text-halo-blur": 0,
                "text-halo-width": 2
            }
        },
        {
            "id": "country_label",
            "type": "symbol",
            "source": "openmaptiles",
            "source-layer": "place",
            "maxzoom": 12,
            "filter": [
                "all", [
                    "==",
                    "$type",
                    "Point"
                ],
                [
                    "==",
                    "class",
                    "country"
                ]
            ],
            "layout": {
                "text-field": "{name}",
                "text-font": [
                    "Klokantech Noto Sans Bold",
                    "Klokantech Noto Sans CJK Bold"
                ],
                "text-max-width": 10,
                "text-size": {
                    "stops": [
                        [
                            3,
                            12
                        ],
                        [
                            8,
                            22
                        ]
                    ]
                },
                "visibility": "visible"
            },
            "paint": {
                "text-color": "hsl(0, 0%, 13%)",
                "text-halo-color": "rgba(255,255,255,0.75)",
                "text-halo-width": 2,
                "text-halo-blur": 0
            }
        },
        {
            "id": "admin_neuf",
            "type": "line",
            "source": "openmaptiles",
            "source-layer": "boundary",
            "minzoom": 11,
            "maxzoom": 22,
            "filter": [
                "all", [
                    "in",
                    "admin_level",
                    8,
                    9,
                    10,
                    11
                ]
            ],
            "layout": {
                "visibility": "visible"
            },
            "paint": {
                "line-color": "rgba(91, 39, 186, 1)",
                "line-dasharray": [
                    2,
                    1
                ]
            }
        },
        {
            "id": "admin_quatre",
            "type": "line",
            "source": "openmaptiles",
            "source-layer": "boundary",
            "minzoom": 4,
            "maxzoom": 18,
            "filter": [
                "all", [
                    "in",
                    "admin_level",
                    4
                ]
            ],
            "layout": {
                "visibility": "visible"
            },
            "paint": {
                "line-color": "rgba(153, 39, 186, 1)",
                "line-dasharray": [
                    2,
                    1
                ]
            }
        },
        {
            "id": "admin_cinq_ou_six",
            "type": "line",
            "source": "openmaptiles",
            "source-layer": "boundary",
            "minzoom": 4,
            "maxzoom": 18,
            "filter": [
                "all", [
                    "in",
                    "admin_level",
                    5,
                    6
                ]
            ],
            "layout": {
                "visibility": "visible"
            },
            "paint": {
                "line-color": "rgba(186, 39, 39, 1)",
                "line-dasharray": [
                    2,
                    1
                ]
            }
        },
        {
            "id": "admin_huit",
            "type": "line",
            "source": "openmaptiles",
            "source-layer": "boundary",
            "minzoom": 11,
            "maxzoom": 22,
            "filter": [
                "all", [
                    "in",
                    "admin_level",
                    8
                ]
            ],
            "layout": {
                "visibility": "visible"
            },
            "paint": {
                "line-color": "rgba(37, 129, 30, 1)",
                "line-dasharray": [
                    2,
                    1
                ]
            }
        },
        {
            "id": "admin_deux",
            "type": "line",
            "source": "openmaptiles",
            "source-layer": "boundary",
            "minzoom": 0,
            "filter": [
                "all", [
                    "<=",
                    "admin_level",
                    2
                ],
                [
                    "==",
                    "$type",
                    "LineString"
                ]
            ],
            "layout": {
                "line-cap": "round",
                "line-join": "round",
                "visibility": "visible"
            },
            "paint": {
                "line-color": "hsla(0, 8%, 22%, 0.51)",
                "line-width": {
                    "base": 1.3,
                    "stops": [
                        [
                            3,
                            0.5
                        ],
                        [
                            22,
                            15
                        ]
                    ]
                }
            }
        }
    ],
    "id": "ciwf4zbsv007y2pmt2rspc1dc"

}

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>OpenMapTiles - Boundaries</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .legend {
            background-color: #fff;
            border-radius: 3px;
            bottom: 30px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
            font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            padding: 10px;
            position: absolute;
            right: 10px;
            z-index: 1;
            display: none;
        }

        .legend h4 {
            margin: 0 0 10px;
        }

        .legend div span {
            border-radius: 50%;
            display: inline-block;
            height: 10px;
            margin-right: 5px;
            width: 10px;
        }
    </style>
</head>

<body>
    <div id='map'></div>
    <div id='legende_deux' class='legend'>admin_level = 2</div>
    <div id='legende_quatre' class='legend'>admin_level = 4,5 ou 6</div>
    <div id='legende_huit' class='legend'>admin_level = 8</div>
    <script>
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'boundaries.json',
            center: [2.3, 48.85],
            hash: true,
            zoom: 8
        });

        var deux = document.getElementById('legende_deux');
        var quatre = document.getElementById('legende_quatre');
        var huit = document.getElementById('legende_huit');
        var zoomThreshold = 8;
        map.on('zoom', function() {
            if (map.getZoom() < 4) {
                deux.style.display = 'block';
                huit.style.display = 'none';
                quatre.style.display = 'none';
            } else if (map.getZoom() > 11) {
                deux.style.display = 'none';
                quatre.style.display = 'none';
                huit.style.display = 'block';
            } else {
                deux.style.display = 'none';
                quatre.style.display = 'block';
                huit.style.display = 'none';
            }
        });
    </script>
</body>

</html>
none'; } });
</script>
</body>

</html>

</html>

index_leaflet.html

<!DOCTYPE html>
<html>

<head>
    <title>OpenMapTiles - Boundaries</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .legend {
            text-align: left;
            line-height: 18px;
            color: #909;
        }

        .legend i {
            width: 18px;
            height: 18px;
            float: left;
            margin-right: 8px;
            opacity: 0.7;
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.css" rel='stylesheet' />
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.js"></script>
    <script src="http://rawgit.com/mapbox/mapbox-gl-leaflet/master/leaflet-mapbox-gl.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://domoritz.github.io/leaflet-locatecontrol/dist/L.Control.Locate.min.css" />

    <script src="https://domoritz.github.io/leaflet-locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>

    <link rel="stylesheet" href="leaflet-search.css" />
    <script src="leaflet-search.js"></script>


</head>

<body>
    <div id="map"></div>


    <script>
        var map = L.map('map').setView([48.85, 2.3], 8);

        var gl = L.mapboxGL({
            accessToken: 'no-token',
            style: 'boundaries.json',
            hash: true
        }).addTo(map);

        L.control.locate().addTo(map);

        /* Search control */
        map.addControl(new L.Control.Search({
            url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
            jsonpParam: 'json_callback',
            propertyName: 'display_name',
            propertyLoc: ['lat', 'lon'],
            markerLocation: true,
            autoType: false,
            autoCollapse: true,
            minLength: 2,
            zoom: 16
        }));


        var legend = L.control({
            position: 'bottomright'
        });

        legend.onAdd = function(map) {

            var div = L.DomUtil.create('div', 'info legend'),
                div.innerHTML = "gris : level 2 <br>";
            div.innerHTML += "violet : level 4 <br>";
            div.innerHTML += "rouge : level 6 <br>";
            div.innerHTML += "vert : level 8 <br>";
            return div;
        };

        legend.addTo(map);
    </script>
</body>

</html>

</html>

nécessite une clef openmaptiles (à mettre dans le fichier json)