162 lines
4.8 KiB
HTML
162 lines
4.8 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>-->
|
|
|
|
<link rel="stylesheet" href="/leaflet/dist/leaflet.css">
|
|
<script src="/leaflet/dist/leaflet.js"></script>
|
|
<!--<script src="/proj4leaflet/lib/proj4-compressed.js"></script>
|
|
<script src="/proj4leaflet/src/proj4leaflet.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 srsCode = req.centerUTM.hemisphere === 'N' ? '326' : '327';
|
|
// srsCode = srsCode + req.centerUTM.zone;
|
|
|
|
// var utmCRS = new L.Proj.CRS('EPSG:' + srsCode,
|
|
// '+proj=utm +zone=' + req.centerUTM.zone + ' +ellps=WGS84 +datum=WGS84 +units=m +no_defs',
|
|
// {
|
|
// resolutions: [
|
|
// 8192, 4096, 2048, 1024, 512, 256, 128
|
|
// ],
|
|
// origin: [0, 0]
|
|
// });
|
|
|
|
// var map = L.map('map', {
|
|
// zoomControl: false,
|
|
// attribution: '',
|
|
// crs: utmCRS
|
|
// });
|
|
|
|
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.center.northing, req.center.easting], req.zoom);
|
|
map.setView(req.center, req.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> |