JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<head>
<title>Lineage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<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: 480px; width: 640px;"></div>
</body>
</html>
JavaScript
ym.ready(function() {
// декартова система координат, зацикленая по осям
var projection = new ym.projection.Cartesian([[0, 0], [100, 100]]);
var layer = function(){
return new ym.Layer(function(tile, zoom) {
return "http://mt.gmapuploader.com/tiles/bneaLXS8B7/tile-" + zoom + "-" + (tile[1] * Math.pow(2, zoom) + tile[0]) + ".jpg";
});
};
var lineageMap = new ym.MapType('LineageMap', [layer]);
ym.mapType.storage.add('lineage#map', lineageMap);
var map = new ym.Map('map', {
center: [45, 54],
zoom: 1,
type: "lineage#map"
}, {
maxZoom: 6,
minZoom: 1,
projection: projection
});
var miniMap = new ym.control.MiniMap();
miniMap.options.set("zoomOffset", 2); // отличие в зуме минкарты от большой карты
miniMap.setType('lineage#map');
map.controls.add(miniMap);
map.controls.add(new ym.control.MapTools(['drag', 'magnifier']));
var zoom = new ym.control.ZoomControl({
customTips: [{
index: 2,
value: 'мир'},
{
index: 5,
value: 'земли'}]
});
map.controls.add(zoom);
var points = [];
for (var i = 0; i < 100; i++) {
var coordinates = [Math.floor(Math.random() * 60) + 20, Math.floor(Math.random() * 60) + 20];
points[i] = new ym.Placemark(coordinates, {
hintContent: "point " + i
}, {
iconImageHref: "http://wowimg.zamimg.com/images/Mapper/pin-yellow.png",
iconImageSize: [11, 11]
});
}
var clusterer = new ym.Clusterer();
clusterer.add(points);
map.geoObjects.add(clusterer);
map.copyrights.add({}, [{
text: '<a href="http://ncsoft.com">NCsoft</a>'}]);
})