perliedman on master
Duplicate property defined, fix… (compare)
hi, I am a university student. for a project I created a small web app using leaflet and leaflet routing machine. I have a problem due to lack of experience in the sector.
I have this warning:
"You are using OSRM's demo server. Please note that it is NOT SUITABLE FOR PRODUCTION USE.
Refer to the demo server's usage policy: https://github.com/Project-OSRM/osrm-backend/wiki/Api-usage-policy
To change, set the serviceUrl option.
Please do not report issues with this server to neither Leaflet Routing Machine or OSRM - it's for
demo only, and will sometimes not be available, or work in unexpected ways.
Please set up your own OSRM server, or use a paid service provider for production."
to make the app usable, do i have to change the serviceUrl option?
how do it?
Hello there ! its me again
so, i have my polyline now simplyfied and clean,
but there is some error in my itinerary,
To construct my itinerary i encode a polyline with a lot of coordinates, and for reduce them i take from the instruction only steps that have a modifier element
but sometimes it is not working like expected
on the capture, you can see the purple line, its my itinerary, and the red is the generated route
how can i do that ?
( its a simple example, but i have more complexe sometimes, its really weird, i dont know how is generate the route i have sometimes my route going into an impass and come back ??? )
prohibited direction is authorized but it doesn't seem to be taken into account.
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
<script src="Control.Geocoder.js"></script>
<script>
var mymap = L.map('mapid').setView([48.89, 24.66], 14);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=1234567890qwertyuiop', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
L.Routing.control({
waypoints: [
L.latLng(48.87, 24.62),
L.latLng(48.91, 24.69)
],
routeWhileDragging: true,
geocoder: L.Control.Geocoder.nominatim()
}).addTo(mymap);
</script>
waypointspliced
event waaay too complex to handle and it made me think I'm doing something else wrong. @perliedman am I?
RoutingEvents = L.Routing.control({
waypoints: [
L.latLng(-23.222688, -45.908318),
L.latLng(-23.212429, -45.906858),
],
/* geocoder: L.Control.Geocoder.nominatim(), */
routeWhileDragging: true,
showAlternatives: true,
addWayPoints: true,
altLineOptions: {
styles: [
{ color: 'black', opacity: 0.15, weight: 9 },
{ color: 'white', opacity: 0.8, weight: 6 },
{ color: '#abe1ca', opacity: 0.9, weight: 2 }
]
}
}).addTo(map);
Hi, it is possible to load the itinerary/plan without pass any waypoint as this example: https://cykelbanor.se/#bl=Karta
nvm I just found it is a different control and make it work, thanks.
Hi, I'm using geocoder "photon". I want to get suggestion address from postal code , street number I use this osm_tag: ["place:city", "place:town", "place:village","addr:postcode=*"] from this link https://wiki.openstreetmap.org/wiki/Key:postal_code
example of address: 4 rue emile baudot 91120 palaiseau
But not working with addr:postcode , any idea please .Thank you in advance
This is my example : https://jsfiddle.net/Aminali/kLs34ef8/7/
I want to change search with geocoder google
Hi all. I am trying to add custom Lat and Lng between the starting and ending waypoints in the Routing Machine.
How would I use the following:
const customCallback = (callback) => (context, error, routes) => {
for (const route of routes) {
route.coordinates = [...route.coordinates, L.latLng(12.33, 49.6753)];
}
callback(context, error, routes);
};
const router = L.Routing.OSRMv1.extend({
initialize: function (options) {
L.Routing.OSRMv1.prototype.initialize.call(this, options);
},
route: function (waypoints, callback, context, options) {
const originalCallback = options.callback;
L.Routing.OSRMv1.prototype.route.call(waypoints, customCallback(originalCallback), this, options);
}
});
const routingControl = L.Routing.control({
addWaypoints: false,
collapsible: true,
createMarker: function (i, wp, nWps) {
if (i === 0) {
return L.marker(wp.latLng, {
icon: startIcon,
draggable: true,
keyboard: true,
alt: 'current location'
})
}
if (i === nWps - 1) {
return L.marker(wp.latLng, {
icon: finishIcon,
draggable: true,
alt: 'current destination'
})
}
},
draggableWaypoints: true,
fitSelectedRoutes: true,
geocoder: L.Control.Geocoder.nominatim(),
lineOptions: {
styles: [{ color: 'chartreuse', opacity: 1, weight: 5 }]
},
}).addTo(map)
/*
I tried:
router.route(waypoints)
But that yields
// TypeError: Cannot convert undefined or null to object
*/