Last active
October 11, 2023 20:57
-
-
Save sfabijanski/d7ed2e619e77e69f1aff14f0f3833bc3 to your computer and use it in GitHub Desktop.
Working example of Esri vector basemap. Example from taken from https://github.com/Leaflet/Leaflet.VectorGrid/blob/master/docs/demo-vectortiles.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>VectorGrid.Protobuf example</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> | |
| </head> | |
| <body style='margin:0'> | |
| <div id="map" style="width: 100vw; height: 100vh; background: white"></div> | |
| <script type="text/javascript" src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script> | |
| <script type="text/javascript" src="https://unpkg.com/leaflet.vectorgrid@1.2.0"></script> | |
| <!-- <script type="text/javascript" src="../dist/Leaflet.VectorGrid.bundled.js"></script> --> | |
| <script> | |
| var map = L.map('map'); | |
| // var cartodbAttribution = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'; | |
| // | |
| // var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', { | |
| // attribution: cartodbAttribution, | |
| // opacity: 0.5 | |
| // }).addTo(map); | |
| var vectorTileStyling = { | |
| water: { | |
| fill: true, | |
| weight: 1, | |
| fillColor: '#06cccc', | |
| color: '#06cccc', | |
| fillOpacity: 0.2, | |
| opacity: 0.4, | |
| }, | |
| admin: { | |
| weight: 1, | |
| fillColor: 'pink', | |
| color: 'pink', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| waterway: { | |
| weight: 1, | |
| fillColor: '#2375e0', | |
| color: '#2375e0', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| landcover: { | |
| fill: true, | |
| weight: 1, | |
| fillColor: '#53e033', | |
| color: '#53e033', | |
| fillOpacity: 0.2, | |
| opacity: 0.4, | |
| }, | |
| landuse: { | |
| fill: true, | |
| weight: 1, | |
| fillColor: '#e5b404', | |
| color: '#e5b404', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| park: { | |
| fill: true, | |
| weight: 1, | |
| fillColor: '#84ea5b', | |
| color: '#84ea5b', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| boundary: { | |
| weight: 1, | |
| fillColor: '#c545d3', | |
| color: '#c545d3', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| aeroway: { | |
| weight: 1, | |
| fillColor: '#51aeb5', | |
| color: '#51aeb5', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| road: { // mapbox & nextzen only | |
| weight: 1, | |
| fillColor: '#f2b648', | |
| color: '#f2b648', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| tunnel: { // mapbox only | |
| weight: 0.5, | |
| fillColor: '#f2b648', | |
| color: '#f2b648', | |
| fillOpacity: 0.2, | |
| opacity: 0.4, | |
| // dashArray: [4, 4] | |
| }, | |
| bridge: { // mapbox only | |
| weight: 0.5, | |
| fillColor: '#f2b648', | |
| color: '#f2b648', | |
| fillOpacity: 0.2, | |
| opacity: 0.4, | |
| // dashArray: [4, 4] | |
| }, | |
| transportation: { // openmaptiles only | |
| weight: 0.5, | |
| fillColor: '#f2b648', | |
| color: '#f2b648', | |
| fillOpacity: 0.2, | |
| opacity: 0.4, | |
| // dashArray: [4, 4] | |
| }, | |
| transit: { // nextzen only | |
| weight: 0.5, | |
| fillColor: '#f2b648', | |
| color: '#f2b648', | |
| fillOpacity: 0.2, | |
| opacity: 0.4, | |
| // dashArray: [4, 4] | |
| }, | |
| building: { | |
| fill: true, | |
| weight: 1, | |
| fillColor: '#2b2b2b', | |
| color: '#2b2b2b', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| water_name: { | |
| weight: 1, | |
| fillColor: '#022c5b', | |
| color: '#022c5b', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| transportation_name: { | |
| weight: 1, | |
| fillColor: '#bc6b38', | |
| color: '#bc6b38', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| place: { | |
| weight: 1, | |
| fillColor: '#f20e93', | |
| color: '#f20e93', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| housenumber: { | |
| weight: 1, | |
| fillColor: '#ef4c8b', | |
| color: '#ef4c8b', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| poi: { | |
| weight: 1, | |
| fillColor: '#3bb50a', | |
| color: '#3bb50a', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| earth: { // nextzen only | |
| fill: true, | |
| weight: 1, | |
| fillColor: '#c0c0c0', | |
| color: '#c0c0c0', | |
| fillOpacity: 0.2, | |
| opacity: 0.4 | |
| }, | |
| // Do not symbolize some stuff for mapbox | |
| country_label: [], | |
| marine_label: [], | |
| state_label: [], | |
| place_label: [], | |
| waterway_label: [], | |
| poi_label: [], | |
| road_label: [], | |
| housenum_label: [], | |
| // Do not symbolize some stuff for openmaptiles | |
| country_name: [], | |
| marine_name: [], | |
| state_name: [], | |
| place_name: [], | |
| waterway_name: [], | |
| poi_name: [], | |
| road_name: [], | |
| housenum_name: [], | |
| }; | |
| // Monkey-patch some properties for nextzen layer names, because | |
| // instead of "building" the data layer is called "buildings" and so on | |
| vectorTileStyling.buildings = vectorTileStyling.building; | |
| vectorTileStyling.boundaries = vectorTileStyling.boundary; | |
| vectorTileStyling.places = vectorTileStyling.place; | |
| vectorTileStyling.pois = vectorTileStyling.poi; | |
| vectorTileStyling.roads = vectorTileStyling.road; | |
| var mapboxUrl = "https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token={token}"; | |
| var mapboxVectorTileOptions = { | |
| rendererFactory: L.canvas.tile, | |
| attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://www.mapbox.com/about/maps/">MapBox</a>', | |
| vectorTileLayerStyles: vectorTileStyling, | |
| token: 'pk.eyJ1IjoiaXZhbnNhbmNoZXoiLCJhIjoiY2l6ZTJmd3FnMDA0dzMzbzFtaW10cXh2MSJ9.VsWCS9-EAX4_4W1K-nXnsA' | |
| }; | |
| var mapboxPbfLayer = L.vectorGrid.protobuf(mapboxUrl, mapboxVectorTileOptions); | |
| var openmaptilesUrl = "https://free-{s}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key={key}"; | |
| var openmaptilesVectorTileOptions = { | |
| rendererFactory: L.canvas.tile, | |
| attribution: '<a href="https://openmaptiles.org/">© OpenMapTiles</a>, <a href="http://www.openstreetmap.org/copyright">© OpenStreetMap</a> contributors', | |
| vectorTileLayerStyles: vectorTileStyling, | |
| subdomains: '0123', | |
| key: 'VrAl6k9W8JkD4G5584Sz', // API key only valid for leaflet.github.io | |
| maxZoom: 14 | |
| }; | |
| var openmaptilesPbfLayer = L.vectorGrid.protobuf(openmaptilesUrl, openmaptilesVectorTileOptions); | |
| // Assumes layers = "all", and format = "mvt" | |
| var nextzenTilesUrl = "https://tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.mvt?api_key={apikey}"; | |
| var nextzenVectorTileOptions = { | |
| rendererFactory: L.canvas.tile, | |
| attribution: '<a href="https://nextzen.com/">© NextZen</a>, <a href="http://www.openstreetmap.org/copyright">© OpenStreetMap</a> contributors', | |
| vectorTileLayerStyles: vectorTileStyling, | |
| apikey: 'gCZXZglvRQa6sB2z7JzL1w', | |
| }; | |
| var nextzenTilesPbfLayer = L.vectorGrid.protobuf(nextzenTilesUrl, nextzenVectorTileOptions); | |
| var esriStyle = {}; | |
| esriStyle.Continent = vectorTileStyling.earth; | |
| esriStyle.Bathymetry = vectorTileStyling.water; | |
| esriStyle["Vegetation small scale"] = vectorTileStyling.landuse; | |
| esriStyle["Marine area"] = vectorTileStyling.water; | |
| esriStyle.Land = vectorTileStyling.earth; | |
| esriStyle["City small scale" ] = vectorTileStyling.building; | |
| esriStyle["Admin0 point" ] = []; | |
| esriStyle["Water area small scale" ] = vectorTileStyling.water; | |
| esriStyle["Water line small scale/label" ] = []; | |
| esriStyle["Water line small scale" ] = vectorTileStyling.water; | |
| esriStyle["Marine waterbody/label" ] = []; | |
| esriStyle["Boundary line" ] = vectorTileStyling.boundary; | |
| esriStyle["Admin0 forest or park" ] = vectorTileStyling.landuse; | |
| esriStyle["Openspace or forest" ] = vectorTileStyling.landuse; | |
| esriStyle["Admin1 area/label" ] = []; | |
| esriStyle["Admin2 area/label" ] = []; | |
| esriStyle["Admin0 forest or park/label" ] = []; | |
| esriStyle["Water area small scale/label" ] = []; | |
| esriStyle["Road tunnel" ] = vectorTileStyling.road; | |
| esriStyle["Road" ] = vectorTileStyling.road; | |
| esriStyle["Water line medium scale/label"] = []; | |
| esriStyle["Water line medium scale" ] = vectorTileStyling.water; | |
| esriStyle["Urban area" ] = vectorTileStyling.landuse; | |
| esriStyle["Admin1 forest or park" ] = vectorTileStyling.landuse; | |
| esriStyle["Water area medium scale/label"] = []; | |
| esriStyle["Water area medium scale" ] = vectorTileStyling.water; | |
| esriStyle["Spot elevation" ] = []; | |
| esriStyle["City large scale" ] = vectorTileStyling.building; | |
| esriStyle["Admin2 area/label" ] = | |
| esriStyle["Water area large scale" ] = vectorTileStyling.water; | |
| esriStyle["Water line large scale/label" ] = []; | |
| esriStyle["Water line large scale" ] = vectorTileStyling.water; | |
| esriStyle["Point of interest" ] = vectorTileStyling.building; | |
| esriStyle["Road/label" ] = []; | |
| esriStyle["Ferry/label" ] = []; | |
| esriStyle["Ferry" ] = vectorTileStyling.water; | |
| esriStyle["Building" ] = vectorTileStyling.building; | |
| esriStyle["Water area/label" ] = []; | |
| esriStyle["Water area" ] = vectorTileStyling.water; | |
| esriStyle["Water line" ] = vectorTileStyling.water; | |
| esriStyle["Cemetery/label" ] = []; | |
| esriStyle["Cemetery" ] = vectorTileStyling.landuse; | |
| esriStyle["Retail" ] = vectorTileStyling.landuse; | |
| esriStyle["Airport/label" ] = []; | |
| esriStyle["Airport" ] = vectorTileStyling.landuse; | |
| esriStyle["Industry" ] = vectorTileStyling.landuse; | |
| esriStyle["Water area large scale/label" ] = []; | |
| esriStyle["Road tunnel/label" ] = []; | |
| esriStyle["Golf course/label" ] = []; | |
| esriStyle["Golf course" ] = vectorTileStyling.landuse; | |
| esriStyle["Industry/label" ] = []; | |
| esriStyle["Marine area/label" ] = []; | |
| esriStyle["Railroad" ] = vectorTileStyling.road; | |
| esriStyle["Medical" ] = vectorTileStyling.landuse; | |
| esriStyle["Education" ] = vectorTileStyling.landuse; | |
| esriStyle["Park or farming" ] = vectorTileStyling.landuse; | |
| esriStyle["Exit" ] = vectorTileStyling.road; | |
| esriStyle["Retail/label" ] = []; | |
| esriStyle["Beach/label" ] = []; | |
| esriStyle["Beach" ] = vectorTileStyling.landuse; | |
| esriStyle["Special area of interest" ] = vectorTileStyling.housenumber; | |
| esriStyle["Point of interest" ] = vectorTileStyling.poi; | |
| esriStyle["Education/label" ] = []; | |
| esriStyle["Landmark" ] = vectorTileStyling.landuse; | |
| esriStyle["Cemetery" ] = vectorTileStyling.landuse; | |
| esriStyle["Transportation" ] = vectorTileStyling.road; | |
| esriStyle["Landmark/label" ] = []; | |
| esriStyle["Medical/label" ] = []; | |
| esriStyle["Park or farming/label" ] = []; | |
| esriStyle["Building/label" ] = []; | |
| var esriTilesUrl = "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf"; | |
| // var esriTilesUrl = "https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf"; | |
| var esriVectorTileOptions = { | |
| rendererFactory: L.canvas.tile, | |
| attribution: '© ESRI', | |
| vectorTileLayerStyles: esriStyle, | |
| }; | |
| var esriTilesPbfLayer = L.vectorGrid.protobuf(esriTilesUrl, esriVectorTileOptions).addTo(map); | |
| //var openmaptilesPbfLayer = L.vectorGrid.protobuf(openmaptilesUrl, openmaptilesVectorTileOptions).addTo(map); | |
| map.setView({ lng: -76.6, lat: 39.667968750000002 }, 8); | |
| L.control.layers({ | |
| "ESRI basemap vector tiles": esriTilesPbfLayer, | |
| OpenMapTiles: openmaptilesPbfLayer, | |
| "MapBox Vector Tiles": mapboxPbfLayer, | |
| "NextZen Vector Tiles": nextzenTilesPbfLayer, | |
| }, {}, {collapsed: false}).addTo(map); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment