Leaflet external GeoJSON File ajax and Leaflet zoom to Features Bounds
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<body onload="init()">
<div id="map"></div>
<h2>Leaflet zoom to Features Bounds</h2> Open the popup and zoom the the feature.
<p>You can open your Chrome Developer Tools, select the frame "result(fiddle.jshell.net)" and inspect the debug variable "test".For example "test.properties.bounds_calculated"</p>
</body>
CSS
#map {
height: 400px;
}
#info {
width: 250px;
height: 100px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid #617EF6;
border-radius: 5px;
position: fixed;
top: 200px;
left: calc(50% - 125px);
margin: auto;
padding: 10px;
color: #617EF6;
}
JavaScript
var map, zoomFunction, test;
// test geojson
var geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[[-15.1171875,
30.44867367928756
],
[
41.8359375,
30.44867367928756
],
[
41.8359375,
61.938950426660604
],
[-15.1171875,
61.938950426660604
],
[-15.1171875,
30.44867367928756
]]
]
]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
62.22656249999999,
24.206889622398023
],
[
89.6484375,
24.206889622398023
],
[
89.6484375,
43.32517767999296
],
[
62.22656249999999,
43.32517767999296
],
[
62.22656249999999,
24.206889622398023
]
]
]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates":
[
[-111.09374999999999,
27.371767300523047
],
[-73.47656249999999,
27.371767300523047
],
[-73.47656249999999,
45.089035564831036
],
[-111.09374999999999,
45.089035564831036
],
[-111.09374999999999,
27.371767300523047
]
]
}
}]
}
function init() {
map = L.map('map').setView([0, 0], 0);
// Set up the OSM layer
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
geojsonLayer = L.geoJson(geojson, {
onEachFeature:...