Buongiorno a tutti,
sto provando a fare quanto in oggetto ma ho difficoltà a capire dove
inserire lo script per farlo. Lo script che voglio usare è già
correttamente in uso su altre mie mappe ma sono mappe che non prevedono
l'aggiunta di oggetti da parte dell'utente.
Qui[1] ho inserito quello che ho fatto; in pratica ho creato un mio widget
sulla base di OpenLayersWidget modificando sia il template che il
JavaScript. Il widget customizzato funziona. Successivamente ho deciso di
inserire sia lo script per il geocoder che quello per la geolocalizzazione
dell'utente in modo da facilitarlo nell'aggiunta dell'oggetto. Il geocoder
funziona ma quello che non riesco a far funzionare è la geolocalizzazione
dell'utente.
In pratica non riesco a capire dove inserire il codice per far funzionare
correttamente la gelocalizzazione. A livello di JavaScript non è che sia
così ferrato...
Per le altre mappe ho creato un bottone che compare su mappa; l'utente ci
clicca su e viene geolocalizzato:
<div class="geolocation" id="geolocateme">
<button class="btn geolocation-button">
<i class="fas fa-globe"></i>
</button>
</div>
il tutto avviene usando questo script:
var geolocation = new ol.Geolocation({
projection: map.getView().getProjection(),
tracking: false,
trackingOptions: {
enableHighAccuracy: true,
maximumAge: 5000
}
});
var button = document.getElementById('geolocateme');
var handleGetPosition = function(e) {
var trackingwasalreadyon = geolocation.getTracking();
if(trackingwasalreadyon){
geolocation.setTracking(false);
} else
{ geolocation.setTracking(true); getPosition();
}
};
button.addEventListener('click', handleGetPosition, false);
button.addEventListener('touchstart', handleGetPosition, false);
function getPosition() {
var positionFeature = new ol.Feature();
positionFeature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: '#fa0000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
}),
}),
}));
geolocation.on('change:position', function() {
var pos = geolocation.getPosition();
positionFeature.setGeometry(pos ?
new ol.geom.Point(pos) : null);
view.setCenter(pos);
view.setZoom(12);
});
new ol.layer.Vector({
map: map,
source: new ol.source.Vector({
features: [
positionFeature,
]
})
});
};
E questo è quello che sto provando ad implementare nel form. Qualcuno qui
ha esperienza in questo?
-----
[1]
https://stackoverflow.com/questions/58063527/how-to-add-geolocation-to-a-geodjango-form