leaflet-plugins
Version:
Miscellaneous plugins for Leaflet library for services that need to display route information and need satellite imagery from different providers
62 lines (52 loc) • 1.62 kB
HTML
<html>
<head>
<title>L.Yandex controls (addon) example</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="https://api-maps.yandex.ru/2.1/?lang=en_RU&apikey=<your API-key>" type="text/javascript"></script>
<script src="../layer/tile/Yandex.js"></script>
<script src="../layer/tile/Yandex.addon.Controls.js"></script>
<style>
.leaflet-bottom { bottom: 20px }
.leaflet-control-attribution { margin-bottom: -10px }
</style>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script>
</script>
<script>
var center = [67.6755, 33.936];
var map = L.map('map', {
center: center,
zoom: 10
});
map.attributionControl
.setPosition('bottomleft')
.setPrefix('');
var baseLayers = {
'Yandex map + Traffic': L.yandex('map', {
trafficControl: { options: { visible: false }, state: { trafficShown: true } }
}),
'Yandex + Controls': L.yandex({
type: 'map',
trafficControl: { options: { size: 'medium' } },
typeSelector: true,
routeEditor: true
}).addTo(map),
'OSM': L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
})
};
var overlays = {
'Overlays': L.yandex({
type: 'overlay',
routeEditor: true,
trafficControl: { state: { trafficShown: true } }
})
};
L.control.layers(baseLayers,overlays).addTo(map);
map.locate({ setView: true, maxZoom: 14 });
</script>
</body>
</html>