i just started with PhoneGap and Leaflet and I'm trying to make an app. I have an origin (user's current position) and some destinations. At first I don't want to show any route, but when you click/tap on a certain marker I want to show the route from origin to there. Also, I want the route to be able to change if the user clicks on other marker. Thank you very much, i'm very stuck in this!
var app = {
inicio: function() {
this.iniciaFastClick();
},
iniciaFastClick: function() {
FastClick.attach(document.body);
},
dispositivoListo: function() {
navigator.geolocation.getCurrentPosition(app.pintaCoordenadasEnMapa,
app.errorAlSolicitarLocalizacion);
},
pintaCoordenadasEnMapa: function(position) {
var miMapa = L.map('map').setView([position.coords.latitude,
position.coords.longitude], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/carmencode/cj9cms4xd5duc2rtid327
amaj/tiles/256/{z}/{x}/{y}?
access_token=pk.eyJ1IjoiY2FybWVuY29kZSIsImEiOiJjajljbXBjYnkxcmdhMnlud3Z6
b3JlbzF1In0.j_w8HZnQfrLArVJQpplmzA', {
maxZoom: 18
}).addTo(miMapa);
L.Routing.control({
waypoints: [
L.latLng(position.coords.latitude, position.coords.longitude),
L.latLng(38.0013731, -1.1420178)
],
lineOptions: {styles: [{color: '#FC6C23'}]},
routeWhileDragging: true
}).addTo(miMapa);
app.pintaMarcador([37.98534, -1.13585], 'Location2', miMapa);
app.pintaMarcador([38.0013731, -1.1420178], 'Location1', miMapa);
app.pintaMarcador([position.coords.latitude, position.coords.longitude], '¡Estoy aquí!', miMapa);
},
pintaMarcador: function(latlng, texto, mapa){
var marcador = L.marker(latlng).addTo(mapa);
marcador.bindPopup(texto).openPopup();
},
errorAlSolicitarLocalizacion: function(error) {
console.log(error.code + ': ' + error.message);
},
};
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
app.inicio();
}, false);
document.addEventListener('deviceready', function() {
app.dispositivoListo();
}, false);
}