1631 lines
66 KiB
PHP
1631 lines
66 KiB
PHP
<!-- ToDo's -->
|
|
<!-- Bereinigen und Kommentieren -->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Leaflet Training</title>
|
|
|
|
<!-- Leaflet Stylesheet & Skripte -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet.js"></script>
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet-src.js"></script> -->
|
|
|
|
<!-- jQuery Skrip -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
|
|
|
|
<!-- jQuery UI -->
|
|
<link rel="stylesheet" href="source/jquery-ui.min.css">
|
|
<script src="source/jquery-ui.min.js"></script>
|
|
|
|
<!-- Bootstrap Stylesheet & Skript -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
<!-- Sidebar Plugin -->
|
|
<link rel="stylesheet" href="plugins/sidebar/leaflet-sidebar.css">
|
|
<script src="plugins/sidebar/leaflet-sidebar.js"></script>
|
|
|
|
|
|
<!-- Button Plugin -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
|
|
|
|
<!-- Font Plugin -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
|
|
|
|
<!-- PolylineMeasure Plugin -->
|
|
<link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css">
|
|
<script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>
|
|
|
|
<!-- MousePosition Plugin -->
|
|
<link rel="stylesheet" href="plugins/mouseposition/L.Control.MousePosition.css">
|
|
<script src="plugins/mouseposition/L.Control.MousePosition.js"></script>
|
|
|
|
<!-- Geoman Plugin -->
|
|
<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css">
|
|
<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>
|
|
|
|
<!-- Minimap Plugin -->
|
|
<link rel="stylesheet" href="plugins/minimap/Control.MiniMap.min.css">
|
|
<script src="plugins/minimap/Control.MiniMap.min.js"></script>
|
|
|
|
<!-- ajax Plugin -->
|
|
<script src="plugins/ajax/leaflet.ajax.js"></script>
|
|
|
|
<!-- sweetalert2 Plugin -->
|
|
<script src=" https://cdn.jsdelivr.net/npm/sweetalert2@11.26.24/dist/sweetalert2.all.min.js "></script>
|
|
<link href=" https://cdn.jsdelivr.net/npm/sweetalert2@11.26.24/dist/sweetalert2.min.css " rel="stylesheet">
|
|
|
|
<!-- Sidebar Styles -->
|
|
<style>
|
|
.bold {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.errorMsg {
|
|
padding: 0;
|
|
text-align: center;
|
|
background-color: darksalmon;
|
|
}
|
|
|
|
.new_feature {
|
|
display: none;
|
|
}
|
|
|
|
.successMsg {
|
|
text-align: center;
|
|
background-color: darksalmon;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* .legend {
|
|
background: white;
|
|
padding: 10px 14px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.2);
|
|
line-height: 24px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.legend h4 {
|
|
margin: 0 0 8px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.legend i {
|
|
width: 14px;
|
|
height: 14px;
|
|
display: inline-block;
|
|
margin-right: 6px;
|
|
border-radius: 50%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.legend i.line {
|
|
border-radius: 0;
|
|
height: 3px;
|
|
width: 20px;
|
|
vertical-align: middle;
|
|
} */
|
|
|
|
</style>
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="sidebar" class="sidebar collapsed">
|
|
<!-- Nav tabs -->
|
|
<div class="sidebar-tabs">
|
|
<ul role="tablist">
|
|
<li><a href="#home" role="tab"><i class="fa fa-home"></i></a></li>
|
|
<li><a href="#valve" role="tab"><i class="fa fa-puzzle-piece"></i></a></li>
|
|
<li><a href="#pipeline" role="tab"><i class="fa fa-sliders"></i></a></li>
|
|
<li><a href="#building" role="tab"><i class="fa fa-building"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="sidebar-content">
|
|
<div class="sidebar-pane" id="home">
|
|
<h1 class="sidebar-header">
|
|
Home
|
|
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
|
</h1>
|
|
|
|
<div id="divhome" class="col-xs-12">
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div class="col-xs-12">
|
|
<p class="text-center bold">Area Filter</p>
|
|
</div>
|
|
|
|
<div id="home_error" class="errorMsg col-xs-12"></div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div class="form-group">
|
|
<div class="col-xs-6">
|
|
<input type="text" id="dma_id" class="form-control" placeholder="DMA ID">
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<button id="filter_dma" class="btn btn-primary btn-block">Filter Area</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12" id="home_information">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="sidebar-pane" id="valve">
|
|
<h1 class="sidebar-header">
|
|
Valves
|
|
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
|
</h1>
|
|
|
|
<div id="divValve" class="col-xs-12">
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div class="col-xs-12">
|
|
<p class="text-center bold">Valve Information</p>
|
|
</div>
|
|
|
|
<div id="valve_error" class="errorMsg col-xs-12"></div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div class="form-group">
|
|
<div class="col-xs-6">
|
|
<input type="text" id="valve_id" class="form-control" placeholder="Valve ID">
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<button id="findValve" class="btn btn-primary btn-block">Find Valve</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12" id="valve_information">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 60px;"></div>
|
|
|
|
<div id="newValve" class="col-xs-12">
|
|
|
|
<div class="col-xs-8">
|
|
<button type="button" class="btn btn-info btn-block" id="btn_valve_form">Insert New Valve</button>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<button type="button" class="btn btn-success btn-block" id="btn_valve_refresh">Refresh</button>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div id="new_valve_information" class="col-xs-12 new_feature">
|
|
|
|
<label class="control-label col-sm-4" for="valve_id_new">Valve ID</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control" name="valve_id_new" id="valve_id_new">
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="valve_type">Valve Type</label>
|
|
<div class="col-sm-8">
|
|
<select class="form-control" name="valve_type" id="valve_type">
|
|
<option value=""></option>
|
|
<option value="Gate Valve">Gate Valve</option>
|
|
<option value="Washout Valve">Washout Valve</option>
|
|
<option value="Air Release Valve">Air Release Valve</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="valve_dma_id">DMA ID</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control" name="valve_dma_id" id="valve_dma_id">
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="valve_diameter">Diameter (mm)</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control" name="valve_diameter" id="valve_diameter">
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="valve_visibility">Visibility</label>
|
|
<div class="col-sm-8">
|
|
<select class="form-control" name="valve_visibility" id="valve_visibility">
|
|
<option value=""></option>
|
|
<option value="Visible">Visible</option>
|
|
<option value="Invisible">Invisible</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="valve_location">Location</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control" name="valve_location" id="valve_location">
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="valve_geometry">Geometry</label>
|
|
<div class="col-sm-8">
|
|
<textarea name="valve_geometry" id="valve_geometry" disabled></textarea>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div class="col-sm-6">
|
|
<button type="button" class="btn btn-danger btn-block" id="btn_valve_cancel">Cancel</button>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<button type="button" class="btn btn-success btn-block" id="btn_valve_insert">Insert Valve</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
<div id="valve_status" class="col-xs-12 successMsg"></div>
|
|
</div>
|
|
|
|
<div class="sidebar-pane" id="pipeline">
|
|
<h1 class="sidebar-header">
|
|
Pipelines
|
|
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
|
</h1>
|
|
|
|
<div id="divPipeline" class="col-xs-12">
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div class="col-xs-12">
|
|
<p class="text-center bold">Pipeline Information</p>
|
|
</div>
|
|
|
|
<div id="pipeline_error" class="errorMsg col-xs-12"></div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div class="form-group">
|
|
<div class="col-xs-6">
|
|
<input type="text" id="pipeline_id" class="form-control" placeholder="Pipeline ID">
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<button id="findPipeline" class="btn btn-primary btn-block">Find Pipeline</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12" id="pipeline_information">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 60px;"></div>
|
|
|
|
<div id="newPipeline" class="col-xs-12">
|
|
|
|
<div class="col-xs-8">
|
|
<button type="button" class="btn btn-info btn-block" id="btn_pipeline_form">Insert New Pipeline</button>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<button type="button" class="btn btn-success btn-block" id="btn_pipeline_refresh">Refresh</button>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div id="new_pipeline_information" class="col-xs-12 new_feature">
|
|
|
|
<label class="control-label col-sm-4" for="new_pipeline_id">Pipe ID</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control" name="new_pipeline_id" id="new_pipeline_id">
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="pipeline_category">Category</label>
|
|
<div class="col-sm-8">
|
|
<select class="form-control" name="pipeline_category" id="pipeline_category">
|
|
<option value=""></option>
|
|
<option value="Distribution Pipeline">Distribution Pipeline</option>
|
|
<option value="Reticulation Pipeline">Reticulation Pipeline</option>
|
|
<option value="Transmission Pipeline">Transmission Pipeline</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="pipeline_dma_id">DMA ID</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control" name="pipeline_dma_id" id="pipeline_dma_id">
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="pipeline_diameter">Diameter (mm)</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control" name="pipeline_diameter" id="pipeline_diameter">
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="pipeline_method">Construction Method</label>
|
|
<div class="col-sm-8">
|
|
<select class="form-control" name="pipeline_method" id="pipeline_method">
|
|
<option value=""></option>
|
|
<option value="OT">OT</option>
|
|
<option value="HDD">HDD</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="pipeline_location">Location</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control" name="pipeline_location" id="pipeline_location">
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="pipeline_geometry">Geometry</label>
|
|
<div class="col-sm-8">
|
|
<textarea name="pipeline_geometry" id="pipeline_geometry" disabled></textarea>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div class="col-sm-6">
|
|
<button type="button" class="btn btn-danger btn-block" id="btn_pipeline_cancel">Cancel</button>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<button type="button" class="btn btn-success btn-block" id="btn_pipeline_insert">Insert Pipeline</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
<div id="pipeline_status" class="col-xs-12 successMsg"></div>
|
|
|
|
</div>
|
|
|
|
<div class="sidebar-pane" id="building">
|
|
<h1 class="sidebar-header">
|
|
Buildings
|
|
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
|
</h1>
|
|
|
|
<div id="divbuilding" class="col-xs-12">
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div class="col-xs-12">
|
|
<p class="text-center bold">Building Information</p>
|
|
</div>
|
|
|
|
<div id="building_error" class="errorMsg col-xs-12"></div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div class="form-group">
|
|
<div class="col-xs-6">
|
|
<input type="text" id="building_id" class="form-control" placeholder="Building ID">
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<button id="findBuilding" class="btn btn-primary btn-block">Find Building</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12" id="building_information">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 60px;"></div>
|
|
|
|
<div id="newBuilding" class="col-xs-12">
|
|
|
|
<div class="col-xs-8">
|
|
<button type="button" class="btn btn-info btn-block" id="btn_building_form">Insert New Building</button>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<button type="button" class="btn btn-success btn-block" id="btn_building_refresh">Refresh</button>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div id="new_building_information" class="col-xs-12 new_feature">
|
|
|
|
<label class="control-label col-sm-4" for="new_building_id">Building ID</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control" name="new_building_id" id="new_building_id">
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="building_category">Category</label>
|
|
<div class="col-sm-8">
|
|
<select class="form-control" name="building_category" id="building_category">
|
|
<option value=""></option>
|
|
<option value="Building">Building</option>
|
|
<option value="Tin Shed">Tin Shed</option>
|
|
<option value="Under Construction">Under Construction</option>
|
|
<option value="Open Plot">Open Plot</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="building_dma_id">DMA ID</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control" name="building_dma_id" id="building_dma_id">
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="building_storey">Storey</label>
|
|
<div class="col-sm-8">
|
|
<input type="number" class="form-control" name="building_storey" id="building_storey">
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="building_population">Population</label>
|
|
<div class="col-sm-8">
|
|
<input type="number" class="form-control" name="building_population" id="building_population">
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="building_location">Location</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control" name="building_location" id="building_location">
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<label class="control-label col-sm-4" for="building_geometry">Geometry</label>
|
|
<div class="col-sm-8">
|
|
<textarea name="building_geometry" id="building_geometry" disabled></textarea>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
|
|
<div class="col-sm-6">
|
|
<button type="button" class="btn btn-danger btn-block" id="btn_building_cancel">Cancel</button>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<button type="button" class="btn btn-success btn-block" id="btn_building_insert">Insert building</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-12" style="height: 10px;"></div>
|
|
<div id="building_status" class="col-xs-12 successMsg"></div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mapdiv" class="col-md-12"></div>
|
|
|
|
<script>
|
|
var mymap;
|
|
var baseLayers;
|
|
var overlays;
|
|
var lyrSearch;
|
|
|
|
var layerValves;
|
|
var layerPipelines;
|
|
var layerBuildings;
|
|
var raster_data;
|
|
|
|
var valves_array = [];
|
|
var pipelines_array = [];
|
|
var buildings_array = [];
|
|
|
|
var dma_id;
|
|
|
|
|
|
// Map Canvas
|
|
var mymap = L.map('mapdiv', {
|
|
center: [23.78573, 90.44378],
|
|
zoom: 12.5,
|
|
attributionControl: false,
|
|
zoomControl: false,
|
|
|
|
});
|
|
|
|
// Background Maps
|
|
var OpenStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: 'OpenStreetMap Contributors',
|
|
maxZoom: 20,
|
|
})
|
|
|
|
var CartoDB = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
|
|
attribution: 'Carto Contributors',
|
|
maxZoom: 20,
|
|
})
|
|
|
|
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution: 'ESRI',
|
|
maxZoom: 20,
|
|
})
|
|
|
|
var Esri_WorldImagery_Minimap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution: 'ESRI',
|
|
maxZoom: 20,
|
|
})
|
|
|
|
var GoogleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
|
|
maxZoom: 20,
|
|
subdomains:['mt0','mt1','mt2','mt3']
|
|
});
|
|
|
|
var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 20,
|
|
});
|
|
|
|
CartoDB.addTo(mymap);
|
|
|
|
|
|
// Sidebar
|
|
var sidebar = L.control.sidebar('sidebar', {
|
|
position: 'left'
|
|
});
|
|
|
|
mymap.addControl(sidebar);
|
|
|
|
// Zoom Control
|
|
L.control.zoom({
|
|
position: "topright",
|
|
}).addTo(mymap);
|
|
|
|
// Measure Tool
|
|
L.control.polylineMeasure({
|
|
position: 'topright',
|
|
}).addTo(mymap);
|
|
|
|
// Geoman Plugin
|
|
mymap.pm.addControls({
|
|
position: 'topright',
|
|
drawMarker: true,
|
|
drawPolyline: true,
|
|
drawPolygon: true,
|
|
drawCircleMarker: false,
|
|
drawCircle: false,
|
|
drawText: false,
|
|
drawRectangle: false,
|
|
editMode: false,
|
|
dragMode: false,
|
|
cutPolygon: false,
|
|
removalMode: true,
|
|
rotateMode: false,
|
|
});
|
|
|
|
mymap.on("pm:create", function(e) {
|
|
var jsn = e.layer.toGeoJSON().geometry;
|
|
var jsn_modified;
|
|
|
|
if (e.shape == 'Marker') {
|
|
|
|
if(confirm("Add Valve?")) {
|
|
jsn_modified = {type:"Point", coordinates:jsn.coordinates}
|
|
$("#valve_geometry").val(JSON.stringify(jsn_modified));
|
|
}
|
|
}
|
|
|
|
if (e.shape == 'Line') {
|
|
|
|
if(confirm("Add Pipeline?")) {
|
|
jsn_modified = {type:"MultiLineString", coordinates:[jsn.coordinates]}
|
|
$("#pipeline_geometry").val(JSON.stringify(jsn_modified));
|
|
}
|
|
}
|
|
|
|
if (e.shape == 'Polygon') {
|
|
|
|
if(confirm("Add Building?")) {
|
|
jsn_modified = {type:"MultiPolygon", coordinates:[jsn.coordinates]}
|
|
$("#building_geometry").val(JSON.stringify(jsn_modified));
|
|
}
|
|
}
|
|
});
|
|
|
|
// Layer Control
|
|
var baseLayers = {
|
|
"Google Streets": GoogleStreets,
|
|
"OpenStreetMap": OpenStreetMap,
|
|
"CartoDB": CartoDB,
|
|
"ESRI Satelite": Esri_WorldImagery,
|
|
"OpenTopoMap": OpenTopoMap,
|
|
};
|
|
|
|
var control_layers = L.control.layers(baseLayers, overlays).addTo(mymap)
|
|
|
|
// Scale Display
|
|
L.control.scale({
|
|
position: 'bottomright',
|
|
maxWidth: 250,
|
|
imperial: false,
|
|
}).addTo(mymap)
|
|
|
|
// Mouse-Position
|
|
L.control.mousePosition({
|
|
position: 'bottomright',
|
|
}).addTo(mymap);
|
|
|
|
// Minimap Plugin
|
|
var miniMap = new L.Control.MiniMap(Esri_WorldImagery_Minimap, {
|
|
position: "bottomright",
|
|
height: 200,
|
|
width: 200,
|
|
toggleDisplay: true,
|
|
}).addTo(mymap);
|
|
|
|
|
|
// Legend Control
|
|
// var legend = L.control({ position: 'bottomleft' });
|
|
|
|
// legend.onAdd = function (map) {
|
|
// var div = L.DomUtil.create('div', 'legend');
|
|
// div.innerHTML = `
|
|
// <h4>Legende</h4>
|
|
// <b>Valves</b><br>
|
|
// <i style="background:#2E7D32"></i> Air Release Valve<br>
|
|
// <i style="background:#43A047"></i> Gate Valve<br>
|
|
// <i style="background:#66BB6A"></i> Washout Valve<br><br>
|
|
// <b>Pipelines</b><br>
|
|
// <i class="line" style="background:#1565C0"></i> Distribution<br>
|
|
// <i class="line" style="background:#797DA4"></i> Reticulation<br>
|
|
// <i class="line" style="background:#1E88E5"></i> Transmission<br><br>
|
|
// <b>Buildings</b><br>
|
|
// <i style="background:#B71C1C"></i> 10+ Storey<br>
|
|
// <i style="background:#D32F2F"></i> 5-9 Storey<br>
|
|
// <i style="background:#F44336"></i> 1-2 Storey<br>
|
|
// <i style="background:#EF5350"></i> Tin Shed<br>
|
|
// <i style="background:#E57373"></i> Open Plot<br>
|
|
// `;
|
|
// return div;
|
|
// };
|
|
|
|
// legend.addTo(mymap);
|
|
|
|
|
|
// Data Control
|
|
|
|
// HOME
|
|
$("#filter_dma").click(function() {
|
|
dma_id = $("#dma_id").val();
|
|
|
|
if (!dma_id) {
|
|
$("#home_error").html("Please provide a DMA ID first!")
|
|
} else {
|
|
load_valves(dma_id);
|
|
load_pipelines(dma_id);
|
|
load_buildings(dma_id);
|
|
load_rasterdata(dma_id);
|
|
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
// Point Features
|
|
function load_valves (dma_id) {
|
|
$.ajax({
|
|
url:'load_data.php',
|
|
data: {table:'valves', dma_id:dma_id},
|
|
type: 'POST',
|
|
success: function(response) {
|
|
if (response.trim().substr(0, 5)=="ERROR") {
|
|
console.log(response);
|
|
} else {
|
|
var jsnValve = JSON.parse(response);
|
|
|
|
if (layerValves) {
|
|
layerValves.remove();
|
|
control_layers.removeLayer(layerValves)
|
|
}
|
|
|
|
layerValves = L.geoJSON(jsnValve, {
|
|
pointToLayer:style_valves
|
|
}).addTo(mymap);
|
|
|
|
control_layers.addOverlay(layerValves, "Valves");
|
|
mymap.fitBounds(layerValves.getBounds());
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.log("Error: "+error);
|
|
}
|
|
});
|
|
}
|
|
|
|
function refresh_valves (dma_id) {
|
|
$.ajax({
|
|
url:'load_data.php',
|
|
data: {table:'valves', dma_id:dma_id},
|
|
type: 'POST',
|
|
success: function(response) {
|
|
if (response.trim().substr(0, 5)=="ERROR") {
|
|
console.log(response);
|
|
} else {
|
|
var jsnValve = JSON.parse(response);
|
|
|
|
if (layerValves) {
|
|
layerValves.remove();
|
|
control_layers.removeLayer(layerValves)
|
|
}
|
|
|
|
layerValves = L.geoJSON(jsnValve, {
|
|
pointToLayer:style_valves
|
|
}).addTo(mymap);
|
|
|
|
control_layers.addOverlay(layerValves, "Valves");
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.log("Error: "+error);
|
|
}
|
|
});
|
|
}
|
|
|
|
$("#valve_id").autocomplete({
|
|
source:valves_array,
|
|
appendTo: "#sidebar"
|
|
})
|
|
|
|
function style_valves(json, latlng) {
|
|
var att = json.properties;
|
|
var color;
|
|
var fill_color;
|
|
var radius = 5;
|
|
var fill_opacity = 1;
|
|
|
|
valves_array.push(att.valve_id);
|
|
|
|
switch (att.valve_type) {
|
|
case 'Air Release Valve':
|
|
color = '#2e7d32';
|
|
fill_color = '#2E7D32';
|
|
break;
|
|
case 'Gate Valve':
|
|
color = '#43A047';
|
|
fill_color = '#43A047';
|
|
break;
|
|
case 'Washout Valve':
|
|
color = '#66BB6A';
|
|
fill_color = '#66BB6A';
|
|
break;
|
|
default:
|
|
color = '#616161'
|
|
fill_color = '#616161'
|
|
break;
|
|
}
|
|
|
|
var style = {radius:radius, color:color, fillColor:fill_color, fillOpacity:fill_opacity};
|
|
|
|
return L.circleMarker(latlng, style).bindTooltip("Valve ID: "+att.valve_id+"<br>Valve Type: "+att.valve_type+"<br>Diameter: "+att.valve_diameter+" mm<br>Location: "+att.valve_location+"<br>Visibility: "+att.valve_visibility).bindPopup(
|
|
`<div class="popup-container">
|
|
<input type="hidden" name="webgis_id" class="updateValve" value='${att.webgis_id}'>
|
|
|
|
<input type="hidden" name="valve_id_old" class="updateValve" value='${att.valve_id}'>
|
|
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Valve ID</label>
|
|
<input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_id}' name="valve_id">
|
|
</div>
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">DMA ID</label>
|
|
<input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_dma_id}' name="valve_dma_id">
|
|
</div>
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Type</label>
|
|
<input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_type}' name="valve_type">
|
|
</div>
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Diameter (mm)</label>
|
|
<input type="number" class="form-control popup-input text-center updateValve" value='${att.valve_diameter}' name="valve_diameter">
|
|
</div>
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Location</label>
|
|
<input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_location}' name="valve_location">
|
|
</div>
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Visibility</label>
|
|
<input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_visibility}' name="valve_visibility">
|
|
</div>
|
|
|
|
<div class="popup-button-group">
|
|
<button type="submit" class="btn btn-success popup-button" onclick='updateValve()'>Update</button>
|
|
<button type="submit" class="btn btn-danger popup-button" onclick='deleteValve()'>Delete</button>
|
|
</div>
|
|
|
|
</div>`
|
|
);
|
|
}
|
|
|
|
|
|
function updateValve(){
|
|
var jsn = returnFormData('updateValve');
|
|
jsn.request = "valves";
|
|
|
|
Swal.fire({
|
|
title: "Do you want to save this Valve?",
|
|
showDenyButton: true,
|
|
showCancelButton: true,
|
|
confirmButtonText: "Save",
|
|
denyButtonText: `Don't save`
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$.ajax({
|
|
url:'update_data.php',
|
|
data:jsn,
|
|
type: 'POST',
|
|
success: function(response){
|
|
if (response.trim().substr(0, 5) == "ERROR") {
|
|
Swal.fire("Error!", response, "error");
|
|
} else {
|
|
Swal.fire("Saved!", "", "success");
|
|
refresh_valves(dma_id);
|
|
}
|
|
},
|
|
error: function(error){
|
|
console.log("ERROR: "+error);
|
|
}
|
|
});
|
|
|
|
} else if (result.isDenied) {
|
|
Swal.fire("Valve not saved", "", "info");
|
|
}
|
|
});
|
|
}
|
|
|
|
function deleteValve(){
|
|
var jsn = returnFormData('updateValve');
|
|
jsn.request = "valves";
|
|
|
|
Swal.fire({
|
|
title: "Do you want to delete this Valve?",
|
|
showDenyButton: true,
|
|
showCancelButton: true,
|
|
confirmButtonText: "Delete",
|
|
denyButtonText: `Don't Delete`
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$.ajax({
|
|
url:'delete_data.php',
|
|
data:jsn,
|
|
type: 'POST',
|
|
success: function(response){
|
|
if (response.trim().substr(0, 5) == "ERROR") {
|
|
Swal.fire("Error!", response, "error");
|
|
} else {
|
|
Swal.fire("Deleted!", "", "success");
|
|
refresh_valves(dma_id);
|
|
}
|
|
},
|
|
error: function(error){
|
|
console.log("ERROR: "+error);
|
|
}
|
|
});
|
|
|
|
} else if (result.isDenied) {
|
|
Swal.fire("Valve not deleted!", "", "info");
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// jQuery
|
|
$("#findValve").click(function() {
|
|
var valve_id = $("#valve_id").val();
|
|
|
|
returnLayerByAttribute("valves", "valve_id", valve_id, function(lyr) {
|
|
$("#valve_error").html("");
|
|
$("#valve_information").html("");
|
|
|
|
if (lyrSearch) {
|
|
mymap.removeLayer(lyrSearch);
|
|
}
|
|
|
|
if (lyr) {
|
|
var att = lyr.feature.properties;
|
|
lyrSearch = L.circle(lyr.getLatLng(), {radius:10, color:'red', weight:10, opacity:0.5, fillOpacity:0.25}).addTo(mymap);
|
|
|
|
mymap.setView(lyr.getLatLng(), 20);
|
|
|
|
layerValves.bringToFront();
|
|
|
|
$("#valve_information").html("Valve ID: "+att.valve_id+"<br>Valve Type: "+att.valve_type+"<br>Diameter: "+att.valve_diameter+" mm<br>Location: "+att.valve_location+"<br>Visibility: "+att.valve_visibility);
|
|
|
|
} else {
|
|
$("#valve_error").html("Valve not found!");
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
$("#btn_valve_form").click(function() {
|
|
$("#new_valve_information").show();
|
|
})
|
|
|
|
$("#btn_valve_cancel").click(function() {
|
|
$("#new_valve_information").hide();
|
|
})
|
|
|
|
$("#btn_valve_insert").click(function() {
|
|
var valve_id = $("#valve_id_new").val();
|
|
var valve_type = $("#valve_type").val();
|
|
var valve_dma_id = $("#valve_dma_id").val();
|
|
var valve_diameter = $("#valve_diameter").val();
|
|
var valve_visibility = $("#valve_visibility").val();
|
|
var valve_location = $("#valve_location").val();
|
|
var valve_geometry = $("#valve_geometry").val();
|
|
|
|
if (valve_id=="" || valve_type=="" || valve_dma_id=="" || valve_geometry =="") {
|
|
$("#valve_status").html("Please fill up all Fields.")
|
|
} else {
|
|
$.ajax({
|
|
url:'insert_data.php',
|
|
data:{valve_id:valve_id, valve_type:valve_type, valve_dma_id:valve_dma_id, valve_diameter:valve_diameter, valve_visibility:valve_visibility, valve_location:valve_location, valve_geometry:valve_geometry, request:'valves'},
|
|
type: "POST",
|
|
success:function(response) {
|
|
if (response.trim().substr(0, 5)=="ERROR") {
|
|
console.log(response);
|
|
$("#valve_status").html(response)
|
|
} else {
|
|
$("#valve_status").html("Valve inserted successfully!")
|
|
refresh_valves(dma_id);
|
|
|
|
$("#valve_id_new").val("");
|
|
$("#valve_type").val("");
|
|
$("#valve_dma_id").val("");
|
|
$("#valve_diameter").val("");
|
|
$("#valve_visibility").val("");
|
|
$("#valve_location").val("");
|
|
$("#valve_geometry").val("");
|
|
}
|
|
},
|
|
error:function(xhr, status, error) {
|
|
$("#valve_status").html(error)
|
|
}
|
|
})
|
|
}
|
|
});
|
|
|
|
$("#btn_valve_refresh").click(function() {
|
|
refresh_valves(dma_id);
|
|
})
|
|
|
|
// Line Features
|
|
function load_pipelines(dma_id) {
|
|
$.ajax({
|
|
url:'load_data.php',
|
|
data: {table:'pipelines', dma_id:dma_id},
|
|
type: 'POST',
|
|
success: function(response) {
|
|
if (response.trim().substr(0, 5)=="ERROR") {
|
|
console.log(response);
|
|
} else {
|
|
var jsnPipeline = JSON.parse(response);
|
|
|
|
if (layerPipelines) {
|
|
layerPipelines.remove();
|
|
control_layers.removeLayer(layerPipelines)
|
|
}
|
|
|
|
layerPipelines = L.geoJSON(jsnPipeline, {
|
|
style:style_pipelines,
|
|
onEachFeature:process_pipelines,
|
|
}).addTo(mymap);
|
|
|
|
control_layers.addOverlay(layerPipelines, "Pipelines");
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.log("Error: "+error);
|
|
}
|
|
});
|
|
}
|
|
|
|
$("#pipeline_id").autocomplete({
|
|
source:pipelines_array,
|
|
appendTo: "#sidebar",
|
|
})
|
|
|
|
function style_pipelines(json) {
|
|
var att = json.properties;
|
|
var color;
|
|
|
|
pipelines_array.push(att.pipeline_id);
|
|
|
|
switch (att.pipeline_category) {
|
|
case 'Distribution Pipeline':
|
|
color = '#1565C0';
|
|
break;
|
|
case 'Reticulation Pipeline':
|
|
color = '#797DA4';
|
|
break;
|
|
case 'Transmission Pipeline':
|
|
color = '#1E88E5';
|
|
break;
|
|
default:
|
|
color = '#616161'
|
|
break;
|
|
}
|
|
|
|
return {color:color};
|
|
}
|
|
|
|
function process_pipelines(json, lyr) {
|
|
var att = json.properties
|
|
lyr.bindTooltip("Pipe ID: "+att.pipeline_id+"<br>Category: "+att.pipeline_category+"<br>Diameter: "+att.pipeline_diameter+" mm"+"<br>Length: "+att.pipeline_length+" m"+"<br>Location: "+att.pipeline_location).bindPopup(
|
|
`<div class="popup-container">
|
|
|
|
<input type="hidden" name="webgis_id" class="updatePipeline" value='${att.webgis_id}'>
|
|
|
|
<input type="hidden" name="pipeline_id_old" class="updatePipeline" value='${att.pipeline_id}'>
|
|
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Pipe ID</label>
|
|
<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_id}' name="pipeline_id">
|
|
</div>
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">DMA ID</label>
|
|
<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_dma_id}' name="pipeline_dma_id">
|
|
</div>
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Diameter (mm)</label>
|
|
<input type="number" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_diameter}' name="pipeline_diameter">
|
|
</div>
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Location</label>
|
|
<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_location}' name="pipeline_location">
|
|
</div>
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Category</label>
|
|
<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_category}' name="pipeline_category">
|
|
</div>
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Length (m)</label>
|
|
<input type="number" step="any" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_length}' name="pipeline_length">
|
|
</div>
|
|
|
|
<div class="popup-button-group">
|
|
<button type="submit" class="btn btn-success popup-button" onclick='updatePipeline()'>Update</button>
|
|
<button type="submit" class="btn btn-danger popup-button" onclick='deletePipeline()'>Delete</button>
|
|
</div>
|
|
|
|
</div>`
|
|
);
|
|
}
|
|
|
|
function updatePipeline(){
|
|
var jsn = returnFormData('updatePipeline');
|
|
jsn.request = "pipelines";
|
|
|
|
Swal.fire({
|
|
title: "Do you want to save the changes?",
|
|
showDenyButton: true,
|
|
showCancelButton: true,
|
|
confirmButtonText: "Save",
|
|
denyButtonText: `Don't save`
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$.ajax({
|
|
url:'update_data.php',
|
|
data:jsn,
|
|
type: 'POST',
|
|
success: function(response){
|
|
if (response.trim().substr(0, 5) == "ERROR") {
|
|
Swal.fire("Error!", response, "error");
|
|
} else {
|
|
Swal.fire("Saved!", "", "success");
|
|
load_pipelines(dma_id);
|
|
}
|
|
},
|
|
error: function(error){
|
|
console.log("ERROR: "+error);
|
|
}
|
|
});
|
|
|
|
} else if (result.isDenied) {
|
|
Swal.fire("Changes are not saved", "", "info");
|
|
}
|
|
});
|
|
}
|
|
|
|
function deletePipeline(){
|
|
var jsn = returnFormData('updatePipeline');
|
|
jsn.request = "pipelines";
|
|
|
|
Swal.fire({
|
|
title: "Do you want to delete this pipeline?",
|
|
showDenyButton: true,
|
|
showCancelButton: true,
|
|
confirmButtonText: "Delete",
|
|
denyButtonText: `Don't Delete`
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$.ajax({
|
|
url:'delete_data.php',
|
|
data:jsn,
|
|
type: 'POST',
|
|
success: function(response){
|
|
if (response.trim().substr(0, 5) == "ERROR") {
|
|
Swal.fire("Error!", response, "error");
|
|
} else {
|
|
Swal.fire("Deleted!", "", "success");
|
|
load_pipelines(dma_id);
|
|
}
|
|
},
|
|
error: function(error){
|
|
console.log("ERROR: "+error);
|
|
}
|
|
});
|
|
|
|
} else if (result.isDenied) {
|
|
Swal.fire("Pipeline not deleted!", "", "info");
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// jQuery
|
|
$("#findPipeline").click(function() {
|
|
var pipeline_id = $("#pipeline_id").val();
|
|
|
|
returnLayerByAttribute("pipelines", "pipeline_id", pipeline_id, function(lyr) {
|
|
$("#pipeline_error").html("");
|
|
$("#pipeline_information").html("");
|
|
|
|
if (lyrSearch) {
|
|
mymap.removeLayer(lyrSearch);
|
|
}
|
|
|
|
if (lyr) {
|
|
var att = lyr.feature.properties;
|
|
|
|
lyrSearch = L.geoJSON(lyr.toGeoJSON(), {style:{color:'red', weight:10, opacity:0.5}}).addTo(mymap);
|
|
|
|
mymap.fitBounds(lyr.getBounds());
|
|
layerPipelines.bringToFront();
|
|
|
|
$("#pipeline_information").html("Pipe ID: "+att.pipeline_id+"<br>Category: "+att.pipeline_category+"<br>Diameter: "+att.pipeline_diameter+" mm"+"<br>Length: "+att.pipeline_length+" m"+"<br>Location: "+att.pipeline_location);
|
|
|
|
} else {
|
|
$("#pipeline_error").html("Pipeline not found!");
|
|
}
|
|
});
|
|
})
|
|
|
|
|
|
$("#btn_pipeline_form").click(function() {
|
|
$("#new_pipeline_information").show();
|
|
})
|
|
|
|
$("#btn_pipeline_cancel").click(function() {
|
|
$("#new_pipeline_information").hide();
|
|
})
|
|
|
|
$("#btn_pipeline_insert").click(function() {
|
|
var pipeline_id = $("#new_pipeline_id").val();
|
|
var pipeline_category = $("#pipeline_category").val();
|
|
var pipeline_dma_id = $("#pipeline_dma_id").val();
|
|
var pipeline_diameter = $("#pipeline_diameter").val();
|
|
var pipeline_method = $("#pipeline_method").val();
|
|
var pipeline_location = $("#pipeline_location").val();
|
|
var pipeline_geometry = $("#pipeline_geometry").val();
|
|
|
|
if (pipeline_id == "" || pipeline_category == "" || pipeline_geometry == "") {
|
|
$("#pipeline_status").html("Please fill up all Fields.")
|
|
} else {
|
|
$.ajax({
|
|
url:'insert_data.php',
|
|
data: {pipeline_id:pipeline_id, pipeline_category:pipeline_category, pipeline_dma_id:pipeline_dma_id, pipeline_diameter:pipeline_diameter, pipeline_method:pipeline_method, pipeline_location:pipeline_location, pipeline_geometry:pipeline_geometry, request:'pipelines'},
|
|
type: "POST",
|
|
success:function(response) {
|
|
if (response.trim().substr(0, 5)=="ERROR") {
|
|
console.log(response);
|
|
$("#pipeline_status").html(response)
|
|
} else {
|
|
$("#pipeline_status").html("Pipeline inserted successfully!")
|
|
load_pipelines(dma_id);
|
|
|
|
$("#new_pipeline_id").val("");
|
|
$("#pipeline_category").val("");
|
|
$("#pipeline_dma_id").val("");
|
|
$("#pipeline_diameter").val("");
|
|
$("#pipeline_method").val("");
|
|
$("#pipeline_location").val("");
|
|
$("#pipeline_geometry").val("");
|
|
}
|
|
},
|
|
error:function(xhr, status, error) {
|
|
$("#pipeline_status").html(error)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
$("#btn_pipeline_refresh").click(function() {
|
|
load_pipelines(dma_id);
|
|
})
|
|
|
|
|
|
// Polygon Features
|
|
function load_buildings (dma_id) {
|
|
$.ajax({
|
|
url:'load_data.php',
|
|
data: {table:'buildings', dma_id:dma_id},
|
|
type: 'POST',
|
|
success: function(response) {
|
|
if (response.trim().substr(0, 5)=="ERROR") {
|
|
console.log(response);
|
|
} else {
|
|
var jsnBuilding = JSON.parse(response);
|
|
|
|
if (layerBuildings) {
|
|
layerBuildings.remove();
|
|
control_layers.removeLayer(layerBuildings)
|
|
}
|
|
|
|
layerBuildings = L.geoJSON(jsnBuilding, {
|
|
style:style_buildings,
|
|
onEachFeature:process_buildings,
|
|
}).addTo(mymap);
|
|
|
|
control_layers.addOverlay(layerBuildings, "Buildings");
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.log("Error: "+error);
|
|
}
|
|
});
|
|
}
|
|
|
|
$("#building_id").autocomplete({
|
|
source:buildings_array,
|
|
appendTo: "#sidebar"
|
|
})
|
|
|
|
function style_buildings(json) {
|
|
var att = json.properties;
|
|
var storey = att.building_storey
|
|
var color;
|
|
var fill_color;
|
|
var fill_opacity = 1;
|
|
|
|
buildings_array.push(att.building_id);
|
|
|
|
switch (att.building_category) {
|
|
case 'Building':
|
|
if (storey>=10) {
|
|
color = '#B71C1C';
|
|
fill_color = '#B71C1C';
|
|
} else if (storey>=7) {
|
|
color = '#C62828';
|
|
fill_color = '#C62828';
|
|
} else if (storey>=5) {
|
|
color = '#D32F2F';
|
|
fill_color = '#D32F2F';
|
|
} else if (storey>=3) {
|
|
color = '#E53935';
|
|
fill_color = '#E53935';
|
|
} else {
|
|
color = '#F44336';
|
|
fill_color = "#F44336";
|
|
}
|
|
break;
|
|
case 'Tin Shed':
|
|
color = '#EF5350';
|
|
fill_color = '#EF5350';
|
|
break;
|
|
case 'Open Plot':
|
|
color = '#E57373';
|
|
fill_color = '#E57373';
|
|
break;
|
|
default:
|
|
color = '#EF9A9A'
|
|
fill_color = '#EF9A9A'
|
|
break;
|
|
}
|
|
|
|
return {color:color, fillColor:fill_color, fillOpacity:fill_opacity}
|
|
}
|
|
|
|
function process_buildings(json, lyr) {
|
|
var att = json.properties;
|
|
|
|
lyr.bindTooltip("Building ID: "+att.building_id+"<br>Account Number: "+att.account_no+"<br>Category: "+att.building_category+"<br>Storey: "+att.building_storey+"<br>Population: "+att.building_population+"<br>Location: "+att.building_location).bindPopup(
|
|
`<div class="popup-container">
|
|
|
|
<input type="hidden" name="webgis_id" class="updateBuilding" value='${att.webgis_id}'>
|
|
<input type="hidden" name="account_no_old" class="updateBuilding" value='${att.account_no}'>
|
|
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Account Number</label>
|
|
<input type="text" class="form-control popup-input text-center updateBuilding" value='${att.account_no}' name="account_no">
|
|
</div>
|
|
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">DMA ID</label>
|
|
<input type="text" class="form-control popup-input text-center updateBuilding" value='${att.building_dma_id}' name="building_dma_id">
|
|
</div>
|
|
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Category</label>
|
|
<input type="text" class="form-control popup-input text-center updateBuilding" value='${att.building_category}' name="building_category">
|
|
</div>
|
|
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Storey</label>
|
|
<input type="number" class="form-control popup-input text-center updateBuilding" value='${att.building_storey}' name="building_storey">
|
|
</div>
|
|
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Population</label>
|
|
<input type="number" class="form-control popup-input text-center updateBuilding" value='${att.building_population}' name="building_population">
|
|
</div>
|
|
|
|
<div class="popup-form-group">
|
|
<label class="control-label popup-label">Location</label>
|
|
<input type="text" class="form-control popup-input text-center updateBuilding" value='${att.building_location}' name="building_location">
|
|
</div>
|
|
|
|
<div class="popup-button-group">
|
|
<button type="submit" class="btn btn-success popup-button" onclick='updateBuilding()'>Update</button>
|
|
<button type="submit" class="btn btn-danger popup-button" onclick='deleteBuilding()'>Delete</button>
|
|
</div>
|
|
|
|
</div>`
|
|
);
|
|
}
|
|
|
|
|
|
function updateBuilding() {
|
|
var jsn = returnFormData('updateBuilding');
|
|
jsn.request = "buildings";
|
|
|
|
Swal.fire({
|
|
title: "Do you want to save this Building?",
|
|
showDenyButton: true,
|
|
showCancelButton: true,
|
|
confirmButtonText: "Save",
|
|
denyButtonText: `Don't save`
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$.ajax({
|
|
url:'update_data.php',
|
|
data:jsn,
|
|
type:'POST',
|
|
success: function(response){
|
|
if (response.trim().substr(0, 5) == "ERROR") {
|
|
Swal.fire("Error!", response, "error");
|
|
} else {
|
|
Swal.fire("Saved!", "", "success");
|
|
load_buildings(dma_id);
|
|
}
|
|
},
|
|
error: function(error) {
|
|
console.log("ERROR: "+error);
|
|
},
|
|
})
|
|
}
|
|
else if (result.isDenied) {
|
|
Swal.fire("Building not saved", "", "info");
|
|
}
|
|
});
|
|
};
|
|
|
|
function deleteBuilding() {
|
|
var jsn = returnFormData('updateBuilding');
|
|
jsn.request = "buildings";
|
|
|
|
Swal.fire({
|
|
title: "Do you want to delete this Building?",
|
|
showDenyButton: true,
|
|
showCancelButton: true,
|
|
confirmButtonText: "Delete",
|
|
denyButtonText: `Don't delete`
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$.ajax({
|
|
url:'delete_data.php',
|
|
data:jsn,
|
|
type:'POST',
|
|
success: function(response){
|
|
if (response.trim().substr(0, 5) == "ERROR") {
|
|
Swal.fire("Error!", response, "error");
|
|
} else {
|
|
Swal.fire("Deleted!", "", "success");
|
|
load_buildings(dma_id);
|
|
}
|
|
},
|
|
error: function(error) {
|
|
console.log("ERROR: "+error);
|
|
},
|
|
})
|
|
}
|
|
else if (result.isDenied) {
|
|
Swal.fire("Building not deleted!", "", "info");
|
|
}
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
// jQuery
|
|
$("#findBuilding").click(function() {
|
|
var building_id = $("#building_id").val();
|
|
|
|
returnLayerByAttribute("buildings", "building_id", building_id, function(lyr) {
|
|
$("#building_error").html("");
|
|
$("#building_information").html("");
|
|
|
|
if (lyrSearch) {
|
|
mymap.removeLayer(lyrSearch);
|
|
}
|
|
|
|
if (lyr) {
|
|
var att = lyr.feature.properties;
|
|
|
|
lyrSearch = L.geoJSON(lyr.toGeoJSON(), {style:{color:'red', weight:10, opacity:1.0, fillOpacity:0.0}}).addTo(mymap);
|
|
|
|
mymap.fitBounds(lyr.getBounds());
|
|
// buildings.bringToFront();
|
|
|
|
$("#building_information").html("Building ID: "+att.building_id+"<br>Account Number: "+att.account_no+"<br>Category: "+att.building_category+"<br>Storey: "+att.building_storey+"<br>Population: "+att.building_population+"<br>Location: "+att.building_location);
|
|
|
|
} else {
|
|
$("#building_error").html("Building not found!");
|
|
}
|
|
});
|
|
})
|
|
|
|
|
|
$("#btn_building_form").click(function() {
|
|
$("#new_building_information").show();
|
|
})
|
|
|
|
$("#btn_building_cancel").click(function() {
|
|
$("#new_building_information").hide();
|
|
})
|
|
|
|
|
|
$("#btn_building_insert").click(function(){
|
|
var account_no = $("#new_building_id").val();
|
|
var building_category = $("#building_category").val();
|
|
var building_dma_id = $("#building_dma_id").val();
|
|
var building_storey = $("#building_storey").val();
|
|
var building_population = $("#building_population").val();
|
|
var building_location = $("#building_location").val();
|
|
var building_geometry = $("#building_geometry").val();
|
|
|
|
if (account_no == "" || building_category == "" || building_dma_id == "" || building_storey =="" || building_geometry =="") {
|
|
$("#building_status").html("Please fill up all Fields");
|
|
} else {
|
|
$.ajax({
|
|
url:'insert_data.php',
|
|
data:{account_no:account_no, building_category:building_category, building_dma_id:building_dma_id, building_storey:building_storey, building_population:building_population, building_location:building_location, building_geometry:building_geometry, request:'buildings'},
|
|
type:'POST',
|
|
success:function(response) {
|
|
|
|
if (response.trim().substr(0,5)=='ERROR') {
|
|
console.log(response);
|
|
$("#building_status").html(response);
|
|
} else {
|
|
$("#building_status").html("Building inserted successfully!");
|
|
load_buildings(dma_id);
|
|
|
|
$("#new_building_id").val("");
|
|
$("#building_category").val("");
|
|
$("#building_dma_id").val("");
|
|
$("#building_storey").val("");
|
|
$("#building_population").val("");
|
|
$("#building_location").val("");
|
|
$("#building_geometry").val("");
|
|
}
|
|
},
|
|
error:function(xhr, status, error){
|
|
$("#building_status").html(error);
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
});
|
|
|
|
|
|
$("#btn_building_refresh").click(function(){
|
|
load_buildings(dma_id);
|
|
});
|
|
|
|
|
|
|
|
// RASTER DATA
|
|
|
|
function load_rasterdata(dma_id) {
|
|
|
|
if (raster_data) {
|
|
raster_data.remove();
|
|
control_layers.removeLayer(raster_data)
|
|
}
|
|
|
|
var path = 'https://localhost/webgisCourse/webgisPortal/raster_data/'+dma_id+'/{z}/{x}/{y}.png';
|
|
|
|
raster_data = L.tileLayer(path, {
|
|
tms:1,
|
|
opacity:1,
|
|
attribution:"",
|
|
maxZoom:22
|
|
});
|
|
|
|
control_layers.addOverlay(raster_data, "Drone Image");
|
|
}
|
|
|
|
|
|
|
|
|
|
// GENERAL FUNCTIONS
|
|
function returnLayerByAttribute(table, field, value, callback) {
|
|
$.ajax({
|
|
url:'find_data.php',
|
|
data:{table:table, field:field, value:value},
|
|
type:'POST',
|
|
success:function(response) {
|
|
if (response.trim().substr(0, 5)=="ERROR") {
|
|
console.log(response);
|
|
callback(false)
|
|
} else {
|
|
var jsn = JSON.parse(response);
|
|
var layer = L.geoJSON(jsn);
|
|
var layers = layer.getLayers();
|
|
|
|
if (layers.length>0) {
|
|
callback(layers[0])
|
|
} else {
|
|
callback(false)
|
|
}
|
|
}
|
|
},
|
|
error:function(xhr, status, error){
|
|
console.log("ERROR: "+error);
|
|
}
|
|
})
|
|
};
|
|
|
|
|
|
function returnFormData(inpClass) {
|
|
var objFormData = {};
|
|
|
|
$("."+inpClass).each(function(){
|
|
objFormData[this.name] = this.value;
|
|
});
|
|
|
|
return objFormData
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |