forked from orson/bachemap
87 lines
3.8 KiB
HTML
87 lines
3.8 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: 19,
|
|
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-bicycle"></i>',
|
|
'mala iluminación': '<i class="far fa-lightbulb"></i>',
|
|
};
|
|
|
|
//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],
|
|
});
|
|
//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 %}
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors',
|
|
detectRetina: true,
|
|
tileSize: 256,
|
|
maxZoom: 21,
|
|
maxNativeZoom: 18,
|
|
//zoomOffset: 1,
|
|
}).addTo(map);
|
|
|
|
|
|
// 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;
|
|
map.flyTo(e.latlng, zoom=18);
|
|
user_marker.setLatLng(e.latlng).bindPopup('<button id="pinner-pop">Agregar bache-o-cosa</button>').openPopup();
|
|
user_radial.remove();
|
|
});
|
|
</script>
|
|
{% endblock %} |