vedas
Clone or download
Modified Files
var Base64 = {
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
encode: function(input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = Base64._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
}
return output;
},
decode: function(input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = this._keyStr.indexOf(input.charAt(i++));
enc2 = this._keyStr.indexOf(input.charAt(i++));
enc3 = this._keyStr.indexOf(input.charAt(i++));
enc4 = this._keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = Base64._utf8_decode(output);
return output;
},
_utf8_encode: function(string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
_utf8_decode: function(utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while (i < utftext.length) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
}
else if ((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i + 1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}
else {
c2 = utftext.charCodeAt(i + 1);
c3 = utftext.charCodeAt(i + 2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'
var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'
var IdentifyLayerGroup = new ol.layer.Group({
var IdentifyLayerGroup = new ol.layer.Group({
layers : [
layers : [
new ol.layer.Tile({
new ol.layer.Tile({
source : new ol.source.TileWMS({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
crossOrigin: 'anonymous',
params : {
params : {
'LAYERS' : 'india_blockstation_basemap',
'LAYERS' : 'india_blockstation_basemap',
format_options:'dpi:180',
format_options:'dpi:180',
version : '1.1.1',
version : '1.1.1',
STYLES:''
STYLES:''
}
}
}),
}),
showLegend: true,
showLegend: true,
//maxResolution : 256,
//maxResolution : 256,
name : 'Rail',
name : 'Rail',
visible:false
visible:false
}),
}),
new ol.layer.Tile({
new ol.layer.Tile({
source : new ol.source.TileWMS({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
crossOrigin: 'anonymous',
params : {
params : {
'LAYERS' : 'india_airport_location_basemap',
'LAYERS' : 'india_airport_location_basemap',
format_options:'dpi:180',
format_options:'dpi:180',
version : '1.1.1',
version : '1.1.1',
STYLES:''
STYLES:''
}
}
}),
}),
showLegend: true,
showLegend: true,
//maxResolution : 256,
//maxResolution : 256,
name : 'Airport',
name : 'Airport',
visible:false
visible:false
}),
}),
new ol.layer.Tile({
new ol.layer.Tile({
source : new ol.source.TileWMS({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
crossOrigin: 'anonymous',
params : {
params : {
'LAYERS' : 'india_nhai',
'LAYERS' : 'india_nhai',
format_options:'dpi:180',
format_options:'dpi:180',
version : '1.1.1',
version : '1.1.1',
STYLES:''
STYLES:''
}
}
}),
}),
showLegend: true,
showLegend: true,
//maxResolution : 256,
//maxResolution : 256,
name : 'National Highway',
name : 'National Highway',
visible:false
visible:false
}),
}),
new ol.layer.Tile({
new ol.layer.Tile({
source : new ol.source.TileWMS({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
crossOrigin: 'anonymous',
params : {
params : {
'LAYERS' : 'monument_final_tbl',
'LAYERS' : 'monument_final_tbl',
format_options:'dpi:180',
format_options:'dpi:180',
version : '1.1.1',
version : '1.1.1',
STYLES:''
STYLES:''
}
}
}),
}),
showLegend: true,
showLegend: true,
//maxResolution : 256,
//maxResolution : 256,
name : 'Monument',
name : 'Monument',
visible:false
visible:false
}),
}),
],
],
name : 'Identify'
name : 'Identify'
});
});
var CommonlayersGroup = new ol.layer.Group({
var CommonlayersGroup = new ol.layer.Group({
layers : [
layers : [
new ol.layer.Tile({
new ol.layer.Tile({
visible : false,
visible : false,
preload : Infinity,
preload : Infinity,
opacity: 1,
opacity: 1,
source : new ol.source.BingMaps(
source : new ol.source.BingMaps(
{
{
key : 'Auw0s19PwLEd-w-GFNBPzqs2lekVJE5KjKtxg0EwzB6nuvocKYwMJ7ZJnfnltPgM', //'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
key : 'Auw0s19PwLEd-w-GFNBPzqs2lekVJE5KjKtxg0EwzB6nuvocKYwMJ7ZJnfnltPgM', //'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
imagerySet : 'Aerial'
imagerySet : 'Aerial'
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// "no photos at this zoom level" tiles
// "no photos at this zoom level" tiles
// maxZoom: 19
// maxZoom: 19
}),
}),
name : 'Aerial'
name : 'Aerial'
}),
}),
new ol.layer.Tile({
new ol.layer.Tile({
visible : false,
visible : false,
preload : Infinity,
preload : Infinity,
source : new ol.source.BingMaps({
source : new ol.source.BingMaps({
key :'Auw0s19PwLEd-w-GFNBPzqs2lekVJE5KjKtxg0EwzB6nuvocKYwMJ7ZJnfnltPgM', //'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
key :'Auw0s19PwLEd-w-GFNBPzqs2lekVJE5KjKtxg0EwzB6nuvocKYwMJ7ZJnfnltPgM', //'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
imagerySet : 'AerialWithLabels',
imagerySet : 'AerialWithLabels',
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// "no photos at this zoom level" tiles
// "no photos at this zoom level" tiles
// maxZoom: 19
// maxZoom: 19
}),
}),
name : 'Aerial+Labels'
name : 'Aerial+Labels'
}),
}),
new ol.layer.Tile({
new ol.layer.Tile({
visible : false,
visible : false,
source : new ol.source.OSM(),
source : new ol.source.OSM(),
name : 'OSM'
name : 'OSM'
}),
}),
new ol.layer.Tile({
new ol.layer.Tile({
visible : false,
visible : true,
source: new ol.source.TileImage({url: 'http://maps.google.com/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i375060738!3m9!2spl!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0'}),
source: new ol.source.TileImage({url: 'http://maps.google.com/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i375060738!3m9!2spl!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0'}),
name : 'Google Map'
name : 'Google Map'
})
})
],
],
name : 'Basemaps'
name : 'Basemaps'
});
});
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
var wmsurl='http://localhost:8080/geoserver/PostgresSql/wms'
var geomLayerGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :'http://localhost:8080/geoserver/PostgresSql/wms',
// crossOrigin: 'anonymous',
params : {
'LAYERS' : 'geom',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: false,
//maxResolution : 256,
name : 'Geom',
visible:true
}),
],
name : 'GeomGroup'
});
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'
var wmsurl='https://gis.ncog.gov.in/GISWeb/wms';
//var wmsurl='wms'
//var wmsurl='https://gis.ncog.gov.in/GeoserverWebAPI/wms62'
var indianMapLayersGroup = new ol.layer.Group({
var st="STCODE11='03'";
layers : [
var di="dtcode11 ='037'";
var ta="dtcode11 ='037'";
var vil="DT_2011 ='037'";
new ol.layer.Tile({
source : new ol.source.TileWMS({
var indianMapLayersGroup = new ol.layer.Group({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
layers : [
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'VillageIndia',
new ol.layer.Tile({
format_options:'dpi:180',
source : new ol.source.TileWMS({
version : '1.1.1',
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
//CQL_FILTER : se
crossOrigin: 'anonymous',
}
params : {
}),
'LAYERS' : 'VillageIndia',
showLegend: true,
format_options:'dpi:180',
maxResolution : 256,
version : '1.1.1',
name : 'Village',
// CQL_FILTER : vil
visible:false
}
}),
}),
showLegend: true,
new ol.layer.Tile({
maxResolution : 256,
source : new ol.source.TileWMS({
name : 'Village',
url : wmsurl,//'http://192.168.1.89:8090/geoserver/cite/wms',
visible:true
crossOrigin: 'anonymous',
}),
params : {
layers : 'TalukaIndia',
new ol.layer.Tile({
version : '1.1.1',format_options:'dpi:110',
source : new ol.source.TileWMS({
//CQL_FILTER : ta
url : wmsurl,//'http://192.168.1.89:8090/geoserver/cite/wms',
}
crossOrigin: 'anonymous',
}),
params : {
showLegend: true,
layers : 'TalukaIndia',
maxResolution : 1024,
version : '1.1.1',format_options:'dpi:110',
name : 'Taluka',
// CQL_FILTER : ta
visible:false
}
}),
}),
showLegend: true,
new ol.layer.Tile({
maxResolution : 1024,
source : new ol.source.TileWMS({
name : 'Taluka',
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
visible:true
crossOrigin: 'anonymous',
}),
params : {
layers : 'DistrictIndia',
new ol.layer.Tile({
//CQL_FILTER : di,
source : new ol.source.TileWMS({
version : '1.1.1',format_options:'dpi:110'
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
//version : '1.1.1',CQL_FILTER : 'dtcode11 IN (001,003,004)' ,format_options:'dpi:110'
crossOrigin: 'anonymous',
}
params : {
}),
layers : 'DistrictIndia',
showLegend: true,
// CQL_FILTER : di,
//maxResolution : 2048,
version : '1.1.1',format_options:'dpi:110'
name : 'District',
//version : '1.1.1',CQL_FILTER : 'dtcode11 IN (001,003,004)' ,format_options:'dpi:110'
visible:false
}
}),
})
showLegend: true,
,
maxResolution : 2048,
name : 'District',
visible:true
new ol.layer.Tile({
})
source : new ol.source.TileWMS({
,
url : wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
layers : 'StateIndia',
new ol.layer.Tile({
//CQL_FILTER : 'STCODE11 = 03',
source : new ol.source.TileWMS({
version : '1.1.1',format_options:'dpi:110',
url : wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
//CQL_FILTER : di
crossOrigin: 'anonymous',
//version : '1.1.1',CQL_FILTER : 'STCODE11 IN (01,02,004)' ,format_options:'dpi:110'
params : {
}
layers : 'StateIndia',
}),
// CQL_FILTER : st,
styles:'IndiaState',
version : '1.1.1',format_options:'dpi:110',
showLegend: true,
//CQL_FILTER : di
visible:true,
//version : '1.1.1',CQL_FILTER : 'STCODE11 IN (01,02,004)' ,format_options:'dpi:110'
name : 'State'
}
}),
}),
],
styles:'IndiaState',
name : 'India Boundaries'
showLegend: true,
});
visible:true,
name : 'State'
}),
],
name : 'India Boundaries'
});
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'
var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'
var transportLayerGroup = new ol.layer.Group({
var transportLayerGroup = new ol.layer.Group({
layers : [
layers : [
new ol.layer.Tile({
new ol.layer.Tile({
source : new ol.source.TileWMS({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
crossOrigin: 'anonymous',
params : {
params : {
'LAYERS' : 'india_airport_location_basemap',
'LAYERS' : 'india_airport_location_basemap',
format_options:'dpi:180',
format_options:'dpi:180',
version : '1.1.1',
version : '1.1.1',
STYLES:''
STYLES:''
}
}
}),
}),
showLegend: false,
showLegend: false,
//maxResolution : 256,
//maxResolution : 256,
name : 'Airport',
name : 'Airport',
visible:false
visible:false
}),
}),
new ol.layer.Tile({
new ol.layer.Tile({
source : new ol.source.TileWMS({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
crossOrigin: 'anonymous',
params : {
params : {
'LAYERS' : 'india_nhai',
'LAYERS' : 'india_nhai',
format_options:'dpi:180',
format_options:'dpi:180',
version : '1.1.1',
version : '1.1.1',
STYLES:''
STYLES:''
}
}
}),
}),
showLegend: true,
showLegend: true,
//maxResolution : 256,
//maxResolution : 256,
name : 'National Highway',
name : 'National Highway',
visible:false
visible:false
}),
}),
// new ol.layer.Tile({
// new ol.layer.Tile({
// source : new ol.source.TileWMS({
// source : new ol.source.TileWMS({
// url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
// url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
// crossOrigin: 'anonymous',
// crossOrigin: 'anonymous',
// params : {
// params : {
// 'LAYERS' : 'plot_boundary_new',
// 'LAYERS' : 'plot_boundary_new',
// format_options:'dpi:180',
// format_options:'dpi:180',
// version : '1.1.1',
// version : '1.1.1',
// STYLES:''
// STYLES:''
// }
// }
// }),
// }),
// showLegend: true,
// showLegend: true,
// //maxResolution : 256,
// //maxResolution : 256,
// name : 'Dehgam',
// name : 'Dehgam',
// visible:true
// visible:true
// })
// })
],
],
name : 'Transport'
name : 'Transport'
});
});
var map;
var clickEvent;
var vectorLayer6=ol.layer.vector;
var features= ol.Feature[10];
var geojson = new ol.format.GeoJSON;
var hoverLayer =ol.layer.Vector;
var enc;
var highlightFeatures=true;
var cursorStyle= 'pointer';
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
]
function addGeom(m)
{
map=m;
//addHoverLayer();
}
$("#geom").bind("click", function() {
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
activateGeomLayer(layer);
});
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
// hoverLayer.setStyle(hoverStyle);
map.addLayer(hoverLayer);
}
function customStyleFunction ()
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
}
function activateGeomLayer(layer)
{
console.log(layer);
//hoverLayer.getSource().clear();
layer.getSource().clear();
map.removeLayer(layer);
deactivateClick();
setCursor(cursorStyle);
//addHoverLayer();
clickEvent = (evt) =>
{
if(vectorLayer6!=null)
{
var features = vectorLayer6.getSource().getFeatures();
features.forEach((feature) => {
vectorLayer6.getSource().removeFeature(feature);
});
}
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,);
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof layer.Image || layer instanceof layer.Vector || layer instanceof layer.Heatmap || layer instanceof layer.Vector || layer instanceof layer.Layer || layer instanceof layer.VectorTile)
{
const url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
{'INFO_FORMAT' : 'application/json'}
);
if (url) {
$.get(url, function(response) {
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
console.log(a);
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
let villageName=a.VIL_NAME11;
selectedstate(stateCode);
//selecteddistrict(districtCode);
//selectedtaluka(talukaCode);
//selectedvillage(villageCode);
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
console.log(dataObjectString);
enc = Base64.encode(dataObjectString);
console.log(enc);
evt.preventDefault();
jQuery.noConflict();
$('#myModal').modal('show');
//$('#myModal').modal(options)
var role= $("#roleType").val();
if(role=="ROLE_user"){
// window.open('addgeomVisitor?id='+enc,"_blank");
}
if(role=="ROLE_admin"){
// //var selectForm;
// alert("fknlnf");
// window.open('selectForm');
}
});
}
}
else
{
alert(
'Currently only WMS query is supported. Please select another layer!'
);
}
}
map.on('singleclick', clickEvent);
}
function addHoverLayer()
{
hoverLayer.setStyle(hoverStyle);
map.addLayer(hoverLayer);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
// function deactivateClick() {
// setCursor('');
// if (clickEvent) {
// map.un('singleclick', sclickEvent);
// }
// }
function _getFeatureInfoUrl( source,coordinate,resolution, srs)
{
//const styles = source.getParams().STYLES;
const url=source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
FEATURE_COUNT:10,
//LAYERS: styles
});
return url;
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function selecrole(role)
{
console.log(enc);
if(role=='admin')
{
$('#myModal').modal('hide');
window.open('addgeomAdmin?id='+enc,"_blank");
}
if(role=='visitor')
{
$('#myModal').modal('hide');
window.open('addgeomuser?id='+enc,"_blank");
}
if(role=='monument')
{
$('#myModal').modal('hide');
window.open('addgeomMonument?id='+enc,"_blank");
}
}
function selectedstate()
{
}
var map;
var clickEvent;
var range = document.getElementById('range');
var value=document.getElementById('bufferrange').defaultValue;
var selecterange=value;
function buffer(m)
{
map=m;
range.innerHTML=value;
}
$("#buffer").bind("click", function() {
activatebuffer();
});
function activatebuffer()
{
deactivateClick();
setCursor(cursorStyle);
clickEvent = (evt) => {
// map.removeLayer(vectorLayer_buffer);
// vectorSource.getSource().clear();
var features=[];
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
var lat= lonlat[0];
var lon=lonlat[1];
var coordMin = ol.proj.fromLonLat([lon,lat], 'EPSG:3857');
var coordMax = ol.proj.fromLonLat([lon,lat], 'EPSG:3857');
var extent=[coordMin[0],coordMin[1],coordMax[0],coordMax[1]];
extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent);
map.getView().setCenter(ol.proj.transform([lat, lon], 'EPSG:4326', 'EPSG:3857'));
map.getView().setZoom(12);
getvillagebuffer(lat,lon,selecterange);
console.log(value)
var point = new ol.geom.Circle(ol.proj.transform([lat,lon],'EPSG:4326', 'EPSG:3857'),selecterange*1210);
console.log(point.getCenter());
console.log(point);
var pointFeature = new ol.Feature(point);
features.push(pointFeature);
var vectorSource = new ol.source.Vector({
projection: 'EPSG:4326',
features: features
});
var vectorLayer_buffer = new ol.layer.Vector({
source : vectorSource,
style : customStyleFunction()
});
console.log(vectorLayer_buffer)
map.addLayer(vectorLayer_buffer);
};
map.on('singleclick', clickEvent);
}
function customStyleFunction()
{
return [ new ol.style.Style({
fill : new ol.style.Fill({
opacity : 0.6,
color : 'rgba(255,255,204,0.3)'
}),
stroke : new ol.style.Stroke({
width : 2,
color : 'red',
radius : 1
}),
image : new ol.style.Circle({
fill : new ol.style.Fill({
color : 'rgba(51, 204, 255,0.3)'
}),
stroke : new ol.style.Stroke({
width : 1,
color : 'blue'
}),
radius : 3
}),
})];
}
var bufferrange=$('#bufferrange');
bufferrange.on('change', function () {
range.innerHTML = '';
if(this.value!=="")
{
range.innerHTML = this.value ;
selecterange=this.value;
}
});
function getvillagebuffer(lat,lon,value)
{
var features = [];
var j=getBuffer(lat,lon,value);
if(j!="") {
var data={"lat":lat,"lon":lon,"range":value};
var dataObjectString = JSON.stringify(data);
console.log(dataObjectString);
var enc = Base64.encode(dataObjectString);
window.open('bufferReport?data='+enc,"_blank");
console.log(j);
var geomP, feature;
for (var i = 0; i < j.length; i++) {
latitude=j[i].lon;
longitude=j[i].lat;
geomP = new ol.geom.Point(ol.proj.transform([latitude, longitude ], 'EPSG:4326', 'EPSG:3857'));
feature = new ol.Feature(geomP);
features.push(feature);
}
var point_geom = new ol.geom.Point(
[20, 20]
);
point_feature.setGeometry(point_geom);
var vector_layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [point_feature]
})
})
map.addLayer(vector_layer);
var vectorSource = new ol.source.Vector({
features : features
});
var vectorLayer = new ol.layer.Vector({
source : vectorSource,
style : customStyleFunction()
});
console.log(vectorLayer);
map.addLayer(vectorLayer);
};
}
$(document).ready(function() {
var url_string = window.location;
var url = new URL(url_string);
var data = url.searchParams.get("data");
var d=JSON.parse(Base64.decode(data));
console.log(d);
let lat=d.lat;
let lon=d.lon;
let range=d.range;
var j=getBuffer(lat,lon,range);
if(j) {
loadtable(j);
};
});
function loadtable(data)
{
if ( $.fn.DataTable.isDataTable( '#BufferReportList' ) ) {
$("#BufferReportList").dataTable().fnDestroy();
$('#BufferReportList').empty();
}
var gid=data.map(x=>x.gid);
console.log(gid);
var table=$('#BufferReportList').DataTable({
pageLength : 10,
dom: 'Bfrtip',
'processing': true,
"data":data ,
columns : [{
title : 'SR_NO',
data : 'gid'
}, {
title : 'First Name',
data : 'firstname'
}, {
title : 'Last Name',
data : 'lastname'
}, {
title : 'STATE',
data : 'statename'
}, {
title : 'DISTRICT',
data : 'distictname',
}, {
title : 'TALUKA',
data : 'talukaname',
},{
title : 'VILLAGE',
data : 'villagename',
}
,{title : 'Action',
data: null,
className: "center",
defaultContent: '<button class="btn btn-danger btn-sm " id="delete">Delete </button>'
},{title : 'Action',
data: null,
className: "center",
defaultContent: '<button class="btn btn-primary btn-sm" id="update">Update </button>'
}
]
});
$('#BufferReportList tbody').on('click', 'button#update', function ()
{
var data = table.row( $(this).closest('tr') ).data();
id=data['gid'];
$("#editId").val(id);
$("#editASIMonumentFrom").submit();
} )
$('#BufferReportList tbody').on('click', 'button#delete', function ()
{
var data = table.row( $(this).closest('tr') ).data();
id=data['gid'];
var data=DeleteGeomreportbyId(id);
loadtable(data);
location.reload();
} )
}
var map;
function clear(m)
{
map=m;
}
function deactivateClick()
{
setCurser('');
if (clickEvent) {
map.un('singleclick', clickEvent);
}
}
function setCurser(cursorType){
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
var Base64 = {
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
encode: function(input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = Base64._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
}
return output;
},
decode: function(input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = this._keyStr.indexOf(input.charAt(i++));
enc2 = this._keyStr.indexOf(input.charAt(i++));
enc3 = this._keyStr.indexOf(input.charAt(i++));
enc4 = this._keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = Base64._utf8_decode(output);
return output;
},
_utf8_encode: function(string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
_utf8_decode: function(utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while (i < utftext.length) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
}
else if ((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i + 1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}
else {
c2 = utftext.charCodeAt(i + 1);
c3 = utftext.charCodeAt(i + 2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
var map;
function clear(m)
{
map=m;
}
function deactivateClick()
{
setCurser('');
if (clickEvent) {
map.un('singleclick', clickEvent);
}
}
function setCurser(cursorType){
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
var map;
function commonfunctions(m)
{
map=m;
}
function setCursor(cursorType)
{
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
var map;
function controllers(maps)
{
map=maps;
}
function zoomIn()
{
map.getView().animate({
zoom: map.getView().getZoom() + 1,
duration: 500
});
}
function zoomOut()
{
map.getView().animate({
zoom: map.getView().getZoom() - 1,
duration: 500
});
}
function defaultmap()
{
//for Gujarat
// var extent = [ 66.9973, 19.4081, 75.5887, 24.9398];
//for India
var extent = [68.17665, 7.96553, 97.40256, 35.49401];
extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent);
map.getView().animate({
zoom: 4.45,
duration: 600
});
}
function fullscreen()
{
var elem = document.getElementById('target-map');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
function geolocation()
{
var geolocation = new ol.Geolocation({
tracking: true
});
geolocation.on('change:position', function() {
var coordinate = geolocation.getPosition();
map.getView().setCenter(coordinate);
});
}
var map;
function controllers(maps)
{
map=maps;
}
function zoomIn()
{
map.getView().animate({
zoom: map.getView().getZoom() + 1,
duration: 500
});
}
function zoomOut()
{
map.getView().animate({
zoom: map.getView().getZoom() - 1,
duration: 500
});
}
function defaultmap()
{
//for Gujarat
// var extent = [ 66.9973, 19.4081, 75.5887, 24.9398];
//for India
var extent = [68.17665, 7.96553, 97.40256, 35.49401];
extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent);
map.getView().animate({
zoom: 4.7,
duration: 600
});
}
function fullscreen()
{
var elem = document.getElementById('target-map');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
function geolocation()
{
// if (navigator.geolocation) {
// navigator.geolocation.getCurrentPosition(showPosition);
// } else {
// alert( "Geolocation is not supported by this browser.");
// }
var geolocation = new ol.Geolocation({
tracking: true
});
geolocation.on('change:position', function() {
var coordinate = geolocation.getPosition();
let lat=coordinate[1];
let lon=coordinate[0];
if(lat!=null && lon!=null)
{
var coordMin = ol.proj.fromLonLat([lon,lat], 'EPSG:3857');
var coordMax = ol.proj.fromLonLat([lon,lat], 'EPSG:3857');
var extent=[coordMin[0],coordMin[1],coordMax[0],coordMax[1]];
map.getView().fit(extent,map.getSize());
}
else
{
alert("Position not found");
}
// map.getView().setCenter(coordinate);
});
}
function showPosition(position) {
alert(position)
var l= "Latitude: " + position.coords.latitude ;
var lon="<br>Longitude: " + position.coords.longitude;
}
function getMousePosition(map)
{
var latnong=fromLotlong(map.getView().getCenter());
var pointerMoveListener = map.on('pointermove', (evt) => {
if (evt.dragging)
{
return;
}
else
{
latnong = fromLotlong(evt.coordinate);
document.getElementById("latlon").innerHTML=latnong;
}
});
document.getElementById("latlon").innerHTML=latnong;
function fromLotlong(coords)
{
let lonlat = ol.proj.transform(coords, 'EPSG:3857', 'EPSG:4326');
let formattedLatlong= [];
return formattedLatlong=lonlat.map(x=>x.toFixed(4));
}
}
function scaleline(map)
{
let target = map.getTarget();
console.log(target);
const scaleLineControl = new ol.control.ScaleLine({
target: document.getElementById(scale),
});
map.addControl(scaleLineControl);
}
function exportpdf(map)
{
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var resolution = document.getElementById('resolution').value;
var dim = dims[format];
var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
map.once('rendercomplete', function() {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = width;
mapCanvas.height = height;
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
var transform = canvas.style.transform;
// Get the transform parameters from the style's transform matrix
var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
// Apply the transform to the export map context
CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
mapContext.drawImage(canvas, 0, 0);
}
});
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
var scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
}, false);
}function exportpdf(map)
{
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var resolution = document.getElementById('resolution').value;
var dim = dims[format];
var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
map.once('rendercomplete', function() {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = width;
mapCanvas.height = height;
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
var transform = canvas.style.transform;
// Get the transform parameters from the style's transform matrix
var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
// Apply the transform to the export map context
CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
mapContext.drawImage(canvas, 0, 0);
}
});
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
var scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
}, false);
}
function exportpdf(map)
{
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var resolution = document.getElementById('resolution').value;
var dim = dims[format];
var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
map.once('rendercomplete', function() {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = width;
mapCanvas.height = height;
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
var transform = canvas.style.transform;
// Get the transform parameters from the style's transform matrix
var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
// Apply the transform to the export map context
CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
mapContext.drawImage(canvas, 0, 0);
}
});
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
var scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
}, false);
}function exportpdf(map)
{
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var resolution = document.getElementById('resolution').value;
var dim = dims[format];
var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
map.once('rendercomplete', function() {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = width;
mapCanvas.height = height;
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
var transform = canvas.style.transform;
// Get the transform parameters from the style's transform matrix
var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
// Apply the transform to the export map context
CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
mapContext.drawImage(canvas, 0, 0);
}
});
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
var scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
}, false);
}
var map;
var maxFeatures =10;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function findbylocation(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
activateClick(layer);
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
hoverLayer.getSource().clear();
deactivateClick();
clickEvent = (evt) => {
console.log(vectorLayer6);
// if(layer!=null)
/* {
features = layer.getSource().getFeatures();
features.forEach((feature) => {
layer.getSource().removeFeature(feature);
}); */
// }
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,);
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
const url = _getFeatureInfoUrl(
layer.getSource(),
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
);
}
/* if (url)
{
$.get(url, function(response)
{
response = JSON.parse(response);
var a= response.features[0].properties.vill_id
if (data.hasOwnProperty('features'))
{
// convert the GeoJSON response to Feature array
features = geojson.readFeatures(data);
features.forEach((feat) => {
const props = { ...feat.getProperties() };
console.log(props.dist_id);
});
}
});
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}*/
};
map.on('singleclick', clickEvent);
}
function deactivateClick() {
setCursor('');
if (clickEvent) {
map.un('singleclick', sclickEvent);
}
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function _getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
/* const url = source.getSource().getGetFeatureInfoUrl(
coordinate, resolution, 'EPSG:3857',
{'INFO_FORMAT': 'application/json'}); */
const url = source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
FEATURE_COUNT: maxFeatures,
STYLES: styles
});
/* const url = source.getGetFeatureInfoUrl(coordinate, resolution, 'EPSG:3857',
{'INFO_FORMAT': 'application/json'})*/
return url;
}
var map;
var maxFeatures =10;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function findbylocation(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
activateClick(layer);
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
hoverLayer.getSource().clear();
deactivateClick();
clickEvent = (evt) => {
console.log(vectorLayer6);
// if(layer!=null)
/* {
features = layer.getSource().getFeatures();
features.forEach((feature) => {
layer.getSource().removeFeature(feature);
}); */
// }
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,);
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
const url = _getFeatureInfoUrl(
layer.getSource(),
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
);
}
/* if (url)
{
$.get(url, function(response)
{
response = JSON.parse(response);
var a= response.features[0].properties.vill_id
if (data.hasOwnProperty('features'))
{
// convert the GeoJSON response to Feature array
features = geojson.readFeatures(data);
features.forEach((feat) => {
const props = { ...feat.getProperties() };
console.log(props.dist_id);
});
}
});
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}*/
};
map.on('singleclick', clickEvent);
}
function deactivateClick() {
setCursor('');
if (clickEvent) {
map.un('singleclick', sclickEvent);
}
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function _getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
/* const url = source.getSource().getGetFeatureInfoUrl(
coordinate, resolution, 'EPSG:3857',
{'INFO_FORMAT': 'application/json'}); */
const url = source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
FEATURE_COUNT: maxFeatures,
STYLES: styles
});
/* const url = source.getGetFeatureInfoUrl(coordinate, resolution, 'EPSG:3857',
{'INFO_FORMAT': 'application/json'})*/
return url;
}
var map;
function geocoder(m)
{
map=m;
var geocoder = new Geocoder('nominatim', {
provider : 'osm',
key : ' AIzaSyClQ0GOW55zhw4PvFh73FyGLHdSd4bJfpM',
lang : 'en',
//targetType: 'text-input',
placeholder : 'Search location',
autoComplete: true,
limit : 5,
keepOpen : false
});
map.addControl(geocoder);
//Listen when an address is chosen
geocoder.on('addresschosen', function(evt){
var feature = evt.feature,
coord = evt.coordinate,
address = evt.address;
geocoder.getSource().clear();
geocoder.getSource().addFeature(feature);
// some popup solution
content.innerHTML = '<p>'+ address.formatted +'</p>';
overlay.setPosition(coord);
latlong(evt.coordinate);
});
}
function latlong(coord)
{
console.log()
var lonlat = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
alert("lat:"+latitude+" "+"Lon:"+logitude);
console.log(latitude);
console.log(logitude);
}
var map;
function geocoder(m)
{
map=m;
var geocoder = new Geocoder('nominatim', {
provider : 'osm',
key : ' AIzaSyClQ0GOW55zhw4PvFh73FyGLHdSd4bJfpM',
lang : 'en',
//targetType: 'text-input',
placeholder : 'Search location',
autoComplete: true,
limit : 5,
keepOpen : false
});
map.addControl(geocoder);
//Listen when an address is chosen
geocoder.on('addresschosen', function(evt){
var feature = evt.feature,
coord = evt.coordinate,
address = evt.address;
geocoder.getSource().clear();
geocoder.getSource().addFeature(feature);
// some popup solution
content.innerHTML = '<p>'+ address.formatted +'</p>';
overlay.setPosition(coord);
});
}
var map;
var clickEvent;
var vectorLayer6=ol.layer.Vector;
var features= ol.Feature[10];
var geojson = new ol.format.GeoJSON;
var hoverLayer =ol.layer.Vector;
var vectorSource;
var zoomOnRowClick;
var maxFeatures;
var highlightFeatures;
var cursorStyle;
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
var pointStyle =[
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
}),
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'red'
})
})
})
];
function addGeom(m)
{
map=m;
maxFeatures = 1;
cursorStyle = 'crosshair';
zoomOnRowClick = true;
highlightFeatures = true;
addHoverLayer();
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
activateGeomLayer(layer);
}
$("#geom").bind("click", function() {
});
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
pointLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
if(pointStyle)
{
pointLayer.setStyle(pointStyle);
}
if (hoverStyle) {
hoverLayer.setStyle(hoverStyle);
}
map.addLayer(pointLayer);
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function customStyleFunction ()
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
}
function activateGeomLayer(layer)
{
console.log(layer);
hoverLayer.getSource().clear();
pointLayer.getSource().clear();
deactivateClick();
setCursor(cursorStyle);
clickEvent = (evt) =>
{
// onFeatureSelected(evt);
// if(vectorLayer6!=null)
// {
// var f = vectorLayer6.getSource().getFeatures();
// f.forEach((fe) => {
// vectorLayer6.getSource().removeFeature(fe);
// });
//}
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,);
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof layer.Image || layer instanceof layer.Vector || layer instanceof layer.Heatmap || layer instanceof layer.Vector || layer instanceof layer.Layer || layer instanceof layer.VectorTile)
{
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
hoverLayer.getSource().clear();
pointLayer.getSource().clear();
features = geojson.readFeatures(response);
features.forEach((feat) => {
console.log(feat)
const extent=feat.getGeometry().getExtent();
hoverLayer.getSource().addFeature(feat);
map.getView().fit(extent,{ duration: 600});
const props = { ...feat.getProperties() };
console.log(props)
});
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
console.log(a);
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
let villageName=a.VIL_NAME11;
document.getElementById("lat").value =lat;
document.getElementById("lon").value =lon;
loadstate(stateCode);
loaddistrict(stateCode,districtCode);
loadtaluka(districtCode,talukaCode);
loadvillage(talukaCode,villageCode);
})
}
}
else
{
alert(
'Currently only WMS query is supported. Please select another layer!'
);
}
}
map.on('singleclick', clickEvent);
}
function onFeatureSelected(evt= ol.Feature) {
console.log(evt);
hoverLayer.getSource().clear();
if (evt !== null)
{
// const projCode: string = this.selected.getLayer().getSource().getProjection().getCode();
const viewProjCode = map.getView().getProjection().getCode();
const projCode='EPSG:3857';
// const projCode='EPSG:4326';
const feat = evt.clone();
feat.setGeometry(feat.getGeometry().transform(projCode, viewProjCode));
hoverLayer.getSource().addFeature(feat);
map.getView().fit(feat.getGeometry().getExtent(), {
duration: 500
});
}
}
function removeHoverLayer() {
map.removeLayer(hoverLayer);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
var map;
var clickEvent;
var vectorLayer6=ol.layer.Vector;
var features= ol.Feature[10];
var geojson = new ol.format.GeoJSON;
var hoverLayer =ol.layer.Vector;
var vectorSource;
var zoomOnRowClick;
var maxFeatures;
var highlightFeatures;
var cursorStyle;
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
var pointStyle =[
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
}),
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'red'
})
})
})
];
function addGeom(m)
{
map=m;
maxFeatures = 1;
cursorStyle = 'crosshair';
zoomOnRowClick = true;
highlightFeatures = true;
addHoverLayer();
}
$("#geom").bind("click", function() {
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
activateGeomLayer(layer);
});
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
pointLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
if(pointStyle)
{
pointLayer.setStyle(pointStyle);
}
if (hoverStyle) {
hoverLayer.setStyle(hoverStyle);
}
map.addLayer(pointLayer);
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function customStyleFunction ()
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
}
function activateGeomLayer(layer)
{
console.log(layer);
hoverLayer.getSource().clear();
pointLayer.getSource().clear();
deactivateClick();
setCursor(cursorStyle);
clickEvent = (evt) =>
{
// onFeatureSelected(evt);
// if(vectorLayer6!=null)
// {
// var f = vectorLayer6.getSource().getFeatures();
// f.forEach((fe) => {
// vectorLayer6.getSource().removeFeature(fe);
// });
//}
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,);
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof layer.Image || layer instanceof layer.Vector || layer instanceof layer.Heatmap || layer instanceof layer.Vector || layer instanceof layer.Layer || layer instanceof layer.VectorTile)
{
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
hoverLayer.getSource().clear();
pointLayer.getSource().clear();
features = geojson.readFeatures(response);
demo.showSwal('success-message');
features.forEach((feat) => {
console.log(feat)
const extent=feat.getGeometry().getExtent();
hoverLayer.getSource().addFeature(feat);
map.getView().fit(extent,{ duration: 600});
const props = { ...feat.getProperties() };
console.log(props)
});
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
console.log(a);
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
let villageName=a.VIL_NAME11;
//selectedstate(stateCode);
//selecteddistrict(districtCode);
//selectedtaluka(talukaCode);
//selectedvillage(villageCode);
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
//console.log(b);
var enc = Base64.encode(dataObjectString);
console.log(enc);
window.open('addgeom?id='+enc,"_blank");
})
}
}
else
{
alert(
'Currently only WMS query is supported. Please select another layer!'
);
}
}
map.on('singleclick', clickEvent);
}
function onFeatureSelected(evt= ol.Feature) {
console.log(evt);
hoverLayer.getSource().clear();
if (evt !== null)
{
// const projCode: string = this.selected.getLayer().getSource().getProjection().getCode();
const viewProjCode = map.getView().getProjection().getCode();
const projCode='EPSG:3857';
// const projCode='EPSG:4326';
const feat = evt.clone();
feat.setGeometry(feat.getGeometry().transform(projCode, viewProjCode));
hoverLayer.getSource().addFeature(feat);
map.getView().fit(feat.getGeometry().getExtent(), {
duration: 500
});
}
}
function removeHoverLayer() {
map.removeLayer(hoverLayer);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
var map;
var layers=new ol.layer.Vector;
var feature=new ol.Feature;
var geometryType='Point';
var precision = 2;
var cursorStyle = 'pointer';
var fillColor = [255, 255, 255, 0.5];
var strokeColor = [72, 72, 72, 1];
var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1];
var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7];
var font = 'normal 14px Arial';
var draw;
var displaylength = document.getElementById('distance');
var displayarea = document.getElementById('area');
var sourceDraw = new ol.source.Vector();
var vectorDraw = new ol.layer.Vector({
source: sourceDraw,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
}),
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'red'
})
})
})
});
function geom(m)
{
map=m
units= map.getView().getProjection().getUnits();
layers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: (feature ) => {
return getStyle(feature);
}
});
// activateDraw();
}
function selectedType(gtype)
{
displaylength.innerHTML = '';
displayarea.innerHTML = '';
geometryType=gtype;
activateDraw();
}
function activateDraw()
{
deactivateDraw();
map.addLayer(layers);
var wkt = new ol.format.WKT();
//setCursor(cursorStyle);
draw= new ol.interaction.Draw({
source: vectorDraw.getSource(),
type: geometryType,
});
draw.on('drawstart', (e) => {
map.removeLayer(vectorDraw);
sourceDraw.clear();//
layers.getSource().clear();
});
draw.on('drawend', (e) => {
let feature = e.feature;
let featureClone = feature.clone();
featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326');
modifiedWKT = wkt.writeFeature(featureClone);
map.addLayer(vectorDraw);
let area=getLengthOrArea(feature);
let cords=Addpolygongeometry(feature);
addGeom(cords,modifiedWKT,area);
const feat = new ol.Feature({
geometry: e.target
}
);
getLengthOrArea(feat);
});
draw.setActive(true);
map.addInteraction(draw);
}
function deactivateDraw() {
setCursor('');
value = null;
try {
map.removeInteraction(draw);
layers.getSource().clear();
map.removeLayer(layers);
sourceDraw.clear();
} catch (error) {}
}
function getStyle(feature)
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color:fillColor
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: strokeColor,
width: 2,
lineDash: [5, 5]
}),
text: new ol.style.Text({
textAlign: 'center',
textBaseline: 'middle',
text: getLengthOrArea(feature),
font: font,
fill: new ol.style.Fill({
color: textColor
}),
offsetX: 0,
offsetY: 0,
rotation: 0,
stroke: new ol.style.Stroke({
color: textOutlineColor,
width: 3
})
})
})
];
}
function Addpolygongeometry(feature)
{
let cordinate = '';
switch (geometryType) {
case 'LineString':
try {
cordinate = feature.getGeometry().getFirstCoordinate();
} catch (error) {}
break;
case 'Polygon':
try {
cordinate =feature.getGeometry().getFirstCoordinate();
} catch (error) {}
break;
case 'Square':
try {
cordinate =feature.getGeometry().getFirstCoordinate();
} catch (error) {}
break;
default:
try {
cordinate = feature.getGeometry().getCoordinates();
} catch (error) {}
break;
}
// if (cordinate !== '') {
// cordinate += cordinate;
// }
return cordinate;
}
function addGeom(cords,wkt,area)
{
console.log(cords);
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
var lonlat = ol.proj.transform(cords, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
cords,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
features = geojson.readFeatures(response);
features.forEach((feat) => {
console.log(feat)
// const extent=feat.getGeometry().getExtent();
// hoverLayer.getSource().addFeature(feat);
//map.getView().fit(extent,{ duration: 600});
const props = { ...feat.getProperties() };
console.log(props)
});
//const extent=a.getGeometry().getExtent();
////alert(extent);
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
console.log(a);
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode,"area":area,"wkt":wkt};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
console.log(dataObjectString);
var enc = Base64.encode(dataObjectString);
window.open('addgeom?id='+enc,"_blank");
})
}
}
function getLengthOrArea(feature)
{
let value = '';
const geom= feature.getGeometry();
switch (geometryType)
{
case 'LineString':
try {
value = parseFloat(geom.getLength().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Polygon':
try {
value = parseFloat(geom.getArea().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
default:
try {
value = parseFloat(geom.getRadius().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
}
if (value !== '')
{
value = value;
displaylength.innerHTML = value + ' m';
displayarea.innerHTML = value + ' m ²';
}
return value;
}
$(document).ready(function() {
var url_string = window.location;
var url = new URL(url_string);
var data = url.searchParams.get("id");
var d=JSON.parse(Base64.decode(data));
console.log(d);
let stateCode=d.stateCode;
let districtCode=d.districtCode;
let talukaCode=d.talukaCode;
let villageCode=d.villageCode;
let lat=d.lat;
let lon=d.lon;
let wkt=d.wkt;
loadstate(stateCode);
loaddistrict(stateCode,districtCode);
loadtaluka(districtCode,talukaCode);
loadvillage(talukaCode,villageCode);
document.getElementById("lat").value =lat.toFixed(4);
document.getElementById("lon").value =lon.toFixed(4);
document.getElementById("wktGeom").value = wkt;
});
function loadstate(stateCode)
{
var stateId_Hidden=stateCode;
var j=getState();
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
if (stateId_Hidden == j[i].statecode)
{
options += '<option value="' + j[i].statecode + '" selected="selected">' + j[i].statename+ '</option>';
}
else {
options += '<option value="' + j[i].statecode + '">' + j[i].statename+ '</option>';
}
}
$("select#selectedstate").html(options);
}
function loaddistrict(stateCode,districtCode)
{
var distictId_Hidden=districtCode;
var j=getDistrict(stateCode);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (distictId_Hidden == j[i].districtcode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].districtcode + '" selected="selected">' + j[i].districtname+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].districtcode + '">' + j[i].districtname+ '</option>';
}
}
$("select#selecteddistrict").html(options);
}
function loadtaluka(districtCode,talukaCode)
{
var talukaId_Hidden=talukaCode;
var j=getTalukas(districtCode);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (talukaId_Hidden == j[i].talukacode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].talukacode + '" selected="selected">' + j[i].talukaname+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].talukacode + '">' + j[i].talukaname+ '</option>';
}
}
$("select#selectedtaluka").html(options);
}
function loadvillage(talukaCode,villageCode)
{
var villageId_Hidden=villageCode;
var j=getVillage(talukaCode);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (villageId_Hidden == j[i].villagecode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].villagecode + '" selected="selected">' + j[i].villagename+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].villagecode + '">' + j[i].villagename+ '</option>';
}
}
$("select#selectedvillage").html(options);
}
var map;
var layers=new ol.layer.Vector;
var feature=new ol.Feature;
var geojson = new ol.format.GeoJSON;
var geometryType = 'Point';
var precision = 2;
var cursorStyle = 'crosshair';
var fillColor = [255, 255, 255, 0.5];
var strokeColor = [72, 72, 72, 1];
var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1];
var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7];
var font = 'normal 14px Arial';
var maxFeatures=1;
var draw;
var displaylength = document.getElementById('distance');
var displayarea = document.getElementById('area');
var displayradious = document.getElementById('radious');
function selectedType(gtype)
{
displaylength.innerHTML = '';
displayarea.innerHTML = '';
displayradious.innerHTML = '';
geometryType=gtype;
activateDraw(geometryType);
}
function activateDraw(geometryType)
{
hoverLayer.getSource().clear();
// vectorDraw.getSource().clear();
var wkt = new ol.format.WKT();
//deactivateDraw();
map.addLayer(layers);
setCursor(cursorStyle);
var sourceDraw = new ol.source.Vector();
var vectorDraw = new ol.layer.Vector({
source: sourceDraw,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
}),
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'red'
})
})
})
});
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
draw= new ol.interaction.Draw({
source: vectorDraw.getSource(),
type: geometryType,
// style: (feature) => {
// return getStyle(feature);
// }
});
map.addInteraction(draw);
draw.on('drawstart', (e) => {
layers.getSource().clear();
});
draw.on('drawend', (e) => {
let feature = e.feature;
let featureClone = feature.clone();
featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326');
modifiedWKT = wkt.writeFeature(featureClone);
map.addLayer(vectorDraw);
let coords= feature.getGeometry().getCoordinates();
let firstcoords= feature.getGeometry().getFirstCoordinate();
let area=getLengthOrArea(feature);
//console.log(wkt);
alctivateLayer(modifiedWKT,area,firstcoords)
const feat = new ol.Feature({
geometry: e.target
}
);
map.removeInteraction(draw);
});
draw.setActive(true);
}
function alctivateLayer(wkt,area,firstcoords)
{
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
var lonlat = ol.proj.transform(firstcoords, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
firstcoords,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
features = geojson.readFeatures(response);
features.forEach((feat) => {
console.log(feat)
const extent=feat.getGeometry().getExtent();
hoverLayer.getSource().addFeature(feat);
map.getView().fit(extent,{ duration: 600});
const props = { ...feat.getProperties() };
console.log(props)
});
//const extent=a.getGeometry().getExtent();
////alert(extent);
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode,"area":area,"wkt":wkt};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
console.log(dataObjectString);
var enc = Base64.encode(dataObjectString);
window.open('monument?id='+enc,"_blank");
})
}
}
function deactivateDraw() {
setCursor('');
value = null;
try {
map.removeInteraction(draw);
layers.getSource().clear();
map.removeLayer(layers);
} catch (error) {}
}
function measure(m)
{
map=m
// Read user-defined parameters
units= map.getView().getProjection().getUnits();
layers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: (feature ) => {
return getStyle(feature);
}
});
addHoverLayer();
// activateDraw(geometryType)
}
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
if (hoverStyle) {
hoverLayer.setStyle(hoverStyle);
}
map.addLayer(pointLayer);
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function getStyle(feature)
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color:fillColor
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: strokeColor,
width: 2,
lineDash: [5, 5]
}),
text: new ol.style.Text({
textAlign: 'center',
textBaseline: 'middle',
text: getLengthOrArea(feature),
font: font,
fill: new ol.style.Fill({
color: textColor
}),
offsetX: 0,
offsetY: 0,
rotation: 0,
stroke: new ol.style.Stroke({
color: textOutlineColor,
width: 3
})
})
})
];
}
function setCursor(cursorType)
{
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getLengthOrArea(feature)
{
let value = '';
const geom= feature.getGeometry();
switch (geometryType)
{
case 'LineString':
try {
value = parseFloat(geom.getLength().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Polygon':
try {
value = parseFloat(geom.getArea().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Circle':
try {
value = parseFloat(geom.getRadius().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
default:
break;
}
if (value !== '')
{
value = value;
displaylength.innerHTML = value + ' m';
displayarea.innerHTML = value + ' m ²';
displayradious.innerHTML = value+ ' m';
}
return value;
}
var map;
var layers=new ol.layer.Vector;
var feature=new ol.Feature;
var geojson = new ol.format.GeoJSON;
var geometryType='Point';
var precision = 2;
var cursorStyle = 'crosshair';
var fillColor = [255, 255, 255, 0.5];
var strokeColor = [72, 72, 72, 1];
var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1];
var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7];
var font = 'normal 14px Arial';
var maxFeatures=1;
var draw;
var displaylength = document.getElementById('distance');
var displayarea = document.getElementById('area');
var displayradious = document.getElementById('radious');
function selectedType(gtype)
{
displaylength.innerHTML = '';
displayarea.innerHTML = '';
displayradious.innerHTML = '';
geometryType=gtype;
}
function activateDraw()
{
var wkt = new ol.format.WKT();
deactivateDraw();
map.addLayer(layers);
setCursor(cursorStyle);
draw= new ol.interaction.Draw({
source: layers.getSource(),
type: geometryType,
style: (feature) => {
return getStyle(feature);
}
});
draw.on('drawstart', (e) => {
layers.getSource().clear();
});
map.addInteraction(draw);
draw.on('drawend', (e) => {
let feature = e.feature;
let featureClone = feature.clone();
featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326');
modifiedWKT = wkt.writeFeature(featureClone);
let coords= feature.getGeometry().getCoordinates();
let firstcoords= feature.getGeometry().getFirstCoordinate();
let area=getLengthOrArea(feature);
//console.log(wkt);
alctivateLayer(modifiedWKT,area,firstcoords)
const feat = new ol.Feature({
geometry: e.target
}
);
map.removeInteraction(draw);
});
draw.setActive(true);
}
function alctivateLayer(wkt,area,firstcoords)
{
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
var lonlat = ol.proj.transform(firstcoords, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
firstcoords,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode,"area":area,"wkt":wkt};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
console.log(dataObjectString);
var enc = Base64.encode(dataObjectString);
window.open('monument?id='+enc,"_blank");
})
}
}
function deactivateDraw() {
setCursor('');
value = null;
try {
map.removeInteraction(draw);
layers.getSource().clear();
map.removeLayer(layers);
} catch (error) {}
}
function measure(m)
{
map=m
// Read user-defined parameters
units= map.getView().getProjection().getUnits();
layers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: (feature ) => {
return getStyle(feature);
}
});
activateDraw();
}
function getStyle(feature)
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color:fillColor
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: strokeColor,
width: 2,
lineDash: [5, 5]
}),
text: new ol.style.Text({
textAlign: 'center',
textBaseline: 'middle',
text: getLengthOrArea(feature),
font: font,
fill: new ol.style.Fill({
color: textColor
}),
offsetX: 0,
offsetY: 0,
rotation: 0,
stroke: new ol.style.Stroke({
color: textOutlineColor,
width: 3
})
})
})
];
}
function setCursor(cursorType)
{
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getLengthOrArea(feature)
{
let value = '';
const geom= feature.getGeometry();
switch (geometryType)
{
case 'LineString':
try {
value = parseFloat(geom.getLength().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Polygon':
try {
value = parseFloat(geom.getArea().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Circle':
try {
value = parseFloat(geom.getRadius().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
default:
break;
}
if (value !== '')
{
value = value;
displaylength.innerHTML = value + ' m';
displayarea.innerHTML = value + ' m ²';
displayradious.innerHTML = value+ ' m';
}
return value;
}
$(document).ready(function() {
var url_string = window.location;
var url = new URL(url_string);
var data = url.searchParams.get("id");
var d=JSON.parse(Base64.decode(data));
console.log(d);
let stateCode=d.stateCode;
let districtCode=d.districtCode;
let talukaCode=d.talukaCode;
let villageCode=d.villageCode;
let lat=d.lat;
let lon=d.lon;
alert(lat + "lat" + lon + "lon");
loadstate(stateCode);
loaddistrict(stateCode,districtCode);
loadtaluka(districtCode,talukaCode);
loadvillage(talukaCode,villageCode);
document.getElementById("lat").value =lat.toFixed(4);
document.getElementById("lon").value =lon.toFixed(4);
document.getElementById("wktGeom").value = "POINT("+lat.toFixed(4) + " " +lon.toFixed(4)+")";
console.log(lon);
});
function loadstate(stateCode)
{
var stateId_Hidden=stateCode;
var j=getState();
console.log(j);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
if (stateId_Hidden == j[i].statecode)
{
options += '<option value="' + j[i].statecode + '" selected="selected">' + j[i].statename+ '</option>';
}
else {
options += '<option value="' + j[i].statecode + '">' + j[i].statename+ '</option>';
}
}
$("select#selectedstate").html(options);
}
function loaddistrict(stateCode,districtCode)
{
var distictId_Hidden=districtCode;
var j=getDistrict(stateCode);
console.log(j);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (distictId_Hidden == j[i].districtcode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].districtcode + '" selected="selected">' + j[i].districtname+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].districtcode + '">' + j[i].districtname+ '</option>';
}
}
$("select#selecteddistrict").html(options);
}
function loadtaluka(districtCode,talukaCode)
{
var talukaId_Hidden=talukaCode;
var j=getTalukas(districtCode);
console.log(j);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (talukaId_Hidden == j[i].talukacode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].talukacode + '" selected="selected">' + j[i].talukaname+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].talukacode + '">' + j[i].talukaname+ '</option>';
}
}
$("select#selectedtaluka").html(options);
}
function loadvillage(talukaCode,villageCode)
{
var villageId_Hidden=villageCode;
var j=getVillage(talukaCode);
console.log(j);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (villageId_Hidden == j[i].villagecode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].villagecode + '" selected="selected">' + j[i].villagename+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].villagecode + '">' + j[i].villagename+ '</option>';
}
}
$("select#selectedvillage").html(options);
}
// function myMap() {
// var directionsDisplay = new google.maps.DirectionsRenderer();
// var map;
// var mapProp= {
// center:new google.maps.LatLng(23.232683,72.641768),
// zoom:4.5,
// };
// map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
// directionsDisplay.setMap(map);
// google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
// }
// function calcRoute()
// {
// var directionsService = new google.maps.DirectionsService();
// var directionsDisplay = new google.maps.DirectionsRenderer();
// var start = new google.maps.LatLng(23.1508, 72.3600);
// var end = new google.maps.LatLng(23.1642, 72.6549);
// var request = {
// origin: start,
// destination: end,
// travelMode: google.maps.TravelMode.DRIVING
// };
// directionsService.route(request, function(response, status) {
// if (status == google.maps.DirectionsStatus.OK) {
// directionsDisplay.setDirections(response);
// directionsDisplay.setMap(map);
// } else {
// alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
// }
// });
// }
function mapLocation() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 4.5 ,
center:new google.maps.LatLng(23.232683,72.641768),
};
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
directionsDisplay.setMap(map);
google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
}
function calcRoute() {
var start = new google.maps.LatLng(23.1508, 72.3600);
var end = new google.maps.LatLng(23.1642, 72.6549);
var bounds = new google.maps.LatLngBounds();
bounds.extend(start);
bounds.extend(end);
map.fitBounds(bounds);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
} else {
alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
mapLocation();
var map;
var maxFeatures =10;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function identify(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Airport');
var Groupcountt=0;
map.getLayers().forEach(function (layerr, i) {
Groupcountt=i+1;
var groupnamee=layerr.get('name');
if(groupnamee=='Identify')
{
var groupcontentt='';
groupcontentt+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontentt +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" aria-expanded="true" href="#basemap-choicee'+i+'" aria-controls="collapseOne" class="collapsed">'+groupnamee+':<span id="'+'layerscountt'+i+'"></span><i style="position: absolute;right: 17px;" class="ti-arrow-circle-down"></i></a></h5></div><div id="basemap-choicee'+i+'" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionn" style=""><div class="card-body" id="'+'layerr'+i+'"></div> </div></div>';
$('#groupss').append($(groupcontentt));
bindInputs('#layerr' + i, layerr);
var subGroupcountt=0;
if (layerr instanceof ol.layer.Group) {
layerr.getLayers().forEach(function (sublayerr, j) {
subGroupcountt=j+1;
var basecontentt = '';
let layernamee=sublayerr.get('name');
basecontentt += '<div class="togglebutton" id="layerr'+i+j+'"><input id="visiblee'+i+j+'" type="checkbox" class="visible" style=" display: contents;"/><label for="visiblee'+i+j+'"> <span class="toggle"></span>'+layernamee+'</label> </div>';
$('#layerr'+i).append($(basecontentt));
bindInputss('#layerr' + i + j, sublayerr);
});
$('#layerscountt'+i).append(subGroupcountt);
}
}
});
$('#groupscountt').append(Groupcountt);
}
function bindInputss(layerid, layer)
{
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
if(layer.getVisible()==true)
{
activateClick(layer);
}
else{
deactivateClick();
}
});
visibilityInput.prop('checked', layer.getVisible());
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
console.log(layer)
var layername=layer.get('name');
// hoverLayer.getSource().clear();
deactivateClick();
clickEvent = (evt) =>
{
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
var url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
'EPSG:3857', {
'INFO_FORMAT' : 'application/json',
});
if (url)
{
$.get(url, function(response) {
response = JSON.parse(response);
{
{
const a=response.features.map(x=>x.properties)[0];
console.log(a);
if(layername=='Rail')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.bsid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='National Highway')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.objectid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='Airport')
{
content.innerHTML = '<p style="color:green;">Location:<span style="color:black">' + a.descriptio + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='Monument')
{
content.innerHTML = '<p style="color:green;">Desc:<span style="color:black">' + a.description_mn + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p><p style="color:green;">State:<span style="color:black">' + a.state + '</span></p><p style="color:green;">Circle:<span style="color:black">' + a.circle + '</span></p><p style="color:green;">Sr No:<span style="color:black">' + a.user_id + '</span></p> <button onclick="myFunction()">More Infromation</button>';
}
overlay.setPosition(evt.coordinate);
}
}
});
}
else{
alert("NOt Suported");
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}
};
map.on('singleclick', clickEvent);
}
function myFunction(){
window.location = '/monumentform.jsp';
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
return source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
// FEATURE_COUNT: maxFeatures,
// STYLES: styles
});
// return url;
}
var map;
var maxFeatures =10;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function identify(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Airport');
var Groupcountt=0;
map.getLayers().forEach(function (layerr, i) {
Groupcountt=i+1;
var groupnamee=layerr.get('name');
if(groupnamee=='Identify')
{
var groupcontentt='';
groupcontentt+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontentt +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" aria-expanded="true" href="#basemap-choicee'+i+'" aria-controls="collapseOne" class="collapsed">'+groupnamee+':<span id="'+'layerscountt'+i+'"></span><i style="position: absolute;right: 17px;" class="ti-arrow-circle-down"></i></a></h5></div><div id="basemap-choicee'+i+'" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionn" style=""><div class="card-body" id="'+'layerr'+i+'"></div> </div></div>';
$('#groupss').append($(groupcontentt));
bindInputs('#layerr' + i, layerr);
var subGroupcountt=0;
if (layerr instanceof ol.layer.Group) {
layerr.getLayers().forEach(function (sublayerr, j) {
subGroupcountt=j+1;
var basecontentt = '';
let layernamee=sublayerr.get('name');
basecontentt += '<div class="togglebutton" id="layerr'+i+j+'"><input id="visiblee'+i+j+'" type="checkbox" class="visible" style=" display: contents;"/><label for="visiblee'+i+j+'"> <span class="toggle"></span>'+layernamee+'</label> </div>';
$('#layerr'+i).append($(basecontentt));
bindInputss('#layerr' + i + j, sublayerr);
});
$('#layerscountt'+i).append(subGroupcountt);
}
}
});
$('#groupscountt').append(Groupcountt);
}
function bindInputss(layerid, layer)
{
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
if(layer.getVisible()==true)
{
activateClick(layer);
}
else{
deactivateClick();
}
});
visibilityInput.prop('checked', layer.getVisible());
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
console.log(layer)
var layername=layer.get('name');
// hoverLayer.getSource().clear();
deactivateClick();
clickEvent = (evt) =>
{
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
var url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
'EPSG:3857', {
'INFO_FORMAT' : 'application/json',
});
if (url)
{
$.get(url, function(response) {
response = JSON.parse(response);
{
{
const a=response.features.map(x=>x.properties)[0];
console.log(a);
if(layername=='Rail')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.bsid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='National Highway')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.objectid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='Airport')
{
content.innerHTML = '<p style="color:green;">Location:<span style="color:black">' + a.descriptio + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='Monument')
{
content.innerHTML = '<p style="color:green;">Desc:<span style="color:black">' + a.description_mn + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p><p style="color:green;">State:<span style="color:black">' + a.state + '</span></p><p style="color:green;">Circle:<span style="color:black">' + a.circle + '</span></p><p style="color:green;">Sr No:<span style="color:black">' + a.user_id + '</span></p> <button onclick="myFunction()">More Infromation</button>';
}
overlay.setPosition(evt.coordinate);
}
}
});
}
else{
alert("NOt Suported");
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}
};
map.on('singleclick', clickEvent);
}
function myFunction(){
window.location = '/monumentform.jsp';
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
return source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
// FEATURE_COUNT: maxFeatures,
// STYLES: styles
});
// return url;
}
var map;
var maxFeatures =10;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function identify(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Airport');
var Groupcountt=0;
map.getLayers().forEach(function (layerr, i) {
Groupcountt=i+1;
var groupnamee=layerr.get('name');
if(groupnamee=='Identify')
{
var groupcontentt='';
groupcontentt+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontentt +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" aria-expanded="true" href="#basemap-choicee'+i+'" aria-controls="collapseOne" class="collapsed">'+groupnamee+':<span id="'+'layerscountt'+i+'"></span><i class="material-icons">keyboard_arrow_down</i></a></h5></div><div id="basemap-choicee'+i+'" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionn" style=""><div class="card-body" id="'+'layerr'+i+'"></div> </div></div>';
$('#groupss').append($(groupcontentt));
bindInputs('#layerr' + i, layerr);
var subGroupcountt=0;
if (layerr instanceof ol.layer.Group) {
layerr.getLayers().forEach(function (sublayerr, j) {
subGroupcountt=j+1;
var basecontentt = '';
let layernamee=sublayerr.get('name');
basecontentt += '<div class="togglebutton" id="layerr'+i+j+'"><label for="visiblee'+i+j+'"> <input id="visiblee'+i+j+'" type="checkbox" class="visible" /> <span class="toggle"></span>'+layernamee+'</label> </div>';
$('#layerr'+i).append($(basecontentt));
bindInputss('#layerr' + i + j, sublayerr);
});
$('#layerscountt'+i).append(subGroupcountt);
}
}
});
$('#groupscountt').append(Groupcountt);
}
function bindInputss(layerid, layer)
{
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
if(layer.getVisible()==true)
{
activateClick(layer);
}
else{
deactivateClick();
}
});
visibilityInput.prop('checked', layer.getVisible());
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
console.log(layer)
var layername=layer.get('name');
// hoverLayer.getSource().clear();
console.log(layername);
deactivateClick();
clickEvent = (evt) =>
{
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
var url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
'EPSG:3857', {
'INFO_FORMAT' : 'application/json',
});
if (url)
{
$.get(url, function(response) {
response = JSON.parse(response);
{
{
const a=response.features.map(x=>x.properties)[0];
console.log(a);
if(layername=='Rail')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.bsid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='National Highway')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.objectid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='Park Boundry')
{
content.innerHTML = '<p style="color:green;">Statename:<span style="color:black">' + a.st_name + '</span></p><p style="color:green;">District:<span style="color:black">' + a.dist_name + '</span></p><p style="color:green;">Taluka:<span style="color:black">' + a.sub_dist + '</span></p><p style="color:green;">Village:<span style="color:black">' + a.vname + '</span></p><p style="color:green;">Park Name:<span style="color:black">' + a.park_name + '</span></p><p style="color:green;">Park Type:<span style="color:black">' + a.park_type + '</span></p>';
}
overlay.setPosition(evt.coordinate);
}
}
});
}
else{
alert("NOt Suported");
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}
};
map.on('singleclick', clickEvent);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
return source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
// FEATURE_COUNT: maxFeatures,
// STYLES: styles
});
// return url;
}
var map;
var maxFeatures =1;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function identify(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Airport');
var Groupcountt=0;
map.getLayers().forEach(function (layerr, i) {
Groupcountt=i+1;
var groupnamee=layerr.get('name');
if(groupnamee=='Identify')
{
var groupcontentt='';
groupcontentt+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontentt +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" aria-expanded="true" href="#basemap-choicee'+i+'" aria-controls="collapseOne" class="collapsed">'+groupnamee+':<span id="'+'layerscountt'+i+'"></span><i class="material-icons">keyboard_arrow_down</i></a></h5></div><div id="basemap-choicee'+i+'" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionn" style=""><div class="card-body" id="'+'layerr'+i+'"></div> </div></div>';
$('#groupss').append($(groupcontentt));
bindInputs('#layerr' + i, layerr);
var subGroupcountt=0;
if (layerr instanceof ol.layer.Group) {
layerr.getLayers().forEach(function (sublayerr, j) {
subGroupcountt=j+1;
var basecontentt = '';
let layernamee=sublayerr.get('name');
basecontentt += '<div class="togglebutton" id="layerr'+i+j+'"><label for="visiblee'+i+j+'"> <input id="visiblee'+i+j+'" type="checkbox" class="visible" /> <span class="toggle"></span>'+layernamee+'</label> </div>';
$('#layerr'+i).append($(basecontentt));
bindInputss('#layerr' + i + j, sublayerr);
});
$('#layerscountt'+i).append(subGroupcountt);
}
}
});
$('#groupscountt').append(Groupcountt);
}
function bindInputss(layerid, layer)
{
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
if(layer.getVisible()==true)
{
activateClick(layer);
}
else{
deactivateClick();
}
});
visibilityInput.prop('checked', layer.getVisible());
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
console.log(layer)
var layername=layer.get('name');
// hoverLayer.getSource().clear();
// deactivateClick();
clickEvent = (evt) =>
{
var coordinate = evt.coordinate;
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
const styles = layer.getSource().getParams().STYLES;
var url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
'EPSG:3857', {
'INFO_FORMAT' : 'application/json',
FEATURE_COUNT: maxFeatures,
STYLES: styles
});
if (url)
{
$.get(url, function(response) {
response = JSON.parse(response);
{
{
const a=response.features.map(x=>x.properties)[0];
console.log(a);
if(layername=='Rail')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.bsid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='National Highway')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.objectid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='Park Boundry')
{
content.innerHTML = '<p style="color:green;">Statename:<span style="color:black">' + a.st_name + '</span></p><p style="color:green;">District:<span style="color:black">' + a.dist_name + '</span></p><p style="color:green;">Taluka:<span style="color:black">' + a.sub_dist + '</span></p><p style="color:green;">Village:<span style="color:black">' + a.vname + '</span></p><p style="color:green;">Park Name:<span style="color:black">' + a.park_name + '</span></p><p style="color:green;">Park Type:<span style="color:black">' + a.park_type + '</span></p>';
}
overlay.setPosition(coordinate);
// overlay.setPosition(evt.coordinate);
}
}
});
}
else{
alert("NOt Suported");
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}
};
map.on('singleclick', clickEvent);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
return source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
// FEATURE_COUNT: maxFeatures,
// STYLES: styles
});
// return url;
}
function switchlayers(map)
{
var Groupcount=0;
bindallopacity();
map.getLayers().forEach(function (layer, i) {
Groupcount=i+1;
var groupname=layer.get('name');
var groupcontent='';
groupcontent+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontent +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" href="#basemap-choice'+i+'" aria-controls="collapseOne" class="collapsed">'+groupname+':<span id="'+'layerscount'+i+'"></span><i style="position: absolute;right: 17px;" class="ti-arrow-circle-down"></i></a></h5></div><div id="basemap-choice'+i+'" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" style=""><div class="card-body" id="'+'layer'+i+'"></div> <div id="'+'slider-range-min'+i+'" ></div></div></div>';
$('#groups').append($(groupcontent));
bindInputs('#layer' + i, layer);
var subGroupcount=0;
if (layer instanceof ol.layer.Group) {
layer.getLayers().forEach(function (sublayer, j) {
subGroupcount=j+1;
var basecontent = '';
let layername=sublayer.get('name');
basecontent += '<div class="togglebutton" id="layer'+i+j+'"><input id="visible'+i+j+'" type="checkbox" class="visible" style=" display: contents;"/><label for="visible'+i+j+'"> '+layername+'</label> <input id="opacity" class="opacity" type="range" min="0" max="1" step="0.01"/></div>';
$('#layer'+i).append($(basecontent));
bindInputs('#layer' + i + j, sublayer);
});
$('#layerscount'+i).append(subGroupcount);
}
});
$('#groupscount').append(Groupcount);
}
function bindallopacity()
{
$('#opacity').hide();
var allopacity=$('#allopacity');
allopacity.on('change', function () {
});
}
function bindInputs(layerid, layer) {
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
});
visibilityInput.prop('checked', layer.getVisible());
var opacityInput = $(layerid + ' input.opacity');
opacityInput.on('input change', function () {
layer.setOpacity(parseFloat(this.value));
});
opacityInput.val(String(layer.getOpacity()));
}
function switchlayers(map)
{
const layerGroups = map.getLayers().getArray();
const groupCount=layerGroups.length
$('#groupscount').append(groupCount);
const groupcount=layerGroups.length;
for(var j=0;j<layerGroups.length;j++)
{
var groupname=layerGroups[j].get('name');
var groupcontent='';
groupcontent+='';
groupcontent +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" href="#basemap-choice'+j+'" aria-controls="collapseOne" class="collapsed">'+groupname+':<span id="'+'layerscount'+j+'"></span><i class="material-icons">keyboard_arrow_down</i></a></h5></div><div id="basemap-choice'+j+'" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" style=""><div class="card-body" id="'+'layers'+j+'"></div> <div id="'+'slider-range-min'+j+'" ></div></div></div>';
$('#groups').append($(groupcontent));
if(layerGroups[j].getVisible()==true)
{
let sublayers=new Array();
for(var i=0;i<layerGroups[j].getLayers().getArray().length;i++)
{
sublayers.push(layerGroups[j].getLayers().getArray()[i]);
}
getlayersfunction(sublayers,j);
sublayers=[];
}
}
function getlayersfunction(sublayers,ind)
{
$.each(sublayers, function(index)
{
var basecontent = '';
var layer = this.getProperties();
console.log(layer.name+"-"+layer.visible);
if(layer.visible==true) {
basecontent += '<div class="togglebutton"><label ><input id="check'+ind+'" type="checkbox" name="radio-basemap" checked=""><span class="toggle"></span>'+layer.name+'</label></div>';
}
else
{
basecontent += '<div class="togglebutton"><label ><input id="check'+ind+'" type="checkbox" name="radio-basemap" ><span class="toggle"></span>'+layer.name+'</label></div>';
}
$('#layers'+ind).append($(basecontent));
});
$('#layerscount'+ind).append(sublayers.length);
}
}
function switchlayers(map)
{
var Groupcount=0;
bindallopacity();
map.getLayers().forEach(function (layer, i) {
Groupcount=i+1;
var groupname=layer.get('name');
if(groupname!=undefined && groupname!='Identify')
{
var groupcontent='';
groupcontent+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontent +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" href="#basemap-choice'+i+'" aria-controls="collapseOne" class="collapsed">'+groupname+':<span id="'+'layerscount'+i+'"></span><i style="position: absolute;right: 17px;" class="ti-arrow-circle-down"></i></a></h5></div><div id="basemap-choice'+i+'" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" style=""><div class="card-body" id="'+'layer'+i+'"></div> <div id="'+'slider-range-min'+i+'" ></div></div></div>';
$('#groups').append($(groupcontent));
bindInputs('#layer' + i, layer);
var subGroupcount=0;
if (layer instanceof ol.layer.Group) {
layer.getLayers().forEach(function (sublayer, j) {
subGroupcount=j+1;
var basecontent = '';
let layername=sublayer.get('name');
basecontent += '<div class="togglebutton" id="layer'+i+j+'"><input id="visible'+i+j+'" type="checkbox" class="visible" style=" display: contents;"/><label for="visible'+i+j+'"> '+layername+'</label> <input id="opacity" class="opacity" type="range" min="0" max="1" step="0.01"/></div>';
$('#layer'+i).append($(basecontent));
bindInputs('#layer' + i + j, sublayer);
});
$('#layerscount'+i).append(subGroupcount);
}
}
});
$('#groupscount').append(Groupcount);
}
function bindallopacity()
{
$('#opacity').hide();
var allopacity=$('#allopacity');
allopacity.on('change', function () {
});
}
function bindInputs(layerid, layer) {
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
});
visibilityInput.prop('checked', layer.getVisible());
var opacityInput = $(layerid + ' input.opacity');
opacityInput.on('input change', function () {
layer.setOpacity(parseFloat(this.value));
});
opacityInput.val(String(layer.getOpacity()));
}
var map;
var legendImg;
var ImageArray=[];
function legend(m)
{
map=m;
// map.getLayers().forEach(function (grouplayers) {
// grouplayers.getLayers().forEach(function (layer) {
// if(layer.getVisible()==true)
// {
// console.log(layer);
// // const layername = layer.params["LAYERS"] ;
// // console.log(layername);
// }
// });
// });
// const grouplayers = map.getLayers().getArray();
// grouplayers.forEach((sublayers) => {
// // alert(sublayers.get('name'));
// sublayers.forEach((layer) => {
// if(layer.getVisible()==true)
// {
// alert(layer.get('name'));
// // const layername = layer.getSource().getParams().LAYERS ;
// // this.legendImg = gidcGisUrl + '?REQUEST=GetLegendGraphic&sld_version=1.0.0&layer=' + layername + '&format= image/png &legend_options=fontSize:13;fontName:san-sarif;bgColor:0xffffff;forceLabels:on'+'&WIDTH=12&HEIGHT=12&Scale=1';
// //this.ImageArray.push( this.legendImg);
// }
// });
// });
}
function updateLegend(layer) {
let layername=layer.getSource().getParams().LAYERS;
var graphicUrl = '?REQUEST=GetLegendGraphic&sld_version=1.0.0&layer=' + layername + '&format= image/png &legend_options=fontSize:13;fontName:san-sarif;bgColor:0xffffff;forceLabels:on'+'&WIDTH=12&HEIGHT=12&Scale=1';
var img = document.getElementById('legend');
img.src = graphicUrl;
};
///**
/**
// * Elements that make up the popup.
* Elements that make up the popup.
// */
*/
//var container = document.getElementById('popup');
var container = document.getElementById('popup');
//var content = document.getElementById('popup-content');
var content = document.getElementById('popup-content');
//var closer = document.getElementById('popup-closer');
var closer = document.getElementById('popup-closer');
//
///**
/**
// * Create an overlay to anchor the popup to the map.
* Create an overlay to anchor the popup to the map.
// */
*/
//var overlay = new ol.Overlay({
var overlay = new ol.Overlay({
// element: container,
element: container,
// autoPan: true,
autoPan: true,
// autoPanAnimation: {
autoPanAnimation: {
// duration: 250,
duration: 250,
// },
},
//});
});
//
///**
/**
// * Add a click handler to hide the popup.
* Add a click handler to hide the popup.
// * @return {boolean} Don't follow the href.
* @return {boolean} Don't follow the href.
// */
*/
//closer.onclick = function () {
closer.onclick = function () {
// overlay.setPosition(undefined);
overlay.setPosition(undefined);
// closer.blur();
closer.blur();
// return false;
return false;
//};
};
//
window.onload=init;
//window.onload=init;
//
function init()
/**
{
* Elements that make up the popup.
let india=[ 81.191694, 23.8086 ];
*/
let jalandhar=[75.57917,31.32556];
var container = document.getElementById('popup');
var map = new ol.Map({
var content = document.getElementById('popup-content');
overlays: [overlay],
var closer = document.getElementById('popup-closer');
target: 'target-map',
/**
view: new ol.View({
* Create an overlay to anchor the popup to the map.
center : ol.proj.transform(india, 'EPSG:4326','EPSG:3857'),
*/
zoom:4.0,
var overlay = new ol.Overlay({
// zoom :9.5,
element: container,
minZoom:4,
autoPan: true,
maxZoom: 17
autoPanAnimation: {
}),
duration: 250,
layers:[
},
CommonlayersGroup,indianMapLayersGroup,
});
IdentifyLayerGroup,geomLayerGroup,satelliteGroup
],
/**
controls: ol.control.defaults({
* Add a click handler to hide the popup.
zoom: false,
* @return {boolean} Don't follow the href.
attribution: true,
*/
rotate: false
closer.onclick = function () {
}).extend([]),
overlay.setPosition(undefined);
// new ol.control.FullScreen()
closer.blur();
return false;
};
});
window.onload=init;
legend(map);
geom(map);
//buffer(map);
function init()
controllers(map);
{
navigation(map);
switchlayers(map);
let india=[ 81.191694, 23.8086 ];
getMousePosition(map);
//let jalandhar=[75.57917,31.32556];
scaleline(map);
var map = new ol.Map({
exportpdf(map);
overlays: [overlay],
identify(map);
target: 'target-map',
//addGeom(map);
commonfunctions(map);
//swipe(map);
//geocoder(map);
view: new ol.View({
center : ol.proj.transform(india, 'EPSG:4326','EPSG:3857'),
zoom:4.5,
// zoom :10,
minZoom:4,
maxZoom: 17
}),
}
layers:[
CommonlayersGroup,indianMapLayersGroup,
transportLayerGroup,IdentifyLayerGroup,satelliteGroup
],
controls: ol.control.defaults({
zoom: false,
attribution: false,
rotate: false
}).extend([]),
// new ol.control.FullScreen()
});
// var olGM = new olgm.OLGoogleMaps({map: map});
//var gmap = olGM.getGoogleMapsMap();
//CommonlayersGroup,
//measure(map);
controllers(map);
navigation(map);
switchlayers(map);
getMousePosition(map);
scaleline(map);
//exportpdf(map);
identify(map);
//addGeom(map);
//geocoder(map);
}
//
//function init()
//{
//
//var map = new ol.Map({
// overlays: [overlay],
// target: 'target-map',
//
// view: new ol.View({
// center : ol.proj.transform([ 81.191694, 23.8086 ], 'EPSG:4326','EPSG:3857'),
// zoom :4.5,
// minZoom:4,
// maxZoom: 17
// }),
// layers:[
// CommonlayersGroup,indianMapLayersGroup,
// transportLayerGroup,IdentifyLayerGroup,satelliteGroup,
// ],
// controls: ol.control.defaults({
// zoom: true,
// attribution: false,
// rotate: false
// }).extend([]),
// // new ol.control.FullScreen()
//
//
// });
// // var olGM = new olgm.OLGoogleMaps({map: map});
////var gmap = olGM.getGoogleMapsMap();
////CommonlayersGroup,
//measure(map);
//controllers(map);
//navigation(map);
//switchlayers(map);
//getMousePosition(map);
//scaleline(map);
//exportpdf(map);
//identify(map);
//addGeom(map);
//
//
//
//
//
//}
/**
* Elements that make up the popup.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* Create an overlay to anchor the popup to the map.
*/
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
window.onload=init;
function init()
{
let india=[ 81.191694, 23.8086 ];
let jalandhar=[75.57917,31.32556];
var map = new ol.Map({
overlays: [overlay],
target: 'target-maps',
view: new ol.View({
center : ol.proj.transform(india, 'EPSG:4326','EPSG:3857'),
zoom:4.0,
// zoom :9.5,
minZoom:4,
maxZoom: 17
}),
layers:[
z
],
controls: ol.control.defaults({
zoom: false,
attribution: true,
rotate: false
}).extend([]),
// new ol.control.FullScreen()
});
legend(map);
geom(map);
//buffer(map);
controllers(map);
navigation(map);
switchlayers(map);
getMousePosition(map);
scaleline(map);
exportpdf(map);
identify(map);
//addGeom(map);
commonfunctions(map);
//swipe(map);
//geocoder(map);
}
var map;
var layers=new ol.layer.Vector;
var feature=new ol.Feature;
var geometryType;
var precision = 2;
var cursorStyle = 'crosshair';
var fillColor = [255, 255, 255, 0.5];
var strokeColor = [72, 72, 72, 1];
var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1];
var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7];
var font = 'normal 14px Arial';
var draw;
var displaylength = document.getElementById('distance');
var displayarea = document.getElementById('area');
var displayradious = document.getElementById('radious');
function selectedType(gtype)
{
displaylength.innerHTML = '';
displayarea.innerHTML = '';
displayradious.innerHTML = '';
geometryType=gtype;
activateDraw();
}
function activateDraw()
{
deactivateDraw();
map.addLayer(layers);
setCursor(cursorStyle);
draw= new ol.interaction.Draw({
source: layers.getSource(),
type: geometryType,
style: (feature) => {
return getStyle(feature);
}
});
draw.on('drawstart', (e) => {
layers.getSource().clear();
});
draw.on('drawend', (e) => {
let feature = e.feature;
let coords= feature.getGeometry().getCoordinates();
Addpolygongeometry(coords);
const feat = new ol.Feature({
geometry: e.target
}
);
// getLengthOrArea(feat);
});
draw.setActive(true);
map.addInteraction(draw);
}
function deactivateDraw() {
setCursor('');
value = null;
try {
map.removeInteraction(draw);
layers.getSource().clear();
map.removeLayer(layers);
} catch (error) {}
}
function measure(m)
{
map=m
// Read user-defined parameters
units= map.getView().getProjection().getUnits();
layers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: (feature ) => {
return getStyle(feature);
}
});
}
function getStyle(feature)
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color:fillColor
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: strokeColor,
width: 2,
lineDash: [5, 5]
}),
text: new ol.style.Text({
textAlign: 'center',
textBaseline: 'middle',
text: getLengthOrArea(feature),
font: font,
fill: new ol.style.Fill({
color: textColor
}),
offsetX: 0,
offsetY: 0,
rotation: 0,
stroke: new ol.style.Stroke({
color: textOutlineColor,
width: 3
})
})
})
];
}
function setCursor(cursorType)
{
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function Addpolygongeometry(p)
{
let cordinate = '';
switch (geometryType) {
case 'LineString':
try {
cordinate = 'POINT(('+p+'))';
} catch (error) {}
break;
case 'Polygon':
try {
cordinate = 'POLYGON(('+p+'))';
} catch (error) {}
break;
case 'Circle':
try {
cordinate = 'CIRCLE(('+p+'))';
} catch (error) {}
break;
default:
break;
}
if (cordinate !== '') {
cordinate += cordinate;
}
return cordinate;
}
function getLengthOrArea(feature)
{
let value = '';
const geom= feature.getGeometry();
switch (geometryType)
{
case 'LineString':
try {
value = parseFloat(geom.getLength().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Polygon':
try {
value = parseFloat(geom.getArea().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Circle':
try {
value = parseFloat(geom.getRadius().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
default:
break;
}
if (value !== '')
{
value = value;
displaylength.innerHTML = value + ' m';
displayarea.innerHTML = value + ' m ²';
displayradious.innerHTML = value+ ' m';
}
return value;
}
function getMousePosition(map)
{
var latnong=fromLotlong(map.getView().getCenter());
var pointerMoveListener = map.on('pointermove', (evt) => {
if (evt.dragging)
{
return;
}
else
{
latnong = fromLotlong(evt.coordinate);
document.getElementById("latlon").innerHTML=latnong;
}
});
document.getElementById("latlon").innerHTML=latnong;
function fromLotlong(coords)
{
let lonlat = ol.proj.transform(coords, 'EPSG:3857', 'EPSG:4326');
let formattedLatlong= [];
return formattedLatlong=lonlat.map(x=>x.toFixed(4));
}
}
var map
var GisUrl='https://gis.ncog.gov.in/GISWeb/wms';
var statelist=[];
var districtlist=[];
var talukalist=[];
var villagelist=[];
var cql;
var Alllayers=[];
var Alllayersname= [];
var layersname="Village,Taluka,District,State";
var layer="VillageIndia,TalukaIndia,DistrictIndia,StateIndia";
function navigation(m)
{
map=m;
getstate();
}
function getstate()
{
statelist=[];
districtlist=[];
talukalist=[];
villagelist=[];
var options="";
var j=getState();
if(j)
{
var statename="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].statecode+ '" >'
+ j[i].statename + '</option>';
statelist.push({"statecode":j[i].statecode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
$("select#state").html(options);
}
$("#state").change(function(){
var selectedstatecode = $(this).children("option:selected").val();
var s=statelist.find(x=>x.statecode==selectedstatecode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removestatelayer(selectedstatecode);
getDistricts(selectedstatecode);
})
}
function zoom(extent)
{
extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent), { duration: 200 };
}
function clearmap()
{
const layers = map.getLayers().getArray();
layers.forEach((layer) => {
if(layer.getVisible()==true)
{
layer.setVisible(false)
}
});
}
function removestatelayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="STCODE11="+selectedcode;
}
else if (Alllayers[j]=="VillageIndia")
{
cql="ST_2011="+selectedcode;
}
else
{
cql="stcode11="+selectedcode;
}
if (Alllayers[j]=="VillageIndia")
{
new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS' : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 256,
})
}
else if (Alllayers[j]=="TalukaIndia")
{
var new_lyr =
new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS': Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 800,//1024,
// name : Alllayersname[j]
})
}
else
{
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url :GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS': Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
// name : Alllayersname[j]
})
}
// newlyr=new_lyr;
map.addLayer(new_lyr);
}
}
function getDistricts(selectedstatecode)
{
if(selectedstatecode!=null)
{
districtlist=[];
talukalist=[];
villagelist=[];
var options="";
var j=getDistrict(selectedstatecode);
if(j)
{
var districtname="";
for ( var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].districtcode+ '" >'
+ j[i].districtname + '</option>';
districtlist.push({"districtcode":j[i].districtcode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
$("select#district").html(options);
}
$("#district").change(function(){
var selecteddistrictcode = $(this).children("option:selected").val();
var s=districtlist.find(x=>x.districtcode==selecteddistrictcode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removedistrictlayer(selecteddistrictcode)
getTaluka(selecteddistrictcode)
});
}
}
function removedistrictlayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="DTCODE11='"+selectedcode+"'";
}
else if (Alllayers[j]=="VillageIndia")
{
cql="DT_2011='"+selectedcode+"'";
}
else
{
cql="dtcode11='"+selectedcode+"'";
}
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+cql_dist);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution :256,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution :800,
});
}
else
{
// alert("else...."+Alllayers[j]);
// alert("cql...."+cql_dist);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
//maxResolution : 256,
});
}
// newlyr=new_lyr;
map.addLayer(new_lyr);
}
}
function getTaluka(selecteddistrictcode)
{
if(selecteddistrictcode!=null)
{
talukalist=[];
villagelist=[];
var options="";
var j=getTalukas(selecteddistrictcode)
if(j)
{
var talukaname="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
if(j[i].talukacode!=null)
{
options += '<option value="' + j[i].talukacode+ '" >'
+ j[i].talukaname + '</option>';
talukalist.push({"talukacode":j[i].talukacode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
}
$("select#taluka").html(options);
}
}
$("#taluka").change(function(){
var selectedtalukacode = $(this).children("option:selected").val();
getVillages(selectedtalukacode);
var s=talukalist.find(x=>x.talukacode==selectedtalukacode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removetalukalayer(selectedtalukacode);
})
}
function removetalukalayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="SDTCODE11='"+selectedcode+"'";
}
else if (Alllayers[j]=="VillageIndia")
{
cql="SDT_2011='"+selectedcode+"'";
}
/* else
{
cql="dtcode11='"+dist+"'";
}*/
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 856,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
//maxResolution : 1024,//1024,
});
}
map.addLayer(new_lyr);
}
}
function getVillages(selectedtalukacode)
{
var options="";
var j=getVillage(selectedtalukacode)
if(j)
{
var villagename="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
if(j[i].villagecode!=null)
{
options += '<option value="' + j[i].villagecode+ '" >'
+ j[i].villagename + '</option>';
villagelist.push({"villagecode":j[i].villagecode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
}
$("select#village").html(options);
}
}
$("#village").change(function(){
var selectedvillagecode = $(this).children("option:selected").val();
var s=villagelist.find(x=>x.villagecode==selectedvillagecode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removevillagelayer(selectedvillagecode);
})
function removevillagelayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if (Alllayers[j]=="VillageIndia")
{
cql="VIL_2011='"+selectedcode+"'";
}
/* else
{
cql="dtcode11='"+dist+"'";
}*/
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 256,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 800,//1024,
});
}
map.addLayer(new_lyr);
}
}
var map
var GisUrl='https://gis.ncog.gov.in/GISWeb/wms';
var hoverLayer =ol.layer.Vector;
var geojson = new ol.format.GeoJSON;
var vectorSource;
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
var statelist=[];
var districtlist=[];
var talukalist=[];
var villagelist=[];
var cql;
var Alllayers=[];
var Alllayersname= [];
var layersname="Village,Taluka,District,State";
var layer="VillageIndia,TalukaIndia,DistrictIndia,StateIndia";
function navigation(m)
{
map=m;
zoomOnRowClick = true;
highlightFeatures = true;
getstate();
addHoverLayer();
}
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
if (hoverStyle) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(this.hoverLayer);
}
}
function getstate()
{
statelist=[];
districtlist=[];
talukalist=[];
villagelist=[];
var options="";
var j=getState();
if(j)
{
var statename="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].statecode+ '" >'
+ j[i].statename + '</option>';
statelist.push({"statecode":j[i].statecode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
$("select#state").html(options);
}
$("#state").change(function(){
var selectedstatecode = $(this).children("option:selected").val();
var s=statelist.find(x=>x.statecode==selectedstatecode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removestatelayer(selectedstatecode);
getDistricts(selectedstatecode);
var vectorSource = new ol.source.Vector({
url: 'https://gis.ncog.gov.in/GISWeb/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:StateIndia&PROPERTYNAME=geom,stcode11&CQL_FILTER=stcode11=%27'+selectedstatecode +'%27&maxFeatures=50&outputFormat=json',
format :new ol.format.GeoJSON()
});
var vectorLayer1 = new ol.layer.Vector({
source: vectorSource,
style: customStyleFunction,
});
map.addLayer(vectorLayer1);
})
}
function customStyleFunction()
{
return [new styles.Style({
stroke: new styles.Stroke({
color: '#00ff00',
width: 2
})
})];
}
function zoom(extent)
{
extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent), { duration: 200 };
}
function clearmap()
{
const layers = map.getLayers().getArray();
layers.forEach((layer) => {
if(layer.getVisible()==true)
{
layer.setVisible(false)
}
});
}
function removestatelayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="STCODE11="+selectedcode;
}
else if (Alllayers[j]=="VillageIndia")
{
cql="ST_2011="+selectedcode;
}
else
{
cql="stcode11="+selectedcode;
}
if (Alllayers[j]=="VillageIndia")
{
new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS' : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 256,
})
}
else if (Alllayers[j]=="TalukaIndia")
{
var new_lyr =
new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS': Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 800,//1024,
// name : Alllayersname[j]
})
}
else
{
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url :GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS': Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
// name : Alllayersname[j]
})
}
// newlyr=new_lyr;
map.addLayer(new_lyr);
}
}
function getDistricts(selectedstatecode)
{
if(selectedstatecode!=null)
{
districtlist=[];
talukalist=[];
villagelist=[];
var options="";
var j=getDistrict(selectedstatecode);
if(j)
{
var districtname="";
for ( var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].districtcode+ '" >'
+ j[i].districtname + '</option>';
districtlist.push({"districtcode":j[i].districtcode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
$("select#district").html(options);
}
$("#district").change(function(){
var selecteddistrictcode = $(this).children("option:selected").val();
var s=districtlist.find(x=>x.districtcode==selecteddistrictcode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removedistrictlayer(selecteddistrictcode)
getTaluka(selecteddistrictcode)
});
}
}
function removedistrictlayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="DTCODE11='"+selectedcode+"'";
}
else if (Alllayers[j]=="VillageIndia")
{
cql="DT_2011='"+selectedcode+"'";
}
else
{
cql="dtcode11='"+selectedcode+"'";
}
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+cql_dist);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution :256,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution :800,
});
}
else
{
// alert("else...."+Alllayers[j]);
// alert("cql...."+cql_dist);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
//maxResolution : 256,
});
}
// newlyr=new_lyr;
map.addLayer(new_lyr);
}
}
function getTaluka(selecteddistrictcode)
{
if(selecteddistrictcode!=null)
{
talukalist=[];
villagelist=[];
var options="";
var j=getTalukas(selecteddistrictcode)
if(j)
{
var talukaname="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
if(j[i].talukacode!=null)
{
options += '<option value="' + j[i].talukacode+ '" >'
+ j[i].talukaname + '</option>';
talukalist.push({"talukacode":j[i].talukacode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
}
$("select#taluka").html(options);
}
}
$("#taluka").change(function(){
var selectedtalukacode = $(this).children("option:selected").val();
getVillages(selectedtalukacode);
var s=talukalist.find(x=>x.talukacode==selectedtalukacode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removetalukalayer(selectedtalukacode);
})
}
function removetalukalayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="SDTCODE11='"+selectedcode+"'";
}
else if (Alllayers[j]=="VillageIndia")
{
cql="SDT_2011='"+selectedcode+"'";
}
/* else
{
cql="dtcode11='"+dist+"'";
}*/
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 856,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
//maxResolution : 1024,//1024,
});
}
map.addLayer(new_lyr);
}
}
function getVillages(selectedtalukacode)
{
var options="";
var j=getVillage(selectedtalukacode)
if(j)
{
var villagename="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
if(j[i].villagecode!=null)
{
options += '<option value="' + j[i].villagecode+ '" >'
+ j[i].villagename + '</option>';
villagelist.push({"villagecode":j[i].villagecode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
}
$("select#village").html(options);
}
}
$("#village").change(function(){
var selectedvillagecode = $(this).children("option:selected").val();
var s=villagelist.find(x=>x.villagecode==selectedvillagecode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removevillagelayer(selectedvillagecode);
})
function removevillagelayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if (Alllayers[j]=="VillageIndia")
{
cql="VIL_2011='"+selectedcode+"'";
}
/* else
{
cql="dtcode11='"+dist+"'";
}*/
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 256,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 800,//1024,
});
}
map.addLayer(new_lyr);
}
}
function scaleline(map)
{
let target = map.getTarget();
console.log(target);
const scaleLineControl = new ol.control.ScaleLine({
target: document.getElementById(scale),
});
map.addControl(scaleLineControl);
}
function getreport()
var apiurl="https://api3.ncog.gov.in/BaseRest/";
{
function getState()
{
var data=null;
var data=null;
$.ajax({
$.ajax({
url:"/ASIReport",
url:apiurl+"getstate",
method:"POST",
method:"POST",
dtaType:"json",
dtaType:"json",
async: false,
async: false,
data:{},
data:{},
success:function(j)
success:function(j)
{
{
console.log(j);
data=j;
data=j;
},
},
error:function (error)
error:function (error)
{
{
alert(error);
alert(error);
}
}
});
});
return data;
return data;
}
}
function getState()
function getDistrict(id)
{
{
var data=null;
//var code={};
$.ajax({
// code.statecode=id;
url:"https://api3.ncog.gov.in/BaseRest/getstate",
// var codobject=JSON.stringify(code);
method:"POST",
var data=null;
dtaType:"json",
$.ajax({
async: false,
url:apiurl+"getdistrict/"+id,
data:{},
method:"POST",
success:function(j)
async: false,
{
contentType:"application/json;charset=utf-8",
data=j;
// data:codobject,
success:function(j)
},
{
error:function (error)
data=j;
{
},
alert(error);
error:function(error)
}
{
});
alert(error);
return data;
}
}
});
return data;
function getDistrict(id)
}
{
var code={};
function getTalukas(id)
code.statecode=id;
{
var codobject=JSON.stringify(code);
// var code={};
var data=null;
/// code.districtcode=id;
$.ajax({
// var codobject=JSON.stringify(code);
url:"https://api3.ncog.gov.in/BaseRest/getdistrict/"+id,
var options="";
method:"POST",
var data=null;
async: false,
$.ajax({
contentType:"application/json;charset=utf-8",
url:apiurl+"gettaluka/"+id,
method:"POST",
data:codobject,
async: false,
success:function(j)
contentType:"application/json;charset=utf-8",
{
data=j;
// data:codobject,
},
success:function(j)
error:function(error)
{
{
alert(error);
data=j;
}
},
error:function(error)
{
});
alert(error);
return data;
}
}
function getTalukas(id)
});
{
return data;
var code={};
}
code.districtcode=id;
function getVillage(id)
var codobject=JSON.stringify(code);
{
var options="";
// var code={};
var data=null;
// code.talukacode=id;
$.ajax({
// var codobject=JSON.stringify(code);
url:"https://api3.ncog.gov.in/BaseRest/gettaluka/"+id,
var options="";
method:"POST",
var data=null;
async: false,
$.ajax({
contentType:"application/json;charset=utf-8",
url:apiurl+"getvillage/"+id,
method:"POST",
data:codobject,
async: false,
success:function(j)
contentType:"application/json;charset=utf-8",
{
// data:codobject,
data=j;
success:function(j)
},
{
error:function(error)
{
data=j;
alert(error);
},
}
error:function(error)
{
alert(error);
});
}
return data;
}
function getVillage(id)
});
{
return data;
var code={};
}
code.talukacode=id;
function getBuffer(lat,lon,range)
var codobject=JSON.stringify(code);
{
var options="";
var data=null;
var data=null;
$.ajax({
$.ajax({
url:"https://api3.ncog.gov.in/BaseRest/getvillage/"+id,
url:"/buffer/"+lat+"/"+lon+"/"+range,
method:"POST",
method:"GET",
async: false,
async: false,
contentType:"application/json;charset=utf-8",
contentType:"application/json;charset=utf-8",
data:codobject,
// data:codobject,
success:function(j)
success:function(j)
{
{
data=j;
data=j;
},
},
error:function(error)
error:function(error)
{
{
alert(error);
alert(error);
}
}
});
});
return data;
return data;
}
}
var map;
function swipe(m)
{
map=m;
var aerial = findlayeByName(map.getLayerGroup(), 'name','Aerial');
console.log(aerial.get('name'));
startswipe(aerial)
}
function startswipe(aerial)
{
var swipe = document.getElementById('swipe');
aerial.on('prerender', function (event) {
var ctx = event.context;
var mapSize = map.getSize();
var width = mapSize[0] * (swipe.value / 100);
var tl = getRenderPixel(event, [width, 0]);
var tr = getRenderPixel(event, [mapSize[0], 0]);
var bl = getRenderPixel(event, [width, mapSize[1]]);
var br = getRenderPixel(event, mapSize);
ctx.save();
ctx.beginPath();
ctx.moveTo(tl[0], tl[1]);
ctx.lineTo(bl[0], bl[1]);
ctx.lineTo(br[0], br[1]);
ctx.lineTo(tr[0], tr[1]);
ctx.closePath();
ctx.clip();
});
aerial.on('postrender', function (event) {
var ctx = event.context;
ctx.restore();
});
swipe.addEventListener(
'input',
function () {
map.render();
},
false
);
}
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
//var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'
var wmsurl='https://gis.ncog.gov.in/GeoserverWebAPI/wms62'
var IdentifyLayerGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'park_boundary_iis',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'Park Boundry',
visible:false
}),
],
name : 'Identify'
});
var CommonlayersGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
visible : false,
preload : Infinity,
opacity: 1,
source : new ol.source.BingMaps(
{
key : 'Auw0s19PwLEd-w-GFNBPzqs2lekVJE5KjKtxg0EwzB6nuvocKYwMJ7ZJnfnltPgM', //'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
imagerySet : 'Aerial'
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// "no photos at this zoom level" tiles
// maxZoom: 19
}),
name : 'Aerial'
}),
new ol.layer.Tile({
visible : false,
preload : Infinity,
source : new ol.source.BingMaps({
key :'Auw0s19PwLEd-w-GFNBPzqs2lekVJE5KjKtxg0EwzB6nuvocKYwMJ7ZJnfnltPgM', //'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
imagerySet : 'AerialWithLabels',
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// "no photos at this zoom level" tiles
// maxZoom: 19
}),
name : 'Aerial+Labels'
}),
new ol.layer.Tile({
visible : false,
source : new ol.source.OSM(),
name : 'OSM'
}),
new ol.layer.Tile({
visible : true,
source: new ol.source.TileImage({url: 'http://maps.google.com/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i375060738!3m9!2spl!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0'}),
name : 'Google Map'
})
],
name : 'Basemaps'
});
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
var wmsurl='http://localhost:8080/geoserver/PostgresSql/wms'
var geomLayerGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :'http://localhost:8080/geoserver/PostgresSql/wms',
// crossOrigin: 'anonymous',
params : {
'LAYERS' : 'geom',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: false,
//maxResolution : 256,
name : 'Geom',
visible:true
}),
],
name : 'GeomGroup'
});
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
var wmsurl='https://gis.ncog.gov.in/GISWeb/wms';
//var wmsurl='https://gis.ncog.gov.in/GeoserverWebAPI/wms62'
var st="STCODE11='03'";
var di="dtcode11 ='037'";
var ta="dtcode11 ='037'";
var vil="DT_2011 ='037'";
var indianMapLayersGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'VillageIndia',
format_options:'dpi:180',
version : '1.1.1',
// CQL_FILTER : vil
}
}),
showLegend: true,
maxResolution : 256,
name : 'Village',
visible:true
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url : wmsurl,//'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
layers : 'TalukaIndia',
version : '1.1.1',format_options:'dpi:110',
// CQL_FILTER : ta
}
}),
showLegend: true,
maxResolution : 1024,
name : 'Taluka',
visible:true
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
layers : 'DistrictIndia',
// CQL_FILTER : di,
version : '1.1.1',format_options:'dpi:110'
//version : '1.1.1',CQL_FILTER : 'dtcode11 IN (001,003,004)' ,format_options:'dpi:110'
}
}),
showLegend: true,
maxResolution : 2048,
name : 'District',
visible:true
})
,
new ol.layer.Tile({
source : new ol.source.TileWMS({
url : wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
layers : 'StateIndia',
// CQL_FILTER : st,
version : '1.1.1',format_options:'dpi:110',
//CQL_FILTER : di
//version : '1.1.1',CQL_FILTER : 'STCODE11 IN (01,02,004)' ,format_options:'dpi:110'
}
}),
styles:'IndiaState',
showLegend: true,
visible:true,
name : 'State'
}),
],
name : 'India Boundaries'
});
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'
var transportLayerGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'india_airport_location_basemap',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: false,
//maxResolution : 256,
name : 'Airport',
visible:false
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'india_nhai',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'National Highway',
visible:false
}),
// new ol.layer.Tile({
// source : new ol.source.TileWMS({
// url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
// crossOrigin: 'anonymous',
// params : {
// 'LAYERS' : 'plot_boundary_new',
// format_options:'dpi:180',
// version : '1.1.1',
// STYLES:''
// }
// }),
// showLegend: true,
// //maxResolution : 256,
// name : 'Dehgam',
// visible:true
// })
],
name : 'Transport'
});
var map;
var clickEvent;
var range = document.getElementById('range');
var value=document.getElementById('bufferrange').defaultValue;
var selecterange=value;
function buffer(m)
{
map=m;
range.innerHTML=value;
}
$("#buffer").bind("click", function() {
activatebuffer();
});
function activatebuffer()
{
deactivateClick();
setCursor(cursorStyle);
clickEvent = (evt) => {
// map.removeLayer(vectorLayer_buffer);
// vectorSource.getSource().clear();
var features=[];
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
var lat= lonlat[0];
var lon=lonlat[1];
var coordMin = ol.proj.fromLonLat([lon,lat], 'EPSG:3857');
var coordMax = ol.proj.fromLonLat([lon,lat], 'EPSG:3857');
var extent=[coordMin[0],coordMin[1],coordMax[0],coordMax[1]];
extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent);
map.getView().setCenter(ol.proj.transform([lat, lon], 'EPSG:4326', 'EPSG:3857'));
map.getView().setZoom(12);
getvillagebuffer(lat,lon,selecterange);
console.log(value)
var point = new ol.geom.Circle(ol.proj.transform([lat,lon],'EPSG:4326', 'EPSG:3857'),selecterange*1210);
console.log(point.getCenter());
console.log(point);
var pointFeature = new ol.Feature(point);
features.push(pointFeature);
var vectorSource = new ol.source.Vector({
projection: 'EPSG:4326',
features: features
});
var vectorLayer_buffer = new ol.layer.Vector({
source : vectorSource,
style : customStyleFunction()
});
console.log(vectorLayer_buffer)
map.addLayer(vectorLayer_buffer);
};
map.on('singleclick', clickEvent);
}
function customStyleFunction()
{
return [ new ol.style.Style({
fill : new ol.style.Fill({
opacity : 0.6,
color : 'rgba(255,255,204,0.3)'
}),
stroke : new ol.style.Stroke({
width : 2,
color : 'red',
radius : 1
}),
image : new ol.style.Circle({
fill : new ol.style.Fill({
color : 'rgba(51, 204, 255,0.3)'
}),
stroke : new ol.style.Stroke({
width : 1,
color : 'blue'
}),
radius : 3
}),
})];
}
var bufferrange=$('#bufferrange');
bufferrange.on('change', function () {
range.innerHTML = '';
if(this.value!=="")
{
range.innerHTML = this.value ;
selecterange=this.value;
}
});
function getvillagebuffer(lat,lon,value)
{
var features = [];
var j=getBuffer(lat,lon,value);
if(j!="") {
var data={"lat":lat,"lon":lon,"range":value};
var dataObjectString = JSON.stringify(data);
console.log(dataObjectString);
var enc = Base64.encode(dataObjectString);
window.open('bufferReport?data='+enc,"_blank");
console.log(j);
var geomP, feature;
for (var i = 0; i < j.length; i++) {
latitude=j[i].lon;
longitude=j[i].lat;
geomP = new ol.geom.Point(ol.proj.transform([latitude, longitude ], 'EPSG:4326', 'EPSG:3857'));
feature = new ol.Feature(geomP);
features.push(feature);
}
var point_geom = new ol.geom.Point(
[20, 20]
);
point_feature.setGeometry(point_geom);
var vector_layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [point_feature]
})
})
map.addLayer(vector_layer);
var vectorSource = new ol.source.Vector({
features : features
});
var vectorLayer = new ol.layer.Vector({
source : vectorSource,
style : customStyleFunction()
});
console.log(vectorLayer);
map.addLayer(vectorLayer);
};
}
$(document).ready(function() {
var url_string = window.location;
var url = new URL(url_string);
var data = url.searchParams.get("data");
var d=JSON.parse(Base64.decode(data));
console.log(d);
let lat=d.lat;
let lon=d.lon;
let range=d.range;
var j=getBuffer(lat,lon,range);
if(j) {
loadtable(j);
};
});
function loadtable(data)
{
if ( $.fn.DataTable.isDataTable( '#BufferReportList' ) ) {
$("#BufferReportList").dataTable().fnDestroy();
$('#BufferReportList').empty();
}
var gid=data.map(x=>x.gid);
console.log(gid);
var table=$('#BufferReportList').DataTable({
pageLength : 10,
dom: 'Bfrtip',
'processing': true,
"data":data ,
columns : [{
title : 'SR_NO',
data : 'gid'
}, {
title : 'First Name',
data : 'firstname'
}, {
title : 'Last Name',
data : 'lastname'
}, {
title : 'STATE',
data : 'statename'
}, {
title : 'DISTRICT',
data : 'distictname',
}, {
title : 'TALUKA',
data : 'talukaname',
},{
title : 'VILLAGE',
data : 'villagename',
}
,{title : 'Action',
data: null,
className: "center",
defaultContent: '<button class="btn btn-danger btn-sm " id="delete">Delete </button>'
},{title : 'Action',
data: null,
className: "center",
defaultContent: '<button class="btn btn-primary btn-sm" id="update">Update </button>'
}
]
});
$('#BufferReportList tbody').on('click', 'button#update', function ()
{
var data = table.row( $(this).closest('tr') ).data();
id=data['gid'];
$("#editId").val(id);
$("#editASIMonumentFrom").submit();
} )
$('#BufferReportList tbody').on('click', 'button#delete', function ()
{
var data = table.row( $(this).closest('tr') ).data();
id=data['gid'];
var data=DeleteGeomreportbyId(id);
loadtable(data);
location.reload();
} )
}
var Base64 = {
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
encode: function(input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = Base64._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
}
return output;
},
decode: function(input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = this._keyStr.indexOf(input.charAt(i++));
enc2 = this._keyStr.indexOf(input.charAt(i++));
enc3 = this._keyStr.indexOf(input.charAt(i++));
enc4 = this._keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = Base64._utf8_decode(output);
return output;
},
_utf8_encode: function(string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
_utf8_decode: function(utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while (i < utftext.length) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
}
else if ((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i + 1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}
else {
c2 = utftext.charCodeAt(i + 1);
c3 = utftext.charCodeAt(i + 2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
var map;
function clear(m)
{
map=m;
}
function deactivateClick()
{
setCurser('');
if (clickEvent) {
map.un('singleclick', clickEvent);
}
}
function setCurser(cursorType){
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
var map;
function commonfunctions(m)
{
map=m;
}
function setCursor(cursorType)
{
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
var map;
function controllers(maps)
{
map=maps;
}
function zoomIn()
{
map.getView().animate({
zoom: map.getView().getZoom() + 1,
duration: 500
});
}
function zoomOut()
{
map.getView().animate({
zoom: map.getView().getZoom() - 1,
duration: 500
});
}
function defaultmap()
{
//for Gujarat
// var extent = [ 66.9973, 19.4081, 75.5887, 24.9398];
//for India
var extent = [68.17665, 7.96553, 97.40256, 35.49401];
extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent);
map.getView().animate({
zoom: 4.7,
duration: 600
});
}
function fullscreen()
{
var elem = document.getElementById('target-map');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
function geolocation()
{
// if (navigator.geolocation) {
// navigator.geolocation.getCurrentPosition(showPosition);
// } else {
// alert( "Geolocation is not supported by this browser.");
// }
var geolocation = new ol.Geolocation({
tracking: true
});
geolocation.on('change:position', function() {
var coordinate = geolocation.getPosition();
let lat=coordinate[1];
let lon=coordinate[0];
if(lat!=null && lon!=null)
{
var coordMin = ol.proj.fromLonLat([lon,lat], 'EPSG:3857');
var coordMax = ol.proj.fromLonLat([lon,lat], 'EPSG:3857');
var extent=[coordMin[0],coordMin[1],coordMax[0],coordMax[1]];
map.getView().fit(extent,map.getSize());
}
else
{
alert("Position not found");
}
// map.getView().setCenter(coordinate);
});
}
function showPosition(position) {
alert(position)
var l= "Latitude: " + position.coords.latitude ;
var lon="<br>Longitude: " + position.coords.longitude;
}
function getMousePosition(map)
{
var latnong=fromLotlong(map.getView().getCenter());
var pointerMoveListener = map.on('pointermove', (evt) => {
if (evt.dragging)
{
return;
}
else
{
latnong = fromLotlong(evt.coordinate);
document.getElementById("latlon").innerHTML=latnong;
}
});
document.getElementById("latlon").innerHTML=latnong;
function fromLotlong(coords)
{
let lonlat = ol.proj.transform(coords, 'EPSG:3857', 'EPSG:4326');
let formattedLatlong= [];
return formattedLatlong=lonlat.map(x=>x.toFixed(4));
}
}
function scaleline(map)
{
let target = map.getTarget();
console.log(target);
const scaleLineControl = new ol.control.ScaleLine({
target: document.getElementById(scale),
});
map.addControl(scaleLineControl);
}
function exportpdf(map)
{
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var resolution = document.getElementById('resolution').value;
var dim = dims[format];
var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
map.once('rendercomplete', function() {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = width;
mapCanvas.height = height;
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
var transform = canvas.style.transform;
// Get the transform parameters from the style's transform matrix
var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
// Apply the transform to the export map context
CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
mapContext.drawImage(canvas, 0, 0);
}
});
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
var scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
}, false);
}function exportpdf(map)
{
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var resolution = document.getElementById('resolution').value;
var dim = dims[format];
var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
map.once('rendercomplete', function() {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = width;
mapCanvas.height = height;
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
var transform = canvas.style.transform;
// Get the transform parameters from the style's transform matrix
var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
// Apply the transform to the export map context
CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
mapContext.drawImage(canvas, 0, 0);
}
});
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
var scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
}, false);
}
var map;
var maxFeatures =10;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function findbylocation(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
activateClick(layer);
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
hoverLayer.getSource().clear();
deactivateClick();
clickEvent = (evt) => {
console.log(vectorLayer6);
// if(layer!=null)
/* {
features = layer.getSource().getFeatures();
features.forEach((feature) => {
layer.getSource().removeFeature(feature);
}); */
// }
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,);
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
const url = _getFeatureInfoUrl(
layer.getSource(),
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
);
}
/* if (url)
{
$.get(url, function(response)
{
response = JSON.parse(response);
var a= response.features[0].properties.vill_id
if (data.hasOwnProperty('features'))
{
// convert the GeoJSON response to Feature array
features = geojson.readFeatures(data);
features.forEach((feat) => {
const props = { ...feat.getProperties() };
console.log(props.dist_id);
});
}
});
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}*/
};
map.on('singleclick', clickEvent);
}
function deactivateClick() {
setCursor('');
if (clickEvent) {
map.un('singleclick', sclickEvent);
}
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function _getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
/* const url = source.getSource().getGetFeatureInfoUrl(
coordinate, resolution, 'EPSG:3857',
{'INFO_FORMAT': 'application/json'}); */
const url = source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
FEATURE_COUNT: maxFeatures,
STYLES: styles
});
/* const url = source.getGetFeatureInfoUrl(coordinate, resolution, 'EPSG:3857',
{'INFO_FORMAT': 'application/json'})*/
return url;
}
var map;
function geocoder(m)
{
map=m;
var geocoder = new Geocoder('nominatim', {
provider : 'osm',
key : ' AIzaSyClQ0GOW55zhw4PvFh73FyGLHdSd4bJfpM',
lang : 'en',
//targetType: 'text-input',
placeholder : 'Search location',
autoComplete: true,
limit : 5,
keepOpen : false
});
map.addControl(geocoder);
//Listen when an address is chosen
geocoder.on('addresschosen', function(evt){
var feature = evt.feature,
coord = evt.coordinate,
address = evt.address;
geocoder.getSource().clear();
geocoder.getSource().addFeature(feature);
// some popup solution
content.innerHTML = '<p>'+ address.formatted +'</p>';
overlay.setPosition(coord);
});
}
var map;
var clickEvent;
var vectorLayer6=ol.layer.Vector;
var features= ol.Feature[10];
var geojson = new ol.format.GeoJSON;
var hoverLayer =ol.layer.Vector;
var vectorSource;
var zoomOnRowClick;
var maxFeatures;
var highlightFeatures;
var cursorStyle;
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
var pointStyle =[
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
}),
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'red'
})
})
})
];
function addGeom(m)
{
map=m;
maxFeatures = 1;
cursorStyle = 'crosshair';
zoomOnRowClick = true;
highlightFeatures = true;
addHoverLayer();
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
activateGeomLayer(layer);
}
$("#geom").bind("click", function() {
});
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
pointLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
if(pointStyle)
{
pointLayer.setStyle(pointStyle);
}
if (hoverStyle) {
hoverLayer.setStyle(hoverStyle);
}
map.addLayer(pointLayer);
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function customStyleFunction ()
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
}
function activateGeomLayer(layer)
{
console.log(layer);
hoverLayer.getSource().clear();
pointLayer.getSource().clear();
deactivateClick();
setCursor(cursorStyle);
clickEvent = (evt) =>
{
// onFeatureSelected(evt);
// if(vectorLayer6!=null)
// {
// var f = vectorLayer6.getSource().getFeatures();
// f.forEach((fe) => {
// vectorLayer6.getSource().removeFeature(fe);
// });
//}
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,);
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof layer.Image || layer instanceof layer.Vector || layer instanceof layer.Heatmap || layer instanceof layer.Vector || layer instanceof layer.Layer || layer instanceof layer.VectorTile)
{
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
hoverLayer.getSource().clear();
pointLayer.getSource().clear();
features = geojson.readFeatures(response);
features.forEach((feat) => {
console.log(feat)
const extent=feat.getGeometry().getExtent();
hoverLayer.getSource().addFeature(feat);
map.getView().fit(extent,{ duration: 600});
const props = { ...feat.getProperties() };
console.log(props)
});
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
console.log(a);
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
let villageName=a.VIL_NAME11;
document.getElementById("lat").value =lat;
document.getElementById("lon").value =lon;
loadstate(stateCode);
loaddistrict(stateCode,districtCode);
loadtaluka(districtCode,talukaCode);
loadvillage(talukaCode,villageCode);
})
}
}
else
{
alert(
'Currently only WMS query is supported. Please select another layer!'
);
}
}
map.on('singleclick', clickEvent);
}
function onFeatureSelected(evt= ol.Feature) {
console.log(evt);
hoverLayer.getSource().clear();
if (evt !== null)
{
// const projCode: string = this.selected.getLayer().getSource().getProjection().getCode();
const viewProjCode = map.getView().getProjection().getCode();
const projCode='EPSG:3857';
// const projCode='EPSG:4326';
const feat = evt.clone();
feat.setGeometry(feat.getGeometry().transform(projCode, viewProjCode));
hoverLayer.getSource().addFeature(feat);
map.getView().fit(feat.getGeometry().getExtent(), {
duration: 500
});
}
}
function removeHoverLayer() {
map.removeLayer(hoverLayer);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
var map;
var clickEvent;
var vectorLayer6=ol.layer.Vector;
var features= ol.Feature[10];
var geojson = new ol.format.GeoJSON;
var hoverLayer =ol.layer.Vector;
var vectorSource;
var zoomOnRowClick;
var maxFeatures;
var highlightFeatures;
var cursorStyle;
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
var pointStyle =[
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
}),
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'red'
})
})
})
];
function addGeom(m)
{
map=m;
maxFeatures = 1;
cursorStyle = 'crosshair';
zoomOnRowClick = true;
highlightFeatures = true;
addHoverLayer();
}
$("#geom").bind("click", function() {
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
activateGeomLayer(layer);
});
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
pointLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
if(pointStyle)
{
pointLayer.setStyle(pointStyle);
}
if (hoverStyle) {
hoverLayer.setStyle(hoverStyle);
}
map.addLayer(pointLayer);
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function customStyleFunction ()
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
}
function activateGeomLayer(layer)
{
console.log(layer);
hoverLayer.getSource().clear();
pointLayer.getSource().clear();
deactivateClick();
setCursor(cursorStyle);
clickEvent = (evt) =>
{
// onFeatureSelected(evt);
// if(vectorLayer6!=null)
// {
// var f = vectorLayer6.getSource().getFeatures();
// f.forEach((fe) => {
// vectorLayer6.getSource().removeFeature(fe);
// });
//}
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,);
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof layer.Image || layer instanceof layer.Vector || layer instanceof layer.Heatmap || layer instanceof layer.Vector || layer instanceof layer.Layer || layer instanceof layer.VectorTile)
{
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
hoverLayer.getSource().clear();
pointLayer.getSource().clear();
features = geojson.readFeatures(response);
demo.showSwal('success-message');
features.forEach((feat) => {
console.log(feat)
const extent=feat.getGeometry().getExtent();
hoverLayer.getSource().addFeature(feat);
map.getView().fit(extent,{ duration: 600});
const props = { ...feat.getProperties() };
console.log(props)
});
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
console.log(a);
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
let villageName=a.VIL_NAME11;
//selectedstate(stateCode);
//selecteddistrict(districtCode);
//selectedtaluka(talukaCode);
//selectedvillage(villageCode);
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
//console.log(b);
var enc = Base64.encode(dataObjectString);
console.log(enc);
window.open('addgeom?id='+enc,"_blank");
})
}
}
else
{
alert(
'Currently only WMS query is supported. Please select another layer!'
);
}
}
map.on('singleclick', clickEvent);
}
function onFeatureSelected(evt= ol.Feature) {
console.log(evt);
hoverLayer.getSource().clear();
if (evt !== null)
{
// const projCode: string = this.selected.getLayer().getSource().getProjection().getCode();
const viewProjCode = map.getView().getProjection().getCode();
const projCode='EPSG:3857';
// const projCode='EPSG:4326';
const feat = evt.clone();
feat.setGeometry(feat.getGeometry().transform(projCode, viewProjCode));
hoverLayer.getSource().addFeature(feat);
map.getView().fit(feat.getGeometry().getExtent(), {
duration: 500
});
}
}
function removeHoverLayer() {
map.removeLayer(hoverLayer);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
var map;
var layers=new ol.layer.Vector;
var feature=new ol.Feature;
var geometryType='Point';
var precision = 2;
var cursorStyle = 'pointer';
var fillColor = [255, 255, 255, 0.5];
var strokeColor = [72, 72, 72, 1];
var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1];
var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7];
var font = 'normal 14px Arial';
var draw;
var displaylength = document.getElementById('distance');
var displayarea = document.getElementById('area');
var sourceDraw = new ol.source.Vector();
var vectorDraw = new ol.layer.Vector({
source: sourceDraw,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
}),
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'red'
})
})
})
});
function geom(m)
{
map=m
units= map.getView().getProjection().getUnits();
layers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: (feature ) => {
return getStyle(feature);
}
});
// activateDraw();
}
function selectedType(gtype)
{
displaylength.innerHTML = '';
displayarea.innerHTML = '';
geometryType=gtype;
activateDraw();
}
function activateDraw()
{
deactivateDraw();
map.addLayer(layers);
var wkt = new ol.format.WKT();
//setCursor(cursorStyle);
draw= new ol.interaction.Draw({
source: vectorDraw.getSource(),
type: geometryType,
});
draw.on('drawstart', (e) => {
map.removeLayer(vectorDraw);
sourceDraw.clear();//
layers.getSource().clear();
});
draw.on('drawend', (e) => {
let feature = e.feature;
let featureClone = feature.clone();
featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326');
modifiedWKT = wkt.writeFeature(featureClone);
map.addLayer(vectorDraw);
let area=getLengthOrArea(feature);
let cords=Addpolygongeometry(feature);
addGeom(cords,modifiedWKT,area);
const feat = new ol.Feature({
geometry: e.target
}
);
getLengthOrArea(feat);
});
draw.setActive(true);
map.addInteraction(draw);
}
function deactivateDraw() {
setCursor('');
value = null;
try {
map.removeInteraction(draw);
layers.getSource().clear();
map.removeLayer(layers);
sourceDraw.clear();
} catch (error) {}
}
function getStyle(feature)
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color:fillColor
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: strokeColor,
width: 2,
lineDash: [5, 5]
}),
text: new ol.style.Text({
textAlign: 'center',
textBaseline: 'middle',
text: getLengthOrArea(feature),
font: font,
fill: new ol.style.Fill({
color: textColor
}),
offsetX: 0,
offsetY: 0,
rotation: 0,
stroke: new ol.style.Stroke({
color: textOutlineColor,
width: 3
})
})
})
];
}
function Addpolygongeometry(feature)
{
let cordinate = '';
switch (geometryType) {
case 'LineString':
try {
cordinate = feature.getGeometry().getFirstCoordinate();
} catch (error) {}
break;
case 'Polygon':
try {
cordinate =feature.getGeometry().getFirstCoordinate();
} catch (error) {}
break;
case 'Square':
try {
cordinate =feature.getGeometry().getFirstCoordinate();
} catch (error) {}
break;
default:
try {
cordinate = feature.getGeometry().getCoordinates();
} catch (error) {}
break;
}
// if (cordinate !== '') {
// cordinate += cordinate;
// }
return cordinate;
}
function addGeom(cords,wkt,area)
{
console.log(cords);
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
var lonlat = ol.proj.transform(cords, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
cords,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
features = geojson.readFeatures(response);
features.forEach((feat) => {
console.log(feat)
// const extent=feat.getGeometry().getExtent();
// hoverLayer.getSource().addFeature(feat);
//map.getView().fit(extent,{ duration: 600});
const props = { ...feat.getProperties() };
console.log(props)
});
//const extent=a.getGeometry().getExtent();
////alert(extent);
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
console.log(a);
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode,"area":area,"wkt":wkt};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
console.log(dataObjectString);
var enc = Base64.encode(dataObjectString);
window.open('addgeom?id='+enc,"_blank");
})
}
}
function getLengthOrArea(feature)
{
let value = '';
const geom= feature.getGeometry();
switch (geometryType)
{
case 'LineString':
try {
value = parseFloat(geom.getLength().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Polygon':
try {
value = parseFloat(geom.getArea().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
default:
try {
value = parseFloat(geom.getRadius().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
}
if (value !== '')
{
value = value;
displaylength.innerHTML = value + ' m';
displayarea.innerHTML = value + ' m ²';
}
return value;
}
$(document).ready(function() {
var url_string = window.location;
var url = new URL(url_string);
var data = url.searchParams.get("id");
var d=JSON.parse(Base64.decode(data));
console.log(d);
let stateCode=d.stateCode;
let districtCode=d.districtCode;
let talukaCode=d.talukaCode;
let villageCode=d.villageCode;
let lat=d.lat;
let lon=d.lon;
let wkt=d.wkt;
loadstate(stateCode);
loaddistrict(stateCode,districtCode);
loadtaluka(districtCode,talukaCode);
loadvillage(talukaCode,villageCode);
document.getElementById("lat").value =lat.toFixed(4);
document.getElementById("lon").value =lon.toFixed(4);
document.getElementById("wktGeom").value = wkt;
});
function loadstate(stateCode)
{
var stateId_Hidden=stateCode;
var j=getState();
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
if (stateId_Hidden == j[i].statecode)
{
options += '<option value="' + j[i].statecode + '" selected="selected">' + j[i].statename+ '</option>';
}
else {
options += '<option value="' + j[i].statecode + '">' + j[i].statename+ '</option>';
}
}
$("select#selectedstate").html(options);
}
function loaddistrict(stateCode,districtCode)
{
var distictId_Hidden=districtCode;
var j=getDistrict(stateCode);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (distictId_Hidden == j[i].districtcode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].districtcode + '" selected="selected">' + j[i].districtname+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].districtcode + '">' + j[i].districtname+ '</option>';
}
}
$("select#selecteddistrict").html(options);
}
function loadtaluka(districtCode,talukaCode)
{
var talukaId_Hidden=talukaCode;
var j=getTalukas(districtCode);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (talukaId_Hidden == j[i].talukacode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].talukacode + '" selected="selected">' + j[i].talukaname+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].talukacode + '">' + j[i].talukaname+ '</option>';
}
}
$("select#selectedtaluka").html(options);
}
function loadvillage(talukaCode,villageCode)
{
var villageId_Hidden=villageCode;
var j=getVillage(talukaCode);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (villageId_Hidden == j[i].villagecode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].villagecode + '" selected="selected">' + j[i].villagename+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].villagecode + '">' + j[i].villagename+ '</option>';
}
}
$("select#selectedvillage").html(options);
}
var map;
var layers=new ol.layer.Vector;
var feature=new ol.Feature;
var geojson = new ol.format.GeoJSON;
var geometryType = 'Point';
var precision = 2;
var cursorStyle = 'crosshair';
var fillColor = [255, 255, 255, 0.5];
var strokeColor = [72, 72, 72, 1];
var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1];
var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7];
var font = 'normal 14px Arial';
var maxFeatures=1;
var draw;
var displaylength = document.getElementById('distance');
var displayarea = document.getElementById('area');
var displayradious = document.getElementById('radious');
function selectedType(gtype)
{
displaylength.innerHTML = '';
displayarea.innerHTML = '';
displayradious.innerHTML = '';
geometryType=gtype;
activateDraw(geometryType);
}
function activateDraw(geometryType)
{
hoverLayer.getSource().clear();
// vectorDraw.getSource().clear();
var wkt = new ol.format.WKT();
//deactivateDraw();
map.addLayer(layers);
setCursor(cursorStyle);
var sourceDraw = new ol.source.Vector();
var vectorDraw = new ol.layer.Vector({
source: sourceDraw,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
}),
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'red'
})
})
})
});
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
draw= new ol.interaction.Draw({
source: vectorDraw.getSource(),
type: geometryType,
// style: (feature) => {
// return getStyle(feature);
// }
});
map.addInteraction(draw);
draw.on('drawstart', (e) => {
layers.getSource().clear();
});
draw.on('drawend', (e) => {
let feature = e.feature;
let featureClone = feature.clone();
featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326');
modifiedWKT = wkt.writeFeature(featureClone);
map.addLayer(vectorDraw);
let coords= feature.getGeometry().getCoordinates();
let firstcoords= feature.getGeometry().getFirstCoordinate();
let area=getLengthOrArea(feature);
//console.log(wkt);
alctivateLayer(modifiedWKT,area,firstcoords)
const feat = new ol.Feature({
geometry: e.target
}
);
map.removeInteraction(draw);
});
draw.setActive(true);
}
function alctivateLayer(wkt,area,firstcoords)
{
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
var lonlat = ol.proj.transform(firstcoords, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
firstcoords,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
features = geojson.readFeatures(response);
features.forEach((feat) => {
console.log(feat)
const extent=feat.getGeometry().getExtent();
hoverLayer.getSource().addFeature(feat);
map.getView().fit(extent,{ duration: 600});
const props = { ...feat.getProperties() };
console.log(props)
});
//const extent=a.getGeometry().getExtent();
////alert(extent);
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode,"area":area,"wkt":wkt};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
console.log(dataObjectString);
var enc = Base64.encode(dataObjectString);
window.open('monument?id='+enc,"_blank");
})
}
}
function deactivateDraw() {
setCursor('');
value = null;
try {
map.removeInteraction(draw);
layers.getSource().clear();
map.removeLayer(layers);
} catch (error) {}
}
function measure(m)
{
map=m
// Read user-defined parameters
units= map.getView().getProjection().getUnits();
layers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: (feature ) => {
return getStyle(feature);
}
});
addHoverLayer();
// activateDraw(geometryType)
}
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
if (hoverStyle) {
hoverLayer.setStyle(hoverStyle);
}
map.addLayer(pointLayer);
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function getStyle(feature)
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color:fillColor
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: strokeColor,
width: 2,
lineDash: [5, 5]
}),
text: new ol.style.Text({
textAlign: 'center',
textBaseline: 'middle',
text: getLengthOrArea(feature),
font: font,
fill: new ol.style.Fill({
color: textColor
}),
offsetX: 0,
offsetY: 0,
rotation: 0,
stroke: new ol.style.Stroke({
color: textOutlineColor,
width: 3
})
})
})
];
}
function setCursor(cursorType)
{
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getLengthOrArea(feature)
{
let value = '';
const geom= feature.getGeometry();
switch (geometryType)
{
case 'LineString':
try {
value = parseFloat(geom.getLength().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Polygon':
try {
value = parseFloat(geom.getArea().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Circle':
try {
value = parseFloat(geom.getRadius().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
default:
break;
}
if (value !== '')
{
value = value;
displaylength.innerHTML = value + ' m';
displayarea.innerHTML = value + ' m ²';
displayradious.innerHTML = value+ ' m';
}
return value;
}
var map;
var layers=new ol.layer.Vector;
var feature=new ol.Feature;
var geojson = new ol.format.GeoJSON;
var geometryType='Point';
var precision = 2;
var cursorStyle = 'crosshair';
var fillColor = [255, 255, 255, 0.5];
var strokeColor = [72, 72, 72, 1];
var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1];
var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7];
var font = 'normal 14px Arial';
var maxFeatures=1;
var draw;
var displaylength = document.getElementById('distance');
var displayarea = document.getElementById('area');
var displayradious = document.getElementById('radious');
function selectedType(gtype)
{
displaylength.innerHTML = '';
displayarea.innerHTML = '';
displayradious.innerHTML = '';
geometryType=gtype;
}
function activateDraw()
{
var wkt = new ol.format.WKT();
deactivateDraw();
map.addLayer(layers);
setCursor(cursorStyle);
draw= new ol.interaction.Draw({
source: layers.getSource(),
type: geometryType,
style: (feature) => {
return getStyle(feature);
}
});
draw.on('drawstart', (e) => {
layers.getSource().clear();
});
map.addInteraction(draw);
draw.on('drawend', (e) => {
let feature = e.feature;
let featureClone = feature.clone();
featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326');
modifiedWKT = wkt.writeFeature(featureClone);
let coords= feature.getGeometry().getCoordinates();
let firstcoords= feature.getGeometry().getFirstCoordinate();
let area=getLengthOrArea(feature);
//console.log(wkt);
alctivateLayer(modifiedWKT,area,firstcoords)
const feat = new ol.Feature({
geometry: e.target
}
);
map.removeInteraction(draw);
});
draw.setActive(true);
}
function alctivateLayer(wkt,area,firstcoords)
{
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
var lonlat = ol.proj.transform(firstcoords, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
firstcoords,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode,"area":area,"wkt":wkt};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
console.log(dataObjectString);
var enc = Base64.encode(dataObjectString);
window.open('monument?id='+enc,"_blank");
})
}
}
function deactivateDraw() {
setCursor('');
value = null;
try {
map.removeInteraction(draw);
layers.getSource().clear();
map.removeLayer(layers);
} catch (error) {}
}
function measure(m)
{
map=m
// Read user-defined parameters
units= map.getView().getProjection().getUnits();
layers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: (feature ) => {
return getStyle(feature);
}
});
activateDraw();
}
function getStyle(feature)
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color:fillColor
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: strokeColor,
width: 2,
lineDash: [5, 5]
}),
text: new ol.style.Text({
textAlign: 'center',
textBaseline: 'middle',
text: getLengthOrArea(feature),
font: font,
fill: new ol.style.Fill({
color: textColor
}),
offsetX: 0,
offsetY: 0,
rotation: 0,
stroke: new ol.style.Stroke({
color: textOutlineColor,
width: 3
})
})
})
];
}
function setCursor(cursorType)
{
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getLengthOrArea(feature)
{
let value = '';
const geom= feature.getGeometry();
switch (geometryType)
{
case 'LineString':
try {
value = parseFloat(geom.getLength().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Polygon':
try {
value = parseFloat(geom.getArea().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Circle':
try {
value = parseFloat(geom.getRadius().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
default:
break;
}
if (value !== '')
{
value = value;
displaylength.innerHTML = value + ' m';
displayarea.innerHTML = value + ' m ²';
displayradious.innerHTML = value+ ' m';
}
return value;
}
// function myMap() {
// var directionsDisplay = new google.maps.DirectionsRenderer();
// var map;
// var mapProp= {
// center:new google.maps.LatLng(23.232683,72.641768),
// zoom:4.5,
// };
// map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
// directionsDisplay.setMap(map);
// google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
// }
// function calcRoute()
// {
// var directionsService = new google.maps.DirectionsService();
// var directionsDisplay = new google.maps.DirectionsRenderer();
// var start = new google.maps.LatLng(23.1508, 72.3600);
// var end = new google.maps.LatLng(23.1642, 72.6549);
// var request = {
// origin: start,
// destination: end,
// travelMode: google.maps.TravelMode.DRIVING
// };
// directionsService.route(request, function(response, status) {
// if (status == google.maps.DirectionsStatus.OK) {
// directionsDisplay.setDirections(response);
// directionsDisplay.setMap(map);
// } else {
// alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
// }
// });
// }
function mapLocation() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 4.5 ,
center:new google.maps.LatLng(23.232683,72.641768),
};
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
directionsDisplay.setMap(map);
google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
}
function calcRoute() {
var start = new google.maps.LatLng(23.1508, 72.3600);
var end = new google.maps.LatLng(23.1642, 72.6549);
var bounds = new google.maps.LatLngBounds();
bounds.extend(start);
bounds.extend(end);
map.fitBounds(bounds);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
} else {
alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
mapLocation();
var map;
var maxFeatures =1;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function identify(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Airport');
var Groupcountt=0;
map.getLayers().forEach(function (layerr, i) {
Groupcountt=i+1;
var groupnamee=layerr.get('name');
if(groupnamee=='Identify')
{
var groupcontentt='';
groupcontentt+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontentt +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" aria-expanded="true" href="#basemap-choicee'+i+'" aria-controls="collapseOne" class="collapsed">'+groupnamee+':<span id="'+'layerscountt'+i+'"></span><i class="material-icons">keyboard_arrow_down</i></a></h5></div><div id="basemap-choicee'+i+'" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionn" style=""><div class="card-body" id="'+'layerr'+i+'"></div> </div></div>';
$('#groupss').append($(groupcontentt));
bindInputs('#layerr' + i, layerr);
var subGroupcountt=0;
if (layerr instanceof ol.layer.Group) {
layerr.getLayers().forEach(function (sublayerr, j) {
subGroupcountt=j+1;
var basecontentt = '';
let layernamee=sublayerr.get('name');
basecontentt += '<div class="togglebutton" id="layerr'+i+j+'"><label for="visiblee'+i+j+'"> <input id="visiblee'+i+j+'" type="checkbox" class="visible" /> <span class="toggle"></span>'+layernamee+'</label> </div>';
$('#layerr'+i).append($(basecontentt));
bindInputss('#layerr' + i + j, sublayerr);
});
$('#layerscountt'+i).append(subGroupcountt);
}
}
});
$('#groupscountt').append(Groupcountt);
}
function bindInputss(layerid, layer)
{
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
if(layer.getVisible()==true)
{
activateClick(layer);
}
else{
deactivateClick();
}
});
visibilityInput.prop('checked', layer.getVisible());
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
console.log(layer)
var layername=layer.get('name');
// hoverLayer.getSource().clear();
// deactivateClick();
clickEvent = (evt) =>
{
var coordinate = evt.coordinate;
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
const styles = layer.getSource().getParams().STYLES;
var url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
'EPSG:3857', {
'INFO_FORMAT' : 'application/json',
FEATURE_COUNT: maxFeatures,
STYLES: styles
});
if (url)
{
$.get(url, function(response) {
response = JSON.parse(response);
{
{
const a=response.features.map(x=>x.properties)[0];
console.log(a);
if(layername=='Rail')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.bsid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='National Highway')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.objectid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='Park Boundry')
{
content.innerHTML = '<p style="color:green;">Statename:<span style="color:black">' + a.st_name + '</span></p><p style="color:green;">District:<span style="color:black">' + a.dist_name + '</span></p><p style="color:green;">Taluka:<span style="color:black">' + a.sub_dist + '</span></p><p style="color:green;">Village:<span style="color:black">' + a.vname + '</span></p><p style="color:green;">Park Name:<span style="color:black">' + a.park_name + '</span></p><p style="color:green;">Park Type:<span style="color:black">' + a.park_type + '</span></p>';
}
overlay.setPosition(coordinate);
// overlay.setPosition(evt.coordinate);
}
}
});
}
else{
alert("NOt Suported");
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}
};
map.on('singleclick', clickEvent);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
return source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
// FEATURE_COUNT: maxFeatures,
// STYLES: styles
});
// return url;
}
var map;
var maxFeatures =10;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function identify(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Airport');
var Groupcountt=0;
map.getLayers().forEach(function (layerr, i) {
Groupcountt=i+1;
var groupnamee=layerr.get('name');
if(groupnamee=='Identify')
{
var groupcontentt='';
groupcontentt+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontentt +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" aria-expanded="true" href="#basemap-choicee'+i+'" aria-controls="collapseOne" class="collapsed">'+groupnamee+':<span id="'+'layerscountt'+i+'"></span><i class="material-icons">keyboard_arrow_down</i></a></h5></div><div id="basemap-choicee'+i+'" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionn" style=""><div class="card-body" id="'+'layerr'+i+'"></div> </div></div>';
$('#groupss').append($(groupcontentt));
bindInputs('#layerr' + i, layerr);
var subGroupcountt=0;
if (layerr instanceof ol.layer.Group) {
layerr.getLayers().forEach(function (sublayerr, j) {
subGroupcountt=j+1;
var basecontentt = '';
let layernamee=sublayerr.get('name');
basecontentt += '<div class="togglebutton" id="layerr'+i+j+'"><label for="visiblee'+i+j+'"> <input id="visiblee'+i+j+'" type="checkbox" class="visible" /> <span class="toggle"></span>'+layernamee+'</label> </div>';
$('#layerr'+i).append($(basecontentt));
bindInputss('#layerr' + i + j, sublayerr);
});
$('#layerscountt'+i).append(subGroupcountt);
}
}
});
$('#groupscountt').append(Groupcountt);
}
function bindInputss(layerid, layer)
{
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
if(layer.getVisible()==true)
{
activateClick(layer);
}
else{
deactivateClick();
}
});
visibilityInput.prop('checked', layer.getVisible());
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
console.log(layer)
var layername=layer.get('name');
// hoverLayer.getSource().clear();
console.log(layername);
deactivateClick();
clickEvent = (evt) =>
{
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
var url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
'EPSG:3857', {
'INFO_FORMAT' : 'application/json',
});
if (url)
{
$.get(url, function(response) {
response = JSON.parse(response);
{
{
const a=response.features.map(x=>x.properties)[0];
console.log(a);
if(layername=='Rail')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.bsid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='National Highway')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.objectid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='Park Boundry')
{
content.innerHTML = '<p style="color:green;">Statename:<span style="color:black">' + a.st_name + '</span></p><p style="color:green;">District:<span style="color:black">' + a.dist_name + '</span></p><p style="color:green;">Taluka:<span style="color:black">' + a.sub_dist + '</span></p><p style="color:green;">Village:<span style="color:black">' + a.vname + '</span></p><p style="color:green;">Park Name:<span style="color:black">' + a.park_name + '</span></p><p style="color:green;">Park Type:<span style="color:black">' + a.park_type + '</span></p>';
}
overlay.setPosition(evt.coordinate);
}
}
});
}
else{
alert("NOt Suported");
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}
};
map.on('singleclick', clickEvent);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
return source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
// FEATURE_COUNT: maxFeatures,
// STYLES: styles
});
// return url;
}
function switchlayers(map)
{
const layerGroups = map.getLayers().getArray();
const groupCount=layerGroups.length
$('#groupscount').append(groupCount);
const groupcount=layerGroups.length;
for(var j=0;j<layerGroups.length;j++)
{
var groupname=layerGroups[j].get('name');
var groupcontent='';
groupcontent+='';
groupcontent +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" href="#basemap-choice'+j+'" aria-controls="collapseOne" class="collapsed">'+groupname+':<span id="'+'layerscount'+j+'"></span><i class="material-icons">keyboard_arrow_down</i></a></h5></div><div id="basemap-choice'+j+'" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" style=""><div class="card-body" id="'+'layers'+j+'"></div> <div id="'+'slider-range-min'+j+'" ></div></div></div>';
$('#groups').append($(groupcontent));
if(layerGroups[j].getVisible()==true)
{
let sublayers=new Array();
for(var i=0;i<layerGroups[j].getLayers().getArray().length;i++)
{
sublayers.push(layerGroups[j].getLayers().getArray()[i]);
}
getlayersfunction(sublayers,j);
sublayers=[];
}
}
function getlayersfunction(sublayers,ind)
{
$.each(sublayers, function(index)
{
var basecontent = '';
var layer = this.getProperties();
console.log(layer.name+"-"+layer.visible);
if(layer.visible==true) {
basecontent += '<div class="togglebutton"><label ><input id="check'+ind+'" type="checkbox" name="radio-basemap" checked=""><span class="toggle"></span>'+layer.name+'</label></div>';
}
else
{
basecontent += '<div class="togglebutton"><label ><input id="check'+ind+'" type="checkbox" name="radio-basemap" ><span class="toggle"></span>'+layer.name+'</label></div>';
}
$('#layers'+ind).append($(basecontent));
});
$('#layerscount'+ind).append(sublayers.length);
}
}
function switchlayers(map)
{
var Groupcount=0;
bindallopacity();
map.getLayers().forEach(function (layer, i) {
Groupcount=i+1;
var groupname=layer.get('name');
if(groupname!=undefined && groupname!='Identify')
{
var groupcontent='';
groupcontent+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontent +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" href="#basemap-choice'+i+'" aria-controls="collapseOne" class="collapsed">'+groupname+':<span id="'+'layerscount'+i+'"></span><i class="material-icons">keyboard_arrow_down</i></a></h5></div><div id="basemap-choice'+i+'" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" style=""><div class="card-body" id="'+'layer'+i+'"></div> <div id="'+'slider-range-min'+i+'" ></div></div></div>';
$('#groups').append($(groupcontent));
bindInputs('#layer' + i, layer);
var subGroupcount=0;
if (layer instanceof ol.layer.Group) {
layer.getLayers().forEach(function (sublayer, j) {
subGroupcount=j+1;
var basecontent = '';
let layername=sublayer.get('name');
basecontent += '<div class="togglebutton" id="layer'+i+j+'"><label for="visible'+i+j+'"> <input id="visible'+i+j+'" type="checkbox" class="visible" /> <span class="toggle"></span>'+layername+'</label> <input id="opacity" class="opacity" type="range" min="0" max="1" step="0.01"/></div>';
$('#layer'+i).append($(basecontent));
bindInputs('#layer' + i + j, sublayer);
});
$('#layerscount'+i).append(subGroupcount);
}
}
});
$('#groupscount').append(Groupcount);
}
function bindallopacity()
{
$('#opacity').hide();
var allopacity=$('#allopacity');
allopacity.on('change', function () {
});
}
function bindInputs(layerid, layer) {
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
});
visibilityInput.prop('checked', layer.getVisible());
var opacityInput = $(layerid + ' input.opacity');
opacityInput.on('input change', function () {
layer.setOpacity(parseFloat(this.value));
});
opacityInput.val(String(layer.getOpacity()));
}
var map;
var legendImg;
var ImageArray=[];
function legend(m)
{
map=m;
// map.getLayers().forEach(function (grouplayers) {
// grouplayers.getLayers().forEach(function (layer) {
// if(layer.getVisible()==true)
// {
// console.log(layer);
// // const layername = layer.params["LAYERS"] ;
// // console.log(layername);
// }
// });
// });
// const grouplayers = map.getLayers().getArray();
// grouplayers.forEach((sublayers) => {
// // alert(sublayers.get('name'));
// sublayers.forEach((layer) => {
// if(layer.getVisible()==true)
// {
// alert(layer.get('name'));
// // const layername = layer.getSource().getParams().LAYERS ;
// // this.legendImg = gidcGisUrl + '?REQUEST=GetLegendGraphic&sld_version=1.0.0&layer=' + layername + '&format= image/png &legend_options=fontSize:13;fontName:san-sarif;bgColor:0xffffff;forceLabels:on'+'&WIDTH=12&HEIGHT=12&Scale=1';
// //this.ImageArray.push( this.legendImg);
// }
// });
// });
}
function updateLegend(layer) {
let layername=layer.getSource().getParams().LAYERS;
var graphicUrl = '?REQUEST=GetLegendGraphic&sld_version=1.0.0&layer=' + layername + '&format= image/png &legend_options=fontSize:13;fontName:san-sarif;bgColor:0xffffff;forceLabels:on'+'&WIDTH=12&HEIGHT=12&Scale=1';
var img = document.getElementById('legend');
img.src = graphicUrl;
};
/**
* Elements that make up the popup.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* Create an overlay to anchor the popup to the map.
*/
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
window.onload=init;
function init()
{
let india=[ 81.191694, 23.8086 ];
let jalandhar=[75.57917,31.32556];
var map = new ol.Map({
overlays: [overlay],
target: 'target-maps',
view: new ol.View({
center : ol.proj.transform(india, 'EPSG:4326','EPSG:3857'),
zoom:4.0,
// zoom :9.5,
minZoom:4,
maxZoom: 17
}),
layers:[
CommonlayersGroup,indianMapLayersGroup,
IdentifyLayerGroup,geomLayerGroup
],
controls: ol.control.defaults({
zoom: false,
attribution: true,
rotate: false
}).extend([]),
// new ol.control.FullScreen()
});
legend(map);
geom(map);
//buffer(map);
controllers(map);
navigation(map);
switchlayers(map);
getMousePosition(map);
scaleline(map);
exportpdf(map);
identify(map);
//addGeom(map);
commonfunctions(map);
//swipe(map);
//geocoder(map);
}
var map
var GisUrl='https://gis.ncog.gov.in/GISWeb/wms';
var hoverLayer =ol.layer.Vector;
var geojson = new ol.format.GeoJSON;
var vectorSource;
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
var statelist=[];
var districtlist=[];
var talukalist=[];
var villagelist=[];
var cql;
var Alllayers=[];
var Alllayersname= [];
var layersname="Village,Taluka,District,State";
var layer="VillageIndia,TalukaIndia,DistrictIndia,StateIndia";
function navigation(m)
{
map=m;
zoomOnRowClick = true;
highlightFeatures = true;
getstate();
addHoverLayer();
}
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
if (hoverStyle) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(this.hoverLayer);
}
}
function getstate()
{
statelist=[];
districtlist=[];
talukalist=[];
villagelist=[];
var options="";
var j=getState();
if(j)
{
var statename="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].statecode+ '" >'
+ j[i].statename + '</option>';
statelist.push({"statecode":j[i].statecode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
$("select#state").html(options);
}
$("#state").change(function(){
var selectedstatecode = $(this).children("option:selected").val();
var s=statelist.find(x=>x.statecode==selectedstatecode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removestatelayer(selectedstatecode);
getDistricts(selectedstatecode);
var vectorSource = new ol.source.Vector({
url: 'https://gis.ncog.gov.in/GISWeb/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:StateIndia&PROPERTYNAME=geom,stcode11&CQL_FILTER=stcode11=%27'+selectedstatecode +'%27&maxFeatures=50&outputFormat=json',
format :new ol.format.GeoJSON()
});
var vectorLayer1 = new ol.layer.Vector({
source: vectorSource,
style: customStyleFunction,
});
map.addLayer(vectorLayer1);
})
}
function customStyleFunction()
{
return [new styles.Style({
stroke: new styles.Stroke({
color: '#00ff00',
width: 2
})
})];
}
function zoom(extent)
{
extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent), { duration: 200 };
}
function clearmap()
{
const layers = map.getLayers().getArray();
layers.forEach((layer) => {
if(layer.getVisible()==true)
{
layer.setVisible(false)
}
});
}
function removestatelayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="STCODE11="+selectedcode;
}
else if (Alllayers[j]=="VillageIndia")
{
cql="ST_2011="+selectedcode;
}
else
{
cql="stcode11="+selectedcode;
}
if (Alllayers[j]=="VillageIndia")
{
new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS' : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 256,
})
}
else if (Alllayers[j]=="TalukaIndia")
{
var new_lyr =
new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS': Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 800,//1024,
// name : Alllayersname[j]
})
}
else
{
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url :GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS': Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
// name : Alllayersname[j]
})
}
// newlyr=new_lyr;
map.addLayer(new_lyr);
}
}
function getDistricts(selectedstatecode)
{
if(selectedstatecode!=null)
{
districtlist=[];
talukalist=[];
villagelist=[];
var options="";
var j=getDistrict(selectedstatecode);
if(j)
{
var districtname="";
for ( var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].districtcode+ '" >'
+ j[i].districtname + '</option>';
districtlist.push({"districtcode":j[i].districtcode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
$("select#district").html(options);
}
$("#district").change(function(){
var selecteddistrictcode = $(this).children("option:selected").val();
var s=districtlist.find(x=>x.districtcode==selecteddistrictcode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removedistrictlayer(selecteddistrictcode)
getTaluka(selecteddistrictcode)
});
}
}
function removedistrictlayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="DTCODE11='"+selectedcode+"'";
}
else if (Alllayers[j]=="VillageIndia")
{
cql="DT_2011='"+selectedcode+"'";
}
else
{
cql="dtcode11='"+selectedcode+"'";
}
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+cql_dist);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution :256,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution :800,
});
}
else
{
// alert("else...."+Alllayers[j]);
// alert("cql...."+cql_dist);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
//maxResolution : 256,
});
}
// newlyr=new_lyr;
map.addLayer(new_lyr);
}
}
function getTaluka(selecteddistrictcode)
{
if(selecteddistrictcode!=null)
{
talukalist=[];
villagelist=[];
var options="";
var j=getTalukas(selecteddistrictcode)
if(j)
{
var talukaname="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
if(j[i].talukacode!=null)
{
options += '<option value="' + j[i].talukacode+ '" >'
+ j[i].talukaname + '</option>';
talukalist.push({"talukacode":j[i].talukacode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
}
$("select#taluka").html(options);
}
}
$("#taluka").change(function(){
var selectedtalukacode = $(this).children("option:selected").val();
getVillages(selectedtalukacode);
var s=talukalist.find(x=>x.talukacode==selectedtalukacode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removetalukalayer(selectedtalukacode);
})
}
function removetalukalayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="SDTCODE11='"+selectedcode+"'";
}
else if (Alllayers[j]=="VillageIndia")
{
cql="SDT_2011='"+selectedcode+"'";
}
/* else
{
cql="dtcode11='"+dist+"'";
}*/
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 856,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
//maxResolution : 1024,//1024,
});
}
map.addLayer(new_lyr);
}
}
function getVillages(selectedtalukacode)
{
var options="";
var j=getVillage(selectedtalukacode)
if(j)
{
var villagename="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
if(j[i].villagecode!=null)
{
options += '<option value="' + j[i].villagecode+ '" >'
+ j[i].villagename + '</option>';
villagelist.push({"villagecode":j[i].villagecode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
}
$("select#village").html(options);
}
}
$("#village").change(function(){
var selectedvillagecode = $(this).children("option:selected").val();
var s=villagelist.find(x=>x.villagecode==selectedvillagecode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removevillagelayer(selectedvillagecode);
})
function removevillagelayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if (Alllayers[j]=="VillageIndia")
{
cql="VIL_2011='"+selectedcode+"'";
}
/* else
{
cql="dtcode11='"+dist+"'";
}*/
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 256,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 800,//1024,
});
}
map.addLayer(new_lyr);
}
}
var apiurl="https://api3.ncog.gov.in/BaseRest/";
function getState()
{
var data=null;
$.ajax({
url:apiurl+"getstate",
method:"POST",
dtaType:"json",
async: false,
data:{},
success:function(j)
{
data=j;
},
error:function (error)
{
alert(error);
}
});
return data;
}
function getDistrict(id)
{
//var code={};
// code.statecode=id;
// var codobject=JSON.stringify(code);
var data=null;
$.ajax({
url:apiurl+"getdistrict/"+id,
method:"POST",
async: false,
contentType:"application/json;charset=utf-8",
// data:codobject,
success:function(j)
{
data=j;
},
error:function(error)
{
alert(error);
}
});
return data;
}
function getTalukas(id)
{
// var code={};
/// code.districtcode=id;
// var codobject=JSON.stringify(code);
var options="";
var data=null;
$.ajax({
url:apiurl+"gettaluka/"+id,
method:"POST",
async: false,
contentType:"application/json;charset=utf-8",
// data:codobject,
success:function(j)
{
data=j;
},
error:function(error)
{
alert(error);
}
});
return data;
}
function getVillage(id)
{
// var code={};
// code.talukacode=id;
// var codobject=JSON.stringify(code);
var options="";
var data=null;
$.ajax({
url:apiurl+"getvillage/"+id,
method:"POST",
async: false,
contentType:"application/json;charset=utf-8",
// data:codobject,
success:function(j)
{
data=j;
},
error:function(error)
{
alert(error);
}
});
return data;
}
function getBuffer(lat,lon,range)
{
var data=null;
$.ajax({
url:"/buffer/"+lat+"/"+lon+"/"+range,
method:"GET",
async: false,
contentType:"application/json;charset=utf-8",
// data:codobject,
success:function(j)
{
data=j;
},
error:function(error)
{
alert(error);
}
});
return data;
}
var map;
function swipe(m)
{
map=m;
var aerial = findlayeByName(map.getLayerGroup(), 'name','Aerial');
console.log(aerial.get('name'));
startswipe(aerial)
}
function startswipe(aerial)
{
var swipe = document.getElementById('swipe');
aerial.on('prerender', function (event) {
var ctx = event.context;
var mapSize = map.getSize();
var width = mapSize[0] * (swipe.value / 100);
var tl = getRenderPixel(event, [width, 0]);
var tr = getRenderPixel(event, [mapSize[0], 0]);
var bl = getRenderPixel(event, [width, mapSize[1]]);
var br = getRenderPixel(event, mapSize);
ctx.save();
ctx.beginPath();
ctx.moveTo(tl[0], tl[1]);
ctx.lineTo(bl[0], bl[1]);
ctx.lineTo(br[0], br[1]);
ctx.lineTo(tr[0], tr[1]);
ctx.closePath();
ctx.clip();
});
aerial.on('postrender', function (event) {
var ctx = event.context;
ctx.restore();
});
swipe.addEventListener(
'input',
function () {
map.render();
},
false
);
}
var Base64 = {
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
encode: function(input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = Base64._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
}
return output;
},
decode: function(input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = this._keyStr.indexOf(input.charAt(i++));
enc2 = this._keyStr.indexOf(input.charAt(i++));
enc3 = this._keyStr.indexOf(input.charAt(i++));
enc4 = this._keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = Base64._utf8_decode(output);
return output;
},
_utf8_encode: function(string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
_utf8_decode: function(utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while (i < utftext.length) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
}
else if ((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i + 1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}
else {
c2 = utftext.charCodeAt(i + 1);
c3 = utftext.charCodeAt(i + 2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'
var IdentifyLayerGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'india_blockstation_basemap',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'Rail',
visible:false
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'india_airport_location_basemap',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'Airport',
visible:false
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'india_nhai',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'National Highway',
visible:false
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'monument_final_tbl',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'Monument',
visible:false
}),
],
name : 'Identify'
});
var CommonlayersGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
visible : false,
preload : Infinity,
opacity: 1,
source : new ol.source.BingMaps(
{
key : 'Auw0s19PwLEd-w-GFNBPzqs2lekVJE5KjKtxg0EwzB6nuvocKYwMJ7ZJnfnltPgM', //'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
imagerySet : 'Aerial'
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// "no photos at this zoom level" tiles
// maxZoom: 19
}),
name : 'Aerial'
}),
new ol.layer.Tile({
visible : false,
preload : Infinity,
source : new ol.source.BingMaps({
key :'Auw0s19PwLEd-w-GFNBPzqs2lekVJE5KjKtxg0EwzB6nuvocKYwMJ7ZJnfnltPgM', //'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
imagerySet : 'AerialWithLabels',
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// "no photos at this zoom level" tiles
// maxZoom: 19
}),
name : 'Aerial+Labels'
}),
new ol.layer.Tile({
visible : false,
source : new ol.source.OSM(),
name : 'OSM'
}),
new ol.layer.Tile({
visible : false,
source: new ol.source.TileImage({url: 'http://maps.google.com/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i375060738!3m9!2spl!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0'}),
name : 'Google Map'
})
],
name : 'Basemaps'
});
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'
//var wmsurl='wms'
var indianMapLayersGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'VillageIndia',
format_options:'dpi:180',
version : '1.1.1',
//CQL_FILTER : se
}
}),
showLegend: true,
maxResolution : 256,
name : 'Village',
visible:false
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url : wmsurl,//'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
layers : 'TalukaIndia',
version : '1.1.1',format_options:'dpi:110',
//CQL_FILTER : ta
}
}),
showLegend: true,
maxResolution : 1024,
name : 'Taluka',
visible:false
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
layers : 'DistrictIndia',
//CQL_FILTER : di,
version : '1.1.1',format_options:'dpi:110'
//version : '1.1.1',CQL_FILTER : 'dtcode11 IN (001,003,004)' ,format_options:'dpi:110'
}
}),
showLegend: true,
//maxResolution : 2048,
name : 'District',
visible:false
})
,
new ol.layer.Tile({
source : new ol.source.TileWMS({
url : wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
layers : 'StateIndia',
//CQL_FILTER : 'STCODE11 = 03',
version : '1.1.1',format_options:'dpi:110',
//CQL_FILTER : di
//version : '1.1.1',CQL_FILTER : 'STCODE11 IN (01,02,004)' ,format_options:'dpi:110'
}
}),
styles:'IndiaState',
showLegend: true,
visible:true,
name : 'State'
}),
],
name : 'India Boundaries'
});
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
//var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'
var wmsurl162='https://gis.ncog.gov.in/GeoserverWebAPI/wms62'
//function getallid(ids)
{
var satelliteGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :'http://192.168.1.196:8080/geoserver/cite/wms',//'http://10.247.102.63:8080/geoserver/cite/wms',
//crossOrigin: 'anonymous',
params : {
'LAYERS' : 'ProjectRaster1',
format_options:'dpi:180',
version : '1.1.1',
// whereclause:
//CQL_FILTER : ids,
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'Satellite_data1',
visible:true
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl162,//'http://10.247.102.63:8080/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : '106_rabi2016',
format_options:'dpi:180',
version : '1.1.1',
// whereclause:
//CQL_FILTER : ids,
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'Satellite_data2',
visible:true
}),
/* new ol.layer.Tile({
source : new ol.source.TileWMS({
url :'http://localhost:8999/geoserver/cite/wms',//'http://10.247.102.63:8080/geoserver/cite/wms',
//crossOrigin: 'anonymous',
params : {
'LAYERS' : 'BANDP_01',
format_options:'dpi:180',
version : '1.1.1',
// whereclause:
//CQL_FILTER : ids,
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'Satellite_data1',
visible:true
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :'http://localhost:8999/geoserver/cite/wms',//'http://10.247.102.63:8080/geoserver/cite/wms',
//crossOrigin: 'anonymous',
params : {
'LAYERS' : 'L1C_T42QWK_A028216_20201116T055120',
format_options:'dpi:180',
version : '1.1.1',
// whereclause:
//CQL_FILTER : ids,
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'Satellite_data2',
visible:true
}), */
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl162,//'http://10.247.102.63:8080/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : '128_post',
format_options:'dpi:180',
version : '1.1.1',
// whereclause:
//CQL_FILTER : ids,
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'Satellite_data4',
visible:true
}),
],
name : 'satellite'
});
}
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'
var transportLayerGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'india_airport_location_basemap',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: false,
//maxResolution : 256,
name : 'Airport',
visible:false
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'india_nhai',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'National Highway',
visible:false
}),
// new ol.layer.Tile({
// source : new ol.source.TileWMS({
// url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
// crossOrigin: 'anonymous',
// params : {
// 'LAYERS' : 'plot_boundary_new',
// format_options:'dpi:180',
// version : '1.1.1',
// STYLES:''
// }
// }),
// showLegend: true,
// //maxResolution : 256,
// name : 'Dehgam',
// visible:true
// })
],
name : 'Transport'
});
var map;
var clickEvent;
var vectorLayer6=ol.layer.vector;
var features= ol.Feature[10];
var geojson = new ol.format.GeoJSON;
var hoverLayer =ol.layer.Vector;
var enc;
var highlightFeatures=true;
var cursorStyle= 'pointer';
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
]
function addGeom(m)
{
map=m;
//addHoverLayer();
}
$("#geom").bind("click", function() {
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
activateGeomLayer(layer);
});
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
// hoverLayer.setStyle(hoverStyle);
map.addLayer(hoverLayer);
}
function customStyleFunction ()
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
}
function activateGeomLayer(layer)
{
console.log(layer);
//hoverLayer.getSource().clear();
layer.getSource().clear();
map.removeLayer(layer);
deactivateClick();
setCursor(cursorStyle);
//addHoverLayer();
clickEvent = (evt) =>
{
if(vectorLayer6!=null)
{
var features = vectorLayer6.getSource().getFeatures();
features.forEach((feature) => {
vectorLayer6.getSource().removeFeature(feature);
});
}
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,);
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof layer.Image || layer instanceof layer.Vector || layer instanceof layer.Heatmap || layer instanceof layer.Vector || layer instanceof layer.Layer || layer instanceof layer.VectorTile)
{
const url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
{'INFO_FORMAT' : 'application/json'}
);
if (url) {
$.get(url, function(response) {
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
console.log(a);
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
let villageName=a.VIL_NAME11;
selectedstate(stateCode);
//selecteddistrict(districtCode);
//selectedtaluka(talukaCode);
//selectedvillage(villageCode);
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
console.log(dataObjectString);
enc = Base64.encode(dataObjectString);
console.log(enc);
evt.preventDefault();
jQuery.noConflict();
$('#myModal').modal('show');
//$('#myModal').modal(options)
var role= $("#roleType").val();
if(role=="ROLE_user"){
// window.open('addgeomVisitor?id='+enc,"_blank");
}
if(role=="ROLE_admin"){
// //var selectForm;
// alert("fknlnf");
// window.open('selectForm');
}
});
}
}
else
{
alert(
'Currently only WMS query is supported. Please select another layer!'
);
}
}
map.on('singleclick', clickEvent);
}
function addHoverLayer()
{
hoverLayer.setStyle(hoverStyle);
map.addLayer(hoverLayer);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
// function deactivateClick() {
// setCursor('');
// if (clickEvent) {
// map.un('singleclick', sclickEvent);
// }
// }
function _getFeatureInfoUrl( source,coordinate,resolution, srs)
{
//const styles = source.getParams().STYLES;
const url=source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
FEATURE_COUNT:10,
//LAYERS: styles
});
return url;
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function selecrole(role)
{
console.log(enc);
if(role=='admin')
{
$('#myModal').modal('hide');
window.open('addgeomAdmin?id='+enc,"_blank");
}
if(role=='visitor')
{
$('#myModal').modal('hide');
window.open('addgeomuser?id='+enc,"_blank");
}
if(role=='monument')
{
$('#myModal').modal('hide');
window.open('addgeomMonument?id='+enc,"_blank");
}
}
function selectedstate()
{
}
var map;
function clear(m)
{
map=m;
}
function deactivateClick()
{
setCurser('');
if (clickEvent) {
map.un('singleclick', clickEvent);
}
}
function setCurser(cursorType){
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
var map;
function controllers(maps)
{
map=maps;
}
function zoomIn()
{
map.getView().animate({
zoom: map.getView().getZoom() + 1,
duration: 500
});
}
function zoomOut()
{
map.getView().animate({
zoom: map.getView().getZoom() - 1,
duration: 500
});
}
function defaultmap()
{
//for Gujarat
// var extent = [ 66.9973, 19.4081, 75.5887, 24.9398];
//for India
var extent = [68.17665, 7.96553, 97.40256, 35.49401];
extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent);
map.getView().animate({
zoom: 4.45,
duration: 600
});
}
function fullscreen()
{
var elem = document.getElementById('target-map');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
function geolocation()
{
var geolocation = new ol.Geolocation({
tracking: true
});
geolocation.on('change:position', function() {
var coordinate = geolocation.getPosition();
map.getView().setCenter(coordinate);
});
}
function exportpdf(map)
{
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var resolution = document.getElementById('resolution').value;
var dim = dims[format];
var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
map.once('rendercomplete', function() {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = width;
mapCanvas.height = height;
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
var transform = canvas.style.transform;
// Get the transform parameters from the style's transform matrix
var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
// Apply the transform to the export map context
CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
mapContext.drawImage(canvas, 0, 0);
}
});
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
var scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
}, false);
}function exportpdf(map)
{
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var resolution = document.getElementById('resolution').value;
var dim = dims[format];
var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
map.once('rendercomplete', function() {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = width;
mapCanvas.height = height;
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
var transform = canvas.style.transform;
// Get the transform parameters from the style's transform matrix
var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
// Apply the transform to the export map context
CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
mapContext.drawImage(canvas, 0, 0);
}
});
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
var scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
}, false);
}
var map;
var maxFeatures =10;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function findbylocation(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
activateClick(layer);
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
hoverLayer.getSource().clear();
deactivateClick();
clickEvent = (evt) => {
console.log(vectorLayer6);
// if(layer!=null)
/* {
features = layer.getSource().getFeatures();
features.forEach((feature) => {
layer.getSource().removeFeature(feature);
}); */
// }
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,);
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
const url = _getFeatureInfoUrl(
layer.getSource(),
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
);
}
/* if (url)
{
$.get(url, function(response)
{
response = JSON.parse(response);
var a= response.features[0].properties.vill_id
if (data.hasOwnProperty('features'))
{
// convert the GeoJSON response to Feature array
features = geojson.readFeatures(data);
features.forEach((feat) => {
const props = { ...feat.getProperties() };
console.log(props.dist_id);
});
}
});
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}*/
};
map.on('singleclick', clickEvent);
}
function deactivateClick() {
setCursor('');
if (clickEvent) {
map.un('singleclick', sclickEvent);
}
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function _getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
/* const url = source.getSource().getGetFeatureInfoUrl(
coordinate, resolution, 'EPSG:3857',
{'INFO_FORMAT': 'application/json'}); */
const url = source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
FEATURE_COUNT: maxFeatures,
STYLES: styles
});
/* const url = source.getGetFeatureInfoUrl(coordinate, resolution, 'EPSG:3857',
{'INFO_FORMAT': 'application/json'})*/
return url;
}
var map;
function geocoder(m)
{
map=m;
var geocoder = new Geocoder('nominatim', {
provider : 'osm',
key : ' AIzaSyClQ0GOW55zhw4PvFh73FyGLHdSd4bJfpM',
lang : 'en',
//targetType: 'text-input',
placeholder : 'Search location',
autoComplete: true,
limit : 5,
keepOpen : false
});
map.addControl(geocoder);
//Listen when an address is chosen
geocoder.on('addresschosen', function(evt){
var feature = evt.feature,
coord = evt.coordinate,
address = evt.address;
geocoder.getSource().clear();
geocoder.getSource().addFeature(feature);
// some popup solution
content.innerHTML = '<p>'+ address.formatted +'</p>';
overlay.setPosition(coord);
latlong(evt.coordinate);
});
}
function latlong(coord)
{
console.log()
var lonlat = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
alert("lat:"+latitude+" "+"Lon:"+logitude);
console.log(latitude);
console.log(logitude);
}
$(document).ready(function() {
var url_string = window.location;
var url = new URL(url_string);
var data = url.searchParams.get("id");
var d=JSON.parse(Base64.decode(data));
console.log(d);
let stateCode=d.stateCode;
let districtCode=d.districtCode;
let talukaCode=d.talukaCode;
let villageCode=d.villageCode;
let lat=d.lat;
let lon=d.lon;
alert(lat + "lat" + lon + "lon");
loadstate(stateCode);
loaddistrict(stateCode,districtCode);
loadtaluka(districtCode,talukaCode);
loadvillage(talukaCode,villageCode);
document.getElementById("lat").value =lat.toFixed(4);
document.getElementById("lon").value =lon.toFixed(4);
document.getElementById("wktGeom").value = "POINT("+lat.toFixed(4) + " " +lon.toFixed(4)+")";
console.log(lon);
});
function loadstate(stateCode)
{
var stateId_Hidden=stateCode;
var j=getState();
console.log(j);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
if (stateId_Hidden == j[i].statecode)
{
options += '<option value="' + j[i].statecode + '" selected="selected">' + j[i].statename+ '</option>';
}
else {
options += '<option value="' + j[i].statecode + '">' + j[i].statename+ '</option>';
}
}
$("select#selectedstate").html(options);
}
function loaddistrict(stateCode,districtCode)
{
var distictId_Hidden=districtCode;
var j=getDistrict(stateCode);
console.log(j);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (distictId_Hidden == j[i].districtcode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].districtcode + '" selected="selected">' + j[i].districtname+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].districtcode + '">' + j[i].districtname+ '</option>';
}
}
$("select#selecteddistrict").html(options);
}
function loadtaluka(districtCode,talukaCode)
{
var talukaId_Hidden=talukaCode;
var j=getTalukas(districtCode);
console.log(j);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (talukaId_Hidden == j[i].talukacode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].talukacode + '" selected="selected">' + j[i].talukaname+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].talukacode + '">' + j[i].talukaname+ '</option>';
}
}
$("select#selectedtaluka").html(options);
}
function loadvillage(talukaCode,villageCode)
{
var villageId_Hidden=villageCode;
var j=getVillage(talukaCode);
console.log(j);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (villageId_Hidden == j[i].villagecode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].villagecode + '" selected="selected">' + j[i].villagename+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].villagecode + '">' + j[i].villagename+ '</option>';
}
}
$("select#selectedvillage").html(options);
}
var map;
var maxFeatures =10;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function identify(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Airport');
var Groupcountt=0;
map.getLayers().forEach(function (layerr, i) {
Groupcountt=i+1;
var groupnamee=layerr.get('name');
if(groupnamee=='Identify')
{
var groupcontentt='';
groupcontentt+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontentt +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" aria-expanded="true" href="#basemap-choicee'+i+'" aria-controls="collapseOne" class="collapsed">'+groupnamee+':<span id="'+'layerscountt'+i+'"></span><i style="position: absolute;right: 17px;" class="ti-arrow-circle-down"></i></a></h5></div><div id="basemap-choicee'+i+'" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionn" style=""><div class="card-body" id="'+'layerr'+i+'"></div> </div></div>';
$('#groupss').append($(groupcontentt));
bindInputs('#layerr' + i, layerr);
var subGroupcountt=0;
if (layerr instanceof ol.layer.Group) {
layerr.getLayers().forEach(function (sublayerr, j) {
subGroupcountt=j+1;
var basecontentt = '';
let layernamee=sublayerr.get('name');
basecontentt += '<div class="togglebutton" id="layerr'+i+j+'"><input id="visiblee'+i+j+'" type="checkbox" class="visible" style=" display: contents;"/><label for="visiblee'+i+j+'"> <span class="toggle"></span>'+layernamee+'</label> </div>';
$('#layerr'+i).append($(basecontentt));
bindInputss('#layerr' + i + j, sublayerr);
});
$('#layerscountt'+i).append(subGroupcountt);
}
}
});
$('#groupscountt').append(Groupcountt);
}
function bindInputss(layerid, layer)
{
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
if(layer.getVisible()==true)
{
activateClick(layer);
}
else{
deactivateClick();
}
});
visibilityInput.prop('checked', layer.getVisible());
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
console.log(layer)
var layername=layer.get('name');
// hoverLayer.getSource().clear();
deactivateClick();
clickEvent = (evt) =>
{
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
var url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
'EPSG:3857', {
'INFO_FORMAT' : 'application/json',
});
if (url)
{
$.get(url, function(response) {
response = JSON.parse(response);
{
{
const a=response.features.map(x=>x.properties)[0];
console.log(a);
if(layername=='Rail')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.bsid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='National Highway')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.objectid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='Airport')
{
content.innerHTML = '<p style="color:green;">Location:<span style="color:black">' + a.descriptio + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='Monument')
{
content.innerHTML = '<p style="color:green;">Desc:<span style="color:black">' + a.description_mn + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p><p style="color:green;">State:<span style="color:black">' + a.state + '</span></p><p style="color:green;">Circle:<span style="color:black">' + a.circle + '</span></p><p style="color:green;">Sr No:<span style="color:black">' + a.user_id + '</span></p> <button onclick="myFunction()">More Infromation</button>';
}
overlay.setPosition(evt.coordinate);
}
}
});
}
else{
alert("NOt Suported");
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}
};
map.on('singleclick', clickEvent);
}
function myFunction(){
window.location = '/monumentform.jsp';
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
return source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
// FEATURE_COUNT: maxFeatures,
// STYLES: styles
});
// return url;
}
function switchlayers(map)
{
var Groupcount=0;
bindallopacity();
map.getLayers().forEach(function (layer, i) {
Groupcount=i+1;
var groupname=layer.get('name');
var groupcontent='';
groupcontent+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontent +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" href="#basemap-choice'+i+'" aria-controls="collapseOne" class="collapsed">'+groupname+':<span id="'+'layerscount'+i+'"></span><i style="position: absolute;right: 17px;" class="ti-arrow-circle-down"></i></a></h5></div><div id="basemap-choice'+i+'" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" style=""><div class="card-body" id="'+'layer'+i+'"></div> <div id="'+'slider-range-min'+i+'" ></div></div></div>';
$('#groups').append($(groupcontent));
bindInputs('#layer' + i, layer);
var subGroupcount=0;
if (layer instanceof ol.layer.Group) {
layer.getLayers().forEach(function (sublayer, j) {
subGroupcount=j+1;
var basecontent = '';
let layername=sublayer.get('name');
basecontent += '<div class="togglebutton" id="layer'+i+j+'"><input id="visible'+i+j+'" type="checkbox" class="visible" style=" display: contents;"/><label for="visible'+i+j+'"> '+layername+'</label> <input id="opacity" class="opacity" type="range" min="0" max="1" step="0.01"/></div>';
$('#layer'+i).append($(basecontent));
bindInputs('#layer' + i + j, sublayer);
});
$('#layerscount'+i).append(subGroupcount);
}
});
$('#groupscount').append(Groupcount);
}
function bindallopacity()
{
$('#opacity').hide();
var allopacity=$('#allopacity');
allopacity.on('change', function () {
});
}
function bindInputs(layerid, layer) {
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
});
visibilityInput.prop('checked', layer.getVisible());
var opacityInput = $(layerid + ' input.opacity');
opacityInput.on('input change', function () {
layer.setOpacity(parseFloat(this.value));
});
opacityInput.val(String(layer.getOpacity()));
}
/**
* Elements that make up the popup.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* Create an overlay to anchor the popup to the map.
*/
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
window.onload=init;
function init()
{
let india=[ 81.191694, 23.8086 ];
//let jalandhar=[75.57917,31.32556];
var map = new ol.Map({
overlays: [overlay],
target: 'target-map',
view: new ol.View({
center : ol.proj.transform(india, 'EPSG:4326','EPSG:3857'),
zoom:4.5,
// zoom :10,
minZoom:4,
maxZoom: 17
}),
layers:[
CommonlayersGroup,indianMapLayersGroup,
transportLayerGroup,IdentifyLayerGroup,satelliteGroup
],
controls: ol.control.defaults({
zoom: false,
attribution: false,
rotate: false
}).extend([]),
// new ol.control.FullScreen()
});
// var olGM = new olgm.OLGoogleMaps({map: map});
//var gmap = olGM.getGoogleMapsMap();
//CommonlayersGroup,
//measure(map);
controllers(map);
navigation(map);
switchlayers(map);
getMousePosition(map);
scaleline(map);
//exportpdf(map);
identify(map);
//addGeom(map);
//geocoder(map);
}
//
//function init()
//{
//
//var map = new ol.Map({
// overlays: [overlay],
// target: 'target-map',
//
// view: new ol.View({
// center : ol.proj.transform([ 81.191694, 23.8086 ], 'EPSG:4326','EPSG:3857'),
// zoom :4.5,
// minZoom:4,
// maxZoom: 17
// }),
// layers:[
// CommonlayersGroup,indianMapLayersGroup,
// transportLayerGroup,IdentifyLayerGroup,satelliteGroup,
// ],
// controls: ol.control.defaults({
// zoom: true,
// attribution: false,
// rotate: false
// }).extend([]),
// // new ol.control.FullScreen()
//
//
// });
// // var olGM = new olgm.OLGoogleMaps({map: map});
////var gmap = olGM.getGoogleMapsMap();
////CommonlayersGroup,
//measure(map);
//controllers(map);
//navigation(map);
//switchlayers(map);
//getMousePosition(map);
//scaleline(map);
//exportpdf(map);
//identify(map);
//addGeom(map);
//
//
//
//
//
//}
/**
* Elements that make up the popup.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* Create an overlay to anchor the popup to the map.
*/
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
window.onload=init;
function init()
{
let india=[ 81.191694, 23.8086 ];
let jalandhar=[75.57917,31.32556];
var map = new ol.Map({
overlays: [overlay],
target: 'target-maps',
view: new ol.View({
center : ol.proj.transform(india, 'EPSG:4326','EPSG:3857'),
zoom:4.0,
// zoom :9.5,
minZoom:4,
maxZoom: 17
}),
layers:[
z
],
controls: ol.control.defaults({
zoom: false,
attribution: true,
rotate: false
}).extend([]),
// new ol.control.FullScreen()
});
legend(map);
geom(map);
//buffer(map);
controllers(map);
navigation(map);
switchlayers(map);
getMousePosition(map);
scaleline(map);
exportpdf(map);
identify(map);
//addGeom(map);
commonfunctions(map);
//swipe(map);
//geocoder(map);
}
var map;
var layers=new ol.layer.Vector;
var feature=new ol.Feature;
var geometryType;
var precision = 2;
var cursorStyle = 'crosshair';
var fillColor = [255, 255, 255, 0.5];
var strokeColor = [72, 72, 72, 1];
var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1];
var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7];
var font = 'normal 14px Arial';
var draw;
var displaylength = document.getElementById('distance');
var displayarea = document.getElementById('area');
var displayradious = document.getElementById('radious');
function selectedType(gtype)
{
displaylength.innerHTML = '';
displayarea.innerHTML = '';
displayradious.innerHTML = '';
geometryType=gtype;
activateDraw();
}
function activateDraw()
{
deactivateDraw();
map.addLayer(layers);
setCursor(cursorStyle);
draw= new ol.interaction.Draw({
source: layers.getSource(),
type: geometryType,
style: (feature) => {
return getStyle(feature);
}
});
draw.on('drawstart', (e) => {
layers.getSource().clear();
});
draw.on('drawend', (e) => {
let feature = e.feature;
let coords= feature.getGeometry().getCoordinates();
Addpolygongeometry(coords);
const feat = new ol.Feature({
geometry: e.target
}
);
// getLengthOrArea(feat);
});
draw.setActive(true);
map.addInteraction(draw);
}
function deactivateDraw() {
setCursor('');
value = null;
try {
map.removeInteraction(draw);
layers.getSource().clear();
map.removeLayer(layers);
} catch (error) {}
}
function measure(m)
{
map=m
// Read user-defined parameters
units= map.getView().getProjection().getUnits();
layers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: (feature ) => {
return getStyle(feature);
}
});
}
function getStyle(feature)
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color:fillColor
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: strokeColor,
width: 2,
lineDash: [5, 5]
}),
text: new ol.style.Text({
textAlign: 'center',
textBaseline: 'middle',
text: getLengthOrArea(feature),
font: font,
fill: new ol.style.Fill({
color: textColor
}),
offsetX: 0,
offsetY: 0,
rotation: 0,
stroke: new ol.style.Stroke({
color: textOutlineColor,
width: 3
})
})
})
];
}
function setCursor(cursorType)
{
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function Addpolygongeometry(p)
{
let cordinate = '';
switch (geometryType) {
case 'LineString':
try {
cordinate = 'POINT(('+p+'))';
} catch (error) {}
break;
case 'Polygon':
try {
cordinate = 'POLYGON(('+p+'))';
} catch (error) {}
break;
case 'Circle':
try {
cordinate = 'CIRCLE(('+p+'))';
} catch (error) {}
break;
default:
break;
}
if (cordinate !== '') {
cordinate += cordinate;
}
return cordinate;
}
function getLengthOrArea(feature)
{
let value = '';
const geom= feature.getGeometry();
switch (geometryType)
{
case 'LineString':
try {
value = parseFloat(geom.getLength().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Polygon':
try {
value = parseFloat(geom.getArea().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Circle':
try {
value = parseFloat(geom.getRadius().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
default:
break;
}
if (value !== '')
{
value = value;
displaylength.innerHTML = value + ' m';
displayarea.innerHTML = value + ' m ²';
displayradious.innerHTML = value+ ' m';
}
return value;
}
function getMousePosition(map)
{
var latnong=fromLotlong(map.getView().getCenter());
var pointerMoveListener = map.on('pointermove', (evt) => {
if (evt.dragging)
{
return;
}
else
{
latnong = fromLotlong(evt.coordinate);
document.getElementById("latlon").innerHTML=latnong;
}
});
document.getElementById("latlon").innerHTML=latnong;
function fromLotlong(coords)
{
let lonlat = ol.proj.transform(coords, 'EPSG:3857', 'EPSG:4326');
let formattedLatlong= [];
return formattedLatlong=lonlat.map(x=>x.toFixed(4));
}
}
var map
var GisUrl='https://gis.ncog.gov.in/GISWeb/wms';
var statelist=[];
var districtlist=[];
var talukalist=[];
var villagelist=[];
var cql;
var Alllayers=[];
var Alllayersname= [];
var layersname="Village,Taluka,District,State";
var layer="VillageIndia,TalukaIndia,DistrictIndia,StateIndia";
function navigation(m)
{
map=m;
getstate();
}
function getstate()
{
statelist=[];
districtlist=[];
talukalist=[];
villagelist=[];
var options="";
var j=getState();
if(j)
{
var statename="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].statecode+ '" >'
+ j[i].statename + '</option>';
statelist.push({"statecode":j[i].statecode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
$("select#state").html(options);
}
$("#state").change(function(){
var selectedstatecode = $(this).children("option:selected").val();
var s=statelist.find(x=>x.statecode==selectedstatecode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removestatelayer(selectedstatecode);
getDistricts(selectedstatecode);
})
}
function zoom(extent)
{
extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent), { duration: 200 };
}
function clearmap()
{
const layers = map.getLayers().getArray();
layers.forEach((layer) => {
if(layer.getVisible()==true)
{
layer.setVisible(false)
}
});
}
function removestatelayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="STCODE11="+selectedcode;
}
else if (Alllayers[j]=="VillageIndia")
{
cql="ST_2011="+selectedcode;
}
else
{
cql="stcode11="+selectedcode;
}
if (Alllayers[j]=="VillageIndia")
{
new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS' : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 256,
})
}
else if (Alllayers[j]=="TalukaIndia")
{
var new_lyr =
new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS': Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 800,//1024,
// name : Alllayersname[j]
})
}
else
{
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url :GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS': Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
// name : Alllayersname[j]
})
}
// newlyr=new_lyr;
map.addLayer(new_lyr);
}
}
function getDistricts(selectedstatecode)
{
if(selectedstatecode!=null)
{
districtlist=[];
talukalist=[];
villagelist=[];
var options="";
var j=getDistrict(selectedstatecode);
if(j)
{
var districtname="";
for ( var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].districtcode+ '" >'
+ j[i].districtname + '</option>';
districtlist.push({"districtcode":j[i].districtcode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
$("select#district").html(options);
}
$("#district").change(function(){
var selecteddistrictcode = $(this).children("option:selected").val();
var s=districtlist.find(x=>x.districtcode==selecteddistrictcode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removedistrictlayer(selecteddistrictcode)
getTaluka(selecteddistrictcode)
});
}
}
function removedistrictlayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="DTCODE11='"+selectedcode+"'";
}
else if (Alllayers[j]=="VillageIndia")
{
cql="DT_2011='"+selectedcode+"'";
}
else
{
cql="dtcode11='"+selectedcode+"'";
}
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+cql_dist);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution :256,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution :800,
});
}
else
{
// alert("else...."+Alllayers[j]);
// alert("cql...."+cql_dist);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
//maxResolution : 256,
});
}
// newlyr=new_lyr;
map.addLayer(new_lyr);
}
}
function getTaluka(selecteddistrictcode)
{
if(selecteddistrictcode!=null)
{
talukalist=[];
villagelist=[];
var options="";
var j=getTalukas(selecteddistrictcode)
if(j)
{
var talukaname="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
if(j[i].talukacode!=null)
{
options += '<option value="' + j[i].talukacode+ '" >'
+ j[i].talukaname + '</option>';
talukalist.push({"talukacode":j[i].talukacode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
}
$("select#taluka").html(options);
}
}
$("#taluka").change(function(){
var selectedtalukacode = $(this).children("option:selected").val();
getVillages(selectedtalukacode);
var s=talukalist.find(x=>x.talukacode==selectedtalukacode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removetalukalayer(selectedtalukacode);
})
}
function removetalukalayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="SDTCODE11='"+selectedcode+"'";
}
else if (Alllayers[j]=="VillageIndia")
{
cql="SDT_2011='"+selectedcode+"'";
}
/* else
{
cql="dtcode11='"+dist+"'";
}*/
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 856,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
//maxResolution : 1024,//1024,
});
}
map.addLayer(new_lyr);
}
}
function getVillages(selectedtalukacode)
{
var options="";
var j=getVillage(selectedtalukacode)
if(j)
{
var villagename="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
if(j[i].villagecode!=null)
{
options += '<option value="' + j[i].villagecode+ '" >'
+ j[i].villagename + '</option>';
villagelist.push({"villagecode":j[i].villagecode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
}
$("select#village").html(options);
}
}
$("#village").change(function(){
var selectedvillagecode = $(this).children("option:selected").val();
var s=villagelist.find(x=>x.villagecode==selectedvillagecode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removevillagelayer(selectedvillagecode);
})
function removevillagelayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if (Alllayers[j]=="VillageIndia")
{
cql="VIL_2011='"+selectedcode+"'";
}
/* else
{
cql="dtcode11='"+dist+"'";
}*/
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 256,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 800,//1024,
});
}
map.addLayer(new_lyr);
}
}
function scaleline(map)
{
let target = map.getTarget();
console.log(target);
const scaleLineControl = new ol.control.ScaleLine({
target: document.getElementById(scale),
});
map.addControl(scaleLineControl);
}
function getreport()
{
var data=null;
$.ajax({
url:"/ASIReport",
method:"POST",
dtaType:"json",
async: false,
data:{},
success:function(j)
{
console.log(j);
data=j;
},
error:function (error)
{
alert(error);
}
});
return data;
}
function getState()
{
var data=null;
$.ajax({
url:"https://api3.ncog.gov.in/BaseRest/getstate",
method:"POST",
dtaType:"json",
async: false,
data:{},
success:function(j)
{
data=j;
},
error:function (error)
{
alert(error);
}
});
return data;
}
function getDistrict(id)
{
var code={};
code.statecode=id;
var codobject=JSON.stringify(code);
var data=null;
$.ajax({
url:"https://api3.ncog.gov.in/BaseRest/getdistrict/"+id,
method:"POST",
async: false,
contentType:"application/json;charset=utf-8",
data:codobject,
success:function(j)
{
data=j;
},
error:function(error)
{
alert(error);
}
});
return data;
}
function getTalukas(id)
{
var code={};
code.districtcode=id;
var codobject=JSON.stringify(code);
var options="";
var data=null;
$.ajax({
url:"https://api3.ncog.gov.in/BaseRest/gettaluka/"+id,
method:"POST",
async: false,
contentType:"application/json;charset=utf-8",
data:codobject,
success:function(j)
{
data=j;
},
error:function(error)
{
alert(error);
}
});
return data;
}
function getVillage(id)
{
var code={};
code.talukacode=id;
var codobject=JSON.stringify(code);
var options="";
var data=null;
$.ajax({
url:"https://api3.ncog.gov.in/BaseRest/getvillage/"+id,
method:"POST",
async: false,
contentType:"application/json;charset=utf-8",
data:codobject,
success:function(j)
{
data=j;
},
error:function(error)
{
alert(error);
}
});
return data;
}
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta name="author" content="">
<title>ANS</title>
<title>ANS</title>
<!-- Bootstrap core CSS -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/icons.css" />
<link rel="stylesheet" type="text/css" href="assets/css/icons.css" />
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link href="//cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css">
<link href="//cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css">
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="ol/ol.css" rel="stylesheet">
<link href="ol/ol.css" rel="stylesheet">
<link href="customol/css/customOlStyle.css" rel="stylesheet" />
<link href="customol/css/customOlStyle.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<!-- Custom styles for this template -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="css/simple-sidebar.css" rel="stylesheet">
<!-- javascript -->
<!-- javascript -->
<script src="jquery-3.5.1.min.js"></script>
<script src="jquery-3.5.1.min.js"></script>
<script src="customol/js/identify.js"></script>
<script src="customol/js/identify.js"></script>
<script src="customol/js/LayersGroup/commonlayersGroup.js"></script>
<script src="customol/js/LayersGroup/commonlayersGroup.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="vendor/jquery/multiselect.js">
<link href="vendor/jquery/multiselect.js">
<script src="ol/ol.js"></script>
<script src="ol/ol.js"></script>
<script src="ol/ol.geocoder.js"></script>
<script src="ol/ol.geocoder.js"></script>
</head>
</head>
<style>
<style>
tfoot input {
tfoot input {
display: table-row-group;
display: table-row-group;
}
}
</style>
</style>
<body>
<body>
<div class="d-flex" id="wrapper">
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading">
<div class="sidebar-heading">
<img src="images/bisag_logo.png" style="width:130px; height:130px; margin-left:60px;padding-top:2px; padding-bottom:25px;">
<img src="images/bisag_logo.png" style="width:130px; height:130px; margin-left:60px;padding-top:2px; padding-bottom:25px;">
</div>
</div>
<div class="list-group list-group-flush">
<div class="list-group list-group-flush">
<!-- <a href="#" class="list-group-item list-group-item-action bg-light nav-item dropdown nav-link dropdown-toggle">Optical</a>
<!-- <a href="#" class="list-group-item list-group-item-action bg-light nav-item dropdown nav-link dropdown-toggle">Optical</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Something else here</a>
</div> -->
</div> -->
<li class="nav-item dropdown list-group-item list-group-item-action bg-light nav-item dropdown nav-link">
<li class="nav-item dropdown list-group-item list-group-item-action bg-light nav-item dropdown nav-link">
<!-- <select class="custom-select mr-sm-2" id="inlineFormCustomSelect"> -->
<!-- <select class="custom-select mr-sm-2" id="inlineFormCustomSelect"> -->
<!-- <option selected>Choose...</opion> -->
<!-- <option selected>Choose...</opion> -->
<!-- <option value="1"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> -->
<!-- <option value="1"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> -->
<!-- Optical -->
<!-- Optical -->
<!-- </a></option> -->
<!-- </a></option> -->
<!-- <option value="2"><a class="dropdown-item" href="#">Microwave</a></option> -->
<!-- <option value="2"><a class="dropdown-item" href="#">Microwave</a></option> -->
<!-- </select> -->
<!-- </select> -->
</li>
</li>
<!-- <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<!-- <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item dropdown">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
Dropdown
</a>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</li>
</li>
</ul> -->
</ul> -->
<form id ="filterform">
<form id ="filterform">
<div class="form-row align-items-center">
<div class="form-row align-items-center">
<div style="border:2px solid black;margin-left:10px;width:300px;height:45px">
<div style="border:2px solid black;margin-left:10px;width:300px;height:45px">
<h5 style="margin-top:5px;margin-left:15px"><a href="#" class="" data-toggle="modal" data-target="#myModal" id="attri" onclick="myFunction1()">Attribute</a>
<h5 style="margin-top:5px;margin-left:15px"><a href="#" class="" data-toggle="modal" data-target="#myModal" id="attri" onclick="myFunction1()">Attribute</a>
<a href="#" style="margin-top:5px" class="" id="attri2"onclick="myFunction2()">Spatial</a></h5>
<a href="#" style="margin-top:5px" class="" id="attri2"onclick="myFunction2()">Spatial</a></h5>
</div>
</div>
<!-- <a href="#" class="list-group-item list-group-item-action bg-light">Events</a>
<!-- <a href="#" class="list-group-item list-group-item-action bg-light">Events</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Profile</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Profile</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Status</a> -->
<a href="#" class="list-group-item list-group-item-action bg-light">Status</a> -->
</div>
</div>
<div class="modal-body" id="attribute_filter" style="padding:0px;">
<div class="modal-body" id="attribute_filter" style="padding:0px;">
<!-- <div style="margin-top:10px;margin-left:5px;height:70px;width:300px;border:2px solid black"> -->
<!-- <div style="margin-top:10px;margin-left:5px;height:70px;width:300px;border:2px solid black"> -->
<!-- <h5 style="width:90px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Local ID</h5> -->
<!-- <h5 style="width:90px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Local ID</h5> -->
<input style =" width:120px;margin-left:10px" name="localIdFrom" id="localIdFrom" type="hidden" placeholder="From" >
<input style =" width:120px;margin-left:10px" name="localIdFrom" id="localIdFrom" type="hidden" placeholder="From" >
<!-- <span>-</span> -->
<!-- <span>-</span> -->
<input style =" width:120px;" id="localIdTo" name="localIdTo" type="hidden" placeholder="To" >
<input style =" width:120px;" id="localIdTo" name="localIdTo" type="hidden" placeholder="To" >
<!-- </div> -->
<!-- </div> -->
<div style="margin-top:10px;margin-left:5px;height:55px;width:300px;border:2px solid black">
<div style="margin-top:10px;margin-left:5px;height:55px;width:300px;border:2px solid black">
<h5 style="width:80px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Satellite</h5>
<h5 style="width:80px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Satellite</h5>
<select name="satelite" id="satelite">
<select name="satelite" id="satelite">
<option selected disabled>Choose one</option>
<option selected disabled>Choose one</option>
<option value="CARTOSAT-1">CARTOSAT-1</option>
<option value="CARTOSAT-1">CARTOSAT-1</option>
<option value="CARTOSAT-2">CARTOSAT-2</option>
<option value="CARTOSAT-2">CARTOSAT-2</option>
<option value="CARTOSAT-2D">CARTOSAT-2D</option>
<option value="CARTOSAT-2D">CARTOSAT-2D</option>
<option value="CARTOSAT-2E">CARTOSAT-2E</option>
<option value="CARTOSAT-2E">CARTOSAT-2E</option>
<option value="IKONOS">IKONOS</option>
<option value="IKONOS">IKONOS</option>
<option value="IRS-1A">IRS-1A</option>
<option value="IRS-1A">IRS-1A</option>
<option value="IRS-1B">IRS-1B</option>
<option value="IRS-1B">IRS-1B</option>
<option value="IRS-1C">IRS-1C</option>
<option value="IRS-1C">IRS-1C</option>
<option value="IRS-1D">IRS-1D</option>
<option value="IRS-1D">IRS-1D</option>
<option value="IRS-P3">IRS-P3</option>
<option value="IRS-P3">IRS-P3</option>
<option value="IRS-P4">IRS-P4</option>
<option value="IRS-P4">IRS-P4</option>
<option value="IRS-P6">IRS-P6</option>
<option value="IRS-P6">IRS-P6</option>
<option value="IRS-R2">IRS-R2</option>
<option value="IRS-R2">IRS-R2</option>
<option value="IRS-R2A">IRS-R2A</option>
<option value="IRS-R2A">IRS-R2A</option>
<option value="OCEANSAT-2">OCEANSAT-2</option>
<option value="OCEANSAT-2">OCEANSAT-2</option>
<option value="RISAT-1">RISAT-1</option>
<option value="RISAT-1">RISAT-1</option>
</select>
</select>
</div>
</div>
<div style="margin-top:10px;margin-left:5px;height:70px;width:300px;border:2px solid black">
<div style="margin-top:10px;margin-left:5px;height:70px;width:300px;border:2px solid black">
<h5 style="width:70px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Sensor</h5>
<h5 style="width:70px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Sensor</h5>
<select name="sensors" id="sensors">
<select name="sensors" id="sensors">
<optgroup >
<optgroup >
<option selected disabled>Choose one</option>
<option selected disabled>Choose one</option>
<option value="AW">AW</option>
<option value="AW">AW</option>
<option value="L1">L1</option>
<option value="L1">L1</option>
<option value="L2">L2</option>
<option value="L2">L2</option>
<option value="L3">L3</option>
<option value="L3">L3</option>
<option value="L4">L4</option>
<option value="L4">L4</option>
<option value="MX">MX</option>
<option value="MX">MX</option>
<option value="OCM">OCM</option>
<option value="OCM">OCM</option>
<option value="PAN">PAN</option>
<option value="PAN">PAN</option>
<option value="PAN/MSI">PAN/MSI</option>
<option value="PAN/MSI">PAN/MSI</option>
<option value="SAR">SAR</option>
<option value="SAR">SAR</option>
<option value="WIF">WIF</option>
<option value="WIF">WIF</option>
</optgroup>
</optgroup>
</select>
</select>
</div>
</div>
<div style="margin-top:10px;margin-left:5px;height:90px;width:300px;border:2px solid black">
<div style="margin-top:10px;margin-left:5px;height:90px;width:300px;border:2px solid black">
<h5 style="width:120px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Date of Pass</h5>
<h5 style="width:120px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Date of Pass</h5>
<input name="dateOfPassFrom" class ="text-w-align" placeholder="From" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassFrom" value="2020-12-01" >
<input name="dateOfPassFrom" class ="text-w-align" placeholder="From" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassFrom" value="2020-12-01" >
<input name="dateOfPassTo" class="text-w-align" placeholder="To" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassTo" value="2020-12-31" >
<input name="dateOfPassTo" class="text-w-align" placeholder="To" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassTo" value="2020-12-31" >
</div>
</div>
<div style="margin-top:10px;margin-left:5px;height:70px;width:300px;border:2px solid black">
<div style="margin-top:10px;margin-left:5px;height:70px;width:300px;border:2px solid black">
<h5 style="width:50px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Path</h5>
<h5 style="width:50px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Path</h5>
<input name="pathFrom" style =" width:120px;margin-left:10px" id="pathFrom" type="number" placeholder="From">
<input name="pathFrom" style =" width:120px;margin-left:10px" id="pathFrom" type="number" placeholder="From">
<span>-</span>
<span>-</span>
<input name="pathTo" style =" width:120px;" id="pathTo" type="number" placeholder="To">
<input name="pathTo" style =" width:120px;" id="pathTo" type="number" placeholder="To">
</div>
</div>
<div style="margin-top:10px;margin-left:5px;height:70px;width:300px;border:2px solid black">
<div style="margin-top:10px;margin-left:5px;height:70px;width:300px;border:2px solid black">
<h5 style="width:50px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Row</h5>
<h5 style="width:50px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Row</h5>
<input name="rowFrom" style =" width:120px;margin-left:10px" id="rowFrom" type="number" placeholder="From">
<input name="rowFrom" style =" width:120px;margin-left:10px" id="rowFrom" type="number" placeholder="From">
<span>-</span>
<span>-</span>
<input name="rowTo" style =" width:120px;" id="rowTo" type="number" placeholder="To">
<input name="rowTo" style =" width:120px;" id="rowTo" type="number" placeholder="To">
</div>
</div>
<div class="modal-footer">
<div class="modal-footer">
<!-- <input type="submit" value="FILTER" > -->
<!-- <input type="submit" value="FILTER" > -->
<button id="filter" value="val_1" name="but1" class="btn btn-warning">Filter</button>
<button id="filter" value="val_1" name="but1" class="btn btn-warning">Filter</button>
<!-- <input value="Submit" type="submit" onclick="filterData()"> -->
<!-- <input value="Submit" type="submit" onclick="filterData()"> -->
<button id="reset" name="reset" onclick="resetForm()" class="btn btn-warning">Reset</button>
<button id="reset" name="reset" onclick="resetForm()" class="btn btn-warning">Reset</button>
<!-- <input type="button" onclick="resetForm()" class="btn btn-warning" value="Reset form"> -->
<!-- <input type="button" onclick="resetForm()" class="btn btn-warning" value="Reset form"> -->
</div>
</div>
</form>
</form>
<script>
<script>
function resetForm() {
function resetForm() {
document.getElementById("filterform").reset();
document.getElementById("filterform").reset();
}
}
</script>
</script>
</div>
</div>
<!-- attribute_filter2 select special type -->
<!-- attribute_filter2 select special type -->
<div class="modal-body" id="attribute_filter2" style="padding:0px;">
<div class="modal-body" id="attribute_filter2" style="padding:0px;">
<form id ="filterform1">
<form id ="filterform1">
<div style="margin-top:10px;margin-left:5px;height:55px;width:300px;border:2px solid black">
<div style="margin-top:10px;margin-left:5px;height:55px;width:300px;border:2px solid black">
<h5 style="width:180px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Select Special Type</h5>
<h5 style="width:180px;margin-top:-10px;margin-left:5px;background:#f8f9fa;">Select Special Type</h5>
<select name="selectnone" id="selectnone" onchange="changeFunc();">
<select name="selectnone" id="selectnone" onchange="changeFunc();">
<option value="selectnone">Select None</option>
<option value="selectnone">Select None</option>
<option value="city">City</option>
<option value="city">City</option>
<option value="point">Point</option>
<option value="point">Point</option>
<option value="administrator">Administrator Boundaries</option>
<option value="administrator">Administrator Boundaries</option>
<option value="rectangular">Rectangular Extent</option>
<option value="rectangular">Rectangular Extent</option>
</select>
</select>
</div>
</div>
</form>
</form>
<input style ="display:none;margin-top:10px;margin-left:80px;width:150px" id="cityname" type="text" name="gid" placeholder="city name" >
<input style ="display:none;margin-top:10px;margin-left:80px;width:150px" id="cityname" type="text" name="gid" placeholder="city name" >
<div id="search-result"></div>
<div id="search-result"></div>
<div class="clear"></div>
<div class="clear"></div>
<div class="modal-footer">
<div class="modal-footer">
<button id="cityfilter" class="btn btn-warning" onclick="onclicktaluka()">Filter</button>
<button id="cityfilter" class="btn btn-warning" onclick="onclicktaluka()">Filter</button>
<button id="reset" name="reset" onclick="resetForm1()" class="btn btn-warning">Reset</button>
<button id="reset" name="reset" onclick="resetForm1()" class="btn btn-warning">Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Page Content -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div id="page-content-wrapper">
<!-- <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom"> -->
<!-- <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom"> -->
<!-- <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button> -->
<!-- <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button> -->
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> -->
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> -->
<!-- <span class="navbar-toggler-icon"></span> -->
<!-- <span class="navbar-toggler-icon"></span> -->
<!-- </button> -->
<!-- </button> -->
<!-- </nav> -->
<!-- </nav> -->
<div class="container-fluid">
<div class="container-fluid">
<h4 class="mt-4">Satellite Data Information System (SDIS 2.0)</h4>
<h4 class="mt-4">Satellite Data Information System (SDIS 2.0)</h4>
<!--<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<!--<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p> -->
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p> -->
</div>
</div>
<div class="col-md-12">
<div class="col-md-12">
<div class="card-body ">
<div class="card-body ">
<div class="row">
<div class="row">
<div class="col-md-1" style="max-width: 3%;position: absolute;left: 0px;z-index: 1000;">
<div class="col-md-1" style="max-width: 3%;position: absolute;left: 0px;z-index: 1000;">
<button class="btn btn-info btn-round btn-fab btn-sm" onclick="defaultmap()">
<button class="btn btn-info btn-round btn-fab btn-sm" onclick="defaultmap()">
<i class="material-icons">language</i>
<i class="material-icons">language</i>
</button>
</button>
<button class="btn btn-info btn-round btn-fab btn-sm" onclick="zoomIn()">
<button class="btn btn-info btn-round btn-fab btn-sm" onclick="zoomIn()">
<i class="material-icons">add</i>
<i class="material-icons">add</i>
</button>
</button>
<button class="btn btn-info btn-round btn-fab btn-sm" onclick="zoomOut()">
<button class="btn btn-info btn-round btn-fab btn-sm" onclick="zoomOut()">
<i class="material-icons">remove</i>
<i class="material-icons">remove</i>
</button>
</button>
<button class="btn btn-info btn-round btn-fab btn-sm" onclick="geolocation()">
<button class="btn btn-info btn-round btn-fab btn-sm" onclick="geolocation()">
<i class="material-icons">gps_fixed</i>
<i class="material-icons">gps_fixed</i>
</button>
</button>
<button class="btn btn-info btn-round btn-fab btn-sm">
<button class="btn btn-info btn-round btn-fab btn-sm">
<i class="material-icons">view_list</i>
<i class="material-icons">view_list</i>
</button>
</button>
<button class="btn btn-info btn-round btn-fab btn-sm">
<button class="btn btn-info btn-round btn-fab btn-sm">
<i class="material-icons">fullscreen</i>
<i class="material-icons">fullscreen</i>
</button>
</button>
</div>
</div>
<div class="" style="position: fixed;top: 150px;right: 0;width: 64px;background:rgba(0, 0, 0, .3);z-index: 1031;border-radius: 8px 0 0 8px;text-align: center;">
<div class="" style="position: fixed;top: 150px;right: 0;width: 64px;background:rgba(0, 0, 0, .3);z-index: 1031;border-radius: 8px 0 0 8px;text-align: center;">
<div class="dropdown show-dropdown">
<div class="dropdown show-dropdown">
<a href="#" id="show_hide">
<a href="#" id="show_hide">
<i class="material-icons">language </i>
<i class="material-icons">language </i>
</a>
</a>
</div>
</div>
</div>
</div>
<div id="slidingDiv" style="position: absolute;top:150px;right: 60px;z-index:100;min-width: 500px;">
<div id="slidingDiv" style="position: absolute;top:150px;right: 60px;z-index:100;min-width: 500px;">
<div class="col-md-12">
<div class="col-md-12">
<div class="card ">
<div class="card ">
<div class="card-body">
<div class="card-body">
<div class="row">
<div class="row">
<div class="col-md-10">
<div class="col-md-10">
<div class="tab-content">
<div class="tab-content">
<div class="tab-pane active" id="link112">
<div class="tab-pane active" id="link112">
<div class="card-header card-header card-header-rose">
<div class="card-header card-header card-header-rose">
<h4 class="card-title">Layer Groups: <span id="groupscount"></span></h4>
<h4 class="card-title">Layer Groups: <span id="groupscount"></span></h4>
</div>
</div>
<div id="accordion" role="tablist">
<div id="accordion" role="tablist">
<div id="groups">
<div id="groups">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="link113">
<div class="tab-pane" id="link113">
<div class="card-header card-header card-header-rose">
<div class="card-header card-header card-header-rose">
<h4 class="card-title">Find near by position</h4>
<h4 class="card-title">Find near by position</h4>
</div>
</div>
First
First
</div>
</div>
<div class="tab-pane" id="link114">
<div class="tab-pane" id="link114">
<div class="card-header card-header card-header-rose">
<div class="card-header card-header card-header-rose">
<h4 class="card-title">Add Geom</h4>
<h4 class="card-title">Add Geom</h4>
</div>
</div>
First
First
</div>
</div>
<div class="tab-pane" id="link116">
<div class="tab-pane" id="link116">
<div class="card-header card-header card-header-rose">
<div class="card-header card-header card-header-rose">
<h4 class="card-title">Buffer</h4>
<h4 class="card-title">Buffer</h4>
</div>
</div>
First
First
</div>
</div>
<div class="tab-pane" id="link117">
<div class="tab-pane" id="link117">
<div class="card-header card-header card-header-rose">
<div class="card-header card-header card-header-rose">
<h4 class="card-title">Identify</h4>
<h4 class="card-title">Identify</h4>
</div>
</div>
<div id="idaccordionn" role="tablist">
<div id="idaccordionn" role="tablist">
<div id="groupss">
<div id="groupss">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="link118">
<div class="tab-pane" id="link118">
<div class="card-header card-header card-header-rose">
<div class="card-header card-header card-header-rose">
<h4 class="card-title">Measure</h4>
<h4 class="card-title">Measure</h4>
</div>
</div>
<div class="">
<div class="">
<ul class="nav nav-pills nav-pills-rose" role="tablist" style="padding-top: 5px;">
<ul class="nav nav-pills nav-pills-rose" role="tablist" style="padding-top: 5px;">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#link1" role="tablist" onclick=selectedType('LineString') style="border-radius: 10px;padding: 2px 5px;">
<a class="nav-link active" data-toggle="tab" href="#link1" role="tablist" onclick=selectedType('LineString') style="border-radius: 10px;padding: 2px 5px;">
<i class="material-icons" style="padding: 1px 0;">linear_scale</i>
<i class="material-icons" style="padding: 1px 0;">linear_scale</i>
</a>
</a>
</li>
</li>
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#link2" role="tablist" onclick=selectedType('Polygon') style="border-radius: 10px;padding: 2px 5px;">
<a class="nav-link" data-toggle="tab" href="#link2" role="tablist" onclick=selectedType('Polygon') style="border-radius: 10px;padding: 2px 5px;">
<i class="material-icons"style="padding: 1px 0;">square_foot</i>
<i class="material-icons"style="padding: 1px 0;">square_foot</i>
</a>
</a>
</li>
</li>
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#link3" role="tablist" onclick=selectedType('Circle') style="border-radius: 10px;padding: 2px 5px;">
<a class="nav-link" data-toggle="tab" href="#link3" role="tablist" onclick=selectedType('Circle') style="border-radius: 10px;padding: 2px 5px;">
<i class="material-icons"style="padding: 1px 0;"> panorama_fish_eye</i>
<i class="material-icons"style="padding: 1px 0;"> panorama_fish_eye</i>
</a>
</a>
</li>
</li>
</ul>
</ul>
<div class="tab-content tab-space">
<div class="tab-content tab-space">
<div class="tab-pane active" id="link1">
<div class="tab-pane active" id="link1">
Click on the map to start measure distance<br>
Click on the map to start measure distance<br>
Distance:<span id="distance"></span> </div>
Distance:<span id="distance"></span> </div>
<div class="tab-pane" id="link2">
<div class="tab-pane" id="link2">
Click on the map to start measure area<br>
Click on the map to start measure area<br>
Area:<span id="area"></span>
Area:<span id="area"></span>
</div>
</div>
<div class="tab-pane" id="link3">
<div class="tab-pane" id="link3">
Click on the map to start measure radious<br>
Click on the map to start measure radious<br>
Radious:<span id="radious"></span>
Radious:<span id="radious"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="link119">
<div class="tab-pane" id="link119">
<div class="card-header card-header card-header-rose">
<div class="card-header card-header card-header-rose">
<h4 class="card-title">Query Builder</h4>
<h4 class="card-title">Query Builder</h4>
</div>
</div>
First
First
</div>
</div>
<div class="tab-pane" id="link120">
<div class="tab-pane" id="link120">
<div class="card-header card-header card-header-rose">
<div class="card-header card-header card-header-rose">
<h4 class="card-title">Print</h4>
<h4 class="card-title">Print</h4>
</div>
</div>
<div class="col-lg-5 col-md-6 col-sm-3">
<div class="col-lg-5 col-md-6 col-sm-3">
<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
<a id="image-download" download="map.png"></a>
<a id="image-download" download="map.png"></a>
<select class="selectpicker" data-size="7" id="format" data-style="btn btn-primary btn-round" title="Single Select">
<select class="selectpicker" data-size="7" id="format" data-style="btn btn-primary btn-round" title="Single Select">
<option disabled selected>Page Size</option>
<option disabled selected>Page Size</option>
<option value="a0">A0 (slow)</option>
<option value="a0">A0 (slow)</option>
<option value="a1">A1</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
<option value="a3">A3</option>
<option value="a4" selected>A4</option>
<option value="a4" selected>A4</option>
<option value="a5">A5 (fast)</option>
<option value="a5">A5 (fast)</option>
</select>
</select>
</div>
</div>
<div class="col-lg-5 col-md-6 col-sm-3">
<div class="col-lg-5 col-md-6 col-sm-3">
<select class="selectpicker" data-size="7" id="resolution" data-style="btn btn-primary btn-round" title="Single Select">
<select class="selectpicker" data-size="7" id="resolution" data-style="btn btn-primary btn-round" title="Single Select">
<option disabled >Resolution</option>
<option disabled >Resolution</option>
<option value="72" selected>72 dpi (fast)</option>
<option value="72" selected>72 dpi (fast)</option>
<option value="150">150 dpi</option>
<option value="150">150 dpi</option>
<option value="300">300 dpi (slow)</option>
<option value="300">300 dpi (slow)</option>
</select>
</select>
</div>
</div>
<div class="col-lg-5 col-md-6 col-sm-3">
<div class="col-lg-5 col-md-6 col-sm-3">
<button class="btn btn-primary" id="export-pdf">Export PDF</button>
<button class="btn btn-primary" id="export-pdf">Export PDF</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="col-md-2">
<!--
<!--
color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
-->
-->
<ul class="nav nav-pills nav-pills-rose nav-pills-icons flex-column" role="tablist">
<ul class="nav nav-pills nav-pills-rose nav-pills-icons flex-column" role="tablist">
<li class="nav-item" style="padding-bottom: 10px;">
<li class="nav-item" style="padding-bottom: 10px;">
<a class="nav-links active" data-toggle="tab" href="#link112" role="tablist">
<a class="nav-links active" data-toggle="tab" href="#link112" role="tablist">
<i class="material-icons">layers</i>
<i class="material-icons">layers</i>
</a>
</a>
</li>
</li>
<li class="nav-item" style="padding-bottom: 10px;">
<li class="nav-item" style="padding-bottom: 10px;">
<a class="nav-links" data-toggle="tab" href="#link117" role="tablist">
<a class="nav-links" data-toggle="tab" href="#link117" role="tablist">
<i class="material-icons">location_searching</i>
<i class="material-icons">location_searching</i>
</a>
</a>
</li>
</li>
</ul>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" id="roleType">
<input type="hidden" id="roleType">
</div>
</div>
<div id="target-map" style="width: 100%; height: 530px;"></div>
<div id="target-map" style="width: 100%; height: 530px;"></div>
<div id="latlon" class="latlon"></div>
<div id="latlon" class="latlon"></div>
<div id="scale" class="scale-line"></div>
<div id="scale" class="scale-line"></div>
<div id="location"
<div id="location"
style="width: 24px; height: 24px; font-size: 24px;">
style="width: 24px; height: 24px; font-size: 24px;">
<div id="popup" class="ol-popup">
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
<div id="popup-content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div align="center" class="form-group col-md-12 paddint-top12">
<div align="center" class="form-group col-md-12 paddint-top12">
<div style="float:left">
<div style="float:left">
</div align="center" class="form-group col-md-12 paddint-top12">
</div align="center" class="form-group col-md-12 paddint-top12">
<a style="float:right" href="/satelliteform">Create New </a>
<a style="float:right" href="/satelliteform">Create New </a>
</div>
</div>
<div align="center" class="form-group col-md-12 paddint-top12">
<div align="center" class="form-group col-md-12 paddint-top12">
<table id="getASIReportList" class="table table-striped table-bordered" style="width: 100%; float:right">
<table id="getASIReportList" class="table table-striped table-bordered" style="width: 100%; float:right">
</table>
</table>
</div>
</div>
<script type="text/javascript">
<script type="text/javascript">
function clearSearch() {
function clearSearch() {
window.location = "[[@{/}]]";
window.location = "[[@{/}]]";
}
}
</script>
</script>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
<!-- /#page-content-wrapper -->
</div>
</div>
<!-- /#wrapper -->
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
<script>
function myFunction1() {
function myFunction1() {
var x = document.getElementById("attribute_filter");
var x = document.getElementById("attribute_filter");
if (x.style.display === "none") {
if (x.style.display === "none") {
x.style.display = "block";
x.style.display = "block";
} else {
} else {
x.style.display = "none";
x.style.display = "none";
}
}
}
}
</script>
</script>
<script>
<script>
function myFunction2() {
function myFunction2() {
var x = document.getElementById("attribute_filter2");
var x = document.getElementById("attribute_filter2");
if (x.style.display === "none") {
if (x.style.display === "none") {
x.style.display = "block";
x.style.display = "block";
} else {
} else {
x.style.display = "none";
x.style.display = "none";
}
}
}
}
</script>
</script>
<script>
<script>
$("#attri2").click(function(){
$("#attri2").click(function(){
$("#attribute_filter").hide();
$("#attribute_filter").hide();
});
});
</script>
</script>
<script>
<script>
$("#attri").click(function(){
$("#attri").click(function(){
$("#attribute_filter2").hide();
$("#attribute_filter2").hide();
});
});
</script>
</script>
<script type="text/javascript">
<script type="text/javascript">
function changeFunc() {
function changeFunc() {
var selectBox = document.getElementById("selectnone");
var selectBox = document.getElementById("selectnone");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
if (selectedValue=="city"){
if (selectedValue=="city"){
$('#cityname').show();
$('#cityname').show();
}
}
else {
else {
alert("Error");
alert("Error");
$('#cityname').hide();
$('#cityname').hide();
}
}
}
}
</script>
</script>
<script>
<script>
$(document).ready(function() {
$(document).ready(function() {
var role='${role}';
var role='${role}';
$("#roleType").val(role);
$("#roleType").val(role);
$("#slidingDiv").hide();
$("#slidingDiv").hide();
$('#show_hide').click(function () {
$('#show_hide').click(function () {
$("#slidingDiv").toggle("'slide', {direction: 'right' }, 1000");
$("#slidingDiv").toggle("'slide', {direction: 'right' }, 1000");
});
});
});
});
</script>
</script>
<script>
<script>
div = document.getElementById('attribute_filter2')
div = document.getElementById('attribute_filter2')
//To hide
//To hide
div.style.display="none";
div.style.display="none";
</script>
</script>
<script>
<script>
div = document.getElementById('for_city')
div = document.getElementById('for_city')
//To hide
//To hide
//div.style.display="none";
//div.style.display="none";
</script>
</script>
</body>
</body>
<script src=//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js></script>
<script src=//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js></script>
<script>
<script>
//for filter code
//for filter code
$('#filter').click(function(e){
$('#filter').click(function(e){
e.preventDefault();
e.preventDefault();
var code={};
var code={};
code.localIdFrom=document.getElementById('localIdFrom').value;
code.localIdFrom=document.getElementById('localIdFrom').value;
code.localIdTo=document.getElementById('localIdTo').value;
code.localIdTo=document.getElementById('localIdTo').value;
code.satelite=document.getElementById('satelite').value;
code.satelite=document.getElementById('satelite').value;
code.sensors=document.getElementById('sensors').value;
code.sensors=document.getElementById('sensors').value;
/* alert(document.getElementById('dateOfPassFrom').value + "datefrom"); */
/* alert(document.getElementById('dateOfPassFrom').value + "datefrom"); */
if(document.getElementById('dateOfPassFrom').value=='')
if(document.getElementById('dateOfPassFrom').value=='')
{
{
code.dateOfPassFrom=null;
code.dateOfPassFrom=null;
alert(code.dateOfPassFrom);
alert(code.dateOfPassFrom);
}else{
}else{
code.dateOfPassFrom=document.getElementById('dateOfPassFrom').value;
code.dateOfPassFrom=document.getElementById('dateOfPassFrom').value;
}
}
if(document.getElementById('dateOfPassTo').value==''){
if(document.getElementById('dateOfPassTo').value==''){
code.dateOfPassTo=null;
code.dateOfPassTo=null;
}else{
}else{
code.dateOfPassTo=document.getElementById('dateOfPassTo').value;
code.dateOfPassTo=document.getElementById('dateOfPassTo').value;
}
}
code.pathFrom=document.getElementById('pathFrom').value;
code.pathFrom=document.getElementById('pathFrom').value;
code.pathTo=document.getElementById('pathTo').value;
code.pathTo=document.getElementById('pathTo').value;
code.rowFrom=document.getElementById('rowFrom').value;
code.rowFrom=document.getElementById('rowFrom').value;
code.rowTo=document.getElementById('rowTo').value;
code.rowTo=document.getElementById('rowTo').value;
var codobject=JSON.stringify(code);
var codobject=JSON.stringify(code);
//alert(codobject);
//alert(codobject);
console.log(codobject)
console.log(codobject)
$.ajax({
$.ajax({
url:"getData",
url:"getData",
type:"POST",
type:"POST",
data:codobject,
data:codobject,
contentType:"application/json;charset=utf-8",
contentType:"application/json;charset=utf-8",
dataType: 'json',
dataType: 'json',
success: function(data) {
success: function(data) {
loadtable(data);
loadtable(data);
},
},
error : function(request, status, error) {
error : function(request, status, error) {
alert(error.toString)
alert(error.toString)
}
}
})
})
})
})
//close filter code
//close filter code
$(document).ready(function(){
$(document).ready(function(){
$.ajax({
$.ajax({
url: "findAll",
url: "findAll",
type : 'GET',
type : 'GET',
success : function(data) {
success : function(data) {
loadtable(data);
loadtable(data);
},
},
error : function(request, status, error) {
error : function(request, status, error) {
alert(error)
alert(error)
}
}
});
});
})
})
//for datatable code
//for datatable code
function loadtable(data){
function loadtable(data){
console.log(data);
console.log(data);
if ( $.fn.DataTable.isDataTable( '#getASIReportList' ) ) {
if ( $.fn.DataTable.isDataTable( '#getASIReportList' ) ) {
$("#getASIReportList").dataTable().fnDestroy();
$("#getASIReportList").dataTable().fnDestroy();
$('#getASIReportList').empty();
$('#getASIReportList').empty();
}
}
var table=$('#getASIReportList').DataTable({
var table=$('#getASIReportList').DataTable({
pageLength : 5,
pageLength : 5,
dom: 'Bfrtip',
dom: 'Bfrtip',
'processing': true,
'processing': true,
'columnDefs': [{
'columnDefs': [{
'targets': 0,
'targets': 0,
'searchable': false,
'searchable': false,
'orderable': false,
'orderable': false,
'className': 'dt-body-center',
'className': 'dt-body-center',
'render': function (data, type, full, meta){
'render': function (data, type, full, meta){
var longlat='['+full.center_long+','+full.center_lat+']';
var longlat='['+full.center_long+','+full.center_lat+']';
var lname='['+full.lllat+']';
var lname='['+full.lllat+']';
return '<input type="checkbox" id="checkbox" onchange="Myzoom('+longlat+')" name="'+lname+'" value="' + $('<div/>').text(data).html() + '">';
return '<input type="checkbox" id="checkbox" onchange="Myzoom('+longlat+')" name="'+lname+'" value="' + $('<div/>').text(data).html() + '">';
},
},
}],
}],
buttons: [
buttons: [
'pdf'
'pdf'
],
],
"data":data ,
"data":data ,
columns : [{
columns : [{
title : '',
title : '',
data : ''
data : ''
},{
},{
title : 'Layer Name',
title : 'Layer Name',
data : 'layername'
data : 'layername'
}, {
}, {
title : 'Satellite',
title : 'Satellite',
data : 'satelite'
data : 'satelite'
}, {
}, {
title : 'Sensor',
title : 'Sensor',
data : 'sansor'
data : 'sansor'
},{
},{
title: 'Date Of Pass',
title: 'Date Of Pass',
data :'date'
data :'date'
}, {
}, {
title : 'Path',
title : 'Path',
data : 'path'
data : 'path'
}, {
}, {
title : 'Row',
title : 'Row',
data : 'row',
data : 'row',
}, {
}, {
title : 'Center latitude',
title : 'Center latitude',
data : 'center_lat',
data : 'center_lat',
},{
},{
title : 'Center longitude',
title : 'Center longitude',
data : 'center_long',
data : 'center_long',
}
}
]
]
});
});
}
}
//close datatable
//close datatable
function Myzoom(longlat)
function Myzoom(longlat)
{
{
if(longlat!=null)
if(longlat!=null)
{
{
console.log(longlat);
console.log(longlat);
var coordMin = ol.proj.fromLonLat(longlat,'EPSG:3857','EPSG:4326');
var coordMin = ol.proj.fromLonLat(longlat,'EPSG:3857','EPSG:4326');
var coordMax = ol.proj.fromLonLat(longlat,'EPSG:3857','EPSG:4326');
var coordMax = ol.proj.fromLonLat(longlat,'EPSG:3857','EPSG:4326');
var extent=[coordMin[0],coordMin[1],coordMax[0],coordMax[1]];
var extent=[coordMin[0],coordMin[1],coordMax[0],coordMax[1]];
map.getView().fit(extent,map.getSize());
map.getView().fit(extent,map.getSize());
const center = map.getView().getCenter();
const center = map.getView().getCenter();
map.getView().setZoom(8.5);
map.getView().setZoom(8.5);
}
}
}
}
var layerselected=[];
var layerselected=[];
$('#getASIReportList').on('change', 'input[type="checkbox"]', function(){
$('#getASIReportList').on('change', 'input[type="checkbox"]', function(){
var lname=this.name.replace(/[\[\]']+/g,'');
var lname=this.name.replace(/[\[\]']+/g,'');
var styleName='satellite_data_5';
var styleName='satellite_data_5';
var whr="lllat='"+lname+"'";
var whr="lllat='"+lname+"'";
if(this.checked)
if(this.checked)
{
{
SectorLayer= new ol.layer.Tile({
SectorLayer= new ol.layer.Tile({
source : new ol.source.TileWMS({
source : new ol.source.TileWMS({
url : 'http://localhost:8080/geoserver/cite/wms',
url : 'http://localhost:8080/geoserver/cite/wms',
//crossOrigin: 'anonymous',
//crossOrigin: 'anonymous',
params : {
params : {
'LAYERS' : styleName,
'LAYERS' : styleName,
CQL_FILTER: whr,
CQL_FILTER: whr,
format_options:'dpi:180',
format_options:'dpi:180',
version : '1.1.1',
version : '1.1.1',
STYLES:''
STYLES:''
}
}
}),
}),
showLegend: true,
showLegend: true,
//maxResolution : 256,
//maxResolution : 256,
name :styleName,
name :styleName,
//visible:false
//visible:false
}),
}),
layerselected.push(SectorLayer);
layerselected.push(SectorLayer);
map.addLayer(SectorLayer);
map.addLayer(SectorLayer);
console.log(layerselected);
console.log(layerselected);
}
}
else
else
{
{
console.log(layerselected);
console.log(layerselected);
for( var i =0; i<layerselected.length;i++){
for( var i =0; i<layerselected.length;i++){
var a=layerselected[i].get('name');
var a=layerselected[i].get('name');
if(styleName==a)
if(styleName==a)
map.removeLayer(layerselected[i]);
map.removeLayer(layerselected[i]);
}
}
}
}
console.log(layerselected[0]);
console.log(layerselected[0]);
}); //checkbox function close bracket
}); //checkbox function close bracket
</script>
</script>
<!--
<script src="customol/js/clear.js"></script>
<script src="customol/js/clear.js"></script>
<script src="customol/js/identify.js"></script>
<script src="customol/js/identify.js"></script>
<script src="customol/js/exportpdf.js"></script>
<script src="customol/js/exportpdf.js"></script>
<script src="customol/js/measure.js"></script>
<script src="customol/js/measure.js"></script>
<script src="customol/js/controllers.js"></script>
<script src="customol/js/controllers.js"></script>
<script src="customol/js/navigation.js"></script>
<script src="customol/js/navigation.js"></script>
<script src="customol/js/scaleline.js"></script>
<script src="customol/js/scaleline.js"></script>
<script src="customol/js/mouse-position.js"></script>
<script src="customol/js/mouse-position.js"></script>
<script src="customol/js/layerSwitcher.js"></script>
<script src="customol/js/layerSwitcher.js"></script>
<script src="customol/js/findbylocation.js"></script>
<script src="customol/js/findbylocation.js"></script> -->
<script src="customol/js/main.js"></script>
<script src="customol/js/LayersGroup/indianmapLayersGroup.js"></script>
<script src="customol/js/LayersGroup/satelliteGroup.js"></script>
<script src="customol/js/LayersGroup/satelliteGroup.js"></script>
<script src="customol/js/LayersGroup/commonlayersGroup.js"></script>
<script src="customol/js/LayersGroup/commonlayersGroup.js"></script>
<script src="customol/js/LayersGroup/transportGroup.js"></script>
<script src="customol/js/LayersGroup/transportGroup.js"></script>
<script src="customol/js/LayersGroup/IdentifyLayerGroup.js"></script>
<script src="customol/js/LayersGroup/IdentifyLayerGroup.js"></script>
<script src="customol/js/addGeom.js"></script>
<script src="customol/js/LayersGroup/indianmapLayersGroup.js"></script>
<script src="customol/js/LayersGroup/geomGroup.js"></script>
<script src="customol/js/commonfunctions/clear.js"></script>
<script src="customol/js/identify/identify.js"></script>
<script src="customol/js/export/exportpdf.js"></script>
<script src="customol/js/geom/geom.js"></script>
<script src="customol/js/controllers/controllers.js"></script>
<script src="customol/js/navigation/navigation.js"></script>
<script src="customol/js/controllers/scaleline.js"></script>
<script src="customol/js/controllers/mouse-position.js"></script>
<script src="customol/js/layerswitcher/layerSwitcher.js"></script>
<script src="customol/js/legend/legend.js"></script>
<script src="customol/js/buffer/buffer.js"></script>
<script src="customol/js/services/services.js"></script>
<script src="customol/js/commonfunctions/Base64.js"></script>
<script src="customol/js/commonfunctions/commonfunctions.js"></script>
<!-- <script src="customol/js/addGeom.js"></script>
<script src="customol/js/geocoder.js"></script>
<script src="customol/js/geocoder.js"></script>
<script src="customol/js/main.js"></script>
<script src="customol/js/main.js"></script>
<script src="customol/js/services/services.js"></script>
<script src="customol/js/services/services.js"></script>
<script src="customol/js/Base64.js"></script>
<script src="customol/js/Base64.js"></script>
<script src="customol/js/geomForm.js"></script>
<script src="customol/js/geomForm.js"></script> -->
<<<<<<< HEAD
<<<<<<< HEAD
<script src="mis/js/services/misservices.js"></script>
<script src="mis/js/services/misservices.js"></script>
<script src="mis/js/customscripts/search.js"></script>
<script src="mis/js/customscripts/search.js"></script>
=======
=======
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBdtfzD1BMIakObBrKwtlHYdU5hoKdPuI"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBdtfzD1BMIakObBrKwtlHYdU5hoKdPuI"></script>
<script src="customol/js/googleapi/googlemaps.js"></script> -->
<script src="customol/js/googleapi/googlemaps.js"></script> -->
>>>>>>> abc
>>>>>>> abc
</html>
</html>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<!-- Mirrored from themedesigner.in/demo/admin-press/main/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 04 May 2019 05:15:32 GMT -->
<!-- Mirrored from themedesigner.in/demo/admin-press/main/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 04 May 2019 05:15:32 GMT -->
<head>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/bisag_logo.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/bisag_logo.png">
<title>SDIS</title>
<title>SDIS</title>
<!-- Bootstrap Core CSS -->
<!-- Bootstrap Core CSS -->
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- chartist CSS -->
<!-- chartist CSS -->
<link href="assets/plugins/chartist-js/dist/chartist.min.css" rel="stylesheet">
<link href="assets/plugins/chartist-js/dist/chartist.min.css" rel="stylesheet">
<link href="assets/plugins/chartist-js/dist/chartist-init.css" rel="stylesheet">
<link href="assets/plugins/chartist-js/dist/chartist-init.css" rel="stylesheet">
<link href="assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css" rel="stylesheet">
<link href="assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css" rel="stylesheet">
<!-- morris CSS -->
<!-- morris CSS -->
<link href="assets/plugins/morrisjs/morris.css" rel="stylesheet">
<link href="assets/plugins/morrisjs/morris.css" rel="stylesheet">
<!-- Vector CSS -->
<!-- Vector CSS -->
<link href="assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet" />
<link href="assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet" />
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- You can change the theme colors from here -->
<!-- You can change the theme colors from here -->
<link href="assets/css/colors/blue.css" id="theme" rel="stylesheet">
<link href="assets/css/colors/blue.css" id="theme" rel="stylesheet">
<link href="ol/ol.css" rel="stylesheet">
<link href="ol/ol.css" rel="stylesheet">
<link href="customol/css/customOlStyle.css" rel="stylesheet" />
<link href="customol/css/customOlStyle.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<link href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<![endif]-->
</head>
</head>
<body class="fix-header fix-sidebar card-no-border">
<body class="fix-header fix-sidebar card-no-border">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div class="preloader">
<div class="preloader">
<svg class="circular" viewBox="25 25 50 50">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div id="main-wrapper">
<div id="main-wrapper">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<header class="topbar" style="background: #1976d2;">
<header class="topbar" style="background: #1976d2;">
<nav class="navbar top-navbar navbar-expand-md navbar-light">
<nav class="navbar top-navbar navbar-expand-md navbar-light">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Logo -->
<!-- Logo -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div class="navbar-header">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<a class="navbar-brand" href="index.html">
<!-- Logo icon --><b>
<!-- Logo icon --><b>
<!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
<!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
<!-- Dark Logo icon -->
<!-- Dark Logo icon -->
<!-- <img src="assets/images/logo-icon.png" alt="homepage" class="dark-logo" /> -->
<!-- <img src="assets/images/logo-icon.png" alt="homepage" class="dark-logo" /> -->
<!-- Light Logo icon -->
<!-- Light Logo icon -->
<!-- <img src="assets/images/logo-light-icon.png" alt="homepage" class="light-logo" /> -->
<!-- <img src="assets/images/logo-light-icon.png" alt="homepage" class="light-logo" /> -->
</b>
</b>
<!--End Logo icon -->
<!--End Logo icon -->
<!-- Logo text --><span>
<!-- Logo text --><span>
<!-- dark Logo text -->
<!-- dark Logo text -->
<img src="assets/images/bisag_logo.png" alt="homepage" class="dark-logo" style="height: 48px;" />
<img src="assets/images/bisag_logo.png" alt="homepage" class="dark-logo" style="height: 48px;" />
<!-- Light Logo text -->
<!-- Light Logo text -->
<img src="assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span> </a>
<img src="assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span> </a>
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Logo -->
<!-- End Logo -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div class="navbar-collapse">
<div class="navbar-collapse">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<ul class="navbar-nav mr-auto mt-md-0">
<ul class="navbar-nav mr-auto mt-md-0">
<!-- This is -->
<!-- This is -->
<li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="mdi mdi-menu"></i></a> </li>
<li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="mdi mdi-menu"></i></a> </li>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Comment -->
<!-- Comment -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-message"></i>
<a class="nav-link dropdown-toggle text-muted text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-message"></i>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
</a>
</a>
<div class="dropdown-menu mailbox animated slideInUp">
<div class="dropdown-menu mailbox animated slideInUp">
<ul>
<ul>
<li>
<li>
<div class="drop-title">Notifications</div>
<div class="drop-title">Notifications</div>
</li>
</li>
<li>
<li>
<div class="message-center">
<div class="message-center">
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="btn btn-danger btn-circle"><i class="fa fa-link"></i></div>
<div class="btn btn-danger btn-circle"><i class="fa fa-link"></i></div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Luanch Admin</h5> <span class="mail-desc">Just see the my new admin!</span> <span class="time">9:30 AM</span> </div>
<h5>Luanch Admin</h5> <span class="mail-desc">Just see the my new admin!</span> <span class="time">9:30 AM</span> </div>
</a>
</a>
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="btn btn-success btn-circle"><i class="ti-calendar"></i></div>
<div class="btn btn-success btn-circle"><i class="ti-calendar"></i></div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Event today</h5> <span class="mail-desc">Just a reminder that you have event</span> <span class="time">9:10 AM</span> </div>
<h5>Event today</h5> <span class="mail-desc">Just a reminder that you have event</span> <span class="time">9:10 AM</span> </div>
</a>
</a>
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="btn btn-info btn-circle"><i class="ti-settings"></i></div>
<div class="btn btn-info btn-circle"><i class="ti-settings"></i></div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Settings</h5> <span class="mail-desc">You can customize this template as you want</span> <span class="time">9:08 AM</span> </div>
<h5>Settings</h5> <span class="mail-desc">You can customize this template as you want</span> <span class="time">9:08 AM</span> </div>
</a>
</a>
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="btn btn-primary btn-circle"><i class="ti-user"></i></div>
<div class="btn btn-primary btn-circle"><i class="ti-user"></i></div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
</a>
</a>
</div>
</div>
</li>
</li>
<li>
<li>
<a class="nav-link text-center" href="javascript:void(0);"> <strong>Check all notifications</strong> <i class="fa fa-angle-right"></i> </a>
<a class="nav-link text-center" href="javascript:void(0);"> <strong>Check all notifications</strong> <i class="fa fa-angle-right"></i> </a>
</li>
</li>
</ul>
</ul>
</div>
</div>
</li>
</li>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Comment -->
<!-- End Comment -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Messages -->
<!-- Messages -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" id="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-email"></i>
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" id="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-email"></i>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
</a>
</a>
<div class="dropdown-menu mailbox animated slideInUp" aria-labelledby="2">
<div class="dropdown-menu mailbox animated slideInUp" aria-labelledby="2">
<ul>
<ul>
<li>
<li>
<div class="drop-title">You have 4 new messages</div>
<div class="drop-title">You have 4 new messages</div>
</li>
</li>
<li>
<li>
<div class="message-center">
<div class="message-center">
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="user-img"> <img src="assets/images/users/1.jpg" alt="user" class="img-circle"> <span class="profile-status online pull-right"></span> </div>
<div class="user-img"> <img src="assets/images/users/1.jpg" alt="user" class="img-circle"> <span class="profile-status online pull-right"></span> </div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:30 AM</span> </div>
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:30 AM</span> </div>
</a>
</a>
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="user-img"> <img src="assets/images/users/2.jpg" alt="user" class="img-circle"> <span class="profile-status busy pull-right"></span> </div>
<div class="user-img"> <img src="assets/images/users/2.jpg" alt="user" class="img-circle"> <span class="profile-status busy pull-right"></span> </div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Sonu Nigam</h5> <span class="mail-desc">I've sung a song! See you at</span> <span class="time">9:10 AM</span> </div>
<h5>Sonu Nigam</h5> <span class="mail-desc">I've sung a song! See you at</span> <span class="time">9:10 AM</span> </div>
</a>
</a>
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="user-img"> <img src="assets/images/users/3.jpg" alt="user" class="img-circle"> <span class="profile-status away pull-right"></span> </div>
<div class="user-img"> <img src="assets/images/users/3.jpg" alt="user" class="img-circle"> <span class="profile-status away pull-right"></span> </div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Arijit Sinh</h5> <span class="mail-desc">I am a singer!</span> <span class="time">9:08 AM</span> </div>
<h5>Arijit Sinh</h5> <span class="mail-desc">I am a singer!</span> <span class="time">9:08 AM</span> </div>
</a>
</a>
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="user-img"> <img src="assets/images/users/4.jpg" alt="user" class="img-circle"> <span class="profile-status offline pull-right"></span> </div>
<div class="user-img"> <img src="assets/images/users/4.jpg" alt="user" class="img-circle"> <span class="profile-status offline pull-right"></span> </div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
</a>
</a>
</div>
</div>
</li>
</li>
<li>
<li>
<a class="nav-link text-center" href="javascript:void(0);"> <strong>See all e-Mails</strong> <i class="fa fa-angle-right"></i> </a>
<a class="nav-link text-center" href="javascript:void(0);"> <strong>See all e-Mails</strong> <i class="fa fa-angle-right"></i> </a>
</li>
</li>
</ul>
</ul>
</div>
</div>
</li>
</li>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Messages -->
<!-- End Messages -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Messages -->
<!-- Messages -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<li class="nav-item dropdown mega-dropdown"> <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="mdi mdi-view-grid"></i></a>
<li class="nav-item dropdown mega-dropdown"> <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="mdi mdi-view-grid"></i></a>
<div class="dropdown-menu animated slideInUp">
<div class="dropdown-menu animated slideInUp">
<ul class="mega-dropdown-menu row">
<ul class="mega-dropdown-menu row">
<li class="col-lg-3 col-xlg-2 m-b-30">
<li class="col-lg-3 col-xlg-2 m-b-30">
<h4 class="m-b-20">CAROUSEL</h4>
<h4 class="m-b-20">CAROUSEL</h4>
<!-- CAROUSEL -->
<!-- CAROUSEL -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="carousel-item active">
<div class="container"> <img class="d-block img-fluid" src="assets/images/big/img1.jpg" alt="First slide"></div>
<div class="container"> <img class="d-block img-fluid" src="assets/images/big/img1.jpg" alt="First slide"></div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item">
<div class="container"><img class="d-block img-fluid" src="assets/images/big/img2.jpg" alt="Second slide"></div>
<div class="container"><img class="d-block img-fluid" src="assets/images/big/img2.jpg" alt="Second slide"></div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item">
<div class="container"><img class="d-block img-fluid" src="assets/images/big/img3.jpg" alt="Third slide"></div>
<div class="container"><img class="d-block img-fluid" src="assets/images/big/img3.jpg" alt="Third slide"></div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
<!-- End CAROUSEL -->
<!-- End CAROUSEL -->
</li>
</li>
<li class="col-lg-3 m-b-30">
<li class="col-lg-3 m-b-30">
<h4 class="m-b-20">ACCORDION</h4>
<h4 class="m-b-20">ACCORDION</h4>
<!-- Accordian -->
<!-- Accordian -->
<div id="accordion" class="nav-accordion" role="tablist" aria-multiselectable="true">
<div id="accordion" class="nav-accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
Collapsible Group Item #1
</a>
</a>
</h5> </div>
</h5> </div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high. </div>
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high. </div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
Collapsible Group Item #2
</a>
</a>
</h5> </div>
</h5> </div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
Collapsible Group Item #3
</a>
</a>
</h5> </div>
</h5> </div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</li>
<li class="col-lg-3 m-b-30">
<li class="col-lg-3 m-b-30">
<h4 class="m-b-20">CONTACT US</h4>
<h4 class="m-b-20">CONTACT US</h4>
<!-- Contact -->
<!-- Contact -->
<form>
<form>
<div class="form-group">
<div class="form-group">
<input type="text" class="form-control" id="exampleInputname1" placeholder="Enter Name"> </div>
<input type="text" class="form-control" id="exampleInputname1" placeholder="Enter Name"> </div>
<div class="form-group">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email"> </div>
<input type="email" class="form-control" placeholder="Enter email"> </div>
<div class="form-group">
<div class="form-group">
<textarea class="form-control" id="exampleTextarea" rows="3" placeholder="Message"></textarea>
<textarea class="form-control" id="exampleTextarea" rows="3" placeholder="Message"></textarea>
</div>
</div>
<button type="submit" class="btn btn-info">Submit</button>
<button type="submit" class="btn btn-info">Submit</button>
</form>
</form>
</li>
</li>
<li class="col-lg-3 col-xlg-4 m-b-30">
<li class="col-lg-3 col-xlg-4 m-b-30">
<h4 class="m-b-20">List style</h4>
<h4 class="m-b-20">List style</h4>
<!-- List style -->
<!-- List style -->
<ul class="list-style-none">
<ul class="list-style-none">
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> You can give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> You can give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Forth link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Forth link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another fifth link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another fifth link</a></li>
</ul>
</ul>
</li>
</li>
</ul>
</ul>
</div>
</div>
</li>
</li>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Messages -->
<!-- End Messages -->
<!-- ============================================================== -->
<!-- ============================================================== -->
</ul>
</ul>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- User profile and search -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<ul class="navbar-nav my-lg-0">
<ul class="navbar-nav my-lg-0">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Search -->
<!-- Search -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<li class="nav-item hidden-sm-down search-box"> <a class="nav-link hidden-sm-down text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="ti-search"></i></a>
<li class="nav-item hidden-sm-down search-box"> <a class="nav-link hidden-sm-down text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="ti-search"></i></a>
<form class="app-search">
<form class="app-search">
<input type="text" class="form-control" placeholder="Search & enter"> <a class="srh-btn"><i class="ti-close"></i></a> </form>
<input type="text" class="form-control" placeholder="Search & enter"> <a class="srh-btn"><i class="ti-close"></i></a> </form>
</li>
</li>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Language -->
<!-- Language -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="flag-icon flag-icon-us"></i></a>
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="flag-icon flag-icon-us"></i></a>
<div class="dropdown-menu dropdown-menu-right scale-up"> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-in"></i> India</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-fr"></i> French</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-cn"></i> China</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-de"></i> Dutch</a> </div>
<div class="dropdown-menu dropdown-menu-right scale-up"> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-in"></i> India</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-fr"></i> French</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-cn"></i> China</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-de"></i> Dutch</a> </div>
</li>
</li>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Profile -->
<!-- Profile -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-power-off"></i> </a>
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-power-off"></i> </a>
<div class="dropdown-menu dropdown-menu-right scale-up">
<div class="dropdown-menu dropdown-menu-right scale-up">
<ul class="dropdown-user">
<ul class="dropdown-user">
<li><a href="/logout"><i class="fa fa-power-off"></i> Logout</a></li>
<li><a href="/logout"><i class="fa fa-power-off"></i> Logout</a></li>
</ul>
</ul>
</div>
</div>
</li>
</li>
</ul>
</ul>
</div>
</div>
</nav>
</nav>
</header>
</header>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Topbar header -->
<!-- End Topbar header -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div class="page-wrapper">
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div class="row page-titles">
<div class="row page-titles">
<button class="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
<button class="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div class="container-fluid">
<div class="container-fluid">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<div class="row">
<div class="row">
<div class="col-lg-4 col-xlg-3">
<div class="col-lg-4 col-xlg-3">
<div class="card">
<div class="card">
<div class="card-body bg-inverse" style="background: url(../assets/images/background/user-info.jpg) / cover;">
<div class="card-body bg-inverse" style="background: url(../assets/images/background/user-info.jpg) / cover;">
<h3 class="text-white card-title">Filter</h3>
<h3 class="text-white card-title">Filter</h3>
</div>
</div>
<div class="card-body">
<div class="card-body">
<div class="message-box contact-box">
<div class="message-box contact-box">
<div class="message-widget contact-widget">
<div class="message-widget contact-widget">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home5" role="tab" aria-controls="home5" aria-expanded="true"><span class="hidden-sm-up"><i class="ti-home"></i></span> <span class="hidden-xs-down">Attribute</span></a> </li>
<li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home5" role="tab" aria-controls="home5" aria-expanded="true"><span class="hidden-sm-up"><i class="ti-home"></i></span> <span class="hidden-xs-down">Attribute</span></a> </li>
<li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile5" role="tab" aria-controls="profile"><span class="hidden-sm-up"><i class="ti-user"></i></span> <span class="hidden-xs-down">Spatial</span></a></li>
<li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile5" role="tab" aria-controls="profile"><span class="hidden-sm-up"><i class="ti-user"></i></span> <span class="hidden-xs-down">Spatial</span></a></li>
</ul>
</ul>
<div class="tab-content tabcontent-border p-20" id="myTabContent">
<div class="tab-content tabcontent-border p-20" id="myTabContent">
<div role="tabpanel" class="tab-pane fade show active" id="home5" aria-labelledby="home-tab">
<div role="tabpanel" class="tab-pane fade show active" id="home5" aria-labelledby="home-tab">
<form id ="filterform" >
<form id ="filterform" >
<input name="localIdFrom" style="border:2px solid black" id="localIdFrom" type="hidden" placeholder="From" >
<input name="localIdFrom" style="border:2px solid black" id="localIdFrom" type="hidden" placeholder="From" >
<input style =" width:120px;" id="localIdTo" name="localIdTo" type="hidden" placeholder="To" >
<input style =" width:120px;" id="localIdTo" name="localIdTo" type="hidden" placeholder="To" >
Satellite
Satellite
<select name="satelite" id="satelite" class="form-control" >
<select name="satelite" id="satelite" class="form-control" >
<option selected disabled>Choose one</option>
<option selected disabled>Choose one</option>
<option value="CARTOSAT-1">CARTOSAT-1</option>
<option value="CARTOSAT-1">CARTOSAT-1</option>
<option value="CARTOSAT-2">CARTOSAT-2</option>
<option value="CARTOSAT-2">CARTOSAT-2</option>
<option value="CARTOSAT-2D">CARTOSAT-2D</option>
<option value="CARTOSAT-2D">CARTOSAT-2D</option>
<option value="CARTOSAT-2E">CARTOSAT-2E</option>
<option value="CARTOSAT-2E">CARTOSAT-2E</option>
<option value="IKONOS">IKONOS</option>
<option value="IKONOS">IKONOS</option>
<option value="IRS-1A">IRS-1A</option>
<option value="IRS-1A">IRS-1A</option>
<option value="IRS-1B">IRS-1B</option>
<option value="IRS-1B">IRS-1B</option>
<option value="IRS-1C">IRS-1C</option>
<option value="IRS-1C">IRS-1C</option>
<option value="IRS-1D">IRS-1D</option>
<option value="IRS-1D">IRS-1D</option>
<option value="IRS-P3">IRS-P3</option>
<option value="IRS-P3">IRS-P3</option>
<option value="IRS-P4">IRS-P4</option>
<option value="IRS-P4">IRS-P4</option>
<option value="IRS-P6">IRS-P6</option>
<option value="IRS-P6">IRS-P6</option>
<option value="IRS-R2">IRS-R2</option>
<option value="IRS-R2">IRS-R2</option>
<option value="IRS-R2A">IRS-R2A</option>
<option value="IRS-R2A">IRS-R2A</option>
<option value="OCEANSAT-2">OCEANSAT-2</option>
<option value="OCEANSAT-2">OCEANSAT-2</option>
<option value="RISAT-1">RISAT-1</option>
<option value="RISAT-1">RISAT-1</option>
</select>
</select>
<br><br>
<br><br>
Sensor
Sensor
<select name="sensors" id="sensors" class="form-control">
<select name="sensors" id="sensors" class="form-control">
<optgroup >
<optgroup >
<option selected disabled>Choose one</option>
<option selected disabled>Choose one</option>
<option value="AW">AW</option>
<option value="AW">AW</option>
<option value="L1">L1</option>
<option value="L1">L1</option>
<option value="L2">L2</option>
<option value="L2">L2</option>
<option value="L3">L3</option>
<option value="L3">L3</option>
<option value="L4">L4</option>
<option value="L4">L4</option>
<option value="MX">MX</option>
<option value="MX">MX</option>
<option value="OCM">OCM</option>
<option value="OCM">OCM</option>
<option value="PAN">PAN</option>
<option value="PAN">PAN</option>
<option value="PAN/MSI">PAN/MSI</option>
<option value="PAN/MSI">PAN/MSI</option>
<option value="SAR">SAR</option>
<option value="SAR">SAR</option>
<option value="WIF">WIF</option>
<option value="WIF">WIF</option>
</optgroup>
</optgroup>
</select>
</select>
<br><br>
<br><br>
Date :
Date :
<br>
<br>
From
From
<input name="dateOfPassFrom" style =" width:120px;" class="form-control" placeholder="From" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassFrom" value="2020-12-01" >
<input name="dateOfPassFrom" style =" width:120px;" class="form-control" placeholder="From" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassFrom" value="2020-12-01" >
To
To
<input name="dateOfPassTo" style =" width:120px;" class="form-control" placeholder="To" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassTo" value="2020-12-31" >
<input name="dateOfPassTo" style =" width:120px;" class="form-control" placeholder="To" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassTo" value="2020-12-31" >
<br><br>
<br><br>
Path
Path
<input name="pathFrom" class="form-control" style =" width:120px;margin-left:10px" id="pathFrom" type="number" placeholder="From">
<input name="pathFrom" class="form-control" style =" width:120px;margin-left:10px" id="pathFrom" type="number" placeholder="From">
<span>-</span>
<span>-</span>
<input name="pathTo" class="form-control" style =" width:120px;" id="pathTo" type="number" placeholder="To">
<input name="pathTo" class="form-control" style =" width:120px;" id="pathTo" type="number" placeholder="To">
<br><br>
<br><br>
Row
Row
<input name="rowFrom" class="form-control" id="rowFrom" type="number" placeholder="From">
<input name="rowFrom" class="form-control" id="rowFrom" type="number" placeholder="From">
<input name="rowTo" class="form-control" style ="" id="rowTo" type="number" placeholder="To">
<input name="rowTo" class="form-control" style ="" id="rowTo" type="number" placeholder="To">
<br><br>
<br><br>
<div class="modal-footer">
<div class="modal-footer">
<button id="filter" value="val_1" name="but1" class="btn btn-rounded btn-outline-info">Filter</button>
<button id="filter" value="val_1" name="but1" class="btn btn-rounded btn-outline-info">Filter</button>
<!-- <input value="Submit" type="submit" onclick="filterData()"> -->
<!-- <input value="Submit" type="submit" onclick="filterData()"> -->
<button id="reset" name="reset" onclick="resetForm()" class="btn btn-rounded btn-outline-info">Reset</button>
<button id="reset" name="reset" onclick="resetForm()" class="btn btn-rounded btn-outline-info">Reset</button>
</div>
</div>
</form>
</form>
</div>
</div>
<div class="tab-pane fade" id="profile5" role="tabpanel" aria-labelledby="profile-tab">
<div class="tab-pane fade" id="profile5" role="tabpanel" aria-labelledby="profile-tab">
<form id ="filterform1">
<form id ="filterform1">
<div >
<div >
<h5 >Select Special Type</h5>
<h5 >Select Special Type</h5>
<select name="selectnone" class="form-control" id="selectnone" onchange="changeFunc();">
<select name="selectnone" class="form-control" id="selectnone" onchange="changeFunc();">
<option value="selectnone">Select None</option>
<option value="selectnone">Select None</option>
<option value="city">City</option>
<option value="city">City</option>
<option value="point">Point</option>
<option value="point">Point</option>
<option value="administrator">Administrator Boundaries</option>
<option value="administrator">Administrator Boundaries</option>
<option value="rectangular">Rectangular Extent</option>
<option value="rectangular">Rectangular Extent</option>
</select>
</select>
</div>
</div>
<br><input style ="display:none;" id="cityname" class="form-control" type="text" name="gid" placeholder="city name" >
<br><input style ="display:none;" id="cityname" class="form-control" type="text" name="gid" placeholder="city name" >
<div id="search-result"></div>
<div id="search-result"></div>
<div class="clear"></div>
<div class="clear"></div>
<div class="modal-footer">
<div class="modal-footer">
<button id="cityfilter" type="button" class="btn btn-rounded btn-outline-info" onclick="onclicktaluka()">Filter</button>
<button id="cityfilter" type="button" class="btn btn-rounded btn-outline-info" onclick="onclicktaluka()">Filter</button>
<button id="reset2" name="reset2" onclick="resetForm1()" class="btn btn-rounded btn-outline-info">Reset</button>
<button id="reset2" name="reset2" onclick="resetForm1()" class="btn btn-rounded btn-outline-info">Reset</button>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-xlg-9">
<div class="col-lg-8 col-xlg-9">
<div class="card">
<div class="card">
<!-- <div class="card-body"> -->
<!-- <div class="card-body"> -->
<div id="target-map" style="width:100%!important; height:680px;"></div>
<div id="target-map" style="width:100%!important; height:680px;"></div>
<div id="latlon" class="latlon"></div>
<div id="latlon" class="latlon"></div>
<div id="scale" class="scale-line"></div>
<div id="scale" class="scale-line"></div>
<div id="location"
<div id="location"
style="width: 24px; height: 24px; font-size: 24px;">
style="width: 24px; height: 24px; font-size: 24px;">
<div id="popup" class="ol-popup">
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
<div id="popup-content"></div>
</div>
</div>
</div>
</div>
<!-- </div> -->
<!-- </div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Row -->
<!-- Row -->
<div class="row">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="card">
<div class="card">
<div class="card-body">
<div class="card-body">
<div class="table-responsive">
<div class="table-responsive">
<table id="getASIReportList" class="table color-table " style="height: 335px;"></table >
<table id="getASIReportList" class="table color-table " style="height: 335px;"></table >
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Row -->
<!-- Row -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- End PAge Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Right sidebar -->
<!-- Right sidebar -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- .right-sidebar -->
<!-- .right-sidebar -->
<div class="right-sidebar" >
<div class="right-sidebar" >
<div class="slimscrollright">
<div class="slimscrollright">
<div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
<div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
<div class="r-panel-body">
<div class="r-panel-body">
<div class="vtabs ">
<div class="vtabs ">
<ul class="nav nav-tabs tabs-vertical" role="tablist" style="width: 50px;">
<ul class="nav nav-tabs tabs-vertical" role="tablist" style="width: 50px;">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home9" role="tab"><span><i class="ti-layers-alt"></i></span></a> </li>
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#layers" role="tab"><span><i class="ti-layers-alt"></i></span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile9" role="tab"><span><i class="ti-location-arrow"></i></span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#navigation" role="tab"><span><i class="ti-location-arrow"></i></span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages9" role="tab"><span><i class="ti-location-pin"></i></span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#identify" role="tab"><span><i class="ti-info-alt"></i></span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#geom" role="tab"><span><i class="ti-location-pin"></i></span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#buffer" role="tab"><span><i class="ti-control-record"></i></span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#qbuilder" role="tab"><span><i class="ti-time"></i></span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#print" role="tab"><span><i class="ti-printer"></i></span></a> </li>
</ul>
</ul>
<!-- Tab panes -->
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-content">
<div class="tab-pane active" id="home9" role="tabpanel">
<div class="tab-pane active" id="layers" role="tabpanel">
<div class="ribbon-wrapper card" style="width:280px;">
<div class="ribbon-wrapper card" style="width:280px;">
<h3 class="ribbon ribbon-bookmark ribbon-info" style=" width: 240px;top:0px;">Layers</h3>
<h3 class="ribbon ribbon-bookmark ribbon-info" style=" width: 240px;top:0px;">Layers</h3>
<div id="groups"></div>
<div id="groups"></div>
</div>
</div>
</div>
</div>
<div class="tab-pane " id="profile9" role="tabpanel">
<div class="tab-pane " id="navigation" role="tabpanel">
<div class="ribbon-wrapper card" style="width:280px;">
<div class="ribbon-wrapper card" style="width:280px;">
<h3 class="ribbon ribbon-bookmark ribbon-info" style=" width: 240px;top:0px;">Navigation</h3>
<h3 class="ribbon ribbon-bookmark ribbon-info" style=" width: 240px;top:0px;">Navigation</h3>
<div class="col-lg-12 col-md-6 col-sm-3">
<div class="col-lg-12 col-md-6 col-sm-3">
<select id="state" class="form-control" data-style="btn btn-primary btn-round" title="Single Select">
<select id="state" class="form-control" data-style="btn btn-primary btn-round" title="Single Select">
<!-- <option disabled selected>State</option> -->
<!-- <option disabled selected>State</option> -->
</select>
</select>
</div>
</div>
<div class="col-lg-12 col-md-6 col-sm-3">
<div class="col-lg-12 col-md-6 col-sm-3">
<select id="district" class="form-control" data-style="btn btn-primary btn-round" title="Single Select">
<select id="district" class="form-control" data-style="btn btn-primary btn-round" title="Single Select">
</select>
</select>
</div>
</div>
<div class="col-lg-12 col-md-6 col-sm-3">
<div class="col-lg-12 col-md-6 col-sm-3">
<select id="taluka" class="form-control" data-style="btn btn-primary btn-round" title="Single Select">
<select id="taluka" class="form-control" data-style="btn btn-primary btn-round" title="Single Select">
</select>
</select>
</div>
</div>
<div class="col-lg-12 col-md-6 col-sm-3">
<div class="col-lg-12 col-md-6 col-sm-3">
<select id="village" class="form-control" data-style="btn btn-primary btn-round" title="Single Select">
<select id="village" class="form-control" data-style="btn btn-primary btn-round" title="Single Select">
</select>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane " id="messages9" role="tabpanel">
<div class="tab-pane " id="identify" role="tabpanel">
<div class="ribbon-wrapper card" style="width:280px;">
<div class="ribbon-wrapper card" style="width:280px;">
<h3 class="ribbon ribbon-bookmark ribbon-info" style=" width: 240px;top:0px;">Identify</h3>
<h3 class="ribbon ribbon-bookmark ribbon-info" style=" width: 240px;top:0px;">Identify</h3>
<div id="groupss">
<div id="groupss">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane " id="geom" role="tabpanel">
<div class="ribbon-wrapper card" style="width:280px;">
<h3 class="ribbon ribbon-bookmark ribbon-info" style=" width: 240px;top:0px;">Geom</h3>
<div id="groupss">
</div>
</div>
</div>
<div class="tab-pane " id="buffer" role="tabpanel">
<div class="ribbon-wrapper card" style="width:280px;">
<h3 class="ribbon ribbon-bookmark ribbon-info" style=" width: 240px;top:0px;">Buffer</h3>
<div id="groupss">
</div>
</div>
</div>
<div class="tab-pane " id="qbuilder" role="tabpanel">
<div class="ribbon-wrapper card" style="width:280px;">
<h3 class="ribbon ribbon-bookmark ribbon-info" style=" width: 240px;top:0px;"> Query Builder</h3>
<div id="groupss">
</div>
</div>
</div>
<div class="tab-pane " id="print" role="tabpanel">
<div class="ribbon-wrapper card" style="width:280px;">
<h3 class="ribbon ribbon-bookmark ribbon-info" style=" width: 240px;top:0px;"> Print</h3>
<div class="col-lg-5 col-md-6 col-sm-3">
<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
<a id="image-download" download="map.png"></a>
<select class="selectpicker" data-size="7" id="format" data-style="btn btn-primary btn-round" title="Single Select">
<option disabled selected>Page Size</option>
<option value="a0">A0 (slow)</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
<option value="a4" selected>A4</option>
<option value="a5">A5 (fast)</option>
</select>
</div>
<div class="col-lg-5 col-md-6 col-sm-3">
<select class="selectpicker" data-size="7" id="resolution" data-style="btn btn-primary btn-round" title="Single Select">
<option disabled >Resolution</option>
<option value="72" selected>72 dpi (fast)</option>
<option value="150">150 dpi</option>
<option value="300">300 dpi (slow)</option>
</select>
</div>
<div class="col-lg-5 col-md-6 col-sm-3">
<button class="btn btn-primary" id="export-pdf">Export PDF</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Right sidebar -->
<!-- End Right sidebar -->
<!-- ============================================================== -->
<!-- ============================================================== -->
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- End Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- footer -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<footer class="footer">
<footer class="footer">
© 2021 Developed by BISAG-N
© 2021 Developed by BISAG-N
</footer>
</footer>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End footer -->
<!-- End footer -->
<!-- ============================================================== -->
<!-- ============================================================== -->
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- All Jquery -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<!-- Bootstrap tether Core JavaScript -->
<script src="assets/plugins/bootstrap/js/popper.min.js"></script>
<script src="assets/plugins/bootstrap/js/popper.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<!-- slimscrollbar scrollbar JavaScript -->
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<!--Wave Effects -->
<!--Wave Effects -->
<script src="assets/js/waves.js"></script>
<script src="assets/js/waves.js"></script>
<!--Menu sidebar -->
<!--Menu sidebar -->
<script src="assets/js/sidebarmenu.js"></script>
<script src="assets/js/sidebarmenu.js"></script>
<!--stickey kit -->
<!--stickey kit -->
<script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
<script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
<script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
<!--stickey kit -->
<!--stickey kit -->
<script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
<script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
<script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
<!--Custom JavaScript -->
<!--Custom JavaScript -->
<script src="assets/js/custom.min.js"></script>
<script src="assets/js/custom.min.js"></script>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- chartist chart -->
<!-- chartist chart -->
<script src="assets/plugins/chartist-js/dist/chartist.min.js"></script>
<script src="assets/plugins/chartist-js/dist/chartist.min.js"></script>
<script src="assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js"></script>
<script src="assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js"></script>
<!--morris JavaScript -->
<!--morris JavaScript -->
<script src="assets/plugins/raphael/raphael-min.js"></script>
<script src="assets/plugins/raphael/raphael-min.js"></script>
<script src="assets/plugins/morrisjs/morris.min.js"></script>
<script src="assets/plugins/morrisjs/morris.min.js"></script>
<!-- Vector map JavaScript -->
<!-- Vector map JavaScript -->
<script src="assets/plugins/vectormap/jquery-jvectormap-2.0.2.min.js"></script>
<script src="assets/plugins/vectormap/jquery-jvectormap-2.0.2.min.js"></script>
<script src="assets/plugins/vectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="assets/plugins/vectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="assets/js/dashboard2.js"></script>
<script src="assets/js/dashboard2.js"></script>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- Style switcher -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<script src="assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
<script src="assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
<script src="ol/ol.js"></script>
<script src="ol/ol.js"></script>
<script src="customol/js/clear.js"></script>
<script src="customol/js/main.js"></script>
<script src="customol/js/identify.js"></script>
<script src="customol/js/exportpdf.js"></script>
<script src="customol/js/measure.js"></script>
<script src="customol/js/controllers.js"></script>
<script src="customol/js/navigation.js"></script>
<script src="customol/js/scaleline.js"></script>
<script src="customol/js/mouse-position.js"></script>
<script src="customol/js/layerSwitcher.js"></script>
<!-- <script src="customol/js/findbylocation.js"></script> -->
<script src="customol/js/LayersGroup/indianmapLayersGroup.js"></script>
<script src="customol/js/LayersGroup/satelliteGroup.js"></script>
<script src="customol/js/LayersGroup/satelliteGroup.js"></script>
<script src="customol/js/LayersGroup/commonlayersGroup.js"></script>
<script src="customol/js/LayersGroup/commonlayersGroup.js"></script>
<script src="customol/js/LayersGroup/transportGroup.js"></script>
<script src="customol/js/LayersGroup/transportGroup.js"></script>
<script src="customol/js/LayersGroup/IdentifyLayerGroup.js"></script>
<script src="customol/js/LayersGroup/IdentifyLayerGroup.js"></script>
<script src="customol/js/addGeom.js"></script>
<script src="customol/js/LayersGroup/indianmapLayersGroup.js"></script>
<script src="customol/js/LayersGroup/geomGroup.js"></script>
<script src="customol/js/LayersGroup/satelliteGroup.js"></script>
<script src="customol/js/main.js"></script>
<script src="customol/js/commonfunctions/clear.js"></script>
<script src="customol/js/services/services.js"></script>
<script src="customol/js/identify/identify.js"></script>
<script src="customol/js/Base64.js"></script>
<script src="customol/js/export/exportpdf.js"></script>
<script src="customol/js/geomForm.js"></script>
<script src="customol/js/geom/geom.js"></script>
<script src="customol/js/controllers/controllers.js"></script>
<script src="customol/js/navigation/navigation.js"></script>
<script src="customol/js/controllers/scaleline.js"></script>
<script src="customol/js/controllers/mouse-position.js"></script>
<script src="customol/js/layerswitcher/layerSwitcher.js"></script>
<script src="customol/js/legend/legend.js"></script>
<script src="customol/js/buffer/buffer.js"></script>
<script src="customol/js/services/services.js"></script>
<script src="customol/js/commonfunctions/Base64.js"></script>
<script src="customol/js/commonfunctions/commonfunctions.js"></script>
<script src="mis/js/services/misservices.js"></script>
<script src="mis/js/services/misservices.js"></script>
<script src="mis/js/customscripts/search.js"></script>
<script src="mis/js/customscripts/search.js"></script>
<!-- <script src=https://code.jquery.com/jquery-3.5.1.js></script> -->
<!-- <script src=https://code.jquery.com/jquery-3.5.1.js></script> -->
<script src=https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js></script>
<script src=https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.flash.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.flash.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js></script>
<script src="mis/js/customscripts/tables.js"></script>
<script src="mis/js/customscripts/tables.js"></script>
<script src="mis/js/customscripts/filter.js"></script>
<script src="mis/js/customscripts/filter.js"></script>
</body>
</body>
<!-- Mirrored from themedesigner.in/demo/admin-press/main/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 04 May 2019 05:15:40 GMT -->
<!-- Mirrored from themedesigner.in/demo/admin-press/main/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 04 May 2019 05:15:40 GMT -->
</html>
</html>