Add result layers in result panel #38

static/stemp_abw/js/map_functions.js

@@ -162,6 +162,7 @@ $('.switch-input-layer-select-region, .switch-input-layer-select-results').click
 
   // Individual layers switches
   l = layers[id.replace(/cb_(region|results)_/, '')];
+  console.log("Adding OR removing from lmap: " + lmap);
   if (this.checked) lmap.addLayer(l);
   else lmap.removeLayer(l);
 });
@@ -344,4 +345,23 @@ area_panel_label.onclick = hideResultLayers;
 
 
 // TODO: Load layers after simulation is finished
-
+var results_panel_label = document.getElementById('panel-results-label');
+results_panel_label.onclick = function() {
+    $.ajax({
+    url: '/stemp_abw/results/',
+    type: "GET",
+    success: function (data) {
+      if (data !== null) {
+        console.log('data !== null');
+        window.result_map_init(window.maps);
+      } else {
+        console.log('data === null');
+      }
+    },
+    error: function (page) {
+      console.log('error');
+      showErrorPopup();
+    },
+    cache: false
+  });
+};

templates/stemp_abw/map.html

@@ -766,4 +766,122 @@ <h2>Fehler</h2>
 
     </script>
 
+    <script type="text/javascript">
+        function result_map_init (map, options) {
+            console.log("Calling result_map_init");
+            console.log("{{layer_list_results}}");
+            // make map global
+            //lmap = map;
+
+            // show load spinner
+            toggleSpinnerVisibility();
+
+            // Parse layer style JSONs and make global
+            //style_data = JSON.parse('{{ layer_style | escapejs }}');
+            //choropleth_data = JSON.parse('{{ choropleth_data | escapejs }}');
+
+            // Setup layer and legend stores (global)
+            //layers = {};
+            //legends = {};
+            //layers_cat = {};
+
+            // Setup layer counter
+            var layer_count = {{ layer_list_results|length }};
+            var layer_ctr = 0;
+            var loader_text = $('#loader-detail-text');
+
+            // Load GeoJsons via Ajax and add layers to map (region and area info)
+            {% for layer, data in layer_list_results.items %}
+                // Build data URL
+                var dataurl = "{% url 'stemp_abw:'|add:data.model|add:'.data' %}"
+
+                // Load data via Ajax
+                $.ajax({
+                    url: dataurl,
+                    dataType: 'json',
+                    async: true,
+                    success: function(json){
+                        // Add GeoJSON layer
+                        var layer = new L.geoJson(json, {style: function(feature) {
+                                                            return getLayerStyle("{{ layer }}",
+                                                                                 feature);
+                                                         },
+                                                         onEachFeature: onEachFeature("{{ layer }}"),
+                                                         pointToLayer: pointToLayer
+                                                         }
+                                                 );
+                        layers["{{ layer }}"] = layer;
+                        layers_cat["{{ layer }}"] = '{{ data.cat }}';
+                        layer_ctr++;
+
+                        // Add legend to map
+                        if (choropleth_data.hasOwnProperty('{{ layer }}')) {
+                          var name = '{{ layer }}';
+                          var schema = choropleth_data[name].color_schema;
+                          var min = choropleth_data[name].min;
+                          var max = choropleth_data[name].max;
+                          var step = choropleth_data[name].step;
+                          var reverse = choropleth_data[name].reverse;
+                          var colorVals = getColorValues(schema, min, max, step, reverse);
+                          var grades_list = [];
+                          for (var key in colorVals['values']){
+                            grades_list.push(key)
+                          }
+
+                          var legend = L.control({position: 'bottomright'});
+
+                          legend.onAdd = function (map) {
+                            var div = L.DomUtil.create('div', 'choropleth_legend'),
+                                    grades = grades_list,
+                                    labels = [],
+                                    from, to;
+
+                            labels.push(choropleth_data[name].unit);
+
+                            for (var i = 0; i < grades.length; i++) {
+                              from = grades[i];
+                              to = grades[i + 1];
+
+                              labels.push(
+                                      '<i style="background:' + getColor(colorVals, parseFloat(from)) + '"></i> ' +
+                                      from + (to ? '&ndash;' + to : '+'));
+                            }
+
+                            div.innerHTML = labels.join('<br>');
+                            return div;
+                          };
+
+                          legends["{{ layer }}"] = legend;
+                        }
+
+                        // Show layer or not
+                        {% if data.show  == '1' %}
+                            map.addLayer(layer);
+                        {% endif %}
+
+                        // show progress
+                        loader_text.text('Layer ' +
+                                         String(layer_ctr) + '/' + String(layer_count) +
+                                         ': ' + '{{ data.title }}');
+
+                        // hide load spinner
+                        if (layer_ctr == layer_count) {
+                            loader_text[0].style = 'color: #62f476; font-weight: bold';
+                            //loader_text[0].style.font-weight = 'bold';
+                            loader_text.text('Fertig!');
+                            setTimeout(function(){
+                                toggleSpinnerVisibility();
+                            }, 500);
+                        };
+                    },
+                    error: function(page) {
+                        console.log('Fehler beim Laden der Daten!');
+                        loader_text[0].style = 'color: #f4a662; font-weight: bold';
+                        loader_text.text('Fehler beim Laden der Daten!');
+                    }
+                });
+            {% endfor %}
+        };
+    </script>
+
 {% endblock %}

views/__init__.py

@@ -53,11 +53,12 @@ def get_context_data(self, **kwargs):
 
         # prepare layer data and move result layers to separate context var
         layer_data = io.prepare_layer_data()
+        layer_list_results = layer_data['layer_list']
         layer_data['layer_list'] = {layer: data
                                     for layer, data in layer_data['layer_list'].items()
                                     if data['cat'] != 'results'}
         layer_data['layer_list_results'] = {layer: data
-                                            for layer, data in layer_data['layer_list'].items()
+                                            for layer, data in layer_list_results.items()
                                             if data['cat'] == 'results'}
         context.update(layer_data)