Merge pull request #1 from BrianHepler/Data-Fixes

Data fixes.

Author: BrianHepler

MMM-BirdNET.js

@@ -9,7 +9,9 @@ Module.register("MMM-BirdNET", {
 		lon: -76.47363144,
         width: '400px',
         height: '400px',
-        zoomLevel: 7
+        zoomLevel: 7,
+        markerDistance: 300,
+        markerColor: 'LightGreen' // distance from map center to put markers
     },
 
     start: function () {
@@ -26,6 +28,7 @@ Module.register("MMM-BirdNET", {
         this.birdData = {};
         this.birdMap = null;
         this.markersLayer = new L.layerGroup();
+        this.locations = [];
 
         this.popupOptions = {
             closeButton: false,
@@ -111,6 +114,9 @@ Module.register("MMM-BirdNET", {
 
         this.birdData = JSON.parse(birdData);
         var markers = this.markersLayer;
+        this.locations = [];
+        var skipped = 0;
+        var markerRadius = this.birdMap.getZoom() - 2;
         markers.clearLayers(); // clear markers ahead of data load
 
         var observations = this.birdData.observations;
@@ -119,21 +125,35 @@ Module.register("MMM-BirdNET", {
             var lat = entry.lat;
             var lon = entry.lon;
             var dist = this.getDistance(this.config.lat,this.config.lon, lat, lon); 
-            if (dist < 300) { // remove entries further than 300 km
+            if (dist < this.config.markerDistance) { // remove entries further than 300 km
+                // ensure only one marker per lat/lon to nearest 10th.
+                var loc_code = ((lat * 5).toFixed(0) / 5) + ";" + ((lon * 5).toFixed(0) / 5); 
+                if (this.locations.includes(loc_code)) {
+                    skipped++;
+                    continue;
+                } else (this.locations.push(loc_code));
+
                 // split species into common & Latin
                 var species_split = entry.species.split(";");
                 var name = species_split[0];
                 var species = species_split[1];
                 var percent = entry.score;
                 var ts = entry.ts;
 
-                var marker = L.marker([lat, lon]);
+                // var marker = L.marker([lat, lon]); 
+                var circle = L.circleMarker([lat,lon], {
+                    stroke: false,
+                    fill: true,
+                    fillColor: this.config.markerColor,
+                    radius: markerRadius,
+                    fillOpacity: 1
+                });
                 var popup = this.createPopup(name, species, percent, ts);
-                marker.bindPopup(popup, this.popupOptions);
-                markers.addLayer(marker);
-            }
+                circle.bindPopup(popup, this.popupOptions);
+                markers.addLayer(circle);
+            } else { skipped++;}
         }
-        this.schedulePopInterval();
+        Log.info("Processed " + observations.length + " bird hits. (skipped " + skipped +")");
     },
 
     createPopup: function(name, species, percent, ts) {
@@ -256,6 +276,7 @@ Module.register("MMM-BirdNET", {
                 this.loaded = true;
                 this.buildMap();
                 this.updateData();
+                this.schedulePopInterval();
         }
     },
 

README.md

@@ -34,19 +34,33 @@ All configuration options are optional. There are no mandatory parameters.
 |:------:| ------- | ----------- |
 | updateInterval | 3600000 (one hour) | How often the BirdNET data is pulled from the website.|
 | popInterval | 30000 (30 seconds)| How often the popup switches to a new entry |
-| dataUrl | https://birdnet.cornell.edu/map/requeststats| Where to pull the data |
 | mapMode | 'dark' | Which map to use. Supported values are: `dark`, `light`, `atlas`, `stark`, `terrain`, `satellite`, `custom` and `metal`.
 | lat | 42.453583743 | Latitude for the center of the map display. |
-| lon | -76.47363144 | Longitude for the center of the map display. | 
+| lon | -76.47363144 | Longitude for the center of the map display. |
 | width | 400px | Width of the map box. |
 | height | 400px | Height of the map box |
+| markerColor | 'LightGreen' | Sets the color of the markers on the map representing submissions. Accepts [HTML standard color names](https://www.w3schools.com/cssref/css_colors.php) or hex format.|
+| markerDistance | 300 | Distance in kilometers from the center of the map to display BirdNET submissions. If you encounter performance issues, try reducing this number. BirdNET regularly receives 30-50K submissions daily and we can _maybe_ display 10K. |
 | zoomLevel | 7 | How far in the map is zoomed. See [Leaflet](https://leafletjs.com/examples/zoom-levels/) documentation for more details. |
 | mapUrl | null | If you set the mapMode parameter to `custom`, this parameter will activate. You can supply your own [Leaflet](https://leafletjs.com/reference.html#map-example)-supported map URL here. |
+| dataUrl | https://birdnet.cornell.edu/map/requeststats| Where to pull the data |
 
 ## Upcoming Features
 * Better CSS for the popups.
 * Enable notification broadcasts
 
+## Version History
+### v0.1.1
+* Fixed issue with popups double-tapping after an hour
+* Fixed issue with displaying submissions in exceptionally high-density areas
+* Submission markers are now dots instead of map markers
+* Can set marker color with `markerColor` parameter
+* Can set distance limit on which markers are displayed with `markerDistance` parameter
+
+### v0.1.0
+* Initial release
+
+
 ## Thanks To
 * [thgmirror](https://forum.magicmirror.builders/user/thgmirror) over at the MagicMirror Forum for the inspiration.
 * [cyberdie](https://forum.magicmirror.builders/user/cyberdie) for the idea about the bird images.

display.png

@@ -1,6 +1,6 @@
 {
     "name": "mmm-birdnet",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "description": "A display of local hits for the BirdNET mobile app. https://birdnet.cornell.edu",
     "main": "MMM-BirdNET.js",
     "repository": {