Leaflet Profile Occurrence Map (#554)

* Extracting google version, adding leaflet version * matching google and leaflet zooms * Fix for leaflet_tiles not loading * Changing Leaflet Check to be in php * Fixing tab/space issue * adding empty check to profile occurrence map * updating coord aids $LEAFLET CHECK * removing old coord aid $LEAFLET switch * Adding $LEAFLET improved leaflet check to clgmap
BioKIC · Aug 15, 2023 · 1e3d056 · 1e3d056
1 parent 1b6f956
commit 1e3d056
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 31 deletions.
diff --git a/checklists/clgmap.php b/checklists/clgmap.php
@@ -107,11 +107,11 @@ function initialize(){
                alert("Failed to load checklist data");
             }
 
-            if("<?php echo $LEAFLET?>") {
+            <?php if(!empty($LEAFLET)) { ?>
                leafletInit();
-            } else {
+            <?php } else { ?>
                googleInit();
-            }
+            <?php } ?>
 			}
 		</script>
 		<style>

diff --git a/collections/individual/index.php b/collections/individual/index.php
@@ -154,13 +154,14 @@
 	<link href="<?php echo htmlspecialchars($CSS_BASE_PATH, HTML_SPECIAL_CHARS_FLAGS); ?>/jquery-ui.css" type="text/css" rel="stylesheet">
 	<?php
 	include_once($SERVER_ROOT.'/includes/head.php');
+	include_once($SERVER_ROOT.'/includes/leafletMap.php');
 	include_once($SERVER_ROOT.'/includes/googleanalytics.php');
+	include_once($SERVER_ROOT.'/includes/googleMap.php');
 	?>
 	<link href="<?php echo htmlspecialchars($CSS_BASE_PATH, HTML_SPECIAL_CHARS_FLAGS); ?>/symbiota/collections/individual/index.css?ver=1" type="text/css" rel="stylesheet" >
 	<link href="<?php echo htmlspecialchars($CSS_BASE_PATH, HTML_SPECIAL_CHARS_FLAGS); ?>/symbiota/collections/individual/popup.css" type="text/css" rel="stylesheet" >
 	<script src="../../js/jquery.js" type="text/javascript"></script>
 	<script src="../../js/jquery-ui.js" type="text/javascript"></script>
-	<script src="//maps.googleapis.com/maps/api/js?<?php echo (isset($GOOGLE_MAP_KEY) && $GOOGLE_MAP_KEY?'key='.$GOOGLE_MAP_KEY:''); ?>"></script>
 	<script type="text/javascript">
 		var tabIndex = <?php echo $tabIndex; ?>;
 		var map;
@@ -241,28 +242,39 @@ function openIndividual(target) {
 			if (occWindow.opener == null) occWindow.opener = self;
 		}
 
-		<?php
-		if($displayMap){
-			?>
-			function initializeMap(){
-				var mLatLng = new google.maps.LatLng(<?php echo $occArr['decimallatitude'].",".$occArr['decimallongitude']; ?>);
-				var dmOptions = {
-					zoom: 8,
-					center: mLatLng,
-					marker: mLatLng,
-					mapTypeId: google.maps.MapTypeId.TERRAIN,
-					scaleControl: true
-				};
-				map = new google.maps.Map(document.getElementById("map_canvas"), dmOptions);
-				//Add marker
-				var marker = new google.maps.Marker({
-					position: mLatLng,
-					map: map
-				});
-			}
-			<?php
-		}
-		?>
+      <?php if($displayMap){ ?>
+
+         function googleInit() {
+            var mLatLng = new google.maps.LatLng(<?php echo $occArr['decimallatitude'].",".$occArr['decimallongitude']; ?>);
+            var dmOptions = {
+               zoom: 8,
+               center: mLatLng,
+               marker: mLatLng,
+               mapTypeId: google.maps.MapTypeId.TERRAIN,
+               scaleControl: true
+            };
+            map = new google.maps.Map(document.getElementById("map_canvas"), dmOptions);
+            //Add marker
+            var marker = new google.maps.Marker({
+            position: mLatLng,
+               map: map
+            });
+         }
+         function leafletInit() {
+            let mLatLng = [<?php echo $occArr['decimallatitude'].",".$occArr['decimallongitude']; ?>];
+            map = new LeafletMap("map_canvas", {center: mLatLng, zoom: 8});
+            const marker = L.marker(mLatLng).addTo(map.mapLayer);
+         }
+
+         function initializeMap(){
+            <?php if(!empty($LEAFLET)) { ?>
+               leafletInit();
+            <?php } else { ?>
+               googleInit();
+            <?php } ?>
+         }
+
+      <?php } ?>
 	</script>
 </head>
 <body>

diff --git a/collections/tools/mapcoordaid.php b/collections/tools/mapcoordaid.php
@@ -251,9 +251,7 @@ function loadShape(mapMode) {
          } 
       }
       let formShape = loadShape("<?php echo $mapMode?>");
-
-      if("<?php echo $LEAFLET ?>") { //LEAFLET SPECIFIC
-
+      function leafletInit() {
          const MapOptions = {
             center: [<?php echo $latCenter?>, <?php echo $lngCenter?>],
             zoom: <?php echo $zoom?>
@@ -272,8 +270,8 @@ function loadShape(mapMode) {
             map.drawShape(formShape);
             map.mapLayer.fitBounds(map.activeShape.layer.getBounds());
          }
-
-      } else { //GOOGLE SPECIFIC
+      }
+      function googleInit() {
 		   const MapOptions= {
 				zoom: <?php echo $zoom; ?>,
 				center: new google.maps.LatLng(<?php echo $latCenter . ',' . $lngCenter; ?>),
@@ -287,6 +285,12 @@ function loadShape(mapMode) {
          if(formShape) 
             map.drawShape(formShape, setShapeToSearchForm)
       }
+
+      <?php if(!empty($LEAFLET)) { ?> 
+         leafletInit();
+      <?php } else { ?> 
+         googleInit();
+      <?php } ?>
    </script>
 </body>
 </html>
diff --git a/js/symb/leafletMap.js b/js/symb/leafletMap.js
@@ -59,6 +59,8 @@ class LeafletMap {
       }).addTo(this.mapLayer);
 
       L.control.scale().addTo(this.mapLayer);
+
+      this.mapLayer._onResize();
    }
 
    clearMap() {