New embedded mode for openrouteservice VueJs client

The development of the new openrouteservice VueJs client is in the final phase and has now a useful feature that allows it to show routes, isochrones and map objects on other websites. Webmasters and editors can now embed geographic features into their own website with our client.

Features of the embedding mode

Mobile friendly: like the map client itself, the embedded map view is mobile friendly. By default, the iframe code generated uses 100% for width and height, so that it can adapt itself to the available dimension of the container.

User gesture handling: to avoid the map view to be scrolled when the user has the intention to scroll the entire page we added gesture handling in the embedded mode in order to keep the user in control. If the user wants to scroll the map he has to user CTRL + scroll (desktop) or two fingers (mobile) to scroll the map view content.  When the user scrolls the page a message with instructions to scroll the map is displayed over the map view.

Language selection: although only English is supported for now on the map client application, more languages will be available soon. When the iframe code is generated, the current defined language is also part of the code, so that when new languages are available the displaying language of the embedded map view will be manageable.

Focused on visualization: the user is able to view the map objects but can’t create new ones. For interactivity the user can click on the view on ORS button to go to the full version of the client.

Place information: when clicking on the map, the user can investigate the underlying location. The place information is shown in a popup on the bottom right.

Measuring distances: by using the measuring control on the left side of the view, the user is able to measure distances on the map in different units. The distances can be discarded by clicking on the control a second time.

Switching basemap: to view a different map in the background, the user can choose from six different basemaps by hovering over the layer switcher in the top right of the map view.

Accessibility mode: just like the new VueJs client, the iframe comes with an accessibility mode to navigate the view with the keyboard (arrow keys, tab …) instead of the mouse.

Zoom to all features: last but not least, there is a button to easily zoom to the full extent of all features (after zooming in/out) on the right hand side of the map view.


How to use the embedding feature

Any feature visualized on the new map client, like a route, isochrones or a place can be used as an embedded content. The code to be used to embed it is automatically generated on the map client itself. To have access to the code on the sidebar click on the share option and the iframe code will be available. You just need to click on the code and it will be copied to your clipboard.

Access to the embedding code via share button


Some examples of embedded map views


Embedded simple place



Embedded isochrones

On isochrones mode the embedded map will allow moving the center of the isochrone or deleting the center. Once the page containing the embedded isochrone is reloaded, any change will be discarded.


Embedded directions

On directions mode the embedded map will allow moving or deleting an existing route and switching the active route (when alternative routes are available). Once the page containing the embedded route is reloaded, any change will be discarded.

Check out the embedding mode and other new features on the latest VueJs maps client on