leaflet-plugins
Version:
Miscellaneous plugins for Leaflet library for services that need to display route information and need satellite imagery from different providers
56 lines (48 loc) • 1.84 kB
HTML
<html>
<head>
<title>Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="../layer/tile/Bing.js"></script>
<script src="../layer/tile/Bing.addon.applyMaxNativeZoom.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script type='text/javascript'>
var map = L.map('map', {
center: [67.6755, 33.936],
zoom: 10
});
var apiKey = '[YOUR_BING_MAPS_KEY]';
var defaults = {
key: apiKey,
detectRetina: true
};
var baseLayers = {};
[ 'Aerial', 'AerialWithLabelsOnDemand',
'RoadOnDemand',
'CanvasDark', 'CanvasLight', 'CanvasGray'
].forEach(function (imagerySet) {
baseLayers[imagerySet] = L.bingLayer(L.extend({imagerySet: imagerySet}, defaults));
});
// https://docs.microsoft.com/en-us/bingmaps/articles/custom-map-styles-in-bing-maps#midnight-commander-style
var styleMidnightCommander = 'me|lbc:ffffff;loc:000000_pl|bsc:144b53;boc:00000000_pt|ic:0c4152;fc:000000;sc:0c4152_trs|sc:000000;fc:000000_hg|sc:158399;fc:000000_cah|sc:158399;fc:000000_ard|sc:157399;fc:000000_mr|sc:157399;fc:000000_rl|sc:146474;fc:000000_str|fc:115166_wt|fc:021019_ar|fc:115166_g|lc:0b334d';
baseLayers['Custom style + "ru" culture'] = L.bingLayer(L.extend({}, defaults, {
imagerySet: 'RoadOnDemand',
style: styleMidnightCommander,
culture: 'ru'
}));
baseLayers['[deprecated] Road'] = L.bingLayer(L.extend({}, defaults, {
imagerySet: 'Road',
retinaDpi: false
}));
baseLayers['[deprecated] AerialWithLabels'] = L.bingLayer(L.extend({}, defaults, {
imagerySet: 'AerialWithLabels',
retinaDpi: false
}));
baseLayers['RoadOnDemand'].addTo(map);
L.control.layers(baseLayers).addTo(map);
map.locate({ setView: true, maxZoom: 14 });
</script>
</body>
</html>