To create a route and to display it on the map, follow the below steps:
- Create a routing webservice request and pass the start, stop and finish coordinates to get back a route JSON file
const url = 'https://api.geoconcept.com/EU/GCW/geoconcept-web/api/lbs/route/v5.json?origin=' + start + '&destination=' + finish + '&waypoints=' + stop + '&countryCode=' + document.getElementById("country").value + '&maxResponses=5&srs=epsg:4326&appkey=' + apikey + '&apptoken=' + apptoken';
-
Create a new instance of
ol.Featureclass
var point_feature = new ol.Feature({});
-
Create a new instance of
ol.geom.Pointclass and push the X and Y
var point_geom = new ol.geom.Point([parsedjson.geocodedAddresses[0].x,parsedjson.geocodedAddresses[0].y]);
-
Set the geometry of the ol feature as the
ol.geom.Pointclass
point_feature.setGeometry(point_geom);
-
Create a new instance of
GCUI.Layer.StandardVectorclass and map the source of the vector to the ol feature
var vector_layer = new GCUI.Layer.StandardVector({
source: new ol.source.Vector({
features: [point_feature]
})
});
-
Add the layer to the existing map using
map.addLayermethod and push the vector layer created
map.addLayer(vector_layer);
-
Define the style of the point using
ol.style.Fillandol.style.Strokeclasses
var fill = new ol.style.Fill({
color: [0, 70, 135, 0.9]
});
var stroke = new ol.style.Stroke({
color: [255, 255, 255, 1],
width: 2
});
-
Create a new instance of the
ol.style.Styleclass and set the style of the layer usingvector_layer.setStyle()
var style = new ol.style.Style({
image: new ol.style.Circle({
fill: fill,
stroke: stroke,
radius: 5
}),
fill: fill,
stroke: stroke
});
vector_layer.setStyle(style);
HTML
<div style="position: absolute; z-index: 5000; left: 65px;">
<input type="text" id="start" placeholder="Start" value="2.295048,48.873907">
<input type="text" id="stop" placeholder="Stop" value="2.435500, 48.842714">
<input type="text" id ="finish" placeholder="Finish" value="2.346406,48.846230">
<input type="text" id ="country" placeholder="Country" value="FR">
<button type="button" onclick="GCUI.examples.getRoute()">Calculate Route</button>
</div>
<div id="mapDiv" style="height:300px"></div>
JavaScript
var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>';
var options = {
server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
layer : 'STANDARD',
x : 260803,
y : 6250829,
scale : 8
};
var map = new GCUI.Map('mapDiv', options);
GCUI.examples = {
getRoute : function () {
var start = document.getElementById("start").value;
var finish = document.getElementById("finish").value;
var stop = document.getElementById("stop").value;
const request = new XMLHttpRequest();
const url = 'https://api.geoconcept.com/EU/GCW/geoconcept-web/api/lbs/route/v5.json?origin=' + start + '&destination=' + finish + '&waypoints=' + stop + '&countryCode=' + document.getElementById("country").value + '&maxResponses=5&srs=epsg:4326&appkey=' + $("input[name=apikey]").val() + '&apptoken=' + $("input[name=apitoken]").val();
request.open("GET", url);
request.send();
// Treatment of the output JSON to display the information on the popup
request.onreadystatechange=(e)=>{
if(request.readyState == 4 && request.status == 200)
{
var responseJson = request.responseText;
parsedjson = JSON.parse(responseJson);
if (map.getLayers().array_.length > 1){
origin_pointlayer.getSource().removeFeature(start_feature);
destn_pointlayer.getSource().removeFeature(end_feature);
vector_layer.getSource().removeFeature(line_feature);
}
// Adding a vector layer to the map
var start_geom = new ol.geom.Point(ol.proj.fromLonLat([parseFloat(start.split(',').shift()),parseFloat(start.split(',').pop())]));
var end_geom = new ol.geom.Point((ol.proj.fromLonLat([parseFloat(finish.split(',').shift()),parseFloat(finish.split(',').pop())])));
var way_geom = new ol.geom.Point((ol.proj.fromLonLat([parseFloat(stop.split(',').shift()),parseFloat(stop.split(',').pop())])));
start_feature = new ol.Feature({});
start_feature.setGeometry(start_geom);
origin_pointlayer = new GCUI.Layer.StandardVector({
source: new ol.source.Vector({
features: [start_feature]
})
});
end_feature = new ol.Feature({});
end_feature.setGeometry(end_geom);
destn_pointlayer = new GCUI.Layer.StandardVector({
source: new ol.source.Vector({
features: [end_feature]
})
});
stop_feature = new ol.Feature({});
stop_feature.setGeometry(way_geom);
stop_pointlayer = new GCUI.Layer.StandardVector({
source: new ol.source.Vector({
features: [stop_feature]
})
});
map.addLayer(origin_pointlayer);
map.addLayer(stop_pointlayer);
map.addLayer(destn_pointlayer);
line_feature = ol.format.WKT.prototype.readFeature(parsedjson.wktGeometry,{
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
vector_layer = new GCUI.Layer.StandardVector({
source: new ol.source.Vector({
features: [line_feature]
})
});
map.addLayer(vector_layer);
//Adding a style to the vector layer
var start_style = new ol.style.Style({
image: new ol.style.Icon({
crossOrigin: 'anonymous',
src: 'https://i.ibb.co/VjGzprJ/Start.png'
})
});
var end_style = new ol.style.Style({
image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */ ({
crossOrigin: 'anonymous',
src: 'https://i.ibb.co/cCJjRvj/Finish.png'
}))
});
var stop_style = new ol.style.Style({
image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */ ({
crossOrigin: 'anonymous',
src: 'https://i.ibb.co/Qm1tbNy/Stop.png'
}))
});
var fill = new ol.style.Fill({
color: [0, 70, 135, 0.9]
});
var stroke = new ol.style.Stroke({
color: [0, 70, 135, 1],
width: 5
});
var style = new ol.style.Style({
image: new ol.style.Circle({
fill: fill,
stroke: stroke,
radius: 5
}),
fill: fill,
stroke: stroke
});
origin_pointlayer.setStyle(start_style);
destn_pointlayer.setStyle(end_style);
stop_pointlayer.setStyle(stop_style);
vector_layer.setStyle(style);
extent = line_feature.getGeometry().getExtent();
map.getView().fit(extent);
}
}
}
}
