Routing extension.

mmarcon · Nov 21, 2012 · f4209e7 · f4209e7
1 parent 0e7a34b
commit f4209e7
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 32 deletions.
diff --git a/Makefile b/Makefile
@@ -5,7 +5,7 @@ PLUGIN = jhere
 deps:
 	npm install
 
-dist: hint plugin zepto summary
+dist: hint plugin zepto extensions summary
 
 plugin:
 	@./node_modules/.bin/uglifyjs -o dist/$(PLUGIN).min.js src/$(PLUGIN).js
@@ -17,7 +17,8 @@ extensions:
 	@./build-scripts/build-extensions.sh
 
 summary:
-	@ls -nhl dist | awk '{print $$9,$$5}' | tail -n +2
+	@ls -nhl dist | grep -v ^d | awk '{print $$9,$$5}' | tail -n +2; \
+	ls -nhl dist/extensions | grep -v ^d | awk '{print $$9,$$5}' | tail -n +2
 
 hint:
 	@./node_modules/.bin/jshint ./src

diff --git a/dist/extensions/route.min.js b/dist/extensions/route.min.js
diff --git a/dist/jhere.min.js b/dist/jhere.min.js
diff --git a/src/examples/index.route.html b/src/examples/index.route.html
@@ -18,15 +18,17 @@
 
 <body>
 <div id="map"></div>
-<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> -->
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script>
+<script type="text/javascript" src="../zepto.adapter.js"></script>
 <script type="text/javascript" src="../jhere.js"></script>
 <script type="text/javascript" src="../extensions/route.js"></script>
 <script type="text/javascript">
     $(window).on('load', function(){
         $('#map').jHERE({
             center: [52.5, 13.3],
             zoom: 10
-        }).jHERE('route', {latitude: 52.711, longitude: 13.011}, {latitude: 52.514, longitude: 13.453});
+        }).jHERE('route', [52.711, 13.011], [52.514, 13.453]);
     });
 </script>
 </body>

diff --git a/src/extensions/route.js b/src/extensions/route.js
@@ -1,36 +1,93 @@
 ;(function($){
     var _ns, route, _default = {
-        type: "shortest",
-        transportModes: ["car"],
-        options: "",
-        trafficMode: "default"
+        type: 'shortest',
+        transportMode: 'car',
+        options: '',
+        trafficMode: 'default',
+        width: 4,
+        color: '#ff6347',
+        marker: {
+            text: '#',
+            textColor: '#fff'
+        }
     };
 
-    /*Call me with the correct context!*/
-    function done(router, key, status) {
-        var routes, route;
-        if (status == "finished") {
-            routes = router.getRoutes();
-            route = new _ns.routing.component.RouteResultSet(routes[0]).container;
-            this.map.objects.add(route);
-        } else if (status == "failed") {
-            $.error("Failed to calcolate route");
-        }
+    function normalize(position){
+        return position instanceof Array ? {latitude: position[0], longitude: position[1]} : position;
     }
 
+    //### Calculate the route between 2 points
+    //`$('.selector').jHERE('route', from, to, routeOptions);`
+    //
+    //`from` and `to` can be objects of type
+    //
+    //`{latitude: -43, longitude: 55}`
+    //
+    //or an array
+    //
+    //`[-43, 55]`
+    //
+    //`routeOptions` is optional and can be an object of type
+    //<pre><code>{
+    //  marker: {},
+    //  type: 'shortest', //can be shortest, fastest, fastestNow, directDrive, scenic
+    //  transportMode: 'car', //can be car, pedestrian, publicTransport, truck
+    //  options: '', //can be avoidTollroad, avoidMotorway, avoidBoatFerry,
+    //               //avoidRailFerry, avoidPublicTransport, avoidTunnel,
+    //               //avoidDirtRoad, avoidPark, preferHOVLane, avoidStairs
+    //  trafficMode: 'default', //can be enabled, disabled, default
+    //  width: 4, //width in px of the route drawn on the map
+    //  color: '#ff6347' //color of the route drawn on the map
+    //}</code></pre>
+    //
+    //`marker` is an object containing the same options used for
+    //`$('.selector').jHERE('marker'). Options apply to both start and destionation markers.
     route = function(from, to, options){
-        var router, wp;
+        var router, wp, done;
         _ns = _ns || nokia.maps;
+        from = normalize(from);
+        to = normalize(to);
         options = $.extend({}, _default, options);
 
+        /*Call me with the correct context!*/
+        done = function(router, key, status) {
+            var routes, routeContainer, poly, r;
+            if (status == 'finished') {
+                routes = router.getRoutes();
+                r = routes[0];
+                /*We want to customize the way a routeContainer is shown*/
+                /*So we have to make a polyline first*/
+                poly = new _ns.map.Polyline(r && r.shape, {
+                    pen: new _ns.util.Pen({
+                        lineWidth: options.width,
+                        strokeColor: options.color
+                    })
+                });
+                routeContainer = new _ns.map.Container();
+                routeContainer.objects.add(poly);
+                /*And add the markers next. For markers we use the corresponding jHERE method for now.*/
+                $.each(r.waypoints, $.proxy(function(i, w){
+                    var o = $.extend({}, options.marker);
+                    if(options.marker.text === '#') {
+                        o.text = i + 1;
+                    }
+                    this.marker(w.originalPosition, o);
+                }, this));
+                this.map.objects.add(routeContainer);
+            } else if (status == 'failed') {
+                $.error('Failed to calcolate route');
+            }
+        };
+
         router = new _ns.routing.Manager();
-        router.addObserver(function(){console.log('hello')});
+        router.addObserver('state', $.proxy(done, this));
 
         wp = new _ns.routing.WaypointParameterList();
         wp.addCoordinate(from);
         wp.addCoordinate(to);
 
-        router.calculateRoute(wp, [_default]);
+        options.transportModes = [options.transportMode];
+        router.calculateRoute(wp, [options]);
     };
 
     $.jHERE.extend('route', route);

diff --git a/src/jhere.js b/src/jhere.js
@@ -469,6 +469,14 @@
         return this;
     };
 
+    /*Open up prototype for extensions*/
+    $[plugin] = {};
+    $[plugin].extend = function(name, fn){
+        if (typeof name === 'string' && isFunction(fn)) {
+            H[name] = fn;
+        }
+    };
+
     $.fn[plugin] = function(options) {
         var args = arguments;
         return this.each(function() {
@@ -505,14 +513,4 @@
             }
         });
     };
-
-    /*Open up prototype for extensions*/
-    $[plugin] = {};
-    $[plugin].extend = function(name, fn){
-        if (typeof name === 'string' && isFunction(fn)) {
-            H[name] = fn;
-        }
-    };
-
-
 })(jQuery, window, document);