var map, geojson;
var selected, features, layer_name, layerControl;
var content;
var popup = [Link]();
map = [Link]('map', {
crs: [Link].EPSG4326,
center: [23.00, 82.00],
zoom: 3,
zoomControl: false
//layers: [grayscale, cities]
});
var satellite =
[Link]('[Link]
MapServer/tile/{z}/{y}/{x}', {
// maxZoom: 23,
attribution: 'Source: Esri, Maxar, Earthstar Geographics, CNES/Airbus DS,
USDA FSA, USGS, Getmapping, Aerogrid, IGN, IGP, and the GIS User Community'
}).addTo(map);
var hillshade =
[Link]('[Link]
MapServer/tile/{z}/{y}/{x}', {
//maxZoom: 19,
attribution: 'Sources: Esri, Airbus DS, USGS, NGA, NASA, CGIAR, N Robinson,
NCEAS, NLS, OS, NMA, Geodatastyrelsen, Rijkswaterstaat, GSA, Geoland, FEMA,
Intermap, and the GIS user community',
});
/*var satellite =
[Link]('[Link]
MapServer/tile/{z}/{y}/{x}', {
maxZoom: 23,
attributions: ['Powered by Esri',
'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS,
USDA, USGS, AeroGRID, IGN, and the GIS User Community'
],
id: 'mapbox/light-v9',
//tileSize: 256,
//zoomOffset: -1
}).addTo(map);*/
/*var OSM = [Link]('[Link] {
maxZoom: 19,
attribution: '© <a
href="[Link] contributors'
}).addTo(map);*/
/*var india_state = [Link]('[Link]
layers: 'india:india_state',
transparent: 'true',
format: 'image/png'
}).addTo(map);
var india_district = [Link]('[Link]
layers: 'india:india_district',
transparent: 'true',
format: 'image/png'
}).addTo(map);*/
var overlays = [Link]();
//[Link](india_state,'india_state');
//[Link](india_district,'india_district');
var base = [Link]();
[Link](hillshade, 'hillshade');
[Link](satellite, 'satellite');
layerControl = [Link]().addTo(map);
[Link](hillshade, "hillshade");
[Link](satellite, "satellite");
//[Link](india_state,"india_state");
//[Link](india_district,"india_district");
//[Link](base);
//[Link]().addTo(map);
/*layerControl = [Link]().addTo(map);
//[Link](india_state,"test").addTo(map);
[Link](satellite,"satellite");
[Link](OSM,"OSM");
[Link](india_state,"india_state");
[Link](india_district,"india_district");
*/
// Zoom bar
var zoom_bar = new [Link]({
position: 'topleft'
}).addTo(map);
//[Link](new [Link]());
// mouse position
[Link]({
position: 'bottomleft',
prefix: "lat : long",
}).addTo(map);
//scale
[Link]({
position: 'bottomleft'
}).addTo(map);
//geocoder
[Link]({
position: 'topright'
}).addTo(map);
//line mesure
[Link]({
position: 'topleft',
unit: 'kilometres',
showBearings: true,
clearMeasurementsOnStop: false,
showClearControl: true,
showUnitControl: true
}).addTo(map);
//area measure
var measureControl = new [Link]({
position: 'topleft'
});
[Link](map);
//search
[Link]([Link]({
position: 'topleft'
}));
//legend
function legend() {
$('#legend').empty();
var layers = [Link]();
//[Link](no_layers[0].[Link]);
//[Link](no_layers);
//var no_layers = [Link]().get('length');
var head = [Link]("h8");
var txt = [Link]("Legend");
[Link](txt);
var element = [Link]("legend");
[Link](head);
[Link](function (layer) {
var head = [Link]("p");
var txt = [Link]([Link]);
//alert(txt[i]);
[Link](txt);
var element = [Link]("legend");
[Link](head);
var img = new Image();
[Link] = "[Link]
REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER="
+[Link];
var src = [Link]("legend");
[Link](img);
});
legend();
// layer dropdown query
$(document).ready(function() {
$.ajax({
type: "GET",
url: "[Link]
dataType: "xml",
success: function(xml) {
var select = $('#layer');
$(xml).find('FeatureType').each(function() {
//var title = $(this).find('ows:Operation').attr('name');
//alert(title);
var name = $(this).find('Name').text();
//[Link]("<option/><option class='ddheader' value='"+ name
+"'>"+title+"</option>");
$(this).find('Name').each(function() {
var value = $(this).text();
[Link]("<option class='ddindent' value='" + value + "'>"
+ value + "</option>");
});
});
//[Link](":first").text("please make a
selection").attr("selected",true);
}
});
});
// attribute dropdown
$(function() {
$("#layer").change(function() {
var attributes = [Link]("attributes");
var length = [Link];
for (i = length - 1; i >= 0; i--) {
[Link][i] = null;
}
var value_layer = $(this).val();
[Link][0] = new Option('Select attributes', "");
// alert(url);
$(document).ready(function() {
$.ajax({
type: "GET",
url: "[Link]
service=WFS&request=DescribeFeatureType&version=1.1.0&typeName=" + value_layer,
dataType: "xml",
success: function(xml) {
var select = $('#attributes');
//var title = $(xml).find('xsd\\:complexType').attr('name');
// alert(title);
$(xml).find('xsd\\:sequence').each(function() {
$(this).find('xsd\\:element').each(function() {
var value = $(this).attr('name');
//alert(value);
var type = $(this).attr('type');
//alert(type);
if (value != 'geom' && value != 'the_geom') {
[Link]("<option class='ddindent' value='" +
type + "'>" + value + "</option>");
}
});
});
}
});
});
});
});
// operator combo
$(function() {
$("#attributes").change(function() {
var operator = [Link]("operator");
var length = [Link];
for (i = length - 1; i >= 0; i--) {
[Link][i] = null;
}
var value_type = $(this).val();
// alert(value_type);
var value_attribute = $('#attributes option:selected').text();
[Link][0] = new Option('Select operator', "");
if (value_type == 'xsd:short' || value_type == 'xsd:int' || value_type ==
'xsd:double' || value_type == 'xsd:long') {
var operator1 = [Link]("operator");
[Link][1] = new Option('Greater than', '>');
[Link][2] = new Option('Less than', '<');
[Link][3] = new Option('Equal to', '=');
[Link][4] = new Option('Between', 'BETWEEN');
} else if (value_type == 'xsd:string') {
var operator1 = [Link]("operator");
[Link][1] = new Option('Like', 'ILike');
});
});
// function for finding row in the table when feature selected on map
function findRowNumber(cn1, v1) {
var table = [Link]('#table');
var rows = [Link]("tr");
var msg = "No such row exist"
for (i = 1; i < [Link]; i++) {
var tableData = rows[i].querySelectorAll("td");
if (tableData[cn1 - 1].textContent == v1) {
msg = i;
break;
}
}
return msg;
}
// function for loading query
function query() {
$('#table').empty();
if (geojson) {
[Link](geojson);
//alert('jsbchdb');
var layer = [Link]("layer");
var value_layer = [Link][[Link]].value;
//alert(value_layer);
var attribute = [Link]("attributes");
var value_attribute = [Link][[Link]].text;
//alert(value_attribute);
var operator = [Link]("operator");
var value_operator = [Link][[Link]].value;
//alert(value_operator);
var txt = [Link]("value");
var value_txt = [Link];
if (value_operator == 'ILike') {
value_txt = "'" + value_txt + "%25'";
//alert(value_txt);
//value_attribute = 'strToLowerCase('+value_attribute+')';
} else {
value_txt = value_txt;
//value_attribute = value_attribute;
}
//alert(value_txt);
var url = "[Link]
service=WFS&version=1.0.0&request=GetFeature&typeName=" + value_layer +
"&CQL_FILTER=" + value_attribute + "%20" + value_operator + "%20" + value_txt +
"&outputFormat=application/json"
//[Link](url);
$.getJSON(url, function(data) {
geojson = [Link](data, {
onEachFeature: onEachFeature
});
[Link](map);
[Link]([Link]());
var col = [];
[Link]('id');
for (var i = 0; i < [Link]; i++) {
for (var key in [Link][i].properties) {
if ([Link](key) === -1) {
[Link](key);
}
}
}
var table = [Link]("table");
//[Link]("class", "table table-bordered");
[Link]("class", "table table-hover table-striped");
[Link]("id", "table");
var caption = [Link]("caption");
[Link]("id", "caption");
[Link] = 'top';
[Link] = value_layer+" (Number of Features :
"+[Link]+" )";
[Link](caption);
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = [Link](-1); // TABLE ROW.
for (var i = 0; i < [Link]; i++) {
var th = [Link]("th"); // TABLE HEADER.
[Link] = col[i];
[Link](th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < [Link]; i++) {
tr = [Link](-1);
for (var j = 0; j < [Link]; j++) {
var tabCell = [Link](-1);
if (j == 0) {
[Link] = [Link][i]['id'];
} else {
//alert([Link][i]['id']);
[Link] = [Link][i].properties[col[j]];
//alert([Link]);
}
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = [Link]("table_data");
[Link] = "";
[Link](table);
addRowHandlers();
[Link]('map').[Link] = '71%';
[Link]('table_data').[Link] = '29%';
[Link]();
});
// highlight the feature on map and table on map click
function onEachFeature(feature, layer) {
[Link]('click', function(e) {
// e = event
// Reset selected to default style
if (selected) {
// Reset selected to default style
[Link](selected);
}
selected = [Link];
[Link]({
'color': 'red'
});
if (feature) {
[Link](feature);
$(function() {
$("#table td").each(function() {
$(this).parent("tr").css("background-color", "white");
});
});
var table = [Link]('table');
var cells = [Link]('td');
var rows = [Link]("table").rows;
var heads = [Link]('th');
var col_no;
for (var i = 0; i < [Link]; i++) {
// Take each cell
var head = heads[i];
//alert([Link]);
if ([Link] == 'id') {
col_no = i + 1;
//alert(col_no);
}
}
var row_no = findRowNumber(col_no, [Link]);
//alert(row_no);
var rows = [Link]('#table tr');
rows[row_no].scrollIntoView({
behavior: 'smooth',
block: 'center'
});
$(document).ready(function() {
$("#table td:nth-child(" + col_no + ")").each(function() {
if ($(this).text() == [Link]) {
$(this).parent("tr").css("background-color", "grey");
}
});
});
});
};
// highlight the feature on map and table on row select in table
function addRowHandlers() {
var rows = [Link]("table").rows;
var heads = [Link]('th');
var col_no;
for (var i = 0; i < [Link]; i++) {
// Take each cell
var head = heads[i];
//alert([Link]);
if ([Link] == 'id') {
col_no = i + 1;
//alert(col_no);
}
}
for (i = 0; i < [Link]; i++) {
rows[i].onclick = function() {
return function() {
//[Link]().clear();
if (geojson) {
[Link]();
}
$(function() {
$("#table td").each(function() {
$(this).parent("tr").css("background-color", "white");
});
});
var cell = [Link][col_no - 1];
var id = [Link];
$(document).ready(function() {
$("#table td:nth-child(" + col_no + ")").each(function() {
if ($(this).text() == id) {
$(this).parent("tr").css("background-color", "grey");
}
});
});
features = [Link]();
for (i = 0; i < [Link]; i++) {
if (features[i].[Link] == id) {
//alert(features[i].[Link]);
//[Link]().addFeature(features[i]);
selected = features[i];
[Link]({
'color': 'red'
});
[Link]([Link]());
[Link]([Link]());
}
}
//alert("id:" + id);
};
}(rows[i]);
}
}
//list of wms_layers_ in window on click of button
function wms_layers() {
$("#wms_layers_window").modal({backdrop: false});
//$("#wms_layers_window").draggable();
$("#wms_layers_window").modal('show');
$(document).ready(function() {
$.ajax({
type: "GET",
url: "[Link]
dataType: "xml",
success: function(xml) {
$('#table_wms_layers').empty();
// [Link]("here");
$('<tr></tr>').html('<th>Name</th><th>Title</th><th>Abstract</th>').appendTo('#tabl
e_wms_layers');
$(xml).find('Layer').find('Layer').each(function() {
var name = $(this).children('Name').text();
// alert(name);
//var name1 = [Link]('Name').text();
//alert(name);
var title = $(this).children('Title').text();
var abst = $(this).children('Abstract').text();
// alert(abst);
// alert('test');
$('<tr></tr>').html('<td>' + name + '</td><td>' + title +
'</td><td>' + abst + '</td>').appendTo('#table_wms_layers');
//[Link]("table_wms_layers").setAttribute("class", "table-
success");
});
addRowHandlers1();
}
});
});
function addRowHandlers1() {
//alert('knd');
var rows = [Link]("table_wms_layers").rows;
var table = [Link]('table_wms_layers');
var heads = [Link]('th');
var col_no;
for (var i = 0; i < [Link]; i++) {
// Take each cell
var head = heads[i];
//alert([Link]);
if ([Link] == 'Name') {
col_no = i + 1;
//alert(col_no);
}
}
for (i = 0; i < [Link]; i++) {
rows[i].onclick = function() {
return function() {
$(function() {
$("#table_wms_layers td").each(function() {
$(this).parent("tr").css("background-color", "white");
});
});
var cell = [Link][col_no - 1];
layer_name = [Link];
// alert(layer_name);
$(document).ready(function() {
$("#table_wms_layers td:nth-child(" + col_no +
")").each(function() {
if ($(this).text() == layer_name) {
$(this).parent("tr").css("background-color",
"grey");
}
});
});
//alert("id:" + id);
};
}(rows[i]);
}
}
// add wms layer to map on click of button
function add_layer() {
// alert("jd");
//alert(layer_name);
//[Link](layerSwitcher);
var name = layer_name.split(":");
//alert(layer_name);
var layer_wms = [Link]('[Link] {
layers: layer_name,
transparent: 'true',
format: 'image/png'
}).addTo(map);
//[Link](india_district,"india_district");
[Link](layer_wms, layer_name);
[Link](layer_wms, layer_name);
$(document).ready(function() {
$.ajax({
type: "GET",
url: "[Link]
dataType: "xml",
success: function(xml) {
$(xml).find('Layer').find('Layer').each(function() {
var name = $(this).children('Name').text();
// alert(name);
if (name == layer_name) {
// use this for getting the lat long of the extent
var bbox1 = $
(this).children('EX_GeographicBoundingBox').children('southBoundLatitude').text();
var bbox2 = $
(this).children('EX_GeographicBoundingBox').children('westBoundLongitude').text();
var bbox3 = $
(this).children('EX_GeographicBoundingBox').children('northBoundLatitude').text();
var bbox4 = $
(this).children('EX_GeographicBoundingBox').children('eastBoundLongitude').text();
var southWest = [Link](bbox1, bbox2);
var northEast = [Link](bbox3, bbox4);
var bounds = [Link](southWest, northEast);
[Link](bounds);
// use below code for getting the extent in the projection
defined in geoserver
/* $(this).find('BoundingBox').each(function(){
if ($(this).attr('CRS') != "CRS:84" ){
var bbox1 = $(this).attr('minx');
var bbox2 = $(this).attr('miny');
var bbox3 = $(this).attr('maxx');
var bbox4 = $(this).attr('maxy');
var southWest = [Link](bbox1, bbox2);
var northEast = [Link](bbox3, bbox4);
var bounds = [Link](southWest, northEast);
[Link](bounds);
}
});*/
// alert($
(this).children('EX_GeographicBoundingBox').text());
if (bounds != undefined){alert(layer_name+" added to the
map");}
}
});
}
});
});
legend();
function close_wms_window(){
layer_name = undefined;
}
// function on click of getinfo
function info() {
if ([Link]("info_btn").innerHTML == "☰ Activate GetInfo") {
[Link]("info_btn").innerHTML = "☰ De-Activate GetInfo";
[Link]("info_btn").setAttribute("class", "btn btn-danger
btn-sm");
[Link]('click', getinfo);
} else {
[Link]('click', getinfo);
[Link]("info_btn").innerHTML = "☰ Activate GetInfo";
[Link]("info_btn").setAttribute("class", "btn btn-success
btn-sm");
}
}
// getinfo function
function getinfo(e) {
//var url1 = [Link]([Link]);
//[Link](url1);
var point = [Link]([Link], [Link]());
var bbox = [Link]().toBBoxString();
var size = [Link]();
var height = size.y;
var width = size.x;
var x = point.x;
var y = point.y;
if (content) {
content = '';
}
[Link](function (layer) {
var url = '[Link]
SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image
%2Fpng&TRANSPARENT=true&QUERY_LAYERS=' + [Link] + '&LAYERS=' +
[Link] + '&INFO_FORMAT=text%2Fhtml&X=' + x + '&Y=' + y + '&CRS=EPSG
%3A4326&STYLES=&WIDTH=' + width + '&HEIGHT=' + height + '&BBOX=' + bbox;
[Link](url);
$.get(url, function(data) {
//[Link](data);
content += data;
//[Link](content);
[Link](content);
[Link]([Link]);
[Link](popup);
});
});
// clear function
function clear_all() {
[Link]('map').[Link] = '100%';
[Link]('table_data').[Link] = '0%';
[Link]();
$('#table').empty();
$('#legend').empty();
//$('#table1').empty();
if (geojson) {
[Link](geojson);
}
[Link]([23.00, 82.00], 4);
[Link]("query_panel_btn").innerHTML = "☰ Open Query Panel";
[Link]("query_panel_btn").setAttribute("class", "btn btn-
success btn-sm");
[Link]("query_tab").[Link] = "0%";
[Link]("map").[Link] = "100%";
[Link]("map").[Link] = "0%";
[Link]("query_tab").[Link] = "hidden";
[Link]('table_data').[Link] = '0%';
[Link]("legend_btn").innerHTML = "☰ Show Legend";
[Link]("legend").[Link] = "0%";
[Link]("legend").[Link] = "hidden";
[Link]('legend').[Link] = '0%';
[Link]('click', getinfo);
[Link]("info_btn").innerHTML = "☰ Activate GetInfo";
[Link]("info_btn").setAttribute("class", "btn btn-success btn-
sm");
[Link](function (layer) {
[Link](layer);
[Link](layer);
[Link](layer);
});
[Link]();
[Link]();
function show_hide_querypanel() {
if ([Link]("query_tab").[Link] == "hidden") {
[Link]("query_panel_btn").innerHTML = "☰ Hide Query Panel";
[Link]("query_panel_btn").setAttribute("class", "btn btn-
danger btn-sm");
[Link]("query_tab").[Link] = "visible";
[Link]("query_tab").[Link] = "20%";
[Link]("map").[Link] = "79%";
[Link]("map").[Link] = "20%";
[Link]('table_data').[Link] = '20%';
[Link]();
} else {
[Link]("query_panel_btn").innerHTML = "☰ Open Query
Panel";
[Link]("query_panel_btn").setAttribute("class", "btn btn-
success btn-sm");
[Link]("query_tab").[Link] = "0%";
[Link]("map").[Link] = "100%";
[Link]("map").[Link] = "0%";
[Link]("query_tab").[Link] = "hidden";
[Link]('table_data').[Link] = '0%';
[Link]();
}
}
function show_hide_legend() {
if ([Link]("legend").[Link] == "hidden") {
[Link]("legend_btn").innerHTML = "☰ Hide Legend";
[Link]("legend").[Link] = "visible";
[Link]("legend").[Link] = "15%";
[Link]('legend').[Link] = '38%';
[Link]();
} else {
[Link]("legend_btn").innerHTML = "☰ Show Legend";
[Link]("legend").[Link] = "0%";
[Link]("legend").[Link] = "hidden";
[Link]('legend').[Link] = '0%';
[Link]();
}
}