From 77849f720dfbb7905619fa129572fba5ddac299d Mon Sep 17 00:00:00 2001 From: KoalaGeo Date: Tue, 12 Sep 2023 11:56:32 +0100 Subject: [PATCH 1/3] init of srbu changes --- app/static/css/map.css | 89 +++++ app/static/css/style.css | 30 ++ app/static/js/L.TileLayer.BetterWMS.js | 145 ++++---- app/static/js/main.js | 295 ----------------- app/static/js/map.js | 442 ++++++++++++++++--------- app/templates/_base.html | 52 +-- app/templates/landing_page.html | 21 +- 7 files changed, 513 insertions(+), 561 deletions(-) create mode 100644 app/static/css/map.css delete mode 100644 app/static/js/main.js 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/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 + ""; - - $("#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..299825b3 100644 --- a/app/static/js/map.js +++ b/app/static/js/map.js @@ -1,156 +1,288 @@ +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){ + var mapOffset=$("#mapid").offset(); + var mapWidth=$("#mapid").width(); + $("#polyArea").html(polyData.area + "m²"); + $("#polyCount").html("(loading ...)"); + $("#extentModal>p.extentMsg").hide(); + $("#extentValid>a").attr("href","#"); + agsMap.checkExtent(polyData.wkt); + $("#extentModal").css("width",mapWidth + "px").css("left",mapOffset.left + "px").css("top",mapOffset.top + "px").show(); + 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 @@ - - + + - + - - - - - + + + + - + - - - - - - - - + + + + + + +