Hugging Face's logo

Spaces:
thanthamky
/
demo-webmap-analysis
Running

App Files Community
demo-webmap-analysis / index.html
thanthamky's picture
thanthamky
Upload index.html
d3fca18 verified
raw
history blame contribute delete
47.3 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webmap 201</title>
<link rel="stylesheet" href="src/leaflet.css">
<link rel="stylesheet" href="src/css/bootstrap.css">
<link rel="stylesheet" href="src/plugins/L.Control.MousePosition.css">
<link rel="stylesheet" href="src/plugins/L.Control.Sidebar.css">
<link rel="stylesheet" href="src/plugins/Leaflet.PolylineMeasure.css">
<link rel="stylesheet" href="src/plugins/easy-button.css">
<link rel="stylesheet" href="src/plugins/leaflet-styleeditor/css/Leaflet.StyleEditor.css">
<link rel="stylesheet" href="src/css/font-awesome.min.css">
<link rel="stylesheet" href="src/plugins/leaflet.awesome-markers.css">
<link rel="stylesheet" href="src/plugins/leaflet-mapkey/MapkeyIcons.css">
<link rel="stylesheet" href="src/plugins/leaflet-mapkey/L.Icon.Mapkey.css">
<link rel="stylesheet" href="src/plugins/MarkerCluster.css">
<link rel="stylesheet" href="src/plugins/MarkerCluster.Default.css">
<link rel="stylesheet" href="src/jquery-ui.min.css">
<script src="src/leaflet-src.js"></script>
<script src="src/jquery-3.2.0.min.js"></script>
<script src="src/plugins/L.Control.MousePosition.js"></script>
<script src="src/plugins/L.Control.Sidebar.js"></script>
<script src="src/plugins/Leaflet.PolylineMeasure.js"></script>
<script src="src/plugins/easy-button.js"></script>
<script src="src/plugins/leaflet-providers.js"></script>
<script src="src/plugins/leaflet-styleeditor/javascript/Leaflet.StyleEditor.js"></script>
<script src="src/plugins/leaflet-styleeditor/javascript/Leaflet.StyleForms.js"></script>
<script src="src/plugins/leaflet.ajax.min.js"></script>
<script src="src/plugins/leaflet.sprite.js"></script>
<script src="src/plugins/leaflet.awesome-markers.min.js"></script>
<script src="src/plugins/leaflet-mapkey/L.Icon.Mapkey.js"></script>
<script src="src/plugins/leaflet.markercluster.js"></script>
<script src="src/plugins/leaflet.geometryutil.js"></script>
<script src="src/jquery-ui.min.js"></script>
<script src="src/turf.min.js"></script>
<!-- *************** Begin Leaflet.Draw-->
<script src="src/plugins/leaflet-draw/Leaflet.draw.js"></script>
<script src="src/plugins/leaflet-draw/Leaflet.Draw.Event.js"></script>
<link rel="stylesheet" href="src/plugins/leaflet-draw/leaflet.draw.css"/>
<script src="src/plugins/leaflet-draw/Toolbar.js"></script>
<script src="src/plugins/leaflet-draw/Tooltip.js"></script>
<script src="src/plugins/leaflet-draw/ext/GeometryUtil.js"></script>
<script src="src/plugins/leaflet-draw/ext/LatLngUtil.js"></script>
<script src="src/plugins/leaflet-draw/ext/LineUtil.Intersect.js"></script>
<script src="src/plugins/leaflet-draw/ext/Polygon.Intersect.js"></script>
<script src="src/plugins/leaflet-draw/ext/Polyline.Intersect.js"></script>
<script src="src/plugins/leaflet-draw/ext/TouchEvents.js"></script>
<script src="src/plugins/leaflet-draw/draw/DrawToolbar.js"></script>
<script src="src/plugins/leaflet-draw/draw/handler/Draw.Feature.js"></script>
<script src="src/plugins/leaflet-draw/draw/handler/Draw.SimpleShape.js"></script>
<script src="src/plugins/leaflet-draw/draw/handler/Draw.Polyline.js"></script>
<script src="src/plugins/leaflet-draw/draw/handler/Draw.Circle.js"></script>
<script src="src/plugins/leaflet-draw/draw/handler/Draw.Marker.js"></script>
<script src="src/plugins/leaflet-draw/draw/handler/Draw.Polygon.js"></script>
<script src="src/plugins/leaflet-draw/draw/handler/Draw.Rectangle.js"></script>
<script src="src/plugins/leaflet-draw/edit/EditToolbar.js"></script>
<script src="src/plugins/leaflet-draw/edit/handler/EditToolbar.Edit.js"></script>
<script src="src/plugins/leaflet-draw/edit/handler/EditToolbar.Delete.js"></script>
<script src="src/plugins/leaflet-draw/Control.Draw.js"></script>
<script src="src/plugins/leaflet-draw/edit/handler/Edit.Poly.js"></script>
<script src="src/plugins/leaflet-draw/edit/handler/Edit.SimpleShape.js"></script>
<script src="src/plugins/leaflet-draw/edit/handler/Edit.Circle.js"></script>
<script src="src/plugins/leaflet-draw/edit/handler/Edit.Rectangle.js"></script>
<script src="src/plugins/leaflet-draw/edit/handler/Edit.Marker.js"></script>
<!-- ************** End of Lealet Draw-->
<style>
#mapdiv {
height:100vh;
}
.col-xs-12, .col-xs-6, .col-xs-4 {
padding:3px;
}
#divProject {
background-color: beige;
}
#divBUOWL {
background-color: #ffffb3;
}
#divEagle {
background-color: #ccffb3;
}
#divRaptor {
background-color: #e6ffff;
}
.errorMsg {
padding:0;
text-align:center;
background-color:darksalmon;
}
</style>
</head>
<body>
<div id="side-bar" class="col-md-3">
<button id='btnLocate' class='btn btn-primary btn-block'>Locate</button><br>
<div id="divProject" class="col-xs-12">
<div id="divProjectLabel" class="text-center col-xs-12">
<h4 id="lblProject">Linear Projects</h4>
</div>
<div id="divProjectError" class="errorMsg col-xs-12"></div>
<div id="divFindProject" class="form-group has-error">
<div class="col-xs-6">
<input type="text" id="txtFindProject" class="form-control" placeholder="Project ID">
</div>
<div class="col-xs-6">
<button id="btnFindProject" class="btn btn-primary btn-block" disabled>Find Project</button>
</div>
</div>
<div id="divFilterProject" class="col-xs-12">
<div class="col-xs-4">
<input type='checkbox' name='fltProject' value='Pipeline' checked>Pipelines<br>
<input type='checkbox' name='fltProject' value='Road' checked>Access Roads
<button id="btnProjectFilterAll" class="btn btn-primary btn-block">Check All</button>
</div>
<div class="col-xs-4">
<input type='checkbox' name='fltProject' value='Electric' checked>Electric Lines<br>
<input type='checkbox' name='fltProject' value='Extraction' checked>Extractions
<button id="btnProjectFilterNone" class="btn btn-primary btn-block">Uncheck All</button>
</div>
<div class="col-xs-4">
<input type='checkbox' name='fltProject' value='Flowline' checked>Flowlines<br>
<input type='checkbox' name='fltProject' value='Other' checked>Other
<button id="btnProjectFilter" class="btn btn-primary btn-block">Filter</button>
</div>
</div>
<div class="" id="divProjectData"></div>
</div>
<div id="divBUOWL" class="col-xs-12">
<div id="divBUOWLLabel" class="text-center col-xs-12">
<h4 id="lblBUOWL">BUOWL Habitat</h4>
</div>
<div id="divBUOWLError" class="errorMsg col-xs-12"></div>
<div id="divFindBUOWL" class="form-group has-error">
<div class="col-xs-6">
<input type="text" id="txtFindBUOWL" class="form-control" placeholder="Habitat ID">
</div>
<div class="col-xs-6">
<button id="btnFindBUOWL" class="btn btn-primary btn-block" disabled>Find BUOWL</button>
</div>
</div>
<div id="divFilterBUOWL" class="col-xs-12">
<div class="col-xs-4">
<input type='radio' name='fltBUOWL' value='ALL' checked>All
</div>
<div class="col-xs-4">
<input type='radio' name='fltBUOWL' value='Yes'>Historically Occupied
</div>
<div class="col-xs-4">
<input type='radio' name='fltBUOWL' value='Undetermined'>Undetermined
</div>
</div>
<div class="" id="divBUOWLData"></div>
</div>
<div id="divEagle" class="col-xs-12">
<div id="divEagleLabel" class="text-center col-xs-12">
<h4 id="lblEagle">Eagle Nests</h4>
</div>
<div id="divEagleError" class="errorMsg col-xs-12"></div>
<div id="divFindEagle" class="form-group has-error">
<div class="col-xs-6">
<input type="text" id="txtFindEagle" class="form-control" placeholder="Eagle Nest ID">
</div>
<div class="col-xs-6">
<button id="btnFindEagle" class="btn btn-primary btn-block" disabled>Find Eagle Nest</button>
</div>
</div>
<div id="divFilterEagle" class="col-xs-12">
<div class="col-xs-4">
<input type='radio' name='fltEagle' value='ALL' checked>All
</div>
<div class="col-xs-4">
<input type='radio' name='fltEagle' value='ACTIVE NEST'>Active
</div>
<div class="col-xs-4">
<input type='radio' name='fltEagle' value='INACTIVE LOCATION'>Inactive
</div>
</div>
<div class="" id="divEagleData"></div>
</div>
<div id="divRaptor" class="col-xs-12">
<div id="divRaptorLabel" class="text-center col-xs-12">
<h4 id="lblRaptor">Raptor Nests</h4>
</div>
<div id="divRaptorError" class="errorMsg col-xs-12"></div>
<div id="divFindRaptor" class="form-group has-error">
<div class="col-xs-6">
<input type="text" id="txtFindRaptor" class="form-control" placeholder="Raptor Nest ID">
</div>
<div class="col-xs-6">
<button id="btnFindRaptor" class="btn btn-primary btn-block" disabled>Find Raptor Nest</button>
</div>
</div>
<div id="divFilterRaptor" class="col-xs-12">
<div class="col-xs-3">
<input type='radio' name='fltRaptor' value='ALL' checked>All
</div>
<div class="col-xs-3">
<input type='radio' name='fltRaptor' value='ACTIVE NEST'>Active
</div>
<div class="col-xs-3">
<input type='radio' name='fltRaptor' value='INACTIVE NEST'>Inactive
</div>
<div class="col-xs-3">
<input type='radio' name='fltRaptor' value='FLEDGED NEST'>Fledged
</div>
</div>
<div class="" id="divRaptorData"></div>
</div>
</div>
<div id="mapdiv" class="col-md-12"></div>
<script>
var mymap;
var lyrOSM;
var lyrWatercolor;
var lyrTopo;
var lyrImagery;
var lyrOutdoors;
var lyrEagleNests;
var lyrRaptorNests;
var lyrClientLines;
var lyrClientLinesBuffer;
var lyrBUOWL;
var lyrBUOWLbuffer;
var jsnBUOWLbuffer;
var lyrGBH;
var lyrSearch;
var lyrMarkerCluster;
var mrkCurrentLocation;
var fgpDrawnItems;
var ctlAttribute;
var ctlScale;
var ctlMouseposition;
var ctlMeasure;
var ctlEasybutton;
var ctlSidebar;
var ctlLayers;
var ctlDraw;
var ctlStyle;
var objBasemaps;
var objOverlays;
var arProjectIDs = [];
var arHabitatIDs = [];
var arEagleIDs = [];
var arRaptorIDs = [];
$(document).ready(function(){
// ********* Map Initialization ****************
mymap = L.map('mapdiv', {center:[40.18, -104.83], zoom:11, attributionControl:false});
ctlSidebar = L.control.sidebar('side-bar').addTo(mymap);
ctlEasybutton = L.easyButton('glyphicon-transfer', function(){
ctlSidebar.toggle();
}).addTo(mymap);
ctlAttribute = L.control.attribution().addTo(mymap);
ctlAttribute.addAttribution('OSM');
ctlAttribute.addAttribution('&copy; <a href="http://millermountain.com">Miller Mountain LLC</a>');
ctlScale = L.control.scale({position:'bottomleft', metric:false, maxWidth:200}).addTo(mymap);
ctlMouseposition = L.control.mousePosition().addTo(mymap);
ctlStyle = L.control.styleEditor({position:'topright', openOnLeafletDraw:false}).addTo(mymap);
ctlMeasure = L.control.polylineMeasure().addTo(mymap);
// *********** Layer Initialization **********
lyrOSM = L.tileLayer.provider('OpenStreetMap.Mapnik');
lyrTopo = L.tileLayer.provider('OpenTopoMap');
lyrImagery = L.tileLayer.provider('Esri.WorldImagery');
lyrOutdoors = L.tileLayer.provider('Thunderforest.Outdoors');
lyrWatercolor = L.tileLayer.provider('Stamen.Watercolor');
mymap.addLayer(lyrOSM);
fgpDrawnItems = new L.FeatureGroup();
fgpDrawnItems.addTo(mymap);
lyrEagleNests = L.geoJSON.ajax('data/wildlife_eagle.geojson', {pointToLayer:returnEagleMarker, filter:filterEagle}).addTo(mymap);
lyrEagleNests.on('data:loaded', function(){
arEagleIDs.sort(function(a,b){return a-b});
$("#txtFindEagle").autocomplete({
source:arEagleIDs
});
});
lyrMarkerCluster = L.markerClusterGroup();
lyrRaptorNests = L.geoJSON.ajax('data/wildlife_raptor.geojson', {pointToLayer:returnRaptorMarker, filter:filterRaptor});
lyrRaptorNests.on('data:loaded', function(){
arRaptorIDs.sort(function(a,b){return a-b});
$("#txtFindRaptor").autocomplete({
source:arRaptorIDs
});
lyrMarkerCluster.clearLayers();
lyrMarkerCluster.addLayer(lyrRaptorNests);
lyrMarkerCluster.addTo(mymap);
});
lyrClientLinesBuffer = L.featureGroup();
lyrClientLines = L.geoJSON.ajax('data/client_lines.geojson', {style:styleClientLinears, onEachFeature:processClientLinears, filter:filterClientLines}).addTo(mymap);
lyrClientLines.on('data:loaded', function(){
arProjectIDs.sort(function(a,b){return a-b});
$("#txtFindProject").autocomplete({
source:arProjectIDs
});
lyrClientLinesBuffer.addTo(mymap);
lyrClientLines.bringToFront();
});
lyrBUOWL = L.geoJSON.ajax('data/wildlife_buowl.geojson', {style:styleBUOWL, onEachFeature:processBUOWL, filter:filterBUOWL}).addTo(mymap);
lyrBUOWL.on('data:loaded', function(){
arHabitatIDs.sort(function(a,b){return a-b});
$("#txtFindBUOWL").autocomplete({
source:arHabitatIDs
});
jsnBUOWLbuffer = turf.buffer(lyrBUOWL.toGeoJSON(), 0.3, 'kilometers');
console.log(jsnBUOWLbuffer);
lyrBUOWLbuffer = L.geoJSON(jsnBUOWLbuffer, {style:{color:'yellow', dashArray:'5,5', fillOpacity:0}}).addTo(mymap);
lyrBUOWL.bringToFront();
});
lyrGBH = L.geoJSON.ajax('data/wildlife_gbh.geojson', {style:{color:'fuchsia'}}).bindTooltip("GBH Nesting Area").addTo(mymap);
// ********* Setup Layer Control ***************
objBasemaps = {
"Open Street Maps": lyrOSM,
"Topo Map":lyrTopo,
"Imagery":lyrImagery,
"Outdoors":lyrOutdoors,
"Watercolor":lyrWatercolor
};
objOverlays = {
"Client Linears":lyrClientLines,
"Burrowing Owl Habitat":lyrBUOWL,
"Eagle Nest":lyrEagleNests,
"Raptor Nest":lyrMarkerCluster,
"GBH Rookeries":lyrGBH,
"Drawn Items":fgpDrawnItems
};
ctlLayers = L.control.layers(objBasemaps, objOverlays).addTo(mymap);
// ********** Setup Draw Control ****************
ctlDraw = new L.Control.Draw({
draw:{
polygon:false,
circle:false,
rectangle:false,
},
edit:{
featureGroup:fgpDrawnItems,
remove:false
}
});
ctlDraw.addTo(mymap);
mymap.on('draw:created', function(e){
switch (e.layerType) {
case 'marker':
var llRef = e.layer.getLatLng();
var strTable = "<table class='table table-hover'>";
strTable += "<tr><th>Constraint</th><th>ID</th><th>Type</th><th>Distance</th><th>Direction</th></tr>";
var nrBUOWL = returnClosestlayer(lyrBUOWL, llRef);
strTable += "<tr><td>BUOWL</td><td>"+nrBUOWL.att.habitat_id+"</td><td>"+nrBUOWL.att.recentstatus+"</td><td>"+nrBUOWL.distance.toFixed(0)+" m</td><td>"+nrBUOWL.bearing.toFixed(0)+"</td></tr>";
var nrEagle = returnClosestlayer(lyrEagleNests, llRef);
strTable += "<tr><td>Eagle Nest</td><td>"+nrEagle.att.nest_id+"</td><td>"+nrEagle.att.status+"</td><td>"+nrEagle.distance.toFixed(0)+" m</td><td>"+nrEagle.bearing.toFixed(0)+"</td></tr>";
var nrRaptor = returnClosestlayer(lyrRaptorNests, llRef);
strTable += "<tr><td>Raptor Nest</td><td>"+nrRaptor.att.Nest_ID+"</td><td>"+nrRaptor.att.recentspecies+"<br>"+nrRaptor.att.recentstatus+"</td><td>"+nrRaptor.distance.toFixed(0)+" m</td><td>"+nrRaptor.bearing.toFixed(0)+"</td></tr>";
var nrGBH = returnClosestlayer(lyrGBH, llRef);
strTable += "<tr><td>GBH Rookery</td><td>N/A</td><td>N/A</td><td>"+(nrGBH.distance+250).toFixed(0)+" m</td><td>"+nrGBH.bearing.toFixed(0)+"</td></tr>";
strTable += "</table>";
fgpDrawnItems.addLayer(e.layer.bindPopup(strTable, {maxWidth:400}));
break;
case 'polyline':
var line = e.layer.toGeoJSON();
var colEagle = summarizePointsByLine(line, 0.8, lyrEagleNests.toGeoJSON(), 'status');
var sumEagle = summarizeArray(colEagle.features[0].properties.statusVals);
var strPopup = "Eagles";
for (var i=0;i<sumEagle[0].length;i++) {
strPopup += "<br> "+sumEagle[0][i]+": "+sumEagle[1][i];
}
var arRTH = returnLayersByAttribute(lyrRaptorNests, 'recentspecies', 'Red-tail Hawk');
var fcRTH = L.featureGroup(arRTH).toGeoJSON();
var colRTH = summarizePointsByLine(line, 0.533, fcRTH, 'recentstatus');
var sumRTH = summarizeArray(colRTH.features[0].properties.recentstatusVals);
strPopup += "<br>Hawks<br>&nbsp;&nbsp;Red-tail Hawk";
for (var i=0;i<sumRTH[0].length;i++) {
strPopup += "<br>&nbsp;&nbsp;&nbsp;&nbsp;"+sumRTH[0][i]+": "+sumRTH[1][i];
}
var arSWH = returnLayersByAttribute(lyrRaptorNests, 'recentspecies', 'Swainsons Hawk');
var fcSWH = L.featureGroup(arSWH).toGeoJSON();
var colSWH = summarizePointsByLine(line, 0.533, fcSWH, 'recentstatus');
var sumSWH = summarizeArray(colSWH.features[0].properties.recentstatusVals);
strPopup += "<br>Hawks<br>&nbsp;&nbsp;Swainsons Hawk";
for (var i=0;i<sumSWH[0].length;i++) {
strPopup += "<br>&nbsp;&nbsp;&nbsp;&nbsp;"+sumSWH[0][i]+": "+sumSWH[1][i];
}
var bufLine = turf.buffer(line, 0.05, 'kilometers');
var intBUOWL = intersectPolyByPolyFC(bufLine, lyrBUOWL.toGeoJSON());
var intBUOWLline = intersectLineByPolyFC(line, lyrBUOWLbuffer.toGeoJSON());
L.geoJSON(intBUOWL, {style:{color:'red', weight:5}}).addTo(mymap);
L.geoJSON(intBUOWLline, {style:{color:'red', weight:5}}).addTo(mymap);
var arBUOWLsummary = summarizePolyFC(intBUOWL, 'hist_occup');
strPopup += "<br>BUOWL<br>&nbsp;&nbsp;Direct Impacts";
for (var i=0;i<arBUOWLsummary[0].length;i++) {
strPopup += "<br>&nbsp;&nbsp;&nbsp;&nbsp;"+arBUOWLsummary[0][i]+": "+arBUOWLsummary[1][i]+" ("+(arBUOWLsummary[2][i]/4046.9).toFixed(1)+" acres)";
}
var arBUOWLsummary = summarizeLineFC(intBUOWLline, 'hist_occup');
console.log(arBUOWLsummary);
strPopup += "<br>BUOWL<br>&nbsp;&nbsp;Indirect Impacts";
for (var i=0;i<arBUOWLsummary[0].length;i++) {
strPopup += "<br>&nbsp;&nbsp;&nbsp;&nbsp;"+arBUOWLsummary[0][i]+": "+arBUOWLsummary[1][i]+" ("+(arBUOWLsummary[2][i]).toFixed(3)+" km)";
}
fgpDrawnItems.addLayer(e.layer.bindPopup(strPopup));
e.layer.openPopup();
break;
}
});
// ************ Location Events **************
mymap.on('locationfound', function(e) {
console.log(e);
if (mrkCurrentLocation) {
mrkCurrentLocation.remove();
}
mrkCurrentLocation = L.circle(e.latlng, {radius:e.accuracy/2}).addTo(mymap);
mymap.setView(e.latlng, 14);
});
mymap.on('locationerror', function(e) {
console.log(e);
alert("Location was not found");
})
});
// ********* BUOWL Functions
function styleBUOWL(json){
var att = json.properties;
switch (att.hist_occup){
case 'Yes':
return {color:'deeppink', fillColor:'yellow'};
break;
case 'Undetermined':
return {color:'yellow'};
break;
}
}
function processBUOWL(json, lyr){
var att = json.properties;
lyr.bindTooltip("<h4>Habitat ID: "+att.habitat_id+"</h4>Historically Occupied: "+att.hist_occup+"<br>Status: "+att.recentstatus);
arHabitatIDs.push(att.habitat_id.toString())
}
function filterBUOWL(json){
var att = json.properties;
if (att.recentstatus=='REMOVED') {
return false;
} else {
var optFilter = $("input[name=fltBUOWL]:checked").val();
if (optFilter=='ALL') {
return true;
} else {
return (att.hist_occup==optFilter);
}
}
}
$("#txtFindBUOWL").on('keyup paste', function(){
var val = $("#txtFindBUOWL").val();
testLayerAttribute(arHabitatIDs, val, "Habitat ID", "#divFindBUOWL", "#divBUOWLError", "#btnFindBUOWL");
});
$("#btnFindBUOWL").click(function(){
var val = $("#txtFindBUOWL").val();
var lyr = returnLayerByAttribute(lyrBUOWL,'habitat_id',val);
if (lyr) {
if (lyrSearch) {
lyrSearch.remove();
}
lyrSearch = L.geoJSON(lyr.toGeoJSON(), {style:{color:'red', weight:10, opacity:0.5, fillOpacity:0}}).addTo(mymap);
mymap.fitBounds(lyr.getBounds().pad(1));
var att = lyr.feature.properties;
$("#divBUOWLData").html("<h4 class='text-center'>Attributes</h4><h5>Habitat: "+att.habitat+"</h5><h5>Historically Occupied: "+att.hist_occup+"</h5><h5>Recent Status: "+att.recentstatus+"</h5>");
$("#divBUOWLError").html("");
fgpDrawnItems.clearLayers();
fgpDrawnItems.addLayer(lyr);
} else {
$("#divBUOWLError").html("**** Habitat ID not found ****");
}
});
$("#lblBUOWL").click(function(){
$("#divBUOWLData").toggle();
});
$("input[name=fltBUOWL]").click(function(){
arHabitatIDs = [];
lyrBUOWL.refresh();
});
// ************ Client Linears **********
function styleClientLinears(json) {
var att = json.properties;
switch (att.type) {
case 'Pipeline':
return {color:'peru'};
break;
case 'Flowline':
return {color:'navy'};
break;
case 'Flowline, est.':
return {color:'navy', dashArray:"5,5"};
break;
case 'Electric Line':
return {color:'darkgreen'};
break;
case 'Access Road - Confirmed':
return {color:'darkred'};
break;
case 'Access Road - Estimated':
return {color:'darkred', dashArray:"5,5"};
break;
case 'Extraction':
return {color:'indigo'};
break;
default:
return {color:'darkgoldenrod'}
}
}
function processClientLinears(json, lyr) {
var att = json.properties;
lyr.bindTooltip("<h4>Linear Project: "+att.Project+"</h4>Type: "+att.type+"<br>ROW Width: "+att.row_width+"<br>Length: "+returnMultiLength(lyr.getLatLngs()).toFixed(0));
arProjectIDs.push(att.Project.toString());
var jsnBuffer = turf.buffer(json, att.row_width/1000, 'kilometers');
var lyrBuffer = L.geoJSON(jsnBuffer, {style:{color:'gray', dashArray:'5,5'}});
lyrClientLinesBuffer.addLayer(lyrBuffer);
}
function filterClientLines(json) {
var arProjectFilter=[];
$("input[name=fltProject]").each(function(){
if (this.checked) {
arProjectFilter.push(this.value);
}
});
var att = json.properties;
switch (att.type) {
case "Pipeline":
return (arProjectFilter.indexOf('Pipeline')>=0);
break;
case "Flowline":
return (arProjectFilter.indexOf('Flowline')>=0);
break;
case "Flowline, est.":
return (arProjectFilter.indexOf('Flowline')>=0);
break;
case "Electric Line":
return (arProjectFilter.indexOf('Electric')>=0);
break;
case "Access Road - Confirmed":
return (arProjectFilter.indexOf('Road')>=0);
break;
case "Access Road - Estimated":
return (arProjectFilter.indexOf('Road')>=0);
break;
case "Extraction":
return (arProjectFilter.indexOf('Extraction')>=0);
break;
default:
return (arProjectFilter.indexOf('Other')>=0);
break;
}
}
$("#txtFindProject").on('keyup paste', function(){
var val = $("#txtFindProject").val();
testLayerAttribute(arProjectIDs, val, "PROJECT ID", "#divFindProject", "#divProjectError", "#btnFindProject");
});
$("#btnFindProject").click(function(){
var val = $("#txtFindProject").val();
var lyr = returnLayerByAttribute(lyrClientLines,'Project',val);
if (lyr) {
if (lyrSearch) {
lyrSearch.remove();
}
lyrSearch = L.geoJSON(lyr.toGeoJSON(), {style:{color:'red', weight:10, opacity:0.5}}).addTo(mymap);
mymap.fitBounds(lyr.getBounds().pad(1));
var att = lyr.feature.properties;
$("#divProjectData").html("<h4 class='text-center'>Attributes</h4><h5>Type: "+att.type+"</h5><h5>ROW width: "+att.row_width+ "m </h5>");
$("#divProjectError").html("");
fgpDrawnItems.clearLayers();
fgpDrawnItems.addLayer(lyr);
} else {
$("#divProjectError").html("**** Project ID not found ****");
}
});
$("#lblProject").click(function(){
$("#divProjectData").toggle();
});
$("#btnProjectFilterAll").click(function(){
$("input[name=fltProject]").prop('checked', true);
});
$("#btnProjectFilterNone").click(function(){
$("input[name=fltProject]").prop('checked', false);
});
$("#btnProjectFilter").click(function(){
arProjectIDs=[];
lyrClientLines.refresh();
});
// ********* Eagle Functions *****************
function returnEagleMarker(json, latlng){
var att = json.properties;
if (att.status=='ACTIVE NEST') {
var clrNest = 'deeppink';
} else {
var clrNest = 'chartreuse';
}
arEagleIDs.push(att.nest_id.toString());
return L.circle(latlng, {radius:804, color:clrNest,fillColor:'chartreuse', fillOpacity:0.5}).bindTooltip("<h4>Eagle Nest: "+att.nest_id+"</h4>Status: "+att.status);
}
function filterEagle(json) {
var att=json.properties;
var optFilter = $("input[name=fltEagle]:checked").val();
if (optFilter=='ALL') {
return true;
} else {
return (att.status==optFilter);
}
}
$("#txtFindEagle").on('keyup paste', function(){
var val = $("#txtFindEagle").val();
testLayerAttribute(arEagleIDs, val, "Eagle Nest ID", "#divFindEagle", "#divEagleError", "#btnFindEagle");
});
$("#btnFindEagle").click(function(){
var val = $("#txtFindEagle").val();
var lyr = returnLayerByAttribute(lyrEagleNests,'nest_id',val);
if (lyr) {
if (lyrSearch) {
lyrSearch.remove();
}
lyrSearch = L.circle(lyr.getLatLng(), {radius:800, color:'red', weight:10, opacity:0.5, fillOpacity:0}).addTo(mymap);
mymap.setView(lyr.getLatLng(), 14);
var att = lyr.feature.properties;
$("#divEagleData").html("<h4 class='text-center'>Attributes</h4><h5>Status: "+att.status+"</h5>");
$("#divEagleError").html("");
fgpDrawnItems.clearLayers();
fgpDrawnItems.addLayer(lyr);
} else {
$("#divEagleError").html("**** Eagle Nest ID not found ****");
}
});
$("#lblEagle").click(function(){
$("#divEagleData").toggle();
});
$("input[name=fltEagle]").click(function(){
arEagleIDs=[];
lyrEagleNests.refresh();
});
// *********** Raptor Functions
function returnRaptorMarker(json, latlng){
var att = json.properties;
arRaptorIDs.push(att.Nest_ID.toString());
switch (att.recentspecies) {
case 'Red-tail Hawk':
var radRaptor = 533;
break;
case 'Swainsons Hawk':
var radRaptor = 400;
break;
default:
var radRaptor = 804;
break;
}
switch (att.recentstatus) {
case 'ACTIVE NEST':
var optRaptor = {radius:radRaptor, color:'deeppink', fillColor:"cyan", fillOpacity:0.5};
break;
case 'INACTIVE NEST':
var optRaptor = {radius:radRaptor, color:'cyan', fillColor:'cyan', fillOpacity:0.5};
break;
case 'FLEDGED NEST':
var optRaptor = {radius:radRaptor, color:'deeppink', fillColor:"cyan", fillOpacity:0.5, dashArray:"2,8"};
break;
}
return L.circle(latlng, optRaptor).bindPopup("<h4>Raptor Nest: "+att.Nest_ID+"</h4>Status: "+att.recentstatus+"<br>Species: "+att.recentspecies+"<br>Last Survey: "+att.lastsurvey);
}
function filterRaptor(json) {
var att=json.properties;
var optFilter = $("input[name=fltRaptor]:checked").val();
if (optFilter=='ALL') {
return true;
} else {
return (att.recentstatus==optFilter);
}
}
$("#txtFindRaptor").on('keyup paste', function(){
var val = $("#txtFindRaptor").val();
testLayerAttribute(arRaptorIDs, val, "Raptor Nest ID", "#divFindRaptor", "#divRaptorError", "#btnFindRaptor");
});
$("#btnFindRaptor").click(function(){
var val = $("#txtFindRaptor").val();
var lyr = returnLayerByAttribute(lyrRaptorNests,'Nest_ID',val);
if (lyr) {
if (lyrSearch) {
lyrSearch.remove();
}
var att = lyr.feature.properties;
switch (att.recentspecies) {
case 'Red-tail Hawk':
var radRaptor = 533;
break;
case 'Swainsons Hawk':
var radRaptor = 400;
break;
default:
var radRaptor = 804;
break;
}
lyrSearch = L.circle(lyr.getLatLng(), {radius:radRaptor, color:'red', weight:10, opacity:0.5, fillOpacity:0}).addTo(mymap);
mymap.setView(lyr.getLatLng(), 14);
$("#divRaptorData").html("<h4 class='text-center'>Attributes</h4><h5>Status: "+att.recentstatus+"</h5><h5>Species: "+att.recentspecies+"</h5><h5>Last Survey: "+att.lastsurvey+"</h5>");
$("#divRaptorError").html("");
fgpDrawnItems.clearLayers();
fgpDrawnItems.addLayer(lyr);
} else {
$("#divRaptorError").html("**** Raptor Nest ID not found ****");
}
});
$("#lblRaptor").click(function(){
$("#divRaptorData").toggle();
});
$("input[name=fltRaptor]").click(function(){
arRaptorIDsIDs=[];
lyrRaptorNests.refresh();
});
// ********* jQuery Event Handlers ************
$("#btnLocate").click(function(){
mymap.locate();
});
// *********** General Functions *********
function LatLngToArrayString(ll) {
return "["+ll.lat.toFixed(5)+", "+ll.lng.toFixed(5)+"]";
}
function returnLayerByAttribute(lyr,att,val) {
var arLayers = lyr.getLayers();
for (i=0;i<arLayers.length-1;i++) {
var ftrVal = arLayers[i].feature.properties[att];
if (ftrVal==val) {
return arLayers[i];
}
}
return false;
}
function returnLayersByAttribute(lyr,att,val) {
var arLayers = lyr.getLayers();
var arMatches = [];
for (i=0;i<arLayers.length-1;i++) {
var ftrVal = arLayers[i].feature.properties[att];
if (ftrVal==val) {
arMatches.push(arLayers[i]);
}
}
if (arMatches.length) {
return arMatches;
} else {
return false;
}
}
function testLayerAttribute(ar, val, att, fg, err, btn) {
if (ar.indexOf(val)<0) {
$(fg).addClass("has-error");
$(err).html("**** "+att+" NOT FOUND ****");
$(btn).attr("disabled", true);
} else {
$(fg).removeClass("has-error");
$(err).html("");
$(btn).attr("disabled", false);
}
}
function returnLength(arLL) {
var total=0;
for (var i=1;i<arLL.length;i++) {
total = total + arLL[i-1].distanceTo(arLL[i]);
}
return total;
}
function returnMultiLength(arArLL) {
var total=0;
for (var i=0; i<arArLL.length;i++) {
total = total + returnLength(arArLL[i]);
}
return total;
}
function returnClosestlayer(lyrGroup, llRef) {
var arLyrs = lyrGroup.getLayers();
var nearest = L.GeometryUtil.closestLayer(mymap, arLyrs, llRef);
nearest.distance = llRef.distanceTo(nearest.latlng);
nearest.bearing = L.GeometryUtil.bearing(llRef, nearest.latlng);
if (nearest.bearing<0){
nearest.bearing = nearest.bearing+360;
}
nearest.att = nearest.layer.feature.properties;
return nearest;
}
function summarizePointsByLine(line, radius, fcPoint, prop) {
var buf = turf.buffer(line, radius, 'kilometers');
buf = turf.featureCollection([buf]);
buf = turf.collect(buf, fcPoint, prop, prop+"Vals");
return buf;
}
function intersectPolyByPolyFC(poly, fcPoly) {
var fgp = [];
var bbPoly = turf.bboxPolygon(turf.bbox(poly));
for (var i=0;i<fcPoly.features.length;i++) {
var bb = turf.bboxPolygon(turf.bbox(fcPoly.features[i]));
if (turf.intersect(bbPoly, bb)) {
var int = turf.intersect(poly, fcPoly.features[i]);
if (int) {
int.properties = fcPoly.features[i].properties;
fgp.push(int);
}
}
}
return turf.featureCollection(fgp);
}
function intersectLineByPolyFC(line, fcPoly) {
var fgp = [];
var bbLine = turf.bboxPolygon(turf.bbox(line));
for (var i=0;i<fcPoly.features.length;i++) {
var bb = turf.bboxPolygon(turf.bbox(fcPoly.features[i]));
if (turf.intersect(bbLine, bb)) {
var slc = turf.lineSplit(line, fcPoly.features[i]);
for (var j=0;j<slc.features.length;j++) {
var curSlc = slc.features[j];
var len = turf.lineDistance(curSlc, 'kilometers');
var ptMiddle = turf.along(curSlc, len/2, 'kilometers');
if (turf.inside(ptMiddle, fcPoly.features[i])) {
curSlc.properties = fcPoly.features[i].properties;
fgp.push(curSlc);
}
}
}
}
return turf.featureCollection(fgp);
}
function summarizeArray(ar) {
var arUnique = [];
var arCount = [];
for (var i=0;i<ar.length;i++) {
var idx = arUnique.indexOf(ar[i]);
if (idx<0) {
arUnique.push(ar[i]);
arCount.push(1);
} else {
arCount[idx] = arCount[idx]+1
}
}
return [arUnique, arCount];
}
function summarizePolyFC(fcPoly, att) {
var arUnique = [];
var arCount = [];
var arArea = [];
for (var i=0;i<fcPoly.features.length;i++) {
var curAtt = fcPoly.features[i].properties[att];
var idx = arUnique.indexOf(curAtt);
if (idx<0) {
arUnique.push(curAtt);
arCount.push(1);
arArea.push(turf.area(fcPoly.features[i]));
} else {
arCount[idx] = arCount[idx]+1
arArea[idx] = arArea[idx]+turf.area(fcPoly.features[i])
}
}
return [arUnique, arCount, arArea];
}
function summarizeLineFC(fcLine, att) {
console.log(fcLine);
var arUnique = [];
var arCount = [];
var arLength = [];
for (var i=0;i<fcLine.features.length;i++) {
var curAtt = fcLine.features[i].properties[att];
var idx = arUnique.indexOf(curAtt);
console.log(curAtt);
console.log(idx);
if (idx<0) {
arUnique.push(curAtt);
arCount.push(1);
arLength.push(turf.lineDistance(fcLine.features[i]));
} else {
arCount[idx] = arCount[idx]+1;
arLength[idx] = arLength[idx]+turf.lineDistance(fcLine.features[i]);
}
}
return [arUnique, arCount, arLength];
}
</script>
</body>
</html>