From ba7e9cb622e805b8ad4ad63041cd10e57bfcb23f Mon Sep 17 00:00:00 2001
From: Stephen Houser <stephenhouser@gmail.com>
Date: Mon, 23 Dec 2024 18:05:30 -0500
Subject: [PATCH] adding to PR#9 and using built-in marker but a different
 color. Can alter the icon via css .qth-icon

---
 index.html     |  2 +-
 leaflet-map.js |  4 ++--
 qso-mapper.css |  5 +++++
 qso-mapper.js  | 41 +++++++++++++++++------------------------
 4 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index 17073a5..9235a5a 100644
--- a/index.html
+++ b/index.html
@@ -152,7 +152,7 @@ <h2>Show the Map or the Log</h2>
 			// ex: qth=22.303940,114.170372 will place a yellow marker at 22.3, 114.1 on the map
 			var qth = getQueryVariable('qth');
 			if (qth !== null) {
-					createQTHMarker(qth, "Home QTH")
+				createQTHMarker(qth, "Home QTH")
 			}
 		</script>
 	</body>
diff --git a/leaflet-map.js b/leaflet-map.js
index 200cfba..e4795f8 100644
--- a/leaflet-map.js
+++ b/leaflet-map.js
@@ -105,7 +105,7 @@ function removeAllPolygons() {
  * Set up a marker on the map and corresponding pop-up for when the
  * marker is selected.
  */
-function createMarker(latitude, longitude, popupText) {
+function createMarker(latitude, longitude, popupText, options={}) {
 	// To use a smaller marker, use something like this...
 	// var blueMarkerSmall = L.icon({
 	// 	iconUrl: 'icons/blu-blank.png',
@@ -115,7 +115,7 @@ function createMarker(latitude, longitude, popupText) {
 	// });
 	//var marker = L.marker([latitude, longitude], {icon: blueMarkerSmall});
 
-	var marker = L.marker([latitude, longitude]);
+	var marker = L.marker([latitude, longitude], options);
 	
 	marker.addTo(_markerFeatureGroup)
 		.bindPopup(popupText);
diff --git a/qso-mapper.css b/qso-mapper.css
index ce76b3b..a1dad69 100644
--- a/qso-mapper.css
+++ b/qso-mapper.css
@@ -41,6 +41,11 @@ body {
 	background: white;
 }
 
+.qth-icon {
+	/* https://stackoverflow.com/questions/23567203/leaflet-changing-marker-color */
+	filter: hue-rotate(120deg);
+}
+
 .background {
 	padding: 3em;
 	position: absolute;
diff --git a/qso-mapper.js b/qso-mapper.js
index fddb7ea..87ce451 100644
--- a/qso-mapper.js
+++ b/qso-mapper.js
@@ -216,44 +216,37 @@ function removeQso(qso) {
  *
  * Set up a marker on the map for operating QTH and corresponding pop-up for
  * when the marker is selected.
+ * 
+ * Change the color of the marker using CSS huechange
+ * https://stackoverflow.com/questions/23567203/leaflet-changing-marker-color 
  */
 function createQTHMarker(latlong, popupText) {
-	// To use a smaller marker, use something like this...
-	var blueMarkerSmall = L.icon({
-		iconUrl: 'icons/ylw-blank.png',
-		iconSize:     [32, 32], // size of the icon
-		iconAnchor:   [16, 32], // point of the icon which will correspond to marker's location
-		popupAnchor:  [0, -16] // point from which the popup should open relative to the iconAnchor
-	});
-
-	var [latitude, longitude] = latlong.split(',');
-	var marker = L.marker([latitude, longitude], {icon: blueMarkerSmall, zIndexOffset: 1000});
+	const [latitude, longitude] = latlong.split(',');
 
-	marker.addTo(_markerFeatureGroup)
-		  .bindPopup(popupText);
+	const popupDiv = '<div class="qth">' +
+					 '<h1>' + popupText + '</h1><hr/>' +
+					 '</div>';
 
-	_markers.push(marker);
+	marker = createMarker(latitude, longitude, popupDiv, {zIndexOffset: 1000});
+	marker._icon.classList.add("qth-icon");
 	return marker;
 }
 
-/* addMarkerforQth - add a marker to the map for a given operating location */
-
-/* TODO: Does not look like this function is used anywhere, remove in next revision
+/* addMarkerforQth - add a marker to the map for a given operating location 
+ *
+ * TODO: This function is for when we load QTH from ADIF File.
+ * It is not currently used.
+ */
 function addMarkerForQth(qth) {
 	var latlon = latLonForQso(qth);
 	if (latlon == null) {
 			return null;
 	}
 
-	var [latitude, longitude] = latlon;
-	var popupText = '<div class="qth">' +
-			'<h1>' + qth.call + '</h1><hr/>' +
-			'</div>';
-
-	marker = createMarker(latitude, longitude, popupText);
-	return marker;
+	const [latitude, longitude] = latlon;
+	const popupText = "Home QTH";
+	return createQTHMarker(`${latitude},${longitude}`, popupText);
 }
-*/
 
 /* addMarkerForQso - add a marker to the map for a given QSO */
 function addMarkerForQso(qso) {