Developer guide


De routeplanner van Folkersma Routing en Sign is ontworpen om geïntegreerd te worden binnen websites van derden. Dit betekent dat uw website kan worden uitgerust met een routeplanner zonder dat u er zelf één hoeft te ontwikkelen. Het integreren van onze planner kunt u zelf doen door onderstaande stappen te volgen.

Mocht u hulp nodig hebben bij het integreren dan helpen wij natuurlijk graag.


Planner

Voor het gebruik van de routeplanner in uw website zijn er drie verschillende stukken code die moeten worden toegevoegd aan de <head/> en de <body/>. In de volgende voorbeelden staat meerdere malen een verwijzing naar #networkHash. Dit is uw toegangscode voor de API en moet worden aangevraagd.

<head/>

De volgende code dient in de <head/> te worden gezet.

		
	<head>
		<!-- Basic styling for the planner -->
		<link href="//i2go.nl/client/planner/assets/stylesheets/routeplanner.css" rel="stylesheet" type="text/css" />
		<!-- The planner requires jQuery UI >= 1.11.2 -->
		<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
	</head>
	
	

<body/>

Het volgende stuk code dient in de <body/> te worden gezet.

	
<body>
	<!-- Place this code where you want the planner -->
	<div id="rp-wrapper">
		<main>
			<aside id="rp-tools"></aside>
			<map id="rp-map">
				<div id="rp-strip"></div>
				<div id="rp-map-container"></div>
			</map> 
		</main>
		<div id="rp-modal"></div>
	</div>

	<!-- Place this code at the end of the page to increase page load performance -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
	<!-- The planner requires jQuery UI >= 1.11.2 -->
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
	<script src="//i2go.nl/client/assets/javascripts/routeplanner.js" type="text/javascript"></script>
	
	<script language="javascript">
		routeplanner("#networkHash",
		{
			<!-- Here you can set the default mapview, by setting the lat-long for centering and setting the default zoomlevel -->
			lat: #defaultLat,
			lng: #defaultLong,
			zoom: #defaultZoom
		});
	</script>
</body>



Gallery

Voor het gebruik van de routeplanner galerij in uw website zijn er twee verschillende stukken code die moeten worden toegevoegd aan de <head/> en de <body/>.

<head/>

Het volgende stuk code dient in de <head/> te worden gezet.


<head>
	<!-- Basic styling for the planner gallery -->
	<link href="//i2go.nl/client/planner/assets/stylesheets/routeplanner.css" rel="stylesheet" type="text/css" />
	<!-- The planner gallery requires jQuery UI >= 1.11.2 -->
	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
</head>

<body/>

Het volgende stuk code dient in de <body/> te worden gezet.


<body>
	<!-- The gallery wrapper -->
	<div class="rp-gallery">
		
		<!-- The gallery filters section -->
		<form class="rp-filters rp-clear">
			<div class="rp-filter rp-filter-distance">
				<div class="rp-label">Afstand</div>
				<select name="distance">
					<option value="0-1000000">-- Alle --</option>
					<option value="0-5000">1 - 5 KM</option>
					<option value="5000-10000">5 - 10 KM</option>
					<option value="10000-20000">11 - 20 KM</option>
					<option value="20000-30000">21 - 30 KM</option>
					<option value="30000-1000000">30+ KM</option>
				</select>
			</div>
			<div class="rp-filter rp-filter-calories">
				<div class="rp-label">Calorieën</div>
				<select name="calories">
					<option value="0-1000000">-- Alle --</option>
					<option value="0-250">1 -250</option>
					<option value="250-500">251 - 500</option>
					<option value="500-1000">501 - 1000</option>
					<option value="1000-2000">1001 - 2000</option>
					<option value="2000-1000000">2000 +</option>
				</select>
			</div>
			<div class="rp-filter rp-filter-time">
				<div class="rp-label">Minuten</div>
				<select name="time">
					<option value="0-1000000">-- Alle --</option>
					<option value="15-30">1 -30</option>
					<option value="30-60">31 - 60</option>
					<option value="60-120">61 - 120</option>
					<option value="120-180">121 - 180</option>
					<option value="180-1000000">180 +</option>
				</select>
			</div>
			<div class="rp-filter rp-filter-latlng">
				<div class="rp-label">Plaats</div>
				<select name="latlng">
					<option value="">-- Alle --</option>
				</select>
			</div>
			<div class="rp-filter rp-filter-radius">
				<div class="rp-label">Straal</div>
				<select name="radius">
					<option value="1000000">-- Alle --</option>
					<option value="5000">1 - 5 KM</option>
					<option value="10000">5 - 10 KM</option>
					<option value="20000">11 - 20 KM</option>
					<option value="30000">21 - 30 KM</option>
					<option value="1000001">30+ KM</option>
				</select>
			</div>			
		</form>
		
		<!-- The gallery routes will be loaded into this div.rp-routes -->
		<div class="rp-routes rp-clear"></div>
		
		<!-- This is an hidden template place at end of wrapper -->
		<div class="rp-templates">
			<div class="rp-route">
				<div class="rp-inner">
					<a href="" class="rp-route-image"></a>
					<div class="rp-title"></div>
					<div class="rp-distance rp-attr"><span class="fa fa-arrows-h"></span> <span class="rp-val"></span> KM</div>
					<div class="rp-time rp-attr"><span class="fa fa-clock-o"></span> <span class="rp-val"></span> minuten</div>
					<div class="rp-energy rp-attr"><span class="fa fa-heart"></span> <span class="rp-val"></span> calorieën</div>
					<div class="rp-description"></div>
					<a class="rp-btn" href="#">Open in planner</a>
				</div>
			</div>
		</div>
		<!-- end rp-templates -->
		
	</div>

	
	<!-- Place this code at the end of the page to increase page load performance -->
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="//i2go.nl/client/gallery/jquery.gallery.js"></script>
	
	<!-- Initialize the planner gallery -->
	<script type="text/javascript">
		$(document).ready(function() {
			$(".rp-gallery").rpGallery({
				networkHash: "#networkHash",
				apiUrl : "//i2go.nl/",
				plannerUrl : "//url.to/your/planner/page" // "//i2go.nl/demo/planner.html"
			});
		});
	</script>
</body>

Copyright © 2016 Folkersma Routing en Sign B.V.