FDITeam / visualisation-maritime

Blame view

src/main/resources/leafletmap/Leaflet.markercluster-1.4.1/example/marker-clustering-zoomtoshowlayer.html 1.96 KB
edit raw normal view history
9e952e84e   lsagona   add message clust... 
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
 
  <!DOCTYPE html>
  <html>
  <head>
  	<title>Leaflet debug page</title>
  
  	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin="" />
  	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js" integrity="sha512-WXoSHqw/t26DszhdMhOXOkI7qCiv5QWXhH9R7CgvgZMHz1ImlkVQ3uNsiQKu5wwbbxtPzFXd1hK4tzno2VqhpA==" crossorigin=""></script>
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<link rel="stylesheet" href="screen.css" />
  
  	<link rel="stylesheet" href="../dist/MarkerCluster.css" />
  	<link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
  	<script src="../dist/leaflet.markercluster-src.js"></script>
  	<script src="realworld.388.js"></script>
  
  </head>
  <body>
  
  	<div id="map"></div>
  	<button id="doit">Zoom to marker</button>
  	<span>When clicked we will zoom down to a marker, spiderfying if required to show it and then open its popup</span>
  	<script type="text/javascript">
  
  		var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  				maxZoom: 18,
  				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  			}),
  			latlng = L.latLng(-37.82, 175.24);
  
  		var map = L.map('map', {center: latlng, zoom: 13, layers: [tiles]});
  
  		var markers = L.markerClusterGroup();
  		var markerList = [];
  
  		function populate() {
  			for (var i = 0; i < addressPoints.length; i++) {
  				var a = addressPoints[i];
  				var title = a[2];
  				var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
  				marker.bindPopup(title);
  				markers.addLayer(marker);
  				markerList.push(marker);
  			}
  		}
  
  		populate();
  
  		map.addLayer(markers);
  
  		document.getElementById('doit').onclick = function () {
  			var m = markerList[Math.floor(Math.random() * markerList.length)];
  			markers.zoomToShowLayer(m, function () {
  				m.openPopup();
  			});
  		};
  
  	</script>
  </body>
  </html>