70 lines
2.0 KiB
HTML
70 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=1024, user-scalable=no">
|
|
<style>
|
|
html { height: 100% }
|
|
body { height: 100%; margin: 0; padding: 0;}
|
|
#map{ height: 100% }
|
|
</style>
|
|
<link rel="stylesheet" href="leaflet.css" />
|
|
|
|
<script src="leaflet-src.js"></script>
|
|
<script type="text/javascript" src="../dist/leaflet.ajax.js"></script>
|
|
<script src="spin.js"></script>
|
|
<script src="leaflet.spin.js"></script>
|
|
|
|
|
|
|
|
|
|
<title>Leaflet AJAX</title>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<script type="text/javascript">var m= L.map('map').setView([42.2, -71], 8);
|
|
var osmDataAttr = 'Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
|
|
var mopt = {
|
|
url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiY3dtIiwiYSI6InFoYkpvS00ifQ.WHqQ_q865NKjIQB6Wpoi2w',
|
|
options: {attribution:'© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
|
|
};
|
|
var osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:osmDataAttr});
|
|
var mq=L.tileLayer(mopt.url,mopt.options);
|
|
|
|
mq.addTo(m);
|
|
|
|
var baseMaps = {
|
|
"Mapbox Streets": mq,
|
|
"Open Street Map":osm
|
|
};
|
|
|
|
|
|
|
|
|
|
function popUp(f,l){
|
|
var out = [];
|
|
if (f.properties){
|
|
for(key in f.properties){
|
|
out.push(key+": "+f.properties[key]);
|
|
}
|
|
l.bindPopup(out.join("<br />"));
|
|
}
|
|
}
|
|
var jsonTest = new L.GeoJSON.AJAX("colleges.geojson",{onEachFeature:popUp});
|
|
var jsonpTest = L.geoJson.ajax("counties.jsonp",{onEachFeature:popUp,dataType:"jsonp"});
|
|
|
|
jsonTest.addTo(m);
|
|
var overlays={
|
|
"json":jsonTest,
|
|
"jsonp":jsonpTest
|
|
}
|
|
|
|
var lc=L.control.layers(baseMaps,overlays);
|
|
lc.addTo(m);
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|