vedas

Clone or download

Modified Files

.map {
.map {
width: 100%;
width: 100%;
height:400px;
height:400px;
}
}
.ol-popup {
.ol-popup {
position: absolute;
position: absolute;
background-color: white;
background-color: white;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
padding: 15px;
padding: 15px;
border-radius: 10px;
border-radius: 10px;
border: 1px solid #cccccc;
border: 1px solid #cccccc;
bottom: 12px;
bottom: 12px;
left: -50px;
left: -50px;
min-width: 280px;
min-width: 280px;
}
}
.ol-popup:after, .ol-popup:before {
.ol-popup:after, .ol-popup:before {
top: 100%;
top: 100%;
border: solid transparent;
border: solid transparent;
content: " ";
content: " ";
height: 0;
height: 0;
width: 0;
width: 0;
position: absolute;
position: absolute;
pointer-events: none;
pointer-events: none;
}
}
.ol-popup:after {
.ol-popup:after {
border-top-color: white;
border-top-color: white;
border-width: 10px;
border-width: 10px;
left: 48px;
left: 48px;
margin-left: -10px;
margin-left: -10px;
}
}
.ol-popup:before {
.ol-popup:before {
border-top-color: #cccccc;
border-top-color: #cccccc;
border-width: 11px;
border-width: 11px;
left: 48px;
left: 48px;
margin-left: -11px;
margin-left: -11px;
}
}
.ol-popup-closer {
.ol-popup-closer {
text-decoration: none;
text-decoration: none;
position: absolute;
position: absolute;
top: 2px;
top: 2px;
right: 8px;
right: 8px;
}
}
.ol-popup-closer:after {
.ol-popup-closer:after {
content: "✖";
content: "✖";
}
}
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);
}
///**
///**
// * 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;
//
//
/**
/**
* 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()
function init()
{
{
let india=[ 81.191694, 23.8086 ];
let india=[ 81.191694, 23.8086 ];
//let jalandhar=[75.57917,31.32556];
//let jalandhar=[75.57917,31.32556];
var map = new ol.Map({
var map = new ol.Map({
overlays: [overlay],
overlays: [overlay],
target: 'target-map',
target: 'target-map',
view: new ol.View({
view: new ol.View({
center : ol.proj.transform(india, 'EPSG:4326','EPSG:3857'),
center : ol.proj.transform(india, 'EPSG:4326','EPSG:3857'),
zoom:4.5,
zoom:4.5,
// zoom :10,
// zoom :10,
minZoom:4,
minZoom:4,
maxZoom: 17
maxZoom: 17
}),
}),
layers:[
layers:[
CommonlayersGroup,indianMapLayersGroup,
CommonlayersGroup,indianMapLayersGroup,
transportLayerGroup,IdentifyLayerGroup,satelliteGroup
transportLayerGroup,IdentifyLayerGroup,satelliteGroup
],
],
controls: ol.control.defaults({
controls: ol.control.defaults({
zoom: false,
zoom: false,
attribution: false,
attribution: false,
rotate: false
rotate: false
}).extend([]),
}).extend([]),
// new ol.control.FullScreen()
// new ol.control.FullScreen()
});
});
// var olGM = new olgm.OLGoogleMaps({map: map});
// var olGM = new olgm.OLGoogleMaps({map: map});
//var gmap = olGM.getGoogleMapsMap();
//var gmap = olGM.getGoogleMapsMap();
//CommonlayersGroup,
//CommonlayersGroup,
measure(map);
measure(map);
controllers(map);
controllers(map);
navigation(map);
navigation(map);
switchlayers(map);
switchlayers(map);
getMousePosition(map);
getMousePosition(map);
scaleline(map);
scaleline(map);
exportpdf(map);
exportpdf(map);
identify(map);
identify(map);
addGeom(map);
addGeom(map);
geocoder(map);
}
}
//
//
//function init()
//function init()
//{
//{
//
//
//var map = new ol.Map({
//var map = new ol.Map({
// overlays: [overlay],
// overlays: [overlay],
// target: 'target-map',
// target: 'target-map',
//
//
// view: new ol.View({
// view: new ol.View({
// center : ol.proj.transform([ 81.191694, 23.8086 ], 'EPSG:4326','EPSG:3857'),
// center : ol.proj.transform([ 81.191694, 23.8086 ], 'EPSG:4326','EPSG:3857'),
// zoom :4.5,
// zoom :4.5,
// minZoom:4,
// minZoom:4,
// maxZoom: 17
// maxZoom: 17
// }),
// }),
// layers:[
// layers:[
// CommonlayersGroup,indianMapLayersGroup,
// CommonlayersGroup,indianMapLayersGroup,
// transportLayerGroup,IdentifyLayerGroup,satelliteGroup,
// transportLayerGroup,IdentifyLayerGroup,satelliteGroup,
// ],
// ],
// controls: ol.control.defaults({
// controls: ol.control.defaults({
// zoom: true,
// zoom: true,
// attribution: false,
// attribution: false,
// rotate: false
// rotate: false
// }).extend([]),
// }).extend([]),
// // new ol.control.FullScreen()
// // new ol.control.FullScreen()
//
//
//
//
// });
// });
// // var olGM = new olgm.OLGoogleMaps({map: map});
// // var olGM = new olgm.OLGoogleMaps({map: map});
////var gmap = olGM.getGoogleMapsMap();
////var gmap = olGM.getGoogleMapsMap();
////CommonlayersGroup,
////CommonlayersGroup,
//measure(map);
//measure(map);
//controllers(map);
//controllers(map);
//navigation(map);
//navigation(map);
//switchlayers(map);
//switchlayers(map);
//getMousePosition(map);
//getMousePosition(map);
//scaleline(map);
//scaleline(map);
//exportpdf(map);
//exportpdf(map);
//identify(map);
//identify(map);
//addGeom(map);
//addGeom(map);
//
//
//
//
//
//
//
//
//
//
//}
//}
/*!
* ol-geocoder - v4.1.1
* A geocoder extension for OpenLayers.
* https://github.com/jonataswalker/ol-geocoder
* Built: Sat Oct 17 2020 15:56:38 GMT-0300 (Brasilia Standard Time)
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("ol/control/Control"),require("ol/style/Style"),require("ol/style/Icon"),require("ol/layer/Vector"),require("ol/source/Vector"),require("ol/geom/Point"),require("ol/Feature"),require("ol/proj")):"function"==typeof define&&define.amd?define(["ol/control/Control","ol/style/Style","ol/style/Icon","ol/layer/Vector","ol/source/Vector","ol/geom/Point","ol/Feature","ol/proj"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).Geocoder=e(t.ol.control.Control,t.ol.style.Style,t.ol.style.Icon,t.ol.layer.Vector,t.ol.source.Vector,t.ol.geom.Point,t.ol.Feature,t.ol.proj)}(this,(function(t,e,n,r,s,o,i,a){"use strict";function l(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var u=l(t),c=l(e),p=l(n),d=l(r),h=l(s),m=l(o),g=l(i),y=l(a),f="gcd-container",v="gcd-button-control",b="gcd-input-query",w="gcd-input-reset",x={namespace:"ol-geocoder",spin:"gcd-pseudo-rotate",hidden:"gcd-hidden",address:"gcd-address",country:"gcd-country",city:"gcd-city",road:"gcd-road",olControl:"ol-control",glass:{container:"gcd-gl-container",control:"gcd-gl-control",button:"gcd-gl-btn",input:"gcd-gl-input",expanded:"gcd-gl-expanded",reset:"gcd-gl-reset",result:"gcd-gl-result"},inputText:{container:"gcd-txt-container",control:"gcd-txt-control",input:"gcd-txt-input",reset:"gcd-txt-reset",icon:"gcd-txt-glass",result:"gcd-txt-result"}},k={containerId:f,buttonControlId:v,inputQueryId:b,inputResetId:w,cssClasses:x},q=Object.freeze({__proto__:null,containerId:f,buttonControlId:v,inputQueryId:b,inputResetId:w,cssClasses:x,default:k}),C="addresschosen",S="nominatim",L="reverse",E="glass-button",A="text-input",T="osm",j="mapquest",F="photon",N="bing",R="opencage",P={provider:T,placeholder:"Search for an address",featureStyle:null,targetType:E,lang:"en-US",limit:5,keepOpen:!1,preventDefault:!1,autoComplete:!1,autoCompleteMinLength:2,autoCompleteTimeout:200,debug:!1};function I(t,e){if(void 0===e&&(e="Assertion failed"),!t){if("undefined"!=typeof Error)throw new Error(e);throw e}}function _(t){var e=function(){if("performance"in window==0&&(window.performance={}),"now"in window.performance==0){var t=Date.now();performance.timing&&performance.timing.navigationStart&&(t=performance.timing.navigationStart),window.performance.now=function(){return Date.now()-t}}return window.performance.now()}().toString(36);return t?t+e:e}function M(t){return/^[0-9]+$/.test(t)}function O(t,e,n){if(Array.isArray(t))t.forEach((function(t){return O(t,e)}));else for(var r=Array.isArray(e)?e:e.split(/[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]+/),s=r.length;s--;)V(t,r[s])||G(t,r[s],n)}function D(t,e,n){if(Array.isArray(t))t.forEach((function(t){return D(t,e,n)}));else for(var r=Array.isArray(e)?e:e.split(/[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]+/),s=r.length;s--;)V(t,r[s])&&z(t,r[s],n)}function V(t,e){return t.classList?t.classList.contains(e):U(e).test(t.className)}function Q(t,e){return t.replace(/\{[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*([\x2D0-9A-Z_a-z]+)[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*\}/g,(function(t,n){var r=void 0===e[n]?"":e[n];return String(r).replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;").replaceAll('"',"&quot;").replaceAll("'","&#039;")}))}function B(t,e){var n;if(Array.isArray(t)){if(n=document.createElement(t[0]),t[1].id&&(n.id=t[1].id),t[1].classname&&(n.className=t[1].classname),t[1].attr){var r=t[1].attr;if(Array.isArray(r))for(var s=-1;++s<r.length;)n.setAttribute(r[s].name,r[s].value);else n.setAttribute(r.name,r.value)}}else n=document.createElement(t);n.innerHTML=e;for(var o=document.createDocumentFragment();n.childNodes[0];)o.append(n.childNodes[0]);return n.append(o),n}function U(t){return new RegExp("(^|\\s+) "+t+" (\\s+|$)","u")}function G(t,e,n){t.classList?t.classList.add(e):t.className=(t.className+" "+e).trim(),n&&M(n)&&window.setTimeout((function(){return z(t,e)}),n)}function z(t,e,n){t.classList?t.classList.remove(e):t.className=t.className.replace(U(e)," ").trim(),n&&M(n)&&window.setTimeout((function(){return G(t,e)}),n)}var $=q.cssClasses,H=function(t){this.options=t.options,this.els=this.createControl()};H.prototype.createControl=function(){var t,e,n;return this.options.targetType===A?(e=$.namespace+" "+$.inputText.container,n={container:t=B(["div",{id:q.containerId,classname:e}],H.input),control:t.querySelector("."+$.inputText.control),input:t.querySelector("."+$.inputText.input),reset:t.querySelector("."+$.inputText.reset),result:t.querySelector("."+$.inputText.result)}):(e=$.namespace+" "+$.glass.container,n={container:t=B(["div",{id:q.containerId,classname:e}],H.glass),control:t.querySelector("."+$.glass.control),button:t.querySelector("."+$.glass.button),input:t.querySelector("."+$.glass.input),reset:t.querySelector("."+$.glass.reset),result:t.querySelector("."+$.glass.result)}),n.input.placeholder=this.options.placeholder,n},H.glass='\n <div class="'+$.glass.control+" "+$.olControl+'">\n <button type="button" id="'+q.buttonControlId+'" class="'+$.glass.button+'"></button>\n <input type="text" id="'+q.inputQueryId+'" class="'+$.glass.input+'" autocomplete="off" placeholder="Search ...">\n <a id="'+q.inputResetId+'" class="'+$.glass.reset+" "+$.hidden+'"></a>\n </div>\n <ul class="'+$.glass.result+'"></ul>\n',H.input='\n <div class="'+$.inputText.control+'">\n <input type="text" id="'+q.inputQueryId+'" class="'+$.inputText.input+'" autocomplete="off" placeholder="Search ...">\n <span class="'+$.inputText.icon+'"></span>\n <button type="button" id="'+q.inputResetId+'" class="'+$.inputText.reset+" "+$.hidden+'"></button>\n </div>\n <ul class="'+$.inputText.result+'"></ul>\n';var K=function(){this.settings={url:"https://photon.komoot.de/api/",params:{q:"",limit:10,lang:"en"},langs:["de","it","fr","en"]}};K.prototype.getParameters=function(t){return t.lang=t.lang.toLowerCase(),{url:this.settings.url,params:{q:t.query,limit:t.limit||this.settings.params.limit,lang:this.settings.langs.includes(t.lang)?t.lang:this.settings.params.lang}}},K.prototype.handleResponse=function(t){return 0===t.features.length?[]:t.features.map((function(t){return{lon:t.geometry.coordinates[0],lat:t.geometry.coordinates[1],address:{name:t.properties.name,postcode:t.properties.postcode,city:t.properties.city,state:t.properties.state,country:t.properties.country},original:{formatted:t.properties.name,details:t.properties}}}))};var Z=function(){this.settings={url:"https://nominatim.openstreetmap.org/search/",params:{q:"",format:"json",addressdetails:1,limit:10,countrycodes:"","accept-language":"en-US"}}};Z.prototype.getParameters=function(t){return{url:this.settings.url,params:{q:t.query,format:this.settings.params.format,addressdetails:this.settings.params.addressdetails,limit:t.limit||this.settings.params.limit,countrycodes:t.countrycodes||this.settings.params.countrycodes,"accept-language":t.lang||this.settings.params["accept-language"]}}},Z.prototype.handleResponse=function(t){return 0===t.length?[]:t.map((function(t){return{lon:t.lon,lat:t.lat,bbox:t.boundingbox,address:{name:t.display_name,road:t.address.road||"",houseNumber:t.address.house_number||"",postcode:t.address.postcode,city:t.address.city||t.address.town,state:t.address.state,country:t.address.country},original:{formatted:t.display_name,details:t.address}}}))};var J=function(){this.settings={url:"http://open.mapquestapi.com/nominatim/v1/search.php",params:{q:"",key:"",format:"json",addressdetails:1,limit:10,countrycodes:"","accept-language":"en-US"}}};J.prototype.getParameters=function(t){return{url:this.settings.url,params:{q:t.query,key:t.key,format:"json",addressdetails:1,limit:t.limit||this.settings.params.limit,countrycodes:t.countrycodes||this.settings.params.countrycodes,"accept-language":t.lang||this.settings.params["accept-language"]}}},J.prototype.handleResponse=function(t){return 0===t.length?[]:t.map((function(t){return{lon:t.lon,lat:t.lat,address:{name:t.address.neighbourhood||"",road:t.address.road||"",postcode:t.address.postcode,city:t.address.city||t.address.town,state:t.address.state,country:t.address.country},original:{formatted:t.display_name,details:t.address}}}))};var W=function(){this.settings={url:"https://dev.virtualearth.net/REST/v1/Locations",callbackName:"jsonp",params:{query:"",key:"",includeNeighborhood:0,maxResults:10}}};W.prototype.getParameters=function(t){return{url:this.settings.url,callbackName:this.settings.callbackName,params:{query:t.query,key:t.key,includeNeighborhood:t.includeNeighborhood||this.settings.params.includeNeighborhood,maxResults:t.maxResults||this.settings.params.maxResults}}},W.prototype.handleResponse=function(t){var e=t.resourceSets[0].resources;return 0===e.length?[]:e.map((function(t){return{lon:t.point.coordinates[1],lat:t.point.coordinates[0],address:{name:t.name},original:{formatted:t.address.formattedAddress,details:t.address}}}))};var X=function(){this.settings={url:"https://api.opencagedata.com/geocode/v1/json?",params:{q:"",key:"",limit:10,countrycode:"",pretty:1,no_annotations:1}}};function Y(t){return new Promise((function(e,n){var r=function(t,e){e&&"object"==typeof e&&(t+=(/\?/.test(t)?"&":"?")+tt(e));return t}(t.url,t.data);t.jsonp?function(t,e,n){var r=document.head,s=document.createElement("script"),o="f"+Math.round(Math.random()*Date.now());s.setAttribute("src",t+(t.indexOf("?")>0?"&":"?")+e+"="+o),window[o]=function(t){window[o]=void 0,setTimeout((function(){return r.removeChild(s)}),0),n(t)},r.append(s)}(r,t.callbackName,e):fetch(r,{method:"GET",mode:"cors",credentials:"same-origin"}).then((function(t){return t.json()})).then(e).catch(n)}))}function tt(t){return Object.keys(t).reduce((function(e,n){return e.push("object"==typeof t[n]?tt(t[n]):encodeURIComponent(n)+"="+encodeURIComponent(t[n])),e}),[]).join("&")}X.prototype.getParameters=function(t){return{url:this.settings.url,params:{q:t.query,key:t.key,limit:t.limit||this.settings.params.limit,countrycode:t.countrycodes||this.settings.params.countrycodes}}},X.prototype.handleResponse=function(t){return 0===t.results.length?[]:t.results.map((function(t){return{lon:t.geometry.lng,lat:t.geometry.lat,address:{name:t.components.house_number||"",road:t.components.road||"",postcode:t.components.postcode,city:t.components.city||t.components.town,state:t.components.state,country:t.components.country},original:{formatted:t.formatted,details:t.components}}}))};var et=q.cssClasses,nt=function(t,e){this.Base=t,this.layerName=_("geocoder-layer-"),this.layer=new d.default({name:this.layerName,source:new h.default}),this.options=t.options,this.options.provider="string"==typeof this.options.provider?this.options.provider.toLowerCase():this.options.provider,this.provider=this.newProvider(),this.els=e,this.lastQuery="",this.container=this.els.container,this.registeredListeners={mapClick:!1},this.setListeners()};return nt.prototype.setListeners=function(){var t,e,n=this;this.els.input.addEventListener("keypress",(function(t){var e=t.target.value.trim();(t.key?"Enter"===t.key:t.which?13===t.which:!!t.keyCode&&13===t.keyCode)&&(t.preventDefault(),n.query(e))}),!1),this.els.input.addEventListener("click",(function(t){return t.stopPropagation()}),!1),this.els.input.addEventListener("input",(function(r){var s=r.target.value.trim();0!==s.length?D(n.els.reset,et.hidden):O(n.els.reset,et.hidden),n.options.autoComplete&&s!==e&&(e=s,t&&clearTimeout(t),t=setTimeout((function(){s.length>=n.options.autoCompleteMinLength&&n.query(s)}),n.options.autoCompleteTimeout))}),!1),this.els.reset.addEventListener("click",(function(t){n.els.input.focus(),n.els.input.value="",n.lastQuery="",O(n.els.reset,et.hidden),n.clearResults()}),!1),this.options.targetType===E&&this.els.button.addEventListener("click",(function(t){t.stopPropagation(),V(n.els.control,et.glass.expanded)?n.collapse():n.expand()}),!1)},nt.prototype.query=function(t){var e=this;this.provider||(this.provider=this.newProvider());var n=this.provider.getParameters({query:t,key:this.options.key,lang:this.options.lang,countrycodes:this.options.countrycodes,limit:this.options.limit});if(this.lastQuery!==t||!this.els.result.firstChild){this.lastQuery=t,this.clearResults(),O(this.els.reset,et.spin);var r={url:n.url,data:n.params};n.callbackName&&(r.jsonp=!0,r.callbackName=n.callbackName),Y(r).then((function(t){e.options.debug&&console.info(t),D(e.els.reset,et.spin);var n=e.provider.handleResponse(t);n&&(e.createList(n),e.listenMapClick())})).catch((function(t){D(e.els.reset,et.spin);var n=B("li","<h5>Error! No internet connection?</h5>");e.els.result.append(n)}))}},nt.prototype.createList=function(t){var e=this,n=this.els.result;t.forEach((function(t){var r;switch(e.options.provider){case T:r='<span class="'+et.road+'">'+t.address.name+"</span>";break;default:r=e.addressTemplate(t.address)}var s=B("li",'<a href="#">'+r+"</a>");s.addEventListener("click",(function(n){n.preventDefault(),e.chosen(t,r,t.address,t.original)}),!1),n.append(s)}))},nt.prototype.chosen=function(t,e,n,r){var s=this.Base.getMap(),o=[Number.parseFloat(t.lon),Number.parseFloat(t.lat)],i=s.getView().getProjection(),a=y.default.transform(o,"EPSG:4326",i),l=t.bbox;l&&(l=y.default.transformExtent([l[2],l[1],l[3],l[0]],"EPSG:4326",i));var u={formatted:e,details:n,original:r};if(!1===this.options.keepOpen&&this.clearResults(!0),!0===this.options.preventDefault)this.Base.dispatchEvent({type:C,address:u,coordinate:a,bbox:l,place:t});else{l?s.getView().fit(l,{duration:500}):function(t,e,n,r){void 0===n&&(n=500),void 0===r&&(r=2.388657133911758),t.getView().animate({duration:n,resolution:r},{duration:n,center:e})}(s,a);var c=this.createFeature(a,u);this.Base.dispatchEvent({type:C,address:u,feature:c,coordinate:a,bbox:l,place:t})}},nt.prototype.createFeature=function(t){var e=new g.default(new m.default(t));return this.addLayer(),e.setStyle(this.options.featureStyle),e.setId(_("geocoder-ft-")),this.getSource().addFeature(e),e},nt.prototype.addressTemplate=function(t){var e=[];return t.name&&e.push(['<span class="',et.road,'">{name}</span>'].join("")),(t.road||t.building||t.house_number)&&e.push(['<span class="',et.road,'">{building} {road} {house_number}</span>'].join("")),(t.city||t.town||t.village)&&e.push(['<span class="',et.city,'">{postcode} {city} {town} {village}</span>'].join("")),(t.state||t.country)&&e.push(['<span class="',et.country,'">{state} {country}</span>'].join("")),Q(e.join("<br>"),t)},nt.prototype.newProvider=function(){switch(this.options.provider){case T:return new Z;case j:return new J;case F:return new K;case N:return new W;case R:return new X;default:return this.options.provider}},nt.prototype.expand=function(){var t=this;D(this.els.input,et.spin),O(this.els.control,et.glass.expanded),window.setTimeout((function(){return t.els.input.focus()}),100),this.listenMapClick()},nt.prototype.collapse=function(){this.els.input.value="",this.els.input.blur(),O(this.els.reset,et.hidden),D(this.els.control,et.glass.expanded),this.clearResults()},nt.prototype.listenMapClick=function(){if(!this.registeredListeners.mapClick){var t=this,e=this.Base.getMap().getTargetElement();this.registeredListeners.mapClick=!0,e.addEventListener("click",{handleEvent:function(n){t.clearResults(!0),e.removeEventListener(n.type,this,!1),t.registeredListeners.mapClick=!1}},!1)}},nt.prototype.clearResults=function(t){t&&this.options.targetType===E?this.collapse():function(t){for(;t.firstChild;)t.firstChild.remove()}(this.els.result)},nt.prototype.getSource=function(){return this.layer.getSource()},nt.prototype.addLayer=function(){var t=this,e=!1,n=this.Base.getMap();n.getLayers().forEach((function(n){n===t.layer&&(e=!0)})),e||n.addLayer(this.layer)},function(t){function e(n,r){if(void 0===n&&(n=S),void 0===r&&(r={}),!(this instanceof e))return new e;var s;I("string"==typeof n,"@param `type` should be string!"),I(n===S||n===L,"@param 'type' should be '"+S+"'\n or '"+L+"'!"),I("object"==typeof r,"@param `options` should be object!"),P.featureStyle=[new c.default({image:new p.default({scale:.7,src:"//cdn.rawgit.com/jonataswalker/map-utils/master/images/marker.png"})})],this.options=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&(n[s]=e[s]);return n}(P,r),this.container=void 0;var o=new H(this);n===S&&(this.container=o.els.container,s=new nt(this,o.els),this.layer=s.layer),t.call(this,{element:this.container})}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.getLayer=function(){return this.layer},e.prototype.getSource=function(){return this.getLayer().getSource()},e.prototype.setProvider=function(t){this.options.provider=t},e.prototype.setProviderKey=function(t){this.options.key=t},e}(u.default)}));
//# sourceMappingURL=ol-geocoder.js.map
<%@ 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.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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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="ol/ol.js"></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/LayersGroup/indianmapLayersGroup.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/addGeom.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
<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="customol/js/googleapi/googlemaps.js"></script> -->
>>>>>>> abc
</html>
</html>