RouteList linking with RouteViewer

Read here how you can link the a RouteList to the RouteViewer in your own website. REMARK: This is a RouteYou+ service .

The concept step by step

This is one example of how to do the trick, but there are many others.

  1. Plug in the RouteList in page 1 (let's call it that way) of your website.
  2. Define the parameter routeyou_list_link indicating page 2 of your website where you want your route to be displayed in the RouteViewer. This is not the same page as page 1 (for very obvious reasons).
  3. On page 2 of your website, you plug in the RouteViewer with an extra piece of Javascript information to pass the id of the route to be displayed. The id of the route is supplied by the RouteList on page 1.

The code step by step

RouteList on page 1

This is the code on page 1, showing an example of a RouteList:

<script type="text/javascript">
    routeyou_list_width = 256;
    routeyou_list_height = 550;
    routeyou_list_color_background = 'FFFFFF';
    routeyou_list_language = 'nl';
    routeyou_list_group = 1515;
    routeyou_list_link = 'http://www.mywebsite.com/routeview?route=%id%';
</script>
<script id="routeyou_script_id" src="http://ws.routeyou.com/list.js" type="text/javascript"></script>

One of these variables is routeyou_list_link. This indicates the target page when the user clicks on one of the routes in the list.

To make sure that the target page displays the correct route, the id of that route should be passed.

You can define where in the target URL you pass the paramater. You do that by putting "%id%" where you normally put just id.

In this example, the id of the route is passed as a GET parameter with the name "route".

RouteViewer on page 2

On the destination page of the RouteViewer, you have to 'catch' the id of the route. This 'id' should be passed as paramater "routeyou_viewer_route" to the RouteViewer.

This example has been worked out using a JavaScript function (you can also use .Net or PHP to do this).

<script type="text/javascript">
function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\\[').replace(/[\]]/, '\\\]');
    var regex = new RegExp('[\?&]' + name + '=([^&#]*)');
    var results = regex.exec(window.location.href);
    if (results == null) {
        return '';
    } else {
        return results[1];
    }
}
</script>
<script type="text/javascript">
    routeyou_viewer_width = 700;
    routeyou_viewer_height = 410;
    routeyou_viewer_color_background = 'EBE2DD';
    routeyou_viewer_language = 'nl';
    routeyou_viewer_route = getUrlParameter('route');
</script>
<script src="http://ws.routeyou.com/viewer.js" type="text/javascript"></script>

Example

This is an exmaple using this technique on RouteYou.com (but you can also do this on your own website.

© 2006-2018 RouteYou - www.routeyou.com