This site uses cookies to improve your experience and the quality of our services. By using this site you agree to its use of cookies. More information Hide

MapSearch 2.0 plugin

Table of contents

Introduction

You can show your routes and locations on your own site using the MapSearch 2.0 plugin. There are two versions of this plugin.

Free MapSearch plugin

Getting started

This version is iframe-based. To add it to your site, add the following code where you want the plugin to appear:

<iframe src="//plugin.routeyou.com/mapsearch/free/?language=en" width="800" height="500"></iframe>

You can change the iframe's width and height to suit your website.

Configuring the plugin

The parameters should be passed in the URL of the iframe. Numbers, strings and booleans can be passed in a simple key=value pattern. Complex values can be passed as JSON encoded strings (remember that these will then need to be URL-encoded as well).

You can find the list of parameters in the "Parameters" section. Note that for the free version, not all parameters are available. The available parameters are marked with a *.

Examples

Only motorised routes in a specific area

The example below will show you only the car and motor routes in the area of the Netherlands, locations will be shown without restrictions. The interface will be in Dutch.

<iframe src="//plugin.routeyou.com/mapsearch/free/?language=nl&map.bounds={%22min%22:{%22lat%22:51.35120063065597,%22lon%22:3.262939453125},%22max%22:{%22lat%22:53.5076512854543,%22lon%22:7.196044921875}}&params.route.type.id=3" width="800" height="500"></iframe>

Routes of a specific user

The example below will show only the routes that belong to a specific user and the locations he has contributed to. The interface will be in English.

<iframe src="//plugin.routeyou.com/mapsearch/free/?language=en&params.owner.id=2482" width="1000" height="600"></iframe>

Routes of a specific user in a specific area, not clustered

The example below will show you the same as the previous example, except that only a specific area will be shown (done with the map.bounds parameter) and the routes will not be clustered (achieved with params.route.clustered=false).

<iframe src="//plugin.routeyou.com/mapsearch/free/?language=en&map.bounds={%22min%22:{%22lat%22:50.79,%22lon%22:3.79},%22max%22:{%22lat%22:50.99,%22lon%22:3.99}}&params.owner.id=2482&params.route.clustered=false" width="1000" height="600"></iframe>

Advanced version

Getting started

To add the advanced version of the plugin to your site, two pieces of code need to be added. First, you need to provide HTML div elements where the MapSearch components will be placed. You can set their id's to any name you prefer, but make sure they are unique. You can position these divs in any way that fits your site design. The example code below will put the parameter box above the map and the list on the right of both the parameter box and the map. Except for the map, you can omit any component by not creating a div for it and not passing a div id in the configuration object.

<div id="routeYouMapSearchList" style="margin-left: 10px; width: 300px; float: right;"></div>
<div id="routeYouMapSearchParameterBox"></div>
<div id="routeYouMapSearchMap"></div>

Second, add the JavaScript code that launches the plugin. To minimise the load time of your page, it is best to put this code as far down the page as possible.

<script type="text/javascript" src="//plugin.routeyou.com/mapsearch/2.0.js"></script>
<script type="text/javascript">
RTY.MapSearch.load({
        'token': '<your RouteYou web service token, see below>',
        'language': '<your language, see below>',
        'parameterBox.div': 'routeYouMapSearchParameterBox',
        'map.div': 'routeYouMapSearchMap',
        'list.div': 'routeYouMapSearchList'
    });
</script>

Configuring the plugin

To further configure the plugin, add parameters from the "Parameters" section below as needed to the JavaScript object. Some important guidelines:

Examples

Only motorised routes in a specific area

The example below will show you only the car and motor routes in the area of the Netherlands, locations will be shown without restrictions. The interface will be in Dutch.

<script type="text/javascript" src="//plugin.routeyou.com/mapsearch/2.0.js"></script>
<script type="text/javascript">
RTY.MapSearch.load({
        'token': '<your RouteYou web service token>',
        'language': 'nl',
        'map.div': 'routeYouMapSearchMap',
        'list.div': 'routeYouMapSearchList',
        'map.bounds': {
            min: {
                lat: 51.35120063065597,
                lon: 3.262939453125
            },
            max: {
                lat: 53.5076512854543,
                lon: 7.196044921875
            }
        },
        'params.route.type.id': 3
    });
</script>

Routes of a specific user, with modified links

The example below will show only the routes that belong to you and the locations you have contributed to. The map will automatically pan and zoom to fit them as well as possible. When a user clicks on a route or location, he will be directed to your site.

<script type="text/javascript" src="//plugin.routeyou.com/mapsearch/2.0.js"></script>
<script type="text/javascript">
RTY.MapSearch.load({
        'token': '<your RouteYou web service token>',
        'language': 'en',
        'map.div': 'routeYouMapSearchMap',
        'list.div': 'routeYouMapSearchList',
        'params.autoZoom': true,
        'params.owner.id': <your user id>,
        'route.view.link': 'http://www.yoursite.com/yourpage?route=%id%',
        'location.view.link': 'http://www.yoursite.com/yourpage?location=%id%'
    });
</script>

Routes only

The example below will show only routes. The user will not be able to hide the routes. No locations will be shown, and the Locations header will not be visible in the list.

<script type="text/javascript" src="//plugin.routeyou.com/mapsearch/2.0.js"></script>
<script type="text/javascript">
RTY.MapSearch.load({
        'token': '<your RouteYou web service token>',
        'language': 'en',
        'map.div': 'routeYouMapSearchMap',
        'list.div': 'routeYouMapSearchList',
        'content.routes.optional': false,
        'content.locations.show': false,
        'content.locations.optional': false
    });
</script>

Parameters

The parameters marked with a * are available for both the free and the advanced version, the others are only available for the advanced version.

General parameters

Layout and behaviour parameters

The plugin adapts to the height of the user's browser window. When resizing, the map takes the height of the parameter box into account. The following parameters influence this behaviour.

By default, both routes and locations are shown. The following parameters influence this behaviour.

The following parameters change the behaviour of the parameter box component.

The following parameters change the behaviour of the map component.

The following parameters change the behaviour of the list component.

The following parameters change the behaviour of the route components (both in the list and on the map).

The following parameters change the behaviour of the location components (both in the list and on the map).

Search parameters

You can decide what to show with the following parameters.

Link parameters

By default, all routes and locations link back to the RouteYou website. The following parameters influence this behaviour. You can use these parameters to link directly to the RouteViewer plugin.

Compatibility

The MapSearch 2.0 plugin is compatible with all major browsers. However, to ensure full compatibility, it is vital that the pages on which you place the plugin begin with a valid DOCTYPE, for example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html ...

Plans & pricing

For a list of the RouteYou functionalities per type of account, take a look at the RouteYou Functionality Overview per account type.

© 2006-2017 RouteYou - www.routeyou.com