diff --git a/app/static/css/map.css b/app/static/css/map.css
new file mode 100644
index 00000000..31cd2a5f
--- /dev/null
+++ b/app/static/css/map.css
@@ -0,0 +1,89 @@
+@charset "UTF-8";
+
+/*ags-map.css*/
+#agsMap{
+ display:block;
+ margin:10px auto;
+ padding:0px;
+ width:90%;
+ height:600px;
+ }
+
+#agsLeafletMap{
+ display:block;
+ margin:0px;
+ padding:0px;
+ width:100%;
+ height:600px;
+ }
+
+.leaflet-popup-content table{
+ margin:4px;
+ }
+
+.leaflet-popup-content table>tbody>tr>*{
+ padding:2px 4px;
+ }
+
+.leaflet-popup-content table>tbody>tr>th{
+ background-color:#CCC;
+ }
+
+#agsMapLookups{
+ padding:0px;
+ text-align:center;
+ }
+
+#agsMapLookups>article{
+ display:inline-block;
+ width:45%;
+ height:120px;
+ overflow:hidden;
+ }
+
+#agsMapLookups input{
+ padding:4px 8px;
+ }
+
+#agsMapLookups input.lookupBtn{
+ padding:6px 12px;
+ background-color:#246;
+ color:#FFFFFF;
+ border-radius:5px;
+ border:none;
+ box-shadow: 2px 2px 4px #444;
+ opacity:0.8;
+ cursor:pointer;
+ }
+
+#agsMapLookups input.lookupBtn:hover{
+ box-shadow: 1px 1px 2px #222;
+ opacity:1;
+ }
+
+#agsMapLookups input.lookupBtn:disabled{
+ background-color:#CCC;
+ color:#444;
+ opacity:0.5;
+ box-shadow: 2px 2px 4px #FFF;
+ }
+
+#extentStatusMsg{
+ display:inline-block;
+ border:1px solid #CCC;
+ padding:4px 8px;
+ }
+
+#drawIcon{
+ display:inline-block;
+ border:1px solid #CCC;
+ padding:0px;
+ margin:0px;
+ background-image: url("../js/Leaflet/draw/images/spritesheet.svg");
+ background-image: linear-gradient(transparent, transparent), url('../js/Leaflet/draw/images/spritesheet.svg');
+ background-repeat: no-repeat;
+ background-size:200px 20px;
+ background-position: -40px 0px;
+ width:20px;
+ height:20px;
+ }
\ No newline at end of file
diff --git a/app/static/css/style.css b/app/static/css/style.css
index 4558789c..50af6422 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -39,3 +39,33 @@
width: 5px;
height: 10px;
}
+
+#extentModal{
+ background-color:rgba(0,0,0,0.7);
+ position:absolute;
+ width:100%;
+ top:0px;
+ left:0px;
+ height:600px;
+ border:1px solid #000000;
+ z-index:9999;
+ margin:0px;
+ text-align:center;
+ padding:20px;
+ }
+
+#extentModal>*{
+ margin:0px 20px;
+ padding:10px 20px;
+ color:#FFFFFF;
+ background-color:rgba(0,0,0,0.7);
+ }
+
+#extentValid>a{
+ color:#FFFFFF;
+ }
+
+#closeModalBtn{
+ padding:3px 5px;
+ float:right;
+ }
diff --git a/app/static/js/L.TileLayer.BetterWMS.js b/app/static/js/L.TileLayer.BetterWMS.js
index 30a5a5ec..038efa6d 100644
--- a/app/static/js/L.TileLayer.BetterWMS.js
+++ b/app/static/js/L.TileLayer.BetterWMS.js
@@ -1,73 +1,74 @@
L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
-
- onAdd: function (map) {
- // Triggered when the layer is added to a map.
- // Register a click listener, then do all the upstream WMS things
- L.TileLayer.WMS.prototype.onAdd.call(this, map);
- map.on('click', this.getFeatureInfo, this);
- },
-
- onRemove: function (map) {
- // Triggered when the layer is removed from a map.
- // Unregister a click listener, then do all the upstream WMS things
- L.TileLayer.WMS.prototype.onRemove.call(this, map);
- map.off('click', this.getFeatureInfo, this);
- },
-
- getFeatureInfo: function (evt) {
- // Make an AJAX request to the server and hope for the best
- var url = this.getFeatureInfoUrl(evt.latlng),
- showResults = L.Util.bind(this.showGetFeatureInfo, this);
- $.ajax({
- url: url,
- success: function (data, status, xhr) {
- var err = typeof data === 'string' ? null : data;
- showResults(err, evt.latlng, data);
- },
- error: function (xhr, status, error) {
- showResults(error);
- }
- });
- },
-
- getFeatureInfoUrl: function (latlng) {
- // Construct a GetFeatureInfo request URL given a point
- var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
- size = this._map.getSize(),
-
- params = {
- request: 'GetFeatureInfo',
- service: 'WMS',
- srs: 'EPSG:4326',
- styles: this.wmsParams.styles,
- transparent: this.wmsParams.transparent,
- version: this.wmsParams.version,
- format: this.wmsParams.format,
- bbox: this._map.getBounds().toBBoxString(),
- height: size.y,
- width: size.x,
- layers: this.wmsParams.layers,
- query_layers: this.wmsParams.layers,
- info_format: 'text/html'
- };
-
- params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;
- params[params.version === '1.3.0' ? 'j' : 'y'] = point.y;
-
- return this._url + L.Util.getParamString(params, this._url, true);
- },
-
- showGetFeatureInfo: function (err, latlng, content) {
- if (err) { console.log(err); return; } // do nothing if there's an error
-
- // Otherwise show the content in a popup, or something.
- L.popup({ maxWidth: 500})
- .setLatLng(latlng)
- .setContent(content)
- .openOn(this._map);
- }
- });
-
- L.tileLayer.betterWms = function (url, options) {
- return new L.TileLayer.BetterWMS(url, options);
- };
\ No newline at end of file
+
+ onAdd: function (map) {
+ // Triggered when the layer is added to a map.
+ // Register a click listener, then do all the upstream WMS things
+ L.TileLayer.WMS.prototype.onAdd.call(this, map);
+ map.on('click', this.getFeatureInfo, this);
+ },
+
+ onRemove: function (map) {
+ // Triggered when the layer is removed from a map.
+ // Unregister a click listener, then do all the upstream WMS things
+ L.TileLayer.WMS.prototype.onRemove.call(this, map);
+ map.off('click', this.getFeatureInfo, this);
+ },
+
+ getFeatureInfo: function (evt) {
+ // Make an AJAX request to the server and hope for the best
+ var url = this.getFeatureInfoUrl(evt.latlng),
+ showResults = L.Util.bind(this.showGetFeatureInfo, this);
+ $.ajax({
+ url: url,
+ success: function (data, status, xhr) {
+ var err = typeof data === 'string' ? null : data;
+ showResults(err, evt.latlng, data);
+ },
+ error: function (xhr, status, error) {
+ showResults(error);
+ }
+ });
+ },
+
+ getFeatureInfoUrl: function (latlng) {
+ // Construct a GetFeatureInfo request URL given a point
+ var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
+ size = this._map.getSize(),
+
+ params = {
+ request: 'GetFeatureInfo',
+ service: 'WMS',
+ srs: 'EPSG:4326',
+ styles: this.wmsParams.styles,
+ transparent: this.wmsParams.transparent,
+ version: this.wmsParams.version,
+ format: this.wmsParams.format,
+ bbox: this._map.getBounds().toBBoxString(),
+ height: size.y,
+ width: size.x,
+ layers: this.wmsParams.layers,
+ query_layers: this.wmsParams.layers,
+ info_format: 'text/html'
+ };
+
+ params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;
+ params[params.version === '1.3.0' ? 'j' : 'y'] = point.y;
+
+ return this._url + L.Util.getParamString(params, this._url, true);
+ },
+
+ showGetFeatureInfo: function (err, latlng, content) {
+ // do nothing if there's an error
+ if(err){console.log(err);return;}
+ // do nothing if can't find "Lithostratigraphy" in content (~empty content)
+ if(content.indexOf("Lithostratigraphy") === -1){return;};
+ // do nothing if WMS popup disabled
+ if(!agsMap.drawing.showWMSpopup){return;};
+ // otherwise show the content in a popup
+ L.popup({"maxWidth":500}).setLatLng(latlng).setContent(content).openOn(this._map);
+ }
+});
+
+L.tileLayer.betterWms = function (url, options) {
+ return new L.TileLayer.BetterWMS(url, options);
+};
\ No newline at end of file
diff --git a/app/static/js/htmlView.js b/app/static/js/htmlView.js
index 5a628c15..ef94d480 100644
--- a/app/static/js/htmlView.js
+++ b/app/static/js/htmlView.js
@@ -27,6 +27,7 @@ agsHtml.injectResultPopup=function(){
agsHtml.hideResultPopup=function(){
$("#resultPopup").hide();
+ if(agsMap && agsMap.positionExtentModal){agsMap.positionExtentModal();};
return true;
};
@@ -160,6 +161,7 @@ agsHtml.parseValidationResponse=function(jData){
agsHtml.displayFileResult(fileResult);
};
$("#resultPopup").show();
+ if(agsMap && agsMap.positionExtentModal){agsMap.positionExtentModal();};
return true;
};
diff --git a/app/static/js/main.js b/app/static/js/main.js
deleted file mode 100644
index 04590809..00000000
--- a/app/static/js/main.js
+++ /dev/null
@@ -1,295 +0,0 @@
-// main.2.js
-
-var bgsMain={};
-
-bgsMain.timerId=-1;
-bgsMain.timerMs=500;
-
-bgsMain.longTimerId=-1;
-bgsMain.longTimerMs=10000;
-
-bgsMain.init=function(){
- $("nav").css("opacity","0");
- bgsMain.resizePage();
- bgsMain.setCopyrightYear();
- bgsMain.setupNav();
- bgsMain.setupMobileMenu();
- bgsMain.setupPage();
- bgsMain.setupEvents();
- return true;
- };
-
-bgsMain.setupPage=function(){
- $("nav").hide();
- $("nav>ul.level3").hide();
- $("#level2>li").hide();
- return true;
- };
-
-bgsMain.setupEvents=function(){
- // RESIZE
- $(window).on("resize",bgsMain.resize);
- // MENU level 1 : over
- $("header").on("mouseenter","article.nav>p>a",bgsMain.menu1over);
- // MENU level 2 : over
- $("#level2").on("mouseenter","li>ul>li",bgsMain.menu2over);
- // MENU close
- $("nav").on("mouseleave",bgsMain.navout);
- // MENUBARS (hamburger) click
- $("header").on("click","img.menubars",bgsMain.menubarsClick);
- // MOBILE MENU click
- $("#mobileMenu").on("click","li",bgsMain.mobileMenuClick);
- return true;
- };
-
-bgsMain.resize=function(evt){
- bgsMain.resizePage();
- return true;
- };
-
-bgsMain.menu1over=function(evt){
- var a=$(evt.target).closest("a");
- bgsMain.showNav2(a);
- return true;
- };
-
-bgsMain.menu2over=function(evt){
- var li=$(evt.target).closest("li");
- bgsMain.showNav3(li);
- return true;
- };
-
-bgsMain.navout=function(evt){
- // add slight delay for mouse transition
- if(bgsMain.timerId !== -1){
- window.clearTimeout(bgsMain.timerId);
- bgsMain.timerId=-1;
- };
- bgsMain.timerId=window.setTimeout(bgsMain.hideNav,bgsMain.timerMs);
- return true;
- };
-
-bgsMain.menubarsClick=function(evt){
- var img=$(evt.target);
- $("nav").hide();
- if(img.hasClass("open")){
- // close menus
- img.attr("src","//resources.bgs.ac.uk/webapps/resources/images/menu-bars.svg").removeClass("open");
- $("header>section.topnav").show();
- $("header>section.breadcrumbs").show();
- $("main").show();
- $("footer").show();
- $("#mobileMenu").hide();
- }
- else{
- // open menus
- img.attr("src","//resources.bgs.ac.uk/webapps/resources/images/menu-close.svg").addClass("open");
- $("header>section.topnav").hide();
- $("header>section.breadcrumbs").hide();
- $("main").hide();
- $("footer").hide();
- $("#mobileMenu").show();
- };
- return true;
- };
-
-bgsMain.mobileMenuClick=function(evt){
- var li=$(evt.target).closest("li");
- var ul=li.closest("ul");
- evt.stopPropagation();
- // top
- if(li.hasClass("mm_lvl_1")){
- if(li.hasClass("open")){
- li.removeClass("open");
- $("#mobileMenu>ul>li").show();
- }
- else{
- $("#mobileMenu ul.mm_lvl_1>li").removeClass("open");
- $("#mobileMenu>ul>li").hide();
- li.addClass("open").show();
- };
- }
- else{
- // middle
- if(li.hasClass("mm_lvl_2") && li.hasClass("expands")){
- if(li.hasClass("open")){
- $("#mobileMenu ul.mm_lvl_2 li").show();
- $("#mobileMenu>ul>li>strong").show();
- $("#mobileMenu>ul>li>em").show();
- li.removeClass("open");
- }
- else{
- $("#mobileMenu ul.mm_lvl_2>li").hide();
- $("#mobileMenu>ul>li>strong").hide();
- $("#mobileMenu>ul>li>em").hide();
- li.addClass("open").show();
- };
- };
- };
- return true;
- };
-
-// ===============
-
-bgsMain.setupMobileMenu=function(){
- var topLevels=["About","Research","Data","DiscoGeo"];
- var i=0;
- var p1={};
- var a1={};
- var li2s={};
- var xhtml="";
- console.log("bgsMain.setupMobileMenu");
-
- xhtml=xhtml + "";
- for(i=0;i < topLevels.length;i++){
- p1=$("header>section.logonav>article.nav>p." + topLevels[i]);
- a1=p1.children("a");
- li2s=$("#ul" + topLevels[i] + ">ul>li");
-
- xhtml=xhtml + "- ";
-
- xhtml=xhtml + "" + a1.text() + " ";
-
- xhtml=xhtml + "
";
- li2s.each(function(){
- var a2=$(this).children("a");
- var em2=$(this).children("em");
- var ul3id="";
- var li3s={};
- var j=0;
- if($(this).children("em").length === 1){
- ul3id="ul" + topLevels[i] + "_" + a2.attr("href").split("/").reverse()[1];
- li3s=$("#" + ul3id + ">li");
- xhtml=xhtml + "- ";
- xhtml=xhtml + "" + a2.text() + " ";
- xhtml=xhtml + "
";
- li3s.each(function(){
- var a3=$(this).children("a");
- xhtml=xhtml + "- " + a3.text() + "
";
- });
- xhtml=xhtml + "
";
- xhtml=xhtml + " ";
- }
- else{
- xhtml=xhtml + "- " + a2.text() + "
";
- }
-
- });
- xhtml=xhtml + "
";
-
- xhtml=xhtml + " ";
- };
-
- xhtml=xhtml + "
";
-
- $("#mobileMenu").html(xhtml).hide();
- return true;
- };
-
-// ===================================================
-
-bgsMain.resizePage=function(){
- var img=$("header section.logonav article.nav img.menubars");
- var w=$(window).width();
- var bodyClass="width1";
- var currClass=$("body").attr("class");
- if(w > 576){
- bodyClass="width2";
- if(w > 768){
- bodyClass="width3";
- if(w > 992){
- bodyClass="width4";
- if(w > 1200){
- bodyClass="width5";
- };
- };
- };
- };
- if(bodyClass !== currClass){
- $("body").attr("class",bodyClass);
- // close mobileMenu if open
- if(img.hasClass("open")){img.click();};
- };
- return true;
- };
-
-
-bgsMain.setupNav=function(){
- var li2=$("#level2");
- var li3s=li2.children("li");
- li3s.each(function(){
- var li3=$(this);
- var li3Ht=(li3.find("ul>li").length * 40) - 10;
- $("nav>ul[rel='" + li3.attr("id") + "']").css("height",li3Ht + "px");
- });
- return true;
- };
-
-bgsMain.hideNav=function(){
- $("header>section.logonav>article.nav>p>a").removeClass("open");
- $("nav>ul>li>ul>li").removeClass("open");
- $("nav>ul.level3").hide();
- $("nav").hide();
- return true;
- };
-
-bgsMain.showNav2=function(a){
- $("nav").css("opacity","1.0");
- var code=a.attr("href").substring(1);
- // cancel hide timer
- if(bgsMain.timerId !== -1){
- window.clearTimeout(bgsMain.timerId);
- bgsMain.timerId=-1;
- };
- $("nav>ul.level3").hide();
- $("header>section.logonav>article.nav>p>a").removeClass("open");
- a.addClass("open");
- $("#level2>li").hide();
- $("#ul" + code).show();
- if($("nav").is(":visible")){$("nav").show();}
- else{$("nav").slideDown();};
- bgsMain.startLongTimer();
- return true;
- };
-
-bgsMain.showNav3=function(li){
- $("nav").css("opacity","1.0");
- var a=li.children("a");
- var urlArr=a.attr("href").split("/");
- var parentLi=li.closest("ul").closest("li");
- var childCode=parentLi.attr("id") + "_" + urlArr[urlArr.length - 2];
- var childUl=$("#" + childCode);
- $("nav>ul>li>ul>li").removeClass("open");
- li.addClass("open");
- $("nav>ul.level3").hide();
- $("nav>ul.level3>li.empty").show();
- if(childUl.length > 0){childUl.show();};
- bgsMain.startLongTimer();
- return true;
- };
-
-bgsMain.setCopyrightYear=function(){
- var cyYear=new Date().getFullYear();
- var cyText=document.createTextNode(cyYear.toString());
- var cyElem=document.getElementById("copyrightYear");
- cyElem.removeChild(cyElem.firstChild);
- cyElem.appendChild(cyText);
- return true;
- };
-
-bgsMain.startLongTimer=function(){
- // add long delay to clear meneus after inactivity
- console.log("startLongTimer");
- if(bgsMain.longTimerId !== -1){
- window.clearTimeout(bgsMain.longTimerId);
- bgsMain.longTimerId=-1;
- };
- bgsMain.longTimerId=window.setTimeout(bgsMain.hideNav,bgsMain.longTimerMs);
- return true;
- };
-
-// ===================================================
-
-window.onload=function(){
- bgsMain.init();
- };
\ No newline at end of file
diff --git a/app/static/js/map.js b/app/static/js/map.js
index 0f154936..06e7fd8d 100644
--- a/app/static/js/map.js
+++ b/app/static/js/map.js
@@ -1,156 +1,294 @@
+var agsMap={};
-var control = {};
-var overlays = {};
-var baseMaps = {};
-
-var mapCentre = [54.5, -1.5];
-var initZoom = 5.5;
-
-
-/** Create the map instance - when the leaflet js is included */
-var map = L.map('mapid',
- {
- center: mapCentre, // centre at specified coords
- zoom: initZoom,
- minZoom: 5,
- maxZoom: 18
- }
-);
-
-
-/** Use the L.tileLayer.betterWms extension to load the wms layer */
-geologyOfbtn = L.tileLayer.betterWms('https://ogc.bgs.ac.uk/cgi-bin/BGS_Bedrock_and_Superficial_Geology/wms?', {
- layers: 'GBR_BGS_625k_BLS,GBR_BGS_625k_SLS',
- tiled: true,
- format: 'image/png',
- transparent: true,
- opacity: 0.5,
- continuousWorld: true,
- zIndex: 1000
-
-}).addTo(map);
-
-// /** Use the L.tileLayer.betterWms extension to load the 50k wms layer */
-// 50kgeology = L.tileLayer.betterWms('https://map.bgs.ac.uk/arcgis/services/BGS_Detailed_Geology/MapServer/WMSServer?', {
-// layers: 'BGS.50k.Bedrock,BGS.50k.Superficial.deposits,BGS.50k.Linear.features',
-// tiled: true,
-// format: 'image/png',
-// transparent: true,
-// opacity: 0.7,
-// continuousWorld: true,
-// zIndex: 1000
-
-// }).addTo(map);
-
-/** Add Esri basemap layers to map - this is using the esri-leaflet.js extension
- * for Leaflet and makes it easier to include Esri functionality in to Leaflet maps: https://esri.github.io/esri-leaflet */
-var topo = L.esri.basemapLayer("Topographic").addTo(map);
-var imagery = L.esri.basemapLayer("Imagery");
-
-/** Use the L.tileLayer.betterWms extension to load the AGS wms layer */
-var agsindex = L.tileLayer.wms('https://map.bgs.ac.uk/arcgis/services/AGS/AGS_Export/MapServer/WMSServer?', {
- layers: 'Boreholes',
- format: 'image/png',
- transparent: true,
- attribution: "AGS Data from British Geological Survey",
- zIndex: 1001
-}).addTo(map);
-
-/** Use the Leaflet.FeatureGroup.OGCAPI.js extension to load the AGS OGCAPI-Features layer */
-var agsboreholes = L.featureGroup
-.ogcApi("https://ogcapi.bgs.ac.uk/", {
- collection: "agsboreholeindex",
- pane: "overlays",
- limit: 200,
- onEachFeature: function (feat, layer) {
- var properties = feat.properties;
- var popupContent = "AGS Borehole Information
" +
- "BGS LOCA ID: " + properties.bgs_loca_id + "
" +
- "Depth (m): " + properties.loca_fdep + "
" +
- "Project Name: " + properties.proj_name + "
" +
- "Project Engineer: " + properties.proj_eng + "
" +
- "Project Contractor: " + properties.proj_cont + "
" +
- "Original LOCA ID: " + properties.loca_id + "
" +
- "AGS Graphical Log: " + "View / " +"Download" + "
" +
- "AGS Data (NGDC Download Service): " + "Download" + "
" +
- "AGS Submission Record (raw data): " + "View" + "
";
- layer.bindPopup(popupContent);
- },
-});
-
-agsboreholes.on("ready", () => {map.addLayer(agsboreholes);})
-
-// agsboreholes.once("ready", function (ev) {
-// map.fitBounds(agsboreholes.getBounds());
-// }).addTo(map);
-
-
-// (async () => {
-// const agsboreholes = await fetch('https://ogcapi.bgs.ac.uk/collections/agsboreholeindex/items?bbox=' + map.getBounds().toBBoxString() + '&limit=100', {
-// headers: {
-// 'Accept': 'application/geo+json'
-// }
-// }).then(response => response.json());
-// L.geoJSON(agsboreholes, {
-// onEachFeature: onEachFeature
-// }).addTo(map);
-// })();
-
-// function onEachFeature(feature, layer) {
-// var popupContent = "AGS Borehole Information
" +
-// "BGS LOCA ID: " + feature.properties.bgs_loca_id + "
" +
-// "Depth (m): " + feature.properties.loca_fdep + "
" +
-// "Project Name: " + feature.properties.proj_name + "
" +
-// "Project Engineer: " + feature.properties.proj_eng + "
" +
-// "Project Contractor: " + feature.properties.proj_cont + "
" +
-// "Original LOCA ID: " + feature.properties.loca_id + "
" +
-// "AGS Graphical Log: " + "View" + "
" +
-// "AGS Data: " + "Download" + "
" +
-// "AGS Submission Record (raw data): " + "View" + "
";
-// if (feature.properties && feature.properties.popupContent) {
-// popupContent += feature.properties.popupContent;
-// }
-// layer.bindPopup(popupContent);
-// }
-
-baseMaps["Topographic"] = topo;
-baseMaps["Imagery"] = imagery;
-overlays["Geology"] = geologyOfbtn;
-// overlays["AGS Index"] = agsindex;
-// overlays["AGS Details"] = agsboreholes;
-
-control = L.control.layers(baseMaps, overlays, { collapsed: false }).addTo(map);
-
-// // jQuery UI slider for controling the opacity of the wms layer.
-// $opacitySlider = $("#opacitySlider").slider({
-// slide: function (event, ui) {
-// geologyOfbtn.setOpacity((ui.value / 100).toFixed(1));
-// },
-// min: 0,
-// max: 100,
-// step: 10,
-// value: 50
-// });
-
-// // diable dragging when entering div
-// $("#dOpacitySliderBox").on('mouseover', function () {
-// map.dragging.disable();
-// });
-
-// // Re-enable dragging when leaving div
-// $("#dOpacitySliderBox").on('mouseout', function () {
-// map.dragging.enable();
-// });
-
-// $("#dOpacitySliderBox").click(false);
-
-
-// /** Geocoder search functionality - this is using Esri's location search functionality:
-// * https://esri.github.io/esri-leaflet/examples/geocoding-control.html */
-// var searchControl = L.esri.Geocoding.geosearch().addTo(map);
-// var results = L.layerGroup().addTo(map);
-
-// searchControl.on('results', function (data) {
-// results.clearLayers();
-// // do something with the search results
-// });
+agsMap.init=function(){
+ agsMap.hideModalBtn();
+ $("#closeModalBtn").on("click",agsMap.hideModalBtn);
+ $("#ags_data").on("click","input.checkPolyBtn",agsMap.checkPoly);
+ agsMap.setupMap();
+ return true;
+ };
+
+agsMap.hideModalBtn=function(){
+ $("#extentModal").hide();
+ return true;
+ };
+
+agsMap.map={
+ "basemaps":{},
+ "lyrs":{},
+ "lMap":{},
+ "control":{},
+ "drawCtrl":{}
+ };
+
+agsMap.polyData={};
+agsMap.maxBoresForDownload=10;
+
+agsMap.setupMap=function(){
+ var baseLayers={};
+ var overlays={};
+ var mapOpts={
+ "zoom":6,
+ "minZoom":5,
+ "maxZoom":18,
+ "center":[54.5,-1.5]
+ };
+
+ // create Leaflet map
+ agsMap.map.lMap=L.map("mapid",mapOpts);
+
+ // add Esri basemap layers to map - this is using the esri-leaflet.js extension
+ agsMap.map.basemaps.topo=L.esri.basemapLayer("Topographic").addTo(agsMap.map.lMap);
+ agsMap.map.basemaps.imagery=L.esri.basemapLayer("Imagery");
+
+ // use the L.tileLayer.betterWms extension to load the 50k wms layer
+ agsMap.map.lyrs.geologyOfbtn=L.tileLayer.betterWms("https://ogc.bgs.ac.uk/cgi-bin/BGS_Bedrock_and_Superficial_Geology/wms?", {
+ "layers": 'GBR_BGS_625k_BLS,GBR_BGS_625k_SLS',
+ "tiled": true,
+ "format": 'image/png',
+ "transparent": true,
+ "opacity": 0.5,
+ "continuousWorld": true,
+ "zIndex": 1000
+ }).addTo(agsMap.map.lMap);
+
+ // Use the L.tileLayer.betterWms extension to load the AGS wms layer
+ agsMap.map.lyrs.agsindex = L.tileLayer.wms('https://map.bgs.ac.uk/arcgis/services/AGS/AGS_Export/MapServer/WMSServer?', {
+ layers: 'Boreholes',
+ format: 'image/png',
+ transparent: true,
+ attribution: "AGS Data from British Geological Survey",
+ zIndex: 1001
+ }).addTo(agsMap.map.lMap);
+
+ // Use the Leaflet.FeatureGroup.OGCAPI.js extension to load the AGS OGCAPI-Features layer
+ agsMap.map.lyrs.agsboreholes = L.featureGroup.ogcApi("https://ogcapi.bgs.ac.uk/",{
+ "collection":"agsboreholeindex",
+ "pane":"overlays",
+ "limit":200,
+ "onEachFeature": function (feat, layer) {
+ var properties = feat.properties;
+ var popupContent = "AGS Borehole Information
" +
+ "BGS LOCA ID: " + properties.bgs_loca_id + "
" +
+ "Depth (m): " + properties.loca_fdep + "
" +
+ "Project Name: " + properties.proj_name + "
" +
+ "Project Engineer: " + properties.proj_eng + "
" +
+ "Project Contractor: " + properties.proj_cont + "
" +
+ "Original LOCA ID: " + properties.loca_id + "
" +
+ "AGS Graphical Log: " + "View / " +"Download" + "
" +
+ "AGS Data (NGDC Download Service): " + "Download" + "
" +
+ "AGS Submission Record (raw data): " + "View" + "
";
+ layer.bindPopup(popupContent);
+ },
+ });
+ agsMap.map.lyrs.agsboreholes.on("ready", () => {agsMap.map.lMap.addLayer(agsMap.map.lyrs.agsboreholes);})
+
+ // add layer selection control
+ overlays["Geology"]=agsMap.map.lyrs.geologyOfbtn;
+ baseLayers["Topographic"]=agsMap.map.basemaps.topo;
+ baseLayers["Imagery"]=agsMap.map.basemaps.imagery;
+ agsMap.map.control=L.control.layers(baseLayers,overlays,{"collapsed":false}).addTo(agsMap.map.lMap);
+
+ // add placeholder layer for drawings
+ agsMap.map.lyrs["drawings"]=L.featureGroup().addTo(agsMap.map.lMap);
+
+ // add placeholder layer for map highlight
+ agsMap.map.lyrs["highlight"]=L.layerGroup().addTo(agsMap.map.lMap);
+
+ // add drawing control
+ agsMap.drawing.addControl();
+
+ return true;
+ };
+
+// DRAWING ============================================================ DRAWING
+
+agsMap.drawing={};
+agsMap.drawing.shapes={"rectangle":true,"circle":false,"polyline":false,"polygon":true,"circlemarker":false,"marker":false};
+agsMap.drawing.drawCtrlActive=false;
+agsMap.drawing.showWMSpopup=true;
+
+agsMap.drawing.reEnableWMSpopup=function(){
+ console.log("reEnableWMSpopup");
+ agsMap.drawing.showWMSpopup=true;
+ return true;
+ };
+
+agsMap.drawing.addControl=function(){
+ console.log("agsMap.drawing.addControl");
+
+ // create drawing control
+ agsMap.map.drawCtrl=new L.Control.Draw({
+ "draw":agsMap.drawing.shapes,
+ "edit":{"featureGroup":agsMap.map.lyrs.drawings}
+ });
+ agsMap.map.lMap.addControl(agsMap.map.drawCtrl);
+ agsMap.drawing.drawCtrlActive=true;
+
+ // add drawing DRAWSTART event
+ agsMap.map.lMap.on(L.Draw.Event.DRAWSTART, function(evt){
+ // prevent WMS popup while drawing
+ agsMap.drawing.showWMSpopup=false;
+ });
+ agsMap.map.lMap.on(L.Draw.Event.DRAWSTOP, function(evt){
+ // enable WMS popup after short delay to allow rectangle end point to be blocked
+ window.setTimeout(agsMap.drawing.reEnableWMSpopup,1000);
+ });
+
+ // add drawing CREATED event
+ agsMap.map.lMap.on(L.Draw.Event.CREATED, function(evt){
+ var layer=evt.layer;
+ var polyData=agsMap.drawing.getPolygonData(layer);
+ var xhtml="Area: " + polyData.area + "m²
";
+ agsMap.polyData=polyData;
+ agsMap.showExtentModal(polyData);
+ agsMap.map.lyrs.drawings.addLayer(layer);
+ // disable drawing - only one box allowed
+ agsMap.drawing.disableDrawing();
+ layer.bindPopup(xhtml);
+ });
+
+ // add drawing DELETESTOP event
+ agsMap.map.lMap.on(L.Draw.Event.DELETESTOP, function(evt){
+ agsMap.drawing.enableDrawing();
+ });
+
+ // add drawing EDITSTART event
+ agsMap.map.lMap.on(L.Draw.Event.EDITSTART, function(evt){
+ agsMap.map.lMap.closePopup();
+ });
+
+ // add drawing EDITED event
+ agsMap.map.lMap.on(L.Draw.Event.EDITED, function(evt){
+ var layerId=Object.getOwnPropertyNames(evt.layers._layers)[0];
+ var layer=evt.layers._layers[layerId];
+ var polyData=agsMap.drawing.getPolygonData(layer);
+ var xhtml="Area: " + polyData.area + "m²
";
+ agsMap.polyData=polyData;
+ agsMap.showExtentModal(polyData);
+ layer.bindPopup(xhtml);
+ });
+ return true;
+ };
+
+agsMap.drawing.getPolygonData=function(layer){
+ var polyData={"wkt":"","area":""};
+ var coords=layer._latlngs[0];
+ var wktPt="";
+ var wktPts=[];
+ var i=0;
+ // calculate polygon area
+ polyData.area=agsMap.calcPolygonArea(coords);
+ // generate WKT
+ for(i=0;i < layer._latlngs[0].length;i++){
+ wktPt=layer._latlngs[0][i].lng.toFixed(3) + "%20" + layer._latlngs[0][i].lat.toFixed(3);
+ wktPts.push(wktPt);
+ };
+ // add first point again to close WKT polygon
+ wktPt=layer._latlngs[0][0].lng.toFixed(3) + "%20" + layer._latlngs[0][0].lat.toFixed(3);
+ wktPts.push(wktPt);
+ polyData.wkt="POLYGON((" + wktPts.join(",") + "))";
+ return polyData;
+ };
+
+// --- toggle drawing mode ----------------------------------------------------
+
+agsMap.drawing.disableDrawing=function(){
+ var shapes={"rectangle":false,"circle":false,"polyline":false,"polygon":false,"circlemarker":false,"marker":false};
+ agsMap.map.lMap.removeControl(agsMap.map.drawCtrl);
+ agsMap.map.drawCtrl=new L.Control.Draw({
+ "draw":shapes,
+ "edit":{"featureGroup":agsMap.map.lyrs.drawings}}
+ );
+ agsMap.map.lMap.addControl(agsMap.map.drawCtrl);
+ agsMap.drawing.drawCtrlActive=false;
+ return true;
+ };
+
+agsMap.drawing.enableDrawing=function(){
+ agsMap.map.lMap.removeControl(agsMap.map.drawCtrl);
+ agsMap.map.drawCtrl=new L.Control.Draw({
+ "draw":agsMap.drawing.shapes,
+ "edit":{"featureGroup":agsMap.map.lyrs.drawings}}
+ );
+ agsMap.map.lMap.addControl(agsMap.map.drawCtrl);
+ agsMap.drawing.drawCtrlActive=true;
+ return true;
+ };
+
+agsMap.showExtentModal=function(polyData){
+ $("#polyArea").html(polyData.area + "m²");
+ $("#polyCount").html("(loading ...)");
+ $("#extentModal>p.extentMsg").hide();
+ $("#extentValid>a").attr("href","#");
+ agsMap.checkExtent(polyData.wkt);
+ agsMap.positionExtentModal();
+ $("#extentModal").show();
+ return true;
+ };
+
+agsMap.positionExtentModal=function(){
+ var mapOffset=$("#mapid").offset();
+ var mapWidth=$("#mapid").width();
+ $("#extentModal").css("width",mapWidth + "px").css("left",mapOffset.left + "px").css("top",mapOffset.top + "px");
+ return true;
+ };
+
+// AREA CALCULATION ===========================================================
+agsMap.calcPolygonArea=function(coords){
+ var area=(L.GeometryUtil.geodesicArea(coords) * 0.001).toFixed(2);
+ return area;
+ };
+
+agsMap.checkPoly=function(evt){
+ agsMap.map.lMap.closePopup();
+ agsMap.showExtentModal(agsMap.polyData);
+ return true;
+ };
+
+// CHECK HOW MANY BOREHOLES IN EXTENT =========================================
+agsMap.checkExtent=function(wkt){
+ var apiUrl="/ags_export_by_polygon/?polygon=" + wkt + "&count_only=True";
+
+ // UNCOMMENT LINE BELOW
+ $.getJSON(apiUrl,agsMap.parseExtent);
+
+ // DELETE TWO LINES BELOW
+ //var fakeData={"msg":"Borehole count","count":7,"type":"success","self":"http://agsapi.bgs.ac.uk/ags_export_by_polygon/?polygon=POLYGON((-2.813%2055.317,-2.813%2055.466,-2.527%2055.466,-2.527%2055.317,-2.813%2055.317))&count_only=True"};
+ //agsMap.parseExtent(fakeData);
+
+ return true;
+ };
+
+agsMap.parseExtent=function(jData){
+ var apiUrl=jData.self.replace("&count_only=True","");
+ if(jData.type === "success"){
+ if(jData.count === 0){
+ // no bores
+ $("#boreCount").html("none found");
+ $("#extentEmpty").show();
+ }
+ else{
+ if(jData.count <= agsMap.maxBoresForDownload){
+ // got bores
+ $("#boreCount").html(jData.count);
+ $("#extentValid>a").attr("href",apiUrl);
+ $("#extentValid").show();
+ }
+ else{
+ // too many bores
+ $("#boreCount").html(jData.count);
+ $("#extentOver").show();
+ };
+ };
+ }
+ else{
+ // error
+ $("#boreCount").html("error");
+ $("#extentEmpty").show();
+ };
+ return true;
+ };
+
+// FIRE INITIALISATION onDomReady =============================================
+$(document).ready(agsMap.init);
diff --git a/app/templates/_base.html b/app/templates/_base.html
index f07cd493..1704d162 100644
--- a/app/templates/_base.html
+++ b/app/templates/_base.html
@@ -2,8 +2,8 @@
AGS File Utilities Tool and API
-
-
+
+
@@ -15,32 +15,27 @@
-
-
+
+
-
+
-
-
-
-
-
+
+
+
+
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+