146 lines
4.0 KiB
HTML
146 lines
4.0 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>
|
|
|
|
<!--<script src="/jquery/jquery.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;
|
|
}
|
|
|
|
.overlayImage {
|
|
border: 2px solid red;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="./js/downloadMap.css">
|
|
<script src="./js/downloadMap.js"></script>
|
|
</head>
|
|
|
|
<body class="">
|
|
<div id="map"></div>
|
|
<script>
|
|
var map = L.map('map', {
|
|
zoomControl: false,
|
|
attribution: ''
|
|
});
|
|
|
|
var tileLayer = L.esri.basemapLayer('Imagery').addTo(map);
|
|
L.esri.basemapLayer('ImageryLabels').addTo(map);
|
|
|
|
// Test add the captured image back to map
|
|
// var imageUrl = 'Barrie-0001.jpg',
|
|
// imageBounds = [[44.286179328717054, -79.70833718776704], [44.38097051723889, -79.62574660778047]];
|
|
// L.imageOverlay(imageUrl, imageBounds,
|
|
// { opacity: 0.8, zIndex: 999999, className: 'overlayImage', interactive: true })
|
|
// .addTo(map);
|
|
|
|
var sprayAreaColor = 'blue';
|
|
var strokeWidth = 4;
|
|
var excludedAreaColor = 'red';
|
|
|
|
if (req.job) {
|
|
var geojsonLayers = [];
|
|
if (req.job.sprayAreas) {
|
|
req.job.sprayAreas.forEach(function (area) {
|
|
area['type'] = 'Feature';
|
|
var layer = L.geoJSON(area, {
|
|
style: function (feature) {
|
|
return {
|
|
color: feature.properties['color'] || sprayAreaColor,
|
|
weight: strokeWidth
|
|
};
|
|
}
|
|
});
|
|
geojsonLayers.push(layer.getLayers()[0]);
|
|
});
|
|
}
|
|
|
|
if (req.job.excludedAreas) {
|
|
req.job.excludedAreas.forEach(function (area) {
|
|
area['type'] = 'Feature';
|
|
var layer = L.geoJSON(area, {
|
|
style: function (feature) {
|
|
return {
|
|
color: feature.properties['color'] || excludedAreaColor,
|
|
weight: strokeWidth
|
|
};
|
|
}
|
|
});
|
|
geojsonLayers.push(layer.getLayers()[0]);
|
|
});
|
|
}
|
|
|
|
var geojsonMarkerOptions = {
|
|
icon: L.icon({
|
|
iconUrl: 'marker-icon.png',
|
|
shadowUrl: 'marker-shadow.png',
|
|
iconAnchor: [12, 41]
|
|
})
|
|
};
|
|
|
|
if (req.job.waypoints) {
|
|
req.job.waypoints.forEach(function (point) {
|
|
point['type'] = 'Feature';
|
|
var layer = L.geoJSON(point, {
|
|
pointToLayer: function (feature, latlng) {
|
|
return new L.Marker(latlng, geojsonMarkerOptions);
|
|
}
|
|
});
|
|
geojsonLayers.push(layer.getLayers()[0]);
|
|
});
|
|
}
|
|
|
|
geojsonLayers.forEach(function (gsLayer) {
|
|
gsLayer.addTo(map);
|
|
});
|
|
}
|
|
|
|
map.setView(req.options.center, req.options.zoom);
|
|
|
|
var featureGroups = L.featureGroup(geojsonLayers);
|
|
var bounds = featureGroups.getBounds().pad(0.5);
|
|
|
|
console.log('Bounds: ', bounds);
|
|
|
|
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()
|
|
+ '<br> MapSize: ' + map.getSize();
|
|
})
|
|
return gauge;
|
|
}
|
|
});
|
|
(new ZoomViewer).addTo(map);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |