Revize 20ecec4e

Re #7857 - first zcu heatmap data visualization
+ leaflet, leaflet-heatmap

website/templates/heatmap.html.twig

@@ -3 +3 @@
 {% block stylesheets %}
     
     <link rel="stylesheet" href="{{ asset('css/leaflet.css') }}" />
+    <link rel="stylesheet" href="{{ asset('css/styles.css') }}" />
 
 {% endblock %}
 
 {% block body %}
 
-    {% for data in open_data %}
+    {# {% for data in open_data %}
         {{ data._id}} {{data.place}} {{ data.x }} {{ data.y }} {{ data.number }} {{ data.date }}<br>
-    {% endfor %}
+    {% endfor %} #}
+
+    <div id="heatmap"></div>
+
+
 
 {% endblock %}
 
-{% block javascript %}
+{% block javascripts %}
 
+    <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
     <script src="{{ asset('js/leaflet.js') }}"></script>
+    <script src="{{ asset('js/leaflet-heat.js') }}"></script>
+
+    <script>
+
+        $(document).ready(function() {
+            
+            var mymap = L.map('heatmap').setView([49.724, 13.352], 17);
+
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
+                maxZoom: 19
+            }).addTo(mymap);
+            
+            $.ajax({
+                type: "POST",
+                url: "{{ path('opendata') }}",
+                success: function(result) {
+                    heatmap(result);
+                }
+            });
+        
+            function heatmap(points) {
+                
+                points = points.map(function (p) { return [p['y'], p['x'], p['number']]; });
+
+                var heat = L.heatLayer(points).addTo(mymap),
+                    draw = true;
+
+            }
+
+        });
+
+
+    </script>
 
 {% endblock %}