aswi2020sebela-gitlab/website/templates/heatmap.html.twig @ 20ecec4e

{% extends 'base.html.twig' %}

{% 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 %}
        {{ data._id}} {{data.place}} {{ data.x }} {{ data.y }} {{ data.number }} {{ data.date }}<br>
    {% endfor %} #}

    <div id="heatmap"></div>



{% endblock %}

{% 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 %}