JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<body>
<div id="map" style="height: 400px; width: 600px;"></div>
</body>
JavaScript
ymaps.ready(function() {
var layerOSM = function() {
return new ymaps.Layer('http://otile%d.mqcdn.com/tiles/1.0.0/osm/%z/%x/%y.png', {
projection: ymaps.projection.sphericalMercator
});
};
var osMap = new ymaps.MapType('OSMap', [layerOSM]);
ymaps.mapType.storage.add('openstreet#map', osMap);
var layerGoogle = function() {
return new ymaps.Layer('http://mt0.google.com/vt/lyrs=m@176000000&hl=ru&%c', {
projection: ymaps.projection.sphericalMercator
});
};
var googleMap = new ymaps.MapType('GoogleMap', [layerGoogle]);
ymaps.mapType.storage.add('google#map', googleMap);
var layerMail = function() {
return new ymaps.Layer('http://t0maps.mail.ru/tiles/scheme/%z/%y/%x.png', {
projection: ymaps.projection.sphericalMercator
});
};
var mailMap = new ymaps.MapType('MailMap', [layerMail]);
ymaps.mapType.storage.add('mail#map', mailMap);
var map = new ymaps.Map('map', {
center: [55.74, 37.62],
zoom: 9
}, {});
var yandexSelectorItem = new ymaps.control.ListBoxItem({
data: {
content: "Яндекс.Схема"
}
});
yandexSelectorItem.events.add("click", function(e) {
this.setType("yandex#map");
}, map);
var osmSelectorItem = new ymaps.control.ListBoxItem({
data: {
content: "Open Street Map"
}
});
osmSelectorItem.events.add("click", function(e) {
this.setType("openstreet#map");
}, map);
var googleSelectorItem = new ymaps.control.ListBoxItem({
data: {
content: "Google.Схема"
}
});
googleSelectorItem.events.add("click", function(e) {
console.log(this);
this.setType("google#map");
}, map);
var mailSelectorItem = new ymaps.control.ListBoxItem({
data: {
content: "Mail.Схема"
}
});
mailSelectorItem.events.add("click", function(e) {
...