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