Extracting GeoJSON points for all instruction points in Leaflet Routing Machine
HTML
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css">
<script src="https://rawgit.com/perliedman/leaflet-routing-machine/master/dist/leaflet-routing-machine.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/perliedman/leaflet-routing-machine/master/dist/leaflet-routing-machine.css">
<script src="https://rawgit.com/perliedman/leaflet-routing-machine/master/examples/Control.Geocoder.js"></script>
<div id="map"></div>
<div id="controls"></div>
<script src="http://www.cartes-2-france.com/dist/leaflet.js"></script>
<script src="http://www.cartes-2-france.com/dist/leaflet-routing-machine.js"></script>
<script src="http://www.cartes-2-france.com/osrm/Control.Geocoder.js"></script>
<script src="http://www.cartes-2-france.com/osrm/config.js"></script>
CSS
html, body, #map {
height: 300px;
width:100%;
padding:0px;
margin:0px;
background: white;
}
#controls {
width:100%;
padding:0px;
margin:0px;
background: blue;
}
.leaflet-routing-alt, .leaflet-routing-geocoders, .leaflet-routing-error {
padding: 6px;
margin-top: 2px;
margin-bottom: 6px;
border-bottom: 1px solid #ccc;
max-height: 800px;
overflow-y: auto;
transition: all 0.2s ease;
}
.leaflet-routing-container {
height: auto;
width:100%;
padding:0px;
margin:0px;
font-family: Roboto Light,Arial,sans-serif;
font-weight: 300;
color: #2C2C2C;
font-size:13px;
}
.leaflet-routing-container h2 {color:#1111ee;}
.leaflet-routing-container h3 {font-weight:bold;}
.leaflet-routing-container table {}
.leaflet-routing-container tr {
border-top: 1px solid #cdcdcd;
margin: 0;
height: 30px;
padding: .3em 3px .3em 3px;
}
JavaScript
// Variable default
var Lat = 48.077;
var Lon = 7.75;
var carte = 'map';
var zoom = 13;
var pos = [Lat, Lon];
// création de la map
var map = L.map(carte).setView(pos, zoom);
L.tileLayer('http://51.15.15.10/osm_tiles/{z}/{x}/{y}.png',{maxZoom:18}).addTo(map);
// L.tileLayer('https://www.sportswhere.net/{z}/{x}/{y}.png',{maxZoom:18}).addTo(map);
var control = L.Routing.control({
//serviceUrl: 'http://51.15.15.10:5000/route/v1',
//serviceUrl: '//www.sportswhere.net:5000/route/v1',
router: new L.Routing.OSRMv1({
serviceUrl: 'http://51.15.15.10:5000/route/v1'
}),
waypoints: [
L.latLng(48.0777517, 7.3579641),
L.latLng( 48.614, 7.752371)
// L.Routing.waypoint(null, start),
// L.Routing.waypoint(null, end)
],
geocoder: L.Control.Geocoder.nominatim(),
routeWhileDragging: true,
reverseWaypoints: true,
fitSelectedRoutes: true,
showAlternatives: true,
altLineOptions: {
styles: [
{color: 'black', opacity: 0.15, weight: 9},
{color: 'white', opacity: 0.8, weight: 6},
{color: 'blue', opacity: 0.5, weight: 2}
]},
language:'fr'
});
var routeBlock = control.onAdd(map);
document.getElementById('controls').appendChild(routeBlock);
L.Routing.errorControl(control).addTo(map);