forked from orson/bachemap
105 lines
5.3 KiB
HTML
105 lines
5.3 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div id="map" style="height: 100%; position: absolute;"></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);
|
|
}
|
|
|
|
// 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>
|
|
{% endblock %} |