Merge pull request #9 from tomswartz07/qth-feature

Add QTH Marker

index.html

@@ -147,6 +147,17 @@ <h2>Show the Map or the Log</h2>
 				var mapCanvas = document.getElementById('map-canvas');
 				toggleElement(mapCanvas, sender);
 			}
+                        // If a lat/long is specified in the query string, try to use it as the
+                        // QTH/Operating location for the log file.
+                        // This allows for semi-obvious location-range mapping
+                        // 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(40.786, -73.961, "Home QTH")
+                        }
+
+
 		</script>
 	</body>
-</html>
+</html>

qso-mapper.css

@@ -52,6 +52,11 @@ body {
 	width: 100%
 }
 
+
+.qth h1 {
+	font-size: 2rem;
+}
+
 .qso h1 {
 	font-size: 2rem;
 }
@@ -62,4 +67,4 @@ input:invalid {
 
 input:valid {
   border: 2px solid green;
-}
+}

qso-mapper.js

@@ -212,6 +212,45 @@ function removeQso(qso) {
 	}
 }
 
+/* createQTHMarker - create a marker on the map at the given position.
+ *
+ * Set up a marker on the map for operating QTH and corresponding pop-up for
+ * when the marker is selected.
+ */
+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});
+
+        marker.addTo(_markerFeatureGroup)
+                .bindPopup(popupText);
+
+        _markers.push(marker);
+        return marker;
+}
+
+/* addMarkerforQth - add a marker to the map for a given operating location */
+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;
+}
+
 /* addMarkerForQso - add a marker to the map for a given QSO */
 function addMarkerForQso(qso) {
 	var latlon = latLonForQso(qso);