md`# Practice reading Vector Tiles in Leaflet`
buildvis = {
let view = md`${container()}`
return view
}
map = {
buildvis;
let mapInstance = L.map('mapid').setView([47, 15], 5)
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 17
}).addTo(mapInstance)
params.layerControl.addTo(mapInstance)
L.control.scale({position: "bottomright"}).addTo(mapInstance);
addRivers(mapInstance)
return mapInstance
}
{
var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
var Esri_WorldMap = L.vectorGrid.protobuf('https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf', { attribution: 'Source: Esri' });
var LSIB10 = L.vectorGrid.protobuf('https://tiles.arcgis.com/tiles/j75S08un0OPoEcHD/arcgis/rest/services/World_LSIB_Lines/VectorTileServer/tile/{z}/{y}/{x}.pbf', { attribution: 'Source: HIU' });
var OpenStreetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
});
params.layerControl = L.control.layers({
'Open Street Map': OpenStreetMap,
//'Open Street B/W': OpenStreetMap_BlackAndWhite,
//'Hydda Base': Hydda_Base,
//'Hydda Full': Hydda_Full,
//'Esri World Gray': Esri_WorldGrayCanvas,
//'ESRI Topo Map': Esri_WorldTopoMap,
//'Esri DeLorme': Esri_DeLorme,
'ESRI World Map': Esri_WorldMap,
'ESRI Imagery': Esri_WorldImagery,
'LSIB10': LSIB10,
//'Open Topo Map': OpenTopoMap,
//'USGS Navigator': USGS_Navigator
})
}
tempFxn = L.vectorgrid
addRivers = function(map){
var tileserver_url = "https://{s}.tiles.mapbox.com/v4/";
var Url = tileserver_url + "bmaschhoff.79dtbmjo" + "/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiYm1hc2NoaG9mZiIsImEiOiJja2RmMDl6emsyMXNiMzBwZHdtNmR4M2pkIn0.Far-iTEAaPnX4MOSTAhTJA"
var RiverOptions = {
rendererFactory: L.canvas.tile,
attribution: 'National Hydrology Data Set',
token: "pk.eyJ1IjoiYm1hc2NoaG9mZiIsImEiOiJja2RmMDl6emsyMXNiMzBwZHdtNmR4M2pkIn0.Far-iTEAaPnX4MOSTAhTJA",
vectorTileLayerStyles: buildStyle(params.riverstyles.styleRiverBlue.fxn),
};
params.RiverLayer = tempFxn(Url,RiverOptions)//).addTo(map)
params.layerControl.addOverlay(params.RiverLayer, "Major Rivers")
//L.control.legend({ position: 'topleft', id: "river_legend" }).addTo(map);
}
{
params.riverstyles = {}
params.riverstyles.styleRiverBlue = {
fxn: function(properties,zoom){
var color = "blue";
var style = {
weight: getStrahlerWeight(properties,zoom),
color: color,
opacity: .6
}
return style;
}
}
}
buildStyle = function(fxn){
var stylelayers = [
"ColumbiaBasinUnblockedStrahler1geojson",
"ColumbiaBasinUnblockedStrahler2geojson",
"ColumbiaBasinUnblockedStrahler3geojson",
"ColumbiaBasinUnblockedStrahler45geojson",
"ColumbiaBasinUnblockedStrahler68geojson"
];
var style = {}
stylelayers.forEach(function(d){
style[d] = fxn;
})
return style;
}
params = ({})
function container() {
return `
<div class="container-fluid">
<div class='row'>
<div id="mapid" class="col-16"></div>
</div>
</div>
`
}
L.vectorgrid = require('@bagage/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js').catch(() => window.L.vectorGrid.protobuf)
L = require('leaflet@1.6.0')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
