OSRMClient Ejemplo

by SIGC GUADALTEL

HTML

<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/mapea.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/configuration.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea5/assets/css/mapea.ol.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/osrmclient.ol.min.js"></script>
<div id="map"></div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

JavaScript

const mapjs = M.map({
  container: 'map'
});

M.dialog.info("Clickea en dos puntos cualesquiera del mapa", "Informacion")

const osrmclient = new M.plugin.OSRMClient("http://router.project-osrm.org/route/");

mapjs.addPlugin(osrmclient);

window.mapjs = mapjs;

let coords = [];
const drawLayer = mapjs.getLayers().find(l => l.name === "__draw__");

mapjs.on(M.evt.CLICK, (coord) => {
  if (coords.length < 1) {
    coords.push(coord.coord);
  } else {
    coords.push(coord.coord);
    mapjs.calculateRouteOsrm(coords).then(response => {
      const route = new M.Feature("route" + Math.random(), {
        type: "Feature",
        properties: {},
        geometry: {
          type: "LineString",
          coordinates: response.routeDecodified
        }
      });
      console.log(response);
      drawLayer.addFeatures([route]);
      drawLayer.setStyle(new M.style.Line({
        fill: {
          color: 'red'
        }
      }))
    });
    coords = [];
  }
});