bachemap/templates/index.html

{% extends 'base.html' %}

{% block content %}
        <div id="map" style="height: 100%; position: static;"></div>
        <script>
            var map = new L.map('map', {zoomControl: false}, center=([20.57, -100.38], zoom=16));
            var user_marker = new L.marker([20.57, -100.38]);
            var user_radial = new L.circle(L.circle(user_marker.latlng));

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors',
                detectRetina: true,
                tileSize: 256,
                maxZoom: 20,
                maxNativeZoom: 18,
                //zoomOffset: 1,
            }).addTo(map);
            //types of markers
            var iconTypes = {
                'bache': '<i class="fas fa-exclamation-triangle"></i>',
                'coladera': '<i class="fas fa-ring"></i>',
                'obra sin terminar': '<i class="fas fa-wrench"></i>',
                'escombro': '<i class="far fa-trash-alt"></i>',
                'robo-asalto': '<i class="fas fa-skull"></i>',
                'biciestacionamiento': '<i class="fas fa-flag-checkered"></i>',
                'mala iluminación': '<i class="far fa-lightbulb"></i>',
                'bici blanca': '<i style="color:white" class="fas fa-bicycle"></i>',
                'zapato blanco': '<i style="color:white" class="fas fa-shoe-prints"></i>',
            };
            var markerCluster = L.markerClusterGroup();

            //new markerCluster = window.L.MarkerClusterGroup();
            {% for pin in pins %}
            
            var icon = L.divIcon({
                className: '{{pin.typeofpin}}',
                html: iconTypes['{{pin.typeofpin}}'],
                iconSize:[10,10],
                iconAnchor:[5,5],
            });
            var marker = L.marker([{{ pin.lat }}, {{ pin.lng }}], {icon: icon});
            var popupContent = "<div class='container' style='width:301px'><div style='display: grid; grid-template-columns: 1fr 1fr; gap: 10px;'><div><b>{{ pin.description }}</b>{% if pin.address %}<br>{{pin.address}}{% endif %}<p>Fecha del reporte: {{pin.time}}</p></div><div><img src='{{ pin.photo }}' style='width:100%'></div></div></div>";
            
            marker.bindPopup(popupContent, {
                autoPan: true,
                autoPanPadding: [100, 100], // Large padding to position towards the area with more space
                maxWidth: 300
            });
            
            markerCluster.addLayer(marker);

            //markerCluster.addlayer(
            //L.marker([{{ pin.lat }}, {{ pin.lng }}], {icon: icon}).addTo(map)
            //    .bindPopup("<b>{{ pin.description }}</b><p>Fecha del reporte: {{pin.time}}</p><br><img src='{{ pin.photo }}'>");                                   
            {% endfor %}
            map.addLayer(markerCluster);
            
            // Geolocation function
            function onLocationFound(e) {
                var radius = e.accuracy / 2;  // Accuracy of the location
                // Add a pin (marker) at the user's location
                user_marker = L.marker(e.latlng).addTo(map)
                    .bindPopup("Te detectamos en un radio de " + parseInt(radius) + " metros de este punto").openPopup();
                document.getElementById('lat').value = e.latlng.lat;
                document.getElementById('lng').value = e.latlng.lng;
                // Add a circle around the user's location
                user_radial = L.circle(e.latlng, radius).addTo(map);
                // Center the map on the user's location
                map.setView(e.latlng, 18);  // Adjust zoom level as needed
            }

            // Error handling for geolocation
            function onLocationError(e) {
                alert(e.message);
                map.setView([20.57, -100.38], 13);  // Default to Querétaro's coordinates
            }

            // Use Leaflet's built-in location detection
            map.on('locationfound', onLocationFound);
            map.on('locationerror', onLocationError);

            // Start the location detection
            map.locate({setView: true, zoom: 16});
            map.on('click', function(e) {
                var latlng = e.latlng;
                document.getElementById('lat').value = latlng.lat;
                document.getElementById('lng').value = latlng.lng;
                
                // Calculate the vertical offset (25% of the map's height)
                var offset = map.getSize().y * 0.25;
                // Convert the clicked location to container point
                var containerPoint = map.latLngToContainerPoint(latlng);
                // Adjust the container point upward by the offset
                var targetCenterPoint = L.point(containerPoint.x, containerPoint.y - offset);
                // Convert the adjusted point back to geographical coordinates
                var targetLatLng = map.containerPointToLatLng(targetCenterPoint);
                
                // Fly to the adjusted center so the marker appears 25% lower from the center
                map.flyTo(targetLatLng, 18, { duration: 0.7 });
                map.once('moveend', function() {
                    user_marker.setLatLng(latlng).bindPopup('<button id="pinner-pop">Agregar bache-o-cosa</button>').openPopup();
                });
                user_radial.remove();
            });      
        </script>

        {% if current_user.is_authenticated %}
        <div style="position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 999;">
            <button class="control-button"><a href="/camera" class="btn btn-primary">Tomar foto</a></button>
        </div>
        {% endif %}
{% endblock %}