Merge pull request #2298 from AndreasK79/gridmap_clear_button

[Gridmap] Added button to clear lines and markers on map

application/views/gridmap/index.php

@@ -27,7 +27,7 @@
   margin: 0 8px 0 0;
 }
 .coordinates {
-    justify-content: center; 
+    justify-content: center;
     align-items: stretch;
 }
 .cohidden {
@@ -108,7 +108,8 @@
                     </div>
                 </div>
 
-            <button id="plot" type="button" name="plot" class="btn btn-primary  ld-ext-right" onclick="gridPlot(this.form)"><?php echo lang('gridsquares_button_plot'); ?><div class="ld ld-ring ld-spin"></div></button>
+            <button id="plot" type="button" name="plot" class="btn btn-primary mr-1 ld-ext-right ld-ext-right-plot" onclick="gridPlot(this.form)"><?php echo lang('gridsquares_button_plot'); ?><div class="ld ld-ring ld-spin"></div></button>
+			<button id="clear" type="button" name="clear" class="btn btn-primary mr-1 ld-ext-right ld-ext-right-clear" onclick="clearMarkers()">Clear markers<div class="ld ld-ring ld-spin"></div></button>
 </form>
 
 		<?php if($this->session->flashdata('message')) { ?>

assets/js/leaflet/geocoding.js

@@ -6,6 +6,9 @@ const degToRad = deg => (deg % 360) * Math.PI / 180;
 const radToDeg = rad => (rad / Math.PI *180) % 360;
 const isValidPoint = (lat, lng) => (lat >= -90 && lat <= 90) && (lng >= -180 && lng <= 180);
 
+var clickmarkers = [];
+var clicklines = [];
+
 function ConvertDDToDMS(lat, lng) {
 	var LatLng = [];
 
@@ -79,6 +82,8 @@ function onMapClick(event) {
 
 	var marker = L.marker([fromCoords[0], fromCoords[1]], {closeOnClick: false, autoClose: false}).addTo(map).bindPopup(homegrid);
 
+	clickmarkers.push(marker);
+
 	var result = bearingDistance(homegrid, locator);
 
 	var distance = Math.round(result.km * 10) / 10 + ' km';
@@ -99,6 +104,9 @@ function onMapClick(event) {
 
 	var marker2 = L.marker([lat, lng], {closeOnClick: false, autoClose: false}).addTo(map);
 
+
+	clickmarkers.push(marker2);
+
 	marker2.bindTooltip(popupmessage);
 
 	const geodesic = L.geodesic(multiplelines, {
@@ -108,6 +116,8 @@ function onMapClick(event) {
 		wrap: false,
 		steps: 100
 	}).addTo(map);
+
+	clicklines.push(geodesic);
 };
 
 const bearingDistance = (from, to) => {

assets/js/sections/gridmap.js

@@ -16,8 +16,8 @@ var grid_four_confirmed = '';
 var grid_six_confirmed = '';
 
 function gridPlot(form) {
-    $(".ld-ext-right").addClass('running');
-	$(".ld-ext-right").prop('disabled', true);
+    $(".ld-ext-right-plot").addClass('running');
+	$(".ld-ext-right-plot").prop('disabled', true);
     $('#plot').prop("disabled", true);
     // If map is already initialized
     var container = L.DomUtil.get('gridsquare_map');
@@ -41,8 +41,8 @@ function gridPlot(form) {
 		},
 		success: function (data) {
             $('.cohidden').show();
-            $(".ld-ext-right").removeClass('running');
-            $(".ld-ext-right").prop('disabled', false);
+            $(".ld-ext-right-plot").removeClass('running');
+            $(".ld-ext-right-plot").prop('disabled', false);
             $('#plot').prop("disabled", false);
 			grid_two = data.grid_2char;
             grid_four = data.grid_4char;
@@ -148,6 +148,19 @@ function spawnGridsquareModal(loc_4char) {
     });
 }
 
+function clearMarkers() {
+	$(".ld-ext-right-clear").addClass('running');
+	$(".ld-ext-right-clear").prop('disabled', true);
+	clicklines.forEach(function (item) {
+		map.removeLayer(item)
+	});
+	clickmarkers.forEach(function (item) {
+		map.removeLayer(item)
+	});
+	$(".ld-ext-right-clear").removeClass('running');
+	$(".ld-ext-right-clear").prop('disabled', false);
+}
+
 $(document).ready(function(){
    gridPlot(this.form);
 })