Our UI Components can be used to kick-start the development of your application. They are user interface examples in HTML, JS and CSS that you can use, modify and build upon. They can be styled and adapted at your convenience.

The route editor is a JavaScript application that enables content editors and/or end users to draw or upload routes/tracks in GPX or KML format. Its UX is proven: It has been used to create more than 3 million routes already.

routeeditor

  • The drawing tools include a magnet tool (snapping lines to underlining roads or ways magnetically). The magnet tool can be configured to be powered by the car, bike or foot profile of the Routing API.

  • It further contains a line tool to draw off-road tracks. Both can be used together within one single route.

  • Using the delete tool any number of way points can be batch-selected and deleted. This comes handy when cleaning up large routes.

  • The return tool makes it possible to return the same way back to the origin or by using the shortest path to close a circle.

  • With the POI editor points of interest can be created, including custom markers, text and a picture upload.

  • An additional POI tool enables you to show all routes from a chosen resource (pictured here: Wikipedia) and attach certain ones to the route. It resembles a shopping cart’s functionality.

  • A help tool explains all the features.

  • A location search tool helps users to quickly navigate to the right map section.

  • A real-time elevation profile is updated as the user draws.

  • The route can be dragged & dropped, single points can be deleted on click, new points can be added anywhere along the route

  • A full-screen tool can be used to expand the editor to the entire browser window.

This JavaScript application can be used in any type of CMS or website. The geodata collected during drawing can be handed over to a form submit action and stored in the CMS. At the same time the new geocontent is sent to Maptoolkit Geodata Hosting via our Push API.

The Route Editor is built using the JavaScript API v8, the Routing API, the Elevation API, Geodata Hosting, the Interactive Elevation Profiles UI Component and Maptoolkit Cartography.

The Route Planner is a full-fledged route planning application, enabling routing between two or more way points. Way points can be added and reordered using drag & drop. Way points can also be added by dragging the route with the mouse.

routeplanner

A resulting route is displayed on the map, plus a complete road book / cue sheet can be opened in a modal window. There a beautiful print view and KML/GPX export files are accessible.

routeplanner2

The modal window can be called from any other parts of a Maptoolkit application, too. Due to its modal design it is compatible with any layout.

The Route Planner is built using the JavaScript API v8, the Routing API, the Elevation API, the Interactive Elevation Profiles UI Component and Maptoolkit Cartography.

The Interactive Elevation Profiles graphically display elevation data from the Elevation API. The profiles are drawn in SVG and shown on a partly transparent neutral background with rounded corners. When a user hovers over the profile, the corresponding position on the route is shown. When a use marks a profile section, the vertical climb of that section is shown and the section is highlighted on the map. The profile can be collapsed into a small button and expanded again, to avoid the profile covering important parts of the page.

elevation

The Film Strip is a module that shows photos in a (collapsible) horizontal strip on the bottom of a map, that can be scrolled horizontally. On hovering over a picture, a line shows the geographical location of the picture. When clicked the picture opens in a large view. You can use own pictures and/or georeferenced pictures from open APIs such as Flickr. The Film Strip makes use of the JavaScript API v8 and Geodata Hosting.

filmstrip

The MapWizard is a JavaScript application which gives CMS editors access to all geocontent and let’s them configure maps with custom data and functionality, for the use anywhere on the website or within CMS articles. It can also be used to produce a trip (such as a recommended itinerary), where the POIs you select are connected into a route using the Routing API.

The application produces JavaScript configuration code to be used with the JavaScript API v8. It can be easily included into CMS of any technology. The MapWizard was originally developed for use within the CMS of the Austrian Tourism Authority and is still in use there. The MapWizard makes use of the JavaScript API v8, the Routing API and Geodata Hosting.

Get in touch

Richard Hemmer

My name is Richard Hemmer and I will be your project and key account manager. Please get in touch. My email address is richard@toursprung.com.