219 lines
6.1 KiB
HTML
219 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="./leaflet/leaflet.css">
|
|
<script src="./leaflet/leaflet.js"></script>
|
|
<!-- Load Esri Leaflet from CDN -->
|
|
<script src="https://unpkg.com/esri-leaflet@2.0.8"></script>
|
|
<style>
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
#map {
|
|
width: 800px;
|
|
height: 600px;
|
|
/*top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;*/
|
|
}
|
|
</style>
|
|
<script src="./leaflet/json_data-01.js" type="text/javascript"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="map"></div>
|
|
<div>
|
|
<input type="button" value="++" onclick="zoomIn()">
|
|
<input type="button" value="--" onclick="zoomOut()">
|
|
</div>
|
|
<script>
|
|
var params = {};
|
|
if (location.search) {
|
|
var parts = location.search.substring(1).split('&');
|
|
|
|
for (var i = 0; i < parts.length; i++) {
|
|
var nv = parts[i].split('=');
|
|
if (!nv[0]) continue;
|
|
params[nv[0]] = nv[1] || true;
|
|
}
|
|
}
|
|
|
|
// console.log(params);
|
|
|
|
var map = L.map('map', {
|
|
zoomControl: false,
|
|
// zoomSnap: 0.1,
|
|
// zoom: mapOptions.zoom,
|
|
// center: mapOptions.center,
|
|
// minZoom: 13,
|
|
// maxZoom: 16
|
|
center: [51.5, -0.09],
|
|
attribution: ''
|
|
});
|
|
// L.control.scale().addTo(map);
|
|
var tileLayer = L.esri.basemapLayer('Imagery').addTo(map);
|
|
L.esri.basemapLayer('ImageryLabels').addTo(map);
|
|
|
|
L.control.scale().addTo(map);
|
|
|
|
map.on('zoomend', function () {
|
|
console.log('zoomend - Zoom Level: ', map.getZoom());
|
|
});
|
|
|
|
map.on('moveend', function () {
|
|
console.log('moveend - Zoom Level: ', map.getZoom());
|
|
});
|
|
|
|
// NW: LatLng(44.38097, -79.70834)
|
|
// SE: LatLng(44.28618, -79.62575)
|
|
console.log('NW: ', L.Projection.SphericalMercator.project(new L.latLng(44.38097, -79.70834)));
|
|
console.log('SE: ', L.Projection.SphericalMercator.project(new L.latLng(44.28618, -79.62575)));
|
|
|
|
var meterPerPixel = 0;
|
|
|
|
function onEachFeature(feature, layer) {
|
|
layer.bindPopup('Hello' + feature.properties.popupContent);//layer.lattitude + ", " + layer.longitude);
|
|
layer.on('mouseover', function () { layer.openPopup(); });
|
|
layer.on('mouseout', function () { layer.closePopup(); });
|
|
}
|
|
|
|
var baseballIcon = L.icon({
|
|
iconUrl: './leaflet/baseball-marker.png',
|
|
iconSize: [32, 37],
|
|
iconAnchor: [16, 37],
|
|
popupAnchor: [0, -28]
|
|
});
|
|
var layer1 = L.geoJSON([bicycleRental, campus], {
|
|
|
|
style: function (feature) {
|
|
return feature.properties && feature.properties.style;
|
|
},
|
|
onEachFeature: onEachFeature,
|
|
pointToLayer: function (feature, latlng) {
|
|
return L.circleMarker(latlng, {
|
|
radius: 8,
|
|
fillColor: "#ff7800",
|
|
color: "#000",
|
|
weight: 1,
|
|
opacity: 1,
|
|
fillOpacity: 0.8
|
|
});
|
|
},
|
|
})
|
|
layer1.addTo(map);
|
|
|
|
var layer2 = L.geoJSON(freeBus, {
|
|
|
|
filter: function (feature, layer) {
|
|
if (feature.properties) {
|
|
// If the property "underConstruction" exists and is true, return false (don't render features under construction)
|
|
return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true;
|
|
}
|
|
return false;
|
|
},
|
|
onEachFeature: onEachFeature
|
|
});
|
|
layer2.addTo(map);
|
|
|
|
var layer3 = L.geoJSON(coorsField, {
|
|
onEachFeature: onEachFeature,
|
|
pointToLayer: function (feature, latlng) {
|
|
return L.marker(latlng, { icon: baseballIcon });
|
|
}
|
|
});
|
|
layer3.addTo(map);
|
|
|
|
var editableLayers = new L.FeatureGroup([]);
|
|
|
|
layer1.getLayers().forEach(function (l) {
|
|
editableLayers.addLayer(l);
|
|
});
|
|
layer2.getLayers().forEach(function (l) {
|
|
editableLayers.addLayer(l);
|
|
});
|
|
layer3.getLayers().forEach(function (l) {
|
|
editableLayers.addLayer(l);
|
|
});
|
|
|
|
var allLayers = editableLayers.getLayers();
|
|
console.log(allLayers);
|
|
|
|
var bounds = editableLayers.getBounds();
|
|
|
|
// function filterSpray(layer) {
|
|
// return layer.feature.geometry.type.endsWith("Polygon");
|
|
// }
|
|
// var sprayLayers = allLayers.filter(filterSpray);
|
|
// var sprayGroup = new L.FeatureGroup(sprayLayers);
|
|
// var bounds = sprayGroup.getBounds();
|
|
|
|
// var bounds = L.latLngBounds(layer1.getBounds());
|
|
// bounds.extend(layer2.getBounds());
|
|
// bounds.extend(layer3.getBounds());
|
|
// //etc
|
|
|
|
/**/
|
|
map.setView([39.74763, -104.99943], 17);
|
|
L.rectangle(bounds, { color: "#ff9830", weight: 1 }).addTo(map);
|
|
bounds2 = bounds.pad(.6);
|
|
L.rectangle(bounds2, { color: "#ff7800", weight: 1 }).addTo(map);
|
|
|
|
map.fitBounds(bounds2);
|
|
|
|
console.log(map.getZoomScale(map.getZoom(), map.getZoom() + 1));
|
|
console.log(map.getZoomScale(map.getZoom(), map.getZoom() - 1));
|
|
|
|
console.log('Bound1: ', bounds.getCenter());
|
|
console.log('Bound2: ', bounds2.getCenter());
|
|
|
|
var ZoomViewer = L.Control.extend({
|
|
onAdd: function () {
|
|
var gauge = L.DomUtil.create('div');
|
|
gauge.style.width = '200px';
|
|
gauge.style.background = 'rgba(255,255,255,0.5)';
|
|
gauge.style.textAlign = 'left';
|
|
map.on('zoomstart zoom zoomend', function (ev) {
|
|
var y = map.getSize().y,
|
|
x = map.getSize().x;
|
|
// Calculate the distance the one side of the map to the other using the haversine formula
|
|
var maxMeters = map.containerPointToLatLng([0, y]).distanceTo(map.containerPointToLatLng([x, y]));
|
|
// Calculate how many meters each pixel represents
|
|
meterPerPixel = maxMeters / x;
|
|
var width = bounds.getSouthWest().distanceTo(bounds.getSouthEast());
|
|
var height = bounds.getNorthWest().distanceTo(bounds.getSouthWest());
|
|
|
|
gauge.innerHTML = 'Zoom level: ' + map.getZoom() + '<br>' + 'Scale: ' + meterPerPixel
|
|
+ '<br> width: ' + width + ', height: ' + height
|
|
+ '<br> ImgW: ' + width / meterPerPixel + ', ImgH: ' + height / meterPerPixel
|
|
+ '<br> Center: ' + bounds.getCenter()
|
|
+ '<br> TopLeft: ' + bounds.getNorthWest();
|
|
})
|
|
return gauge;
|
|
}
|
|
});
|
|
(new ZoomViewer).addTo(map);
|
|
|
|
function zoomOut() {
|
|
// map.setZoom(map.getZoom() - 0.1);
|
|
map.zoomOut();
|
|
}
|
|
function zoomIn() {
|
|
// map.setZoom(map.getZoom() + 0.1);
|
|
map.zoomIn();
|
|
}
|
|
// var mapDiv = document.getElementById("map");
|
|
// mapDiv.style.width = params.width + 'px';
|
|
// mapDiv.style.height = params.width + 'px';
|
|
// map.invalidateSize();
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |