, imagery © CartoDB'; //var mbUrl = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'; var defaultBaseLayer = L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", { attribution: "Map data © OpenStreetMap, imagery © CartoDB", subdomains: "abcd", mapid: "", token: "" }); var MAP_VAR = { map : null, mappingUrl : "https://biocache-ws.ala.org.au/ws", // e.g. "https://biocache.ala.org.au/ws" query : "?q=lsid%3Ahttps%3A%2F%2Fid.biodiversity.org.au%2Fnode%2Fapni%2F2917991&qualityProfile=ALA&fq=data_resource_uid%3Adr1097", // e.g. "?q=*%3A*&lat=-34.266296&lon=145.3838&radius=154.8" queryDisplayString : "<span class='lsid' id='https://id.biodiversity.org.au/node/apni/2917991'>SPECIES: Chasmanthe floribunda</span>", // e.g. "[all records] - within 154.8 km of point(-34.266, 145.384)" center: [-23.6,133.6], defaultLatitude : "-27.6", defaultLongitude : "141.0", defaultZoom : "4", overlays : { }, baseLayers : { "Minimal" : defaultBaseLayer, "Road" : new L.Google('ROADMAP'), "Terrain" : new L.Google('TERRAIN'), "Satellite" : new L.Google('HYBRID') }, layerControl : null, currentLayers : [], additionalFqs : '', zoomOutsideScopedRegion: false, removeFqs: '' }; var ColourByControl = L.Control.extend({ options: { position: 'topright', collapsed: false }, onAdd: function (map) { // create the control container with a particular class name var $controlToAdd = $('.colourbyTemplate').clone(); var container = L.DomUtil.create('div', 'leaflet-control-layers'); var $container = $(container); $container.attr("id","colourByControl"); $container.attr('aria-haspopup', true); $container.html($controlToAdd.html()); return container; } }); var RecordLayerControl = L.Control.extend({ options: { position: 'topright', collapsed: false }, onAdd: function (map) { // create the control container with a particular class name var container = L.DomUtil.create('div', 'leaflet-control-layers'); var $container = $(container); $container.attr("id","recordLayerControl"); $('#mapLayerControls').prependTo($container); // Fix for Firefox select bug var stop = L.DomEvent.stopPropagation; L.DomEvent .on(container, 'click', stop) .on(container, 'mousedown', stop); return container; } }); function initialiseMap(){ //console.log("initialiseMap", MAP_VAR.map); if(MAP_VAR.map != null){ return; } //initialise map MAP_VAR.map = L.map('leafletMap', { center: [MAP_VAR.defaultLatitude, MAP_VAR.defaultLongitude], zoom: MAP_VAR.defaultZoom, minZoom: 1, scrollWheelZoom: false, fullscreenControl: true, fullscreenControlOptions: { position: 'topleft' }, worldCopyJump: true }); //add edit drawing toolbar // Initialise the FeatureGroup to store editable layers MAP_VAR.drawnItems = new L.FeatureGroup(); MAP_VAR.map.addLayer(MAP_VAR.drawnItems); // Initialise the draw control and pass it the FeatureGroup of editable layers MAP_VAR.drawControl = new L.Control.Draw({ edit: { featureGroup: MAP_VAR.drawnItems }, draw: { polyline: false, rectangle: { shapeOptions: { color: '#bada55' } }, circle: { shapeOptions: { color: '#bada55' } }, marker: false, polygon: { allowIntersection: false, // Restricts shapes to simple polygons drawError: { color: '#e1e100', // Color the shape will turn when intersects message: 'Oh snap! you can't draw that!' // Message that will show when intersect }, shapeOptions: { color: '#bada55' } } } }); MAP_VAR.map.addControl(MAP_VAR.drawControl); MAP_VAR.map.on('draw:created', function(e) { //setup onclick event for this object var layer = e.layer; MAP_VAR.drawnItems.addLayer(layer); generatePopup(layer, layer._latlng); addClickEventForVector(layer); }); //add the default base layer MAP_VAR.map.addLayer(defaultBaseLayer); L.control.coordinates({position:"bottomright", useLatLngOrder: true}).addTo(MAP_VAR.map); // coordinate plugin MAP_VAR.layerControl = L.control.layers(MAP_VAR.baseLayers, MAP_VAR.overlays, {collapsed:true, position:'topleft'}); MAP_VAR.layerControl.addTo(MAP_VAR.map); addQueryLayer(true); MAP_VAR.map.addControl(new RecordLayerControl()); MAP_VAR.map.addControl(new ColourByControl()); L.Util.requestAnimFrame(MAP_VAR.map.invalidateSize, MAP_VAR.map, !1, MAP_VAR.map._container); L.Browser.any3d = false; // FF bug prevents selects working properly $('.colour-by-control').click(function(e){ if($(this).parent().hasClass('leaflet-control-layers-expanded')){ $(this).parent().removeClass('leaflet-control-layers-expanded'); $('.colour-by-legend-toggle').show(); } else { $(this).parent().addClass('leaflet-control-layers-expanded'); $('.colour-by-legend-toggle').hide(); } e.preventDefault(); e.stopPropagation(); return false; }); $('.hideColourControl').click(function(e){ //console.log('hideColourControl'); $('#colourByControl').removeClass('leaflet-control-layers-expanded'); $('.colour-by-legend-toggle').show(); e.preventDefault(); e.stopPropagation(); return false; }); $( "#sizeslider" ).slider({ min:1, max:6, value: Number($('#sizeslider-val').text()), tooltip: 'hide' }).on('slideStop', function(ev){ $('#sizeslider-val').html(ev.value); addQueryLayer(true); }); $( "#opacityslider" ).slider({ min: 0.1, max: 1.0, step: 0.1, value: Number($('#opacityslider-val').text()), tooltip: 'hide' }).on('slideStop', function(ev){ var value = parseFloat(ev.value).toFixed(1); // prevent values like 0.30000000004 appearing $('#opacityslider-val').html(value); if (MAP_VAR.currentLayers.length == 1) { MAP_VAR.currentLayers[0].setOpacity(value); } else { addQueryLayer(true); } }); $('#outlineDots').click(function(e) { addQueryLayer(true); }); fitMapToBounds(); // zoom map if points are contained within Australia //drawCircleRadius(); // draw circle around lat/lon/radius searches // display vector from previous wkt search var wktFromParams = ""; // duplicate wkt and circle for leaflet's continous world display. var obj = undefined; var objLeft = undefined; var objRight = undefined; if (wktFromParams) { // draw WKT feature var wkt = new Wkt.Wkt(); wkt.read(wktFromParams); obj = wkt.toObject({color: '#bada55' }); objLeft = wkt.toObject({color: '#bada55', translate: {x: -360} }); objRight = wkt.toObject({color: '#bada55', translate: {x: 360} }); } else if (isSpatialRadiusSearch()) { // draw circle onto map obj = L.circle([$.url().param('lat'), $.url().param('lon')], ($.url().param('radius') * 1000), {color: '#bada55'}); // following lines were causing error in leaflet, so removed them. NdR Jan 2018. // objLeft = L.circle([$.url().param('lat'), $.url().param('lon')] - 360, ($.url().param('radius') * 1000), {color: '#bada55'}); // objRight = L.circle([$.url().param('lat'), $.url().param('lon')] + 360, ($.url().param('radius') * 1000), {color: '#bada55'}); } if (obj) { MAP_VAR.map.addHandler('paramArea', L.PointClickHandler.extend({obj: obj})); MAP_VAR.map.paramArea.enable(); MAP_VAR.drawnItems.addLayer(obj); } if (objLeft) { MAP_VAR.map.addHandler('paramAreaLeft', L.PointClickHandler.extend({obj: objLeft})); MAP_VAR.map.paramAreaLeft.enable(); MAP_VAR.drawnItems.addLayer(objLeft); } if (objRight) { MAP_VAR.map.addHandler('paramAreaRight', L.PointClickHandler.extend({obj: objRight})); MAP_VAR.map.paramAreaRight.enable(); MAP_VAR.drawnItems.addLayer(objRight); } MAP_VAR.map.on('draw:edited', function(e) { //setup onclick event for this object var layers = e.layers; layers.eachLayer(function (layer) { generatePopup(layer, layer._latlng); addClickEventForVector(layer); }); }); MAP_VAR.recordList = new Array(); // store list of records for popup //MAP_VAR.map.on('click', pointLookupClickRegister); if (obj === undefined) { MAP_VAR.map.addHandler('paramArea', L.PointClickHandler.extend({obj: MAP_VAR.map})); MAP_VAR.map.paramArea.enable(); } // Add a help tooltip to map when first loaded MAP_VAR.map.whenReady(function() { var opts = { placement:'right', callback: destroyHelpTooltip // hide help tooltip when mouse over the tools } $('.leaflet-draw-toolbar a').tooltip(opts); //$('.leaflet-draw-toolbar').first().attr('title',jQuery.i18n.prop('advancedsearch.js.choosetool')).tooltip({placement:'right'}).tooltip('show'); }); // Hide help tooltip on first click event var once = true; MAP_VAR.map.on('click', function(e) { if (once) { $('.leaflet-draw-toolbar').tooltip('destroy'); once = false; } }); } // helper to remove tooltips from map var once = true; function destroyHelpTooltip() { if ($('.leaflet-draw-toolbar').length && once) { $('.leaflet-draw-toolbar').tooltip('destroy'); once = false; } } function changeFacetColours() { MAP_VAR.additionalFqs = ''; // clear this variable every time a new colour by is chosen. MAP_VAR.removeFqs = '' //e.preventDefault(); //e.stopPropagation(); addQueryLayer(true); return true; } function showHideControls(el) { //console.log("el", el, this); var $this = this; if ($($this).hasClass('fa')) { alert("activating"); $($this).hide(); $($this + ' table.controls').show(); } else { alert("deactivating"); $($this).show(); $($this + ' table.controls').hide(); } } /** * A tile layer to map colouring the dots by the selected colour. */ function addQueryLayer(redraw){ $.each(MAP_VAR.currentLayers, function(index, value){ MAP_VAR.map.removeLayer(MAP_VAR.currentLayers[index]); MAP_VAR.layerControl.removeLayer(MAP_VAR.currentLayers[index]); }); MAP_VAR.currentLayers = []; var colourByFacet = $('#colourBySelect').val(); var pointSize = $('#sizeslider-val').html(); var opacity = $('#opacityslider-val').html(); var outlineDots = $('#outlineDots').is(':checked'); var envProperty = "color:df4a21;name:circle;size:"+pointSize+";opacity:"+opacity if(colourByFacet){ if(colourByFacet == "gridVariable"){ colourByFacet = "coordinate_uncertainty" envProperty = "colormode:coordinate_uncertainty;name:circle;size:"+pointSize+";opacity:1;cellfill:0xffccff;variablegrids:on" } else { envProperty = "colormode:" + colourByFacet + ";name:circle;size:"+pointSize+";opacity:1;" } } var gridSizeMap = { 1: 256, 2:128, 3: 64, 4:32, 5:16, 6:8 } var layer = L.tileLayer.wms(MAP_VAR.mappingUrl + "/mapping/wms/reflect" + MAP_VAR.query + MAP_VAR.additionalFqs, { layers: 'ALA:occurrences', format: 'image/png', transparent: true, bgcolor:"0x000000", outline:outlineDots, ENV: envProperty, opacity: opacity, GRIDDETAIL: gridSizeMap[pointSize], STYLE: "opacity:"+opacity // for grid data }); if(redraw){ if(!colourByFacet){ $('.legendTable').html(''); addDefaultLegendItem("df4a21"); } else if (colourByFacet == 'grid') { $('.legendTable').html(''); addGridLegendItem(); } else { //update the legend $('.legendTable').html('