FDITeam / visualisation-maritime

Blame view

src/main/resources/leafletmap/Leaflet.markercluster-1.4.1/example/geojson.html 2.38 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
 
  <!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>
  </head>
  <body>
  
  	<div id="map"></div>
  
  	<script type="text/javascript">
  
  		var geoJsonData = {
  			"type": "FeatureCollection", 
  			"features": [
  				{ "type": "Feature", "id":"1", "properties": { "address": "2"   }, "geometry": { "type": "Point", "coordinates": [175.2209316333,-37.8210922667 ] } },
  				{ "type": "Feature", "id":"2", "properties": { "address": "151" }, "geometry": { "type": "Point", "coordinates": [175.2238417833,-37.80975435   ] } },
  				{ "type": "Feature", "id":"3", "properties": { "address": "21"  }, "geometry": { "type": "Point", "coordinates": [175.2169955667,-37.818193     ] } },
  				{ "type": "Feature", "id":"4", "properties": { "address": "14"  }, "geometry": { "type": "Point", "coordinates": [175.2240856667,-37.8216963    ] } },
  				{ "type": "Feature", "id":"5", "properties": { "address": "38B" }, "geometry": { "type": "Point", "coordinates": [175.2196982333,-37.8188702167 ] } },
  				{ "type": "Feature", "id":"6", "properties": { "address": "38"  }, "geometry": { "type": "Point", "coordinates": [175.2209942   ,-37.8192782833 ] } }
  			]
  		};
  
  		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'
  		});
  
  		var map = L.map('map')
  				.addLayer(tiles);
  
  		var markers = L.markerClusterGroup();
  
  		var geoJsonLayer = L.geoJson(geoJsonData, {
  			onEachFeature: function (feature, layer) {
  				layer.bindPopup(feature.properties.address);
  			}
  		});
  		markers.addLayer(geoJsonLayer);
  
  		map.addLayer(markers);
  		map.fitBounds(markers.getBounds());
  	</script>
  </body>
  </html>