wlredeye.github.io/index.html at master · wlredeye/wlredeye.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>RTK</title>
   <link rel="stylesheet" href="http://js-api.maps.sputnik.ru/v0.3/sputnik_maps_bundle.min.css" />
  <script src="http://js-api.maps.sputnik.ru/v0.3/sputnik_maps_bundle.min.js"></script>
  <script src="http://api-maps.yandex.ru/2.0/?load=package.map&lang=ru-RU" type="text/javascript"></script>
  <script src="Yandex.js"></script>
  <script src="ptnk.js"></script>
  <script src="yndx.js"></script>
  <style type="text/css">#map1 { height: 400px; }</style>
  <style type="text/css">#map2 { height: 400px; margin-top: 20px; }</style>
</head>
<body>
<div id="map1" class="user-map map"></div>
<div id="map2" class="user-map map"></div>
<script>
	// return a function that won't be called more often than the given interval
	L.Util.throttle = function throttle (fn, time, context) {
		var lock, args, wrapperFn, later;

		later = function () {
			// reset lock and call if queued
			lock = false;
			if (args) {
				wrapperFn.apply(context, args);
				args = false;
			}
		};

		wrapperFn = function () {
			if (lock) {
				// called too soon, queue to call later
				args = arguments;

			} else {
				// call and lock until later
				fn.apply(context, arguments);
				setTimeout(later, time);
				lock = true;
			}
		};

		return wrapperFn;
	};

    var map1 = L.sm.map('map1', {center: [55.775, 37.624], zoom: 12});

    L.sm.geoJson(markers1).addTo(map1);

	var map2 = new L.Map('map2', {center: new L.LatLng(55.775, 37.624), zoom: 12, zoomAnimation: false });
//	var tpl = new L.TileLayer('https://vec01.maps.yandex.net/tiles?l=map&v=4.52.1&x={x}&y={y}&z={z}&scale=1&lang=ru_RU');

//	var ptnk = new L.TileLayer('https://tilessputnik.ru/{z}/{x}/{y}.png');

	var yndx = new L.Yandex();
//	var ytraffic = new L.Yandex("null", {traffic:true, opacity:0.8, overlay:true});
	map2.addLayer(yndx);
//	map2.addLayer(ytraffic);
//	map2.addControl(new L.Control.Layers({"Yandex":yndx}));

    L.sm.geoJson(markers2).addTo(map2);
	map1.on('dragend zoomend', L.Util.throttle(onDrag, 20));
	map2.on('dragend zoomend', L.Util.throttle(onDrag, 20));
function onDrag (event) {
	// console.log(' * onDrag() ', event, 'ctx', this);
	var thisMap = event.target;
	var targetMap = (map1 === thisMap ? map2 : map1);

	//console.log('targetMap: ', targetMap);

	var center = thisMap.getCenter(),
		zoom = thisMap.getZoom();

	// console.log('center: ', center, 'zoom:', zoom);

	targetMap.setView(center, zoom);
}
</script>
</body>
</html>