{% extends 'base.html' %}

{% block content %}
    <div id="map" style="height: 89%;"></div>
{% endblock %}

{% block localjs %}
    <script>
        var map = L.map('map').setView([-22.8308245, -47.0788849], 17);

        // Initializing map
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {}).addTo(map);

        // Plotting points as a heatmap
        L.heatLayer([
            {% for report in reports %}
                [{{ report.latitude|safe }}, {{ report.longitude|safe }}, 1.0]
                {% if not forloop.last %},{% endif %}
            {% endfor %}
        ], {radius: 25}).addTo(map);

        // Adding cluster centers
        {% for cluster in clusters %}
            L.marker([{{ cluster.longitude|safe }}, {{ cluster.latitude|safe }}])
                    .bindPopup('<b>Região {{ cluster.label }}</b><br>{{ cluster.address }}').addTo(map);
        {% endfor %}
    </script>
{% endblock %}

{% extends 'base.html' %}

{% block content %}
    <div id="map" style="height: 89%;"></div>
{% endblock %}

{% block localjs %}
    <script>
        var map = L.map('map').setView([-22.8308245, -47.0788849], 18);

        // Initializing map
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {}).addTo(map);

        // Plotting points as a heatmap
        L.heatLayer([
            {% for report in reports %}
                [{{ report.latitude|safe }}, {{ report.longitude|safe }}, 1.0]
                {% if not forloop.last %},{% endif %}
            {% endfor %}
        ], {radius: 25}).addTo(map);

        // Adding cluster centers
        {% for cluster in clusters %}
            L.marker([{{ cluster.longitude|safe }}, {{ cluster.latitude|safe }}])
                    .bindPopup('<b>Região {{ cluster.label }}</b><br>{{ cluster.address }}').addTo(map);
        {% endfor %}
    </script>
{% endblock %}

Change initial zoom for better understanding of the app
Change initial zoom for better understanding of the app
