-
Notifications
You must be signed in to change notification settings - Fork 1
/
vis_geojson.html
51 lines (41 loc) · 1.86 KB
/
vis_geojson.html
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
<!DOCTYPE html>
<html>
<head>
<title>Leaflet GeoJSON Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="leaflet-measure.css">
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
</head>
<body>
<div id="map" style="width: 100%; height: 900px"></div>
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<script src="leaflet-measure.min.js"></script>
<script src="leaflet.ajax.min.js">
</script>
<script>
var map = L.map('map').setView([32.2314,103.32], 9);
L.tileLayer('http://120.55.74.101:8012/mapbox-studio-pirates/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.light'
}).addTo(map);
var measureControl = new L.Control.Measure({'position':'topright',primaryLengthUnit:'miles',secondaryLengthUnit:'meters'});
measureControl.addTo(map);
var geojsonLayer = new L.GeoJSON.AJAX("polygon.geojson");
geojsonLayer.addTo(map);
var geojsonLayer1 = new L.GeoJSON.AJAX("polyline1.geojson",{style:{color:'black'}});
geojsonLayer1.addTo(map);
var geojsonLayer2 = new L.GeoJSON.AJAX("polyline.geojson",{style:{color:'red'}});
geojsonLayer2.addTo(map);
geojsonLayer.on('data:loaded', function(){
for (var key in geojsonLayer._layers) {
console.log(geojsonLayer._layers[key]._bounds);
map.fitBounds( geojsonLayer._layers[key]._bounds);
}
})
</script>
</body>
</html>