235 lines
7.3 KiB
HTML
235 lines
7.3 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">
|
|
<link rel="stylesheet" href="/public/sprayMap.css">
|
|
<link rel="stylesheet" href="/public/map.css">
|
|
|
|
<script src="/public/js/utils.js" type="text/javascript"></script>
|
|
<script src="/leaflet/leaflet.js" type="text/javascript"></script>
|
|
<script src="/assets/js/leaflet-corridor.js" type="text/javascript"></script>
|
|
|
|
<script src="./spraydata.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="map"></div>
|
|
<script>
|
|
window.loaded = false;
|
|
params = req.params;
|
|
params.premium = req.premium;
|
|
var map;
|
|
|
|
initMapLib(params, loadLibs);
|
|
|
|
// Load additional libraries if needed then run the main scripts
|
|
function loadLibs() {
|
|
var libs = [];
|
|
if (params.coors) {
|
|
libs = libs.concat(['/assets/js/L.Control.MapCenterCoord.css', '/assets/js/L.Control.MapCenterCoord.js']);
|
|
if (params.coors == "UTM")
|
|
libs.push('/assets/js/utm.js');
|
|
}
|
|
loadScripts(libs, main);
|
|
}
|
|
|
|
function main() {
|
|
const mapDiv = document.getElementById("map");
|
|
if (mapDiv) {
|
|
mapDiv.style.width = params.width + 'px';
|
|
mapDiv.style.height = params.height + 'px';
|
|
}
|
|
|
|
map = L.map('map', {
|
|
zoomSnap: 0.1, maxZoom: 19,
|
|
zoomControl: false,
|
|
zoomAnimation: false,
|
|
attributionControl: false, attribution: ''
|
|
}).setView([params.center.lat, params.center.lng], params.zoom, { animate: false });
|
|
|
|
L.control.scale({ metric: !req.job.measureUnit, imperial: req.job.measureUnit, maxWidth: 150 }).addTo(map);
|
|
|
|
initMapBaseLayer(map, params);
|
|
|
|
if (params.coors) {
|
|
var _iconEl = L.DomUtil.create('div', 'leaflet-control-mapcentercoord-icon leaflet-zoom-hide');
|
|
map.getPanes().overlayPane.appendChild(_iconEl);
|
|
L.control.mapCenterCoord({ position: 'bottomright', onMove: true, template: '{y}, {x}', latlngFormat: (params.coors || 'DMS') }).addTo(map);
|
|
}
|
|
|
|
var sprayAreaColor = 'blue';
|
|
var strokeWidth = 4;
|
|
var bufColor = 'orange';
|
|
var featureGroup = new L.FeatureGroup([]).addTo(map);
|
|
var showTitle = params.titleOn || false;
|
|
|
|
if (req.job.sprayAreas) {
|
|
var centroid, polygon, name, ttArea, areaTitle;
|
|
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
|
|
};
|
|
}
|
|
});
|
|
featureGroup.addLayer(layer.getLayers()[0]);
|
|
if (showTitle) addAreaTitle(area, 0);
|
|
});
|
|
}
|
|
|
|
if (req.job.excludedAreas) {
|
|
req.job.excludedAreas.forEach(function (area) {
|
|
area['type'] = 'Feature';
|
|
var layer = L.geoJSON(area, {
|
|
style: function (feature) {
|
|
return {
|
|
color: 'red',
|
|
weight: strokeWidth
|
|
};
|
|
}
|
|
});
|
|
featureGroup.addLayer(layer.getLayers()[0]);
|
|
});
|
|
}
|
|
|
|
if (req.job.waypoints)
|
|
addPlaces(req.job.waypoints, showTitle);
|
|
if (req.job.places)
|
|
addPlaces(req.job.places, showTitle);
|
|
|
|
var bufs = req.job.bufs;
|
|
if (bufs) {
|
|
var ops = {
|
|
fill: false,
|
|
color: this.bufColor,
|
|
opacity: 0.75,
|
|
lineCap: 'butt',
|
|
lineJoin: 'bevel',
|
|
};
|
|
var bufWidthMet;
|
|
bufs.forEach(function (buf) {
|
|
var latlng = buf.geometry.coordinates.map(function (coor) {
|
|
return [coor[1], coor[0]]; // LonLat => LatLon
|
|
});
|
|
bufWidthMet = toMeter((buf.properties["width"] || 10), req.job.measureUnit);
|
|
ops["corridor"] = toMeter((buf.properties["width"] || 10), req.job.measureUnit);
|
|
var line = L.corridor(latlng, ops);
|
|
featureGroup.addLayer(line);
|
|
});
|
|
}
|
|
|
|
if (req.data && req.data.length) {
|
|
for (var i = 0; i < req.data.length; i++) {
|
|
if (!req.data[i].fdata || !req.data[i].fdata.length) continue;
|
|
featureGroup.addLayer(
|
|
L.polyline(req.data[i].fdata,
|
|
{
|
|
lineCap: 'butt',
|
|
lineJoin: 'bevel',
|
|
color: req.colors.fpColor, weight: 2, opacity: .75,
|
|
bubblingMouseEvents: false,
|
|
smoothFactor: 2
|
|
})
|
|
);
|
|
}
|
|
|
|
var overlap = req.sprOp && req.sprOp.overlap ? req.sprOp.overlap / 100 : 1.12;
|
|
var ops = {
|
|
corridor: toMeter(req.job.swathWidth, req.job.measureUnit) * overlap,
|
|
usUnit: this.isUS,
|
|
lineCap: 'butt',
|
|
lineJoin: 'bevel',
|
|
opacity: 0.5,
|
|
color: '#ff00ff'
|
|
};
|
|
req.data.forEach(function (it) {
|
|
it.data.forEach(function (lls) {
|
|
if (lls.length >= 2) {
|
|
var latLngs = lls.map(function (p) { return new L.LatLng(p[0], p[1]); });
|
|
var layer = new L.corridor(latLngs, ops);
|
|
featureGroup.addLayer(layer);
|
|
}
|
|
})
|
|
});
|
|
}
|
|
if (req.obs && req.obs.length) {
|
|
var ob, icon;
|
|
for (var i = 0; i < req.obs.length; i++) {
|
|
ob = req.obs[i];
|
|
icon = L.icon({
|
|
iconUrl: '/assets/images/tower_' + ob.icon,
|
|
iconSize: [20, 22],
|
|
iconAnchor: [10, 20]
|
|
});
|
|
L.marker([ob.lat, ob.lng], { icon: icon }).addTo(map);
|
|
};
|
|
}
|
|
}
|
|
|
|
function addPlaces(geoPoints, showTitle) {
|
|
var geoCoor, name;
|
|
geoPoints.forEach(function (it) {
|
|
it['type'] = 'Feature';
|
|
if (showTitle) {
|
|
geoCoor = it.geometry.coordinates;
|
|
name = it.properties.name || '';
|
|
addTooltipLayer(name, [geoCoor[1], geoCoor[0]])
|
|
}
|
|
});
|
|
var pointOps = {
|
|
radius: 4,
|
|
fillColor: "#ff7800",
|
|
color: "#000",
|
|
weight: 1,
|
|
opacity: 1,
|
|
fillOpacity: 0.8
|
|
};
|
|
L.geoJSON(geoPoints, {
|
|
pointToLayer: function (feature, latlng) {
|
|
return L.circleMarker(latlng, pointOps);
|
|
}
|
|
}).addTo(map);
|
|
}
|
|
|
|
function addTooltipLayer(name, coor, ops) {
|
|
var ttOps = ops || {
|
|
className: "report-place",
|
|
direction: "right"
|
|
};
|
|
var popup1 = new L.Tooltip(ttOps);
|
|
popup1.setLatLng(coor);
|
|
popup1.setContent(name);
|
|
map.addLayer(popup1);
|
|
}
|
|
|
|
function addAreaTitle(geoPoly, type, ops) {
|
|
var props = geoPoly.properties,
|
|
name = props.name || '',
|
|
ttArea = props.area || 0,
|
|
title;
|
|
var center = props.center;
|
|
|
|
if (type === 0 && ttArea) {
|
|
title = '<div>${name}<span class="title-center">${ttArea} ${unit}</span></div>';
|
|
title = title.replace('${ttArea}', toArea(ttArea, req.job.measureUnit).toFixed(2)).replace('${unit}', getUnit(req.job.measureUnit));
|
|
} else
|
|
title = '<div>${name}</div>';
|
|
title = title.replace('${name}', name);
|
|
|
|
var ttOps = ops || {
|
|
className: "report-place",
|
|
direction: "top"
|
|
};
|
|
addTooltipLayer(title, center, ttOps);
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |