leaflet first attempt

Author: LukePrior

css/main.css

@@ -179,7 +179,7 @@ body {
 header {
     position: fixed;
     top: 0;
-    left; 0;
+    left: 0;
     padding: 0;
     margin: 0;
     height: 50px;
@@ -737,6 +737,16 @@ header .search form input[type='submit'] {
     display: none;
 }
 
+.leaflet-tooltip.serialtooltip {
+    background-color: transparent;
+    border: 0px;
+    box-shadow: none;
+    font-size: 12px;
+    font-weight: bold;
+    font-family: 'Roboto';
+    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
+}
+
 @media only screen and (min-width: 900px) {
 }
 

img/markers/antenna-green-dark.png

@@ -89,7 +89,7 @@ <h4>Recovered a Sonde?</h4>
                 Click the 'car' icon on the top-right to submit a recovery notification.
 
                 <h4>Support Us!</h4>
-                Google Maps and AWS hosting unfortunately does not come cheap. If you're seeing a greyed out map, that's because we've exceeded our free Google Maps page loads. <br/>
+                AWS hosting unfortunately does not come cheap. <br/>
                 If you use SondeHub regularly, please consider <a href="https://www.patreon.com/sondehub" target="_blank">supporting us on Patreon</a>, or with a <a href="https://sondehub.org/go/donate" target="_blank">donation on Paypal</a>.
 
                 <h4>Amateur HAB Launches?</h4>
@@ -102,7 +102,7 @@ <h4>SondeHub Status Page</h4>
             <br/>
             <h2>Under Beta!</h2>
             <hr/>
-            Welcome to the new SondeHub Tracker v2!
+            Welcome to the new SondeHub Tracker v2 (leaflet edition)!
             <br/>
             This site uses data from the <a href="https://github.com/projecthorus/sondehub-infra/wiki" target="_blank">SondeHub v2</a> database, which will remove the radiosonde  
             load from the Habitat tracking database. We are still working to being this tracker up to feature-parity with the previous
@@ -211,18 +211,6 @@ <h4>Other</h4>
                     <input type="checkbox" id="opt_offline">
                 </div>
             </div>
-            <div class="row option">
-                <span><b>Mobile station</b></span>
-                <div class="switch off" id="sw_station">
-                    <span class="thumb"></span>
-                    <input type="checkbox" id="opt_station">
-                </div>
-            </div>
-            <div class="row info">
-                <span>
-                Chase car equipped with radio receiver
-                </span>
-            </div>
             <div class="row option">
                 <span><b>Force check for new  version</b></span>
                 <div class="switch off" id="sw_cache">
@@ -247,7 +235,7 @@ <h2>Weather
                 </svg>
             </h2>
             <hr>
-            <p>Here you can access various weather overlays. This an <b>experimental feature</b>. Mobile users be aware that this can quickly eat your data allowance.</p>
+            <p>Here you can access various weather overlays.</p>
         </div>
     </div>
     <div id="chasecarbox" style="display: none" class="flatpage">
@@ -266,7 +254,7 @@ <h2>Chase car mode</h2>
                 <span class="r"><input type="text" id="cc_callsign" style="width: 140px;"/></span>
             </div>
             <div class="row">
-                <span><b>Notice: If you enable this, your location will be uploaded to habitat; making it publicly visible on the map.</b></span>
+                <span><b>Notice: If you enable this, your location will be uploaded to SondeHub; making it publicly visible on the map.</b></span>
             </div>
             <hr>
             <div class="row">
@@ -376,16 +364,17 @@ <h3>Report Recovery</h3>
     <!-- Was 3.31-->
     <script src="https://maps.google.com/maps/api/js?v=3.44&libraries=map,common,controls,util,marker,onion,kml,ga,infowindow,stats,poly,overlay,weather,weather_impl,geometry&language=en_us&key=AIzaSyCiFklq0gbg7DqUn81NqYBN17bwgK4YFf0" type="text/javascript"></script>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
-    <script type="text/javascript" language="javascript" src="js/mobile.js"></script>
-    <!--
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
+    <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
+    <script src="https://unpkg.com/@joergdietrich/leaflet.terminator"></script>
     <script type="text/javascript" language="javascript" src="js/gmaps_extentions.js"></script>
     <script type="text/javascript" language="javascript" src="js/jquery-1.12.4-min.js"></script>
     <script type="text/javascript" language="javascript" src="js/chasecar.lib.js"></script>
     <script type="text/javascript" language="javascript" src="js/iscroll.js"></script>
-    <script type="text/javascript" language="javascript" src="js/nite-overlay.js"></script>
     <script type="text/javascript" language="javascript" src="js/tracker.js"></script>
     <script type="text/javascript" language="javascript" src="js/app.js"></script>
-    -->
 
     <!--
     <script type="text/javascript">

index.html

@@ -13,7 +13,7 @@ function lhash_update(history_step) {
     var hash = "";
 
     // generate hash
-    hash += "mt=" + map.getMapTypeId();
+    hash += "mt=" + selectedLayer;
     hash += "&mz=" + map.getZoom();
 
     if(!/^[a-z0-9]{32}$/ig.exec(wvar.query)) {
@@ -22,8 +22,8 @@ function lhash_update(history_step) {
 
     if(follow_vehicle === null || manual_pan) {
         var latlng = map.getCenter();
-        hash += "&mc=" + roundNumber(latlng.lat(), 5) +
-                "," + roundNumber(latlng.lng(), 5);
+        hash += "&mc=" + roundNumber(latlng.lat, 5) +
+                "," + roundNumber(latlng.lng, 5);
     }
 
     if(follow_vehicle !== null) {
@@ -35,11 +35,6 @@ function lhash_update(history_step) {
         $("header .search input[type='text']").val(wvar.query);
     }
 
-    // other vars
-    if(wvar.nyan) {
-        hash += "&nyan=1";
-    }
-
     hash = encodeURI(hash);
     // set state
     if(history_supported) {
@@ -85,7 +80,6 @@ function load_hash(no_refresh) {
         zoom: true,
         focus: "",
         query: "",
-        nyan: false,
     };
 
     parms.forEach(function(v) {
@@ -95,7 +89,10 @@ function load_hash(no_refresh) {
 
         switch(k) {
             case "mt":
-                map.setMapTypeId(v);
+                if( baseMaps.hasOwnProperty(v) ) {
+                    selectedLayer = v;
+                    map.addLayer(baseMaps[v]);
+                }
                 break;
             case "mz":
                 map.setZoom(parseInt(v));
@@ -104,8 +101,8 @@ function load_hash(no_refresh) {
                 def.zoom = false;
                 manual_pan = true;
                 v = v.split(',');
-                var latlng = new google.maps.LatLng(v[0], v[1]);
-                map.setCenter(latlng);
+                var latlng = new L.LatLng(v[0], v[1]);
+                map.setView(latlng);
                 break;
             case "f":
                 refocus = (follow_vehicle != v);
@@ -127,7 +124,7 @@ function load_hash(no_refresh) {
     });
 
     // check if we should force refresh
-    ['mode','query','nyan'].forEach(function(k) {
+    ['mode','query'].forEach(function(k) {
         if(wvar[k] != def[k]) refresh = true;
     });
 
@@ -585,11 +582,11 @@ $(window).ready(function() {
 
         if(elm.hasClass("active")) {
             elm.removeClass('active');
-            hysplit[name].setMap(null);
+            map.removeLayer(hysplit[name]);
         }
         else {
             elm.addClass('active');
-            hysplit[name].setMap(map);
+            map.addLayer(hysplit[name]);
         }
     });
 
@@ -728,13 +725,13 @@ $(window).ready(function() {
             //CHASE_enabled = false;
 
             // blue man reappers :)
-            if(currentPosition && currentPosition.marker) currentPosition.marker.setVisible(true);
+            if(currentPosition && currentPosition.marker) map.addLayer(currentPosition.marker);
 
             // analytics
             if(typeof _gaq == 'object') _gaq.push(['_trackEvent', 'Functionality', 'Turn Off', 'Chase Car']);
         // turning the switch on
         } else {
-            if(callsign.length < 5) { alert('Please enter a valid callsign, at least 5 characters'); return; }
+            if(callsign.length == null || callsign.length < 5) { alert('Please enter a valid callsign, at least 5 characters'); return; }
             if(!callsign.match(/^[a-zA-Z0-9\_\-]+$/)) { alert('Invalid characters in callsign (use only a-z,0-9,-,_)'); return; }
 
             field.attr('disabled','disabled');
@@ -759,7 +756,7 @@ $(window).ready(function() {
             //CHASE_enabled = true;
 
             // hide the blue man
-            if(currentPosition && currentPosition.marker) currentPosition.marker.setVisible(false);
+            if(currentPosition && currentPosition.marker) map.removeLayer(currentPosition.marker);
 
             // analytics
             if(typeof _gaq == 'object') _gaq.push(['_trackEvent', 'Functionality', 'Turn On', 'Chase Car']);
@@ -856,8 +853,15 @@ $(window).ready(function() {
                 refreshUI();
                 break;
             case "opt_daylight":
-                if(on) { nite.show(); }
-                else { nite.hide(); }
+                if(on) { 
+                    nite.addTo(map);
+                    niteupdate = setInterval(function() {
+                        nite.setTime();
+                    }, 60000); // Every minute
+                } else { 
+                    nite.remove();
+                    clearInterval(nite);
+                }
                 break;
             case "opt_hide_receivers":
                 if(on) {
@@ -942,13 +946,13 @@ $(window).ready(function() {
         // Enable the chase-car option for all browsers, not just mobile ones.
         $(".chasecar").show();
         $("#locate-me,#app_name").attr('style','').click(function() {
-            if(map && currentPosition) {
+            if(currentPosition) {
                 // disable following of vehicles
                 stopFollow();
                 // open map
                 $('.nav .home').click();
                 // pan map to our current location
-                map.panTo(new google.maps.LatLng(currentPosition.lat, currentPosition.lon));
+                map.flyTo(new L.LatLng(currentPosition.lat, currentPosition.lon));
 
                 //analytics
                 if(typeof _gaq == 'object') _gaq.push(['_trackEvent', 'Functionality', 'Locate me']);
@@ -969,32 +973,13 @@ $(window).ready(function() {
     // list of overlays
     var overlayList = [
         ['Global', [
-            ['google-radar','Google Earth Radar'],
-            ['nrl-global-cloudtop','NRL Monterey Cloudtop'],
-            ['nrl-global-ir','NRL Monterey IR'],
-            ['nrl-global-vapor','NRL Monterey Vapor']
-        ]],
-        ['Europe/Africa', [
-            ['meteosat-Odeg-MPE', 'METEOSAT Precip. Estimate']
-        ]],
-        ['Indian Ocean', [
-            ['meteosat-iodc-MPE', 'METEOSAT IODC Precip. Est.']
+            ['rainviewer', 'RainViewer Static'],
         ]],
         ['North America', [
             ['nexrad-n0q-900913', 'NEXRAD Base Reflectivity'],
             ['goes-ir-4km-900913', 'GOES NA Infrared ~4km'],
             ['goes-wv-4km-900913', 'GOES NA Water Vapor ~4km'],
             ['goes-vis-1km-900913', 'GOES NA Visible ~1km'],
-            ['goes-east-ir-4km-900913', 'GOES East CONUS Infrared'],
-            ['goes-east-wv-4km-900913', 'GOES East CONUS Water Vapor'],
-            ['goes-east-vis-1km-900913', 'GOES East CONUS Visible'],
-            ['goes-west-ir-4km-900913', 'GOES West CONUS Infrared'],
-            ['goes-west-wv-4km-900913', 'GOES West CONUS Water Vapor'],
-            ['goes-west-vis-1km-900913', 'GOES West CONUS Visible'],
-            ['hawaii-vis-900913', 'GOES West Hawaii Visible'],
-            ['alaska-vis-900913', 'GOES West Alaska Visible'],
-            ['alaska-ir-900913', 'GOES West Alaska IR'],
-            ['alaska-wv-900913', 'GOES West Alaska Water Vapor'],
             ['q2-n1p-900913', 'Q2 1 Hour Precipitation'],
             ['q2-p24h-900913', 'Q2 24 Hour Precipitation'],
             ['q2-p48h-900913', 'Q2 48 Hour Precipitation'],
@@ -1029,13 +1014,23 @@ $(window).ready(function() {
         }
     }
 
+    var weatherLayer;
+
     // the magic that makes the switches do things
     elm.find(".switch").click(function() {
         var e = $(this);
         var name = e.attr('id').replace('sw', 'opt');
         var id = name.replace("opt_weather_","");
         var on;
 
+        try {
+            map.removeLayer(weatherLayer);
+        } catch (err) {};
+
+        try {
+            map.removeLayer(RainRadarAus);
+        } catch (err) {};
+
         if(e.hasClass('on')) {
             e.removeClass('on').addClass('off');
             on = 0;
@@ -1046,26 +1041,14 @@ $(window).ready(function() {
             on = 1;
         }
 
-        weatherImageOverlay.setMap(null);
-        weatherGoogleRadar.setMap(null);
-        map.overlayMapTypes.setAt("0", null);
-
         if(on) {
-            if(id == "google-radar") {
-                weatherGoogleRadar.setMap(map);
-                return;
-            } else if(id in weatherImageOverlayList) {
-                var o = weatherImageOverlayList[id];
-                var sw = new google.maps.LatLng(o[1][0][0], o[1][0][1]);
-                var ne = new google.maps.LatLng(o[1][1][0], o[1][1][1]);
-                var bounds = new google.maps.LatLngBounds(sw, ne);
-                weatherImageOverlay = new google.maps.GroundOverlay(o[0], bounds, {opacity: 0.7});
-                weatherImageOverlay.setMap(map);
-                return;
+            if (id.includes("rainviewer")) {
+                RainRadarAus.addTo(map);
+            } else {
+                weatherLayer = L.tileLayer('https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/' + id + '/{z}/{x}/{y}.png?' + (new Date()).getTime(), {
+                    opacity: 0.6
+                }).addTo(map);
             }
-
-            weatherOverlayId = id;
-            map.overlayMapTypes.setAt("0", weatherOverlay);
         }
    });