Level: Advanced

It is now possible to deep link directly to specific layers or stops in your nuCloud (V3) map. This article will detail how to fully take advantage of this new functionality. Deep linking is accomplished by adding certain URL parameters to the end of the URL for your map that specific information to be displayed.

How to get deep link information

Before we can deep link into a map from other web pages or areas of your website we first need to find out how to get the deep linking information needed for the link.  First let’s talk about how to get a link to a specific layer. When working on your map in the backend go to the “Stops” tab and next to the stop you would like to few the direct link to click on the Chain symbol. A pop will show you detailed information on the exact ID number of your stop.

deeplink

It’s not viewable in the backend, but you can also link directly to all stops in a specific layer very similar to how you do this to an individual stop.

How to use deep linking parameters

Now that we know where to get deep linking parameters let’s talk about how to apply them. On the mobile map it is as simple as adding this string to the end of your URL.

Examples:
http://cdn-map1.nucloud.com/nucloudmap/index.html?map=4&layer=Athletics

http://cdn-map1.nucloud.com/nucloudmap/index.html?map=4&layer=Athletics,Admission

http://cdn-map1.nucloud.com/nucloudmap/index.html?map=4&marker=6

This is a little bit trickier for an embedded version of the map. If you want to embed a version of your map with a specific layer turned on then you can add this parameter to the embeddable iframe code.

Example:
<iframe width=’800′ height=’600′ src=’ http://cdn-map1.nucloud.com/nucloudmap/index.html?map=4&layer=Athletics’>nuCloud Client Map: nuCloud ICM Portfolio</iframe>

Finally sometimes you might want to deep link to a specific layer or stop on your base map on the fly. In order to do this you need to include an extra snippet of JavaScript code on the page that has the map embedded on it. This is because we need to be able to pass the parameter for the map to not just the page that the map is embedded on but also to the iFramed URL for the map. What this snippet of JavaScript does is essentially allows you to add the URL parameter to the page URL at which point the JavaScript reads this information and injects it into the embed code URL.


JavaScript Snippet:

<script type=”text/javascript”>

function getURLParameter(name) {
return decodeURIComponent((new RegExp(‘[?|&]’ + name + ‘=’ + ‘ ([^&;]+?)(&|#|;|$)’).exec(location.search)||[,””])[1].replace(/\+/g, ‘%20’))||null;
}

var marker = getURLParameter(‘marker’);
var layer = getURLParameter(‘layer’);

if(marker != null) {
document.getElementById(‘map’).src = “http://cdn-map1.nucloud.com/nucloudmap/index.html?map=**PUT_YOUR_MAP_ID_HERE**&marker=” + marker;
} else if(layer != null) {
document.getElementById(‘map’).src = “http://cdn-map1.nucloud.com/nucloudmap/index.html?map=**PUT_YOUR_MAP_ID_HERE**&layer=” + layer;
}

</script>


Note that you need to swap out your Map ID in two locations. You can find out what your Map ID is by looking at your embed URL.

You also need to define the iframe code by adding a name parameter. Below is an example embed with the name being defined as map because that is what we are looking for in the JavaScript code above.

<iframe id=”map” name=”map” src=”http://cdn.nucloud.com/maps/206/index.html” width=”800″ height=”650″></iframe>

Now if someone visits the page with your map embedded on it they can include the deep linking parameter at the end of the URL and it will take them directly to that layer or stop.


Deeplink to GeoMap

The viewer now supports geomap and basemap parameters. The options supported by each are:

geomap: true | false
basemap: streets | satellite

http://cdn-map1.nucloud.com/nucloudmap/index.html?map=4

http://cdn-map1.nucloud.com/nucloudmap/index.html?map=4&geomap=true

http://cdn-map1.nucloud.com/nucloudmap/index.html?map=4&geomap=true&basemap=satellite

http://cdn-map1.nucloud.com/nucloudmap/index.html?map=4&geomap=true&basemap=streets

http://cdn-map1.nucloud.com/nucloudmap/index.html?map=4&geomap=true&basemap=satellite&marker=305

http://cdn-map1.nucloud.com/nucloudmap/index.html?map=4&geomap=true&basemap=streets&marker=305

http://cdn-map1.nucloud.com/nucloudmap/index.html?map=4&geomap=true&basemap=streets&layer=Sports

http://cdn-map1.nucloud.com/nucloudmap/index.html?map=4&geomap=true&basemap=satellite&layer=Campus%20Life

http://cdn-map1.nucloud.com/nucloudmap/index.html?map=4&layer=Campus%20Life&geomap=true&basemap=streets&marker=305