Update third party layer: Minissas

bims/static/js/views/control_panel/third_party_layer_panel.js

@@ -9,7 +9,9 @@ define(['shared', 'backbone', 'underscore', 'jqueryUi',
         miniSASSSelected: false,
         inWARDSelected: false,
         fetchingInWARDSData: false,
+        fetchingMiniSASS: false,
         inWARDSStationsUrl: "/bims_proxy/https://inwards.award.org.za/app_json/wq_stations.php",
+        miniSASSUrl: "/bims_proxy/https://minisass.sta.do.kartoza.com/monitor/observations/",
         events: {
             'click .close-button': 'closeClicked',
             'click .update-search': 'updateSearch',
@@ -39,6 +41,22 @@ define(['shared', 'backbone', 'underscore', 'jqueryUi',
                 image: image
             });
         },
+        miniSASSStyleFunction: function (feature) {
+            let properties = feature.getProperties();
+            let color = 'gray';
+            if (properties['color']) {
+                color = properties['color'];
+            } else {
+                color = '#1dc6c0';
+            }
+            let image = new ol.style.Circle({
+                radius: 5,
+                fill: new ol.style.Fill({color: color})
+            });
+            return new ol.style.Style({
+                image: image
+            });
+        },
         addInWARDSLayer: function () {
             this.inWARDSLayer = new ol.layer.Vector({
                 source: null,
@@ -48,44 +66,56 @@ define(['shared', 'backbone', 'underscore', 'jqueryUi',
             this.map.addLayer(this.inWARDSLayer);
         },
         addMiniSASSLayer: function () {
-            let options = {
-                url: '/bims_proxy/http://minisass.org/geoserver/wms',
-                params: {
-                    name: 'MiniSASS',
-                    layers: 'miniSASS:minisass_observations',
-                    format: 'image/png',
-                    getFeatureFormat: 'text/html'
-                }
-            };
-            this.miniSASSLayer = new ol.layer.Tile({
-                source: new ol.source.TileWMS(options)
+            this.miniSASSLayer = new ol.layer.Vector({
+                source: null,
+                style: this.miniSASSStyleFunction
             });
             this.miniSASSLayer.setVisible(false);
             this.map.addLayer(this.miniSASSLayer);
-            Shared.Dispatcher.trigger(
-                'layers:renderLegend',
-                options['params']['layers'],
-                options['params']['name'],
-                options['url'],
-                options['params']['layers'],
-                false
-            );
         },
         toggleMiniSASSLayer: function (e) {
+            let self = this;
             this.miniSASSSelected = $(e.target).is(":checked");
             if (this.miniSASSSelected) {
                 this.miniSASSLayer.setVisible(true);
                 // Move layer to top
                 this.map.removeLayer(this.miniSASSLayer);
                 this.map.getLayers().insertAt(this.map.getLayers().getLength(), this.miniSASSLayer);
-                let mapLegend = $('#map-legend');
-                mapLegend.find(`[data-name='${this.miniSASSLayer.getSource().getParams()['layers']}']`).show();
-                if (!mapLegend.is('visible')) {
-                    Shared.Dispatcher.trigger('map:showMapLegends');
+
+                // Show fetching message
+                if (!this.fetchingMiniSASS) {
+                    let fetchingMessage = $('<span class="fetching" style="font-size: 10pt; font-style: italic"> (fetching)</span>');
+                    $(e.target).parent().find('.label').append(fetchingMessage);
+
+                    $.ajax({
+                        type: 'GET',
+                        url: this.miniSASSUrl,
+                        success: function (data) {
+                            let geojson = {
+                                "type": "FeatureCollection",
+                                "features": []
+                            }
+                            for(let observation of data){
+                                let coordinate = [parseFloat(observation.longitude), parseFloat(observation.latitude)];
+                                let properties = observation;
+                                delete properties.longitude;
+                                delete properties.latitude;
+                                let feature = {"type": "Feature", "geometry": {"type": "Point", "coordinates": coordinate}, "properties": properties}
+                                geojson.features.push(feature);
+                            }
+                            let source = new ol.source.Vector({
+                                features: (
+                                    new ol.format.GeoJSON({featureProjection: 'EPSG:3857'})
+                                ).readFeatures(geojson, {featureProjection: 'EPSG:3857'})
+                            });
+                            self.miniSASSLayer.setSource(source);
+                            $(e.target).parent().find('.fetching').remove();
+                        }
+                    })
+                    this.fetchingMiniSASS = true;
                 }
             } else {
                 this.miniSASSLayer.setVisible(false);
-                $('#map-legend').find(`[data-name='${this.miniSASSLayer.getSource().getParams()['layers']}']`).hide();
             }
         },
         toggleInward: function (e) {

bims/templates/map_page/search-panel-templates.html

@@ -628,13 +628,13 @@ <h5 class="modal-title" id="${modalId}Label">Save Polygon</h5>
                         <div class="row-title">
                             <input type="checkbox" value="MiniSASS"
                                    class="mini-sass-check">
-                            MiniSASS
+                            <span class="label">MiniSASS</span>
                         </div>
                         <small class="text-muted">
                             MiniSASS is a citizen science tool which can be
                             used by anyone to monitor the health of a river.
                             The data are served with permission from <a
-                                href="http://www.minisass.org/en/">http://www.minisass.org/en/</a>,
+                                href="https://minisass.org/">https://minisass.org/</a>,
                             and further information about the tool is available
                             via this website.
                         </small>