Donate using PayPal

Methods of embedding CycleStreets in other sites

We offer a cloud-based service to embed our routing in your site.

This is a supported service which attracts a fee (except for small, non-profit organisations). Please see details of the service.

In all cases, the hosting and running of the site is done by CycleStreets, not the organisation, as setup would be time-consuming and mean the system goes out of date due to ongoing developments.

White label sites (2022 onwards)

Our newer offering, being introduced in 2022, uses a simple and more industry-standard method of embedding.

To embed the site, we will provide you with a snippet of HTML which will load the relevant files from our system. These are loaded into the page via Javascript.

The embed code is CMS-agnostic, so as long as you can paste in HTML into your system (which is the norm), it will work.

The system will automatically adapt to the width and height of your content.

You will probably wish to set a small number of options relating to the look and feel, e.g. rounded corners or aspects of the colour scheme. These will be set as options in the embed code or via our control panel.

Existing customers can upgrade for free to this newer offering.

White label sites (pre-2022)

Our older product has a range of ways for embedding:

Method 1 (Recommended):

https://cyclemap.placeford.org/

Placeford example

Subdomain of your site (or a dedicated domain)

If your organisation's website address is www.placeford.org
then the journey planner would be at e.g. cyclemap.placeford.org

This is the simplest and most flexible way.

Steps:

  1. Contact us to agree arrangements
  2. Decide on the subdomain name, e.g. cyclemap.placeford.org
  3. Login to your domain registrar control panel and create a CNAME of hosted.cyclestreets.net; e.g.: 
    cyclemap CNAME hosted.cyclestreets.net.
    (NB some registrars may take an hour to reload such changes.)
  4. Set up a header (example, then view source) and footer (example, then view source) on your server from your CMS. These will be loaded by our server.
  5. Add the subdomain URL to (a) any custom font key you have and to (b) any Access-Control-Allow-Origin list (e.g. for .js files present in the header/footer)
  6. Contact us to let us know the URL, e.g. https://cyclemap.placeford.org/ and the header/footer URLs
  7. We will then add the site to our settings and sort out any customisations and layout fixes
  8. We will confirm when ready to go-live

Method 2 (Recommended):

www.placeford.org/cycling/journeyplanner/

Placeford example

Subdirectory of your site

If your organisation's website address is www.placeford.org
then the journey planner would be at e.g. www.placeford.org/cycling/journeyplanner/

This best from a URL perspective but requires you to run a proxy (which is slightly more technically demanding than Method 1).

This method uses HTTP Proxying to fetch the pages from our servers, even though it appears on your site. If using Apache you will need access to httpd.conf rather than just .htaccess .

Steps:

  1. Contact us to agree arrangements
  2. Decide on where to put the planner within your hierarchy, e.g. /cycling/journeyplanner/

  3. Add the proxy configuration, which references hosted.cyclestreets.net. In this example, /cycling/journeyplanner/ has been used; note carefully the slashes and the need to set .yourdomain.com

    For Apache, in httpd.conf (.htaccess will not work) :

    # Proxy for externally-hosted CycleStreets journey planner
SSLProxyEngine on
ProxyPass /cycling/journeyplanner https://hosted.cyclestreets.net
ProxyPassReverse /cycling/journeyplanner https://hosted.cyclestreets.net
ProxyPassReverseCookieDomain .cyclestreets.net .yourdomain.com
ProxyPassReverseCookiePath / /cycling/journeyplanner/

    For IIRF for IIS:

    # Proxy for externally-hosted CycleStreets journey planner
RewriteBase OFF
RedirectRule ^/cycling/journeyplanner$ /cycling/journeyplanner/
ProxyPass ^/cycling/journeyplanner(.*)$ https://hosted.cyclestreets.net$1
ProxyPassReverse /cycling/journeyplanner https://hosted.cyclestreets.net
# Uncomment these two lines for debugging:
# RewriteLogLevel 3
# RewriteLog C:\temp\iirf
  4. Set up a header (example, then view source) and footer (example, then view source) on your server from your CMS. These will be loaded by our site.
  5. Contact us to let us know the URL, e.g. https://www.placeford.org/cycling/journeyplanner/ and the header/footer URLs
  6. (Note that we also can support wildcard proxied domains, e.g. https://customer1.placeford.org/cycling/journeyplanner/, https://customer2.placeford.org/cycling/journeyplanner/, etc.)
  7. We will then add the site to our settings and sort out any customisations and layout fixes
  8. We will confirm when ready to go-live

Method 3 (Avoid if possible)

iframe method

We can set up a site which can be loaded in an iFrame. This is reasonably simple at both ends, but has the downside of being unable to have a unique URL for each journey that people can e-mail to others.

This involves the webteam simply creating an iFrame in the relevant part of your site, with the target being a URL that we will set up and confirm.

Steps:

  1. Contact us to agree arrangements
  2. Set up an iframe on your site, e.g. on your cycling pages
  3. Contact us to let us know the URL of the page and the size of the iframe
  4. We will then add the site to our settings and sort out any customisations
  5. We will then confirm our URL to use within the iframe

Method 4 (Advanced)

API calls into your own interface

This is by far the most advanced option and requires programming and much testing from your webteam, and so is not really recommended unless you are prepared to put in ongoing resources.

We have an API which provides a journey solution when provided with the details (start and end points etc.) of a requested journey. This data would need to be captured and then inserted into an interface which you run.

This requires an ongoing commitment to resourcing at your end so that the system keeps pace with any changes to the API we implement.

Steps:

  1. Contact us to agree arrangements
  2. Study the API, including the journey planner and namefinder aspects
  3. Apply for an API key
  4. Implement your interface (warning: could be non-trivial!)
  5. Hook the API into your interface
  6. Ensure your interface includes a license statement:
    Cycle routing provided by CycleStreets uses data (c) OpenStreetMap and contributors (licensed CC-BY-SA).

We welcome your feedback, especially to report bugs or give us route feedback.
My comments relate to: *






Your comments: *
URL of page: * https://www.cyclestreets.net/help/embedding/
How did you find out about CycleStreets?:
Your name:
Our ref: Please leave blank - anti-spam measure

* Items marked with an asterisk [*] are required fields and must be fully completed.