Created
March 6, 2020 09:09
-
-
Save soiqualang/757331d528e3c9fbf038b07f530f6b1b to your computer and use it in GitHub Desktop.
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>GridLayer Test</title> | |
<meta charset="utf-8" /> | |
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> | |
<style> | |
body { | |
padding: 0; | |
margin: 0; | |
} | |
html, body, #map { | |
height: 100%; | |
width: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
</body> | |
<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> | |
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).addTo(map); | |
// 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/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); | |
map.setView({ lat: 47.040182144806664, lng: 9.667968750000002 }, 0); | |
//------------ | |
var thamthucvatUrl = "http://dev.dothanhlong.org/tiles_server/thamthucvat/{z}/{x}/{y}.pbf"; | |
var thamthucvatOptions = { | |
rendererFactory: L.canvas.tile, | |
attribution: '© Long&Lâm', | |
vectorTileLayerStyles: vectorTileStyling.landuse, | |
}; | |
var thamthucvatPbfLayer = L.vectorGrid.protobuf(thamthucvatUrl, thamthucvatOptions); | |
//https://www.google.com/maps/@16.1961975,106.2050283,6.25z | |
map.setView({ lat: 106.2050283, lng: 16.1961975 }, 7); | |
//----------- | |
L.control.layers({ | |
OpenMapTiles: openmaptilesPbfLayer, | |
"MapBox Vector Tiles": mapboxPbfLayer, | |
"NextZen Vector Tiles": nextzenTilesPbfLayer, | |
"ESRI basemap vector tiles": esriTilesPbfLayer, | |
"Thảm thực vật VN": thamthucvatPbfLayer | |
}, {}, {collapsed: false}).addTo(map); | |
</script> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment