updated bower version to 0.0.9

new html control element refactored examples to not fill up index html add marker icons in different colors autocomplete fixed for update via drag&drop examples extended for autocomplete and html control
route360 · Jul 15, 2014 · 19d303a · 19d303a
1 parent faa6ccd
commit 19d303a
Show file tree

Hide file tree

Showing 30 changed files with 1,205 additions and 762 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "r360",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "authors": [
         "[email protected]",
         "[email protected]"
@@ -11,6 +11,10 @@
         "dist/jquery-ui-1.10.0.custom.css",
         "dist/r360.css",
         "dist/images/marker-icon-red.png",
+        "dist/images/marker-icon-blue.png",
+        "dist/images/marker-icon-purple.png",
+        "dist/images/marker-icon-green.png",
+        "dist/images/marker-icon-orange.png",
         "dist/images/marker-icon.png"
     ],
     "keywords": [

diff --git a/build/deps.js b/build/deps.js
@@ -17,6 +17,7 @@ var deps = {
               'control/TravelStartTimeControl.js',
               'control/TravelTimeControl.js',
               'control/WaitControl.js',
+              'control/HtmlControl.js',
               'control/RadioButtonControl.js'
              ],
 		desc: '',

diff --git a/debug/demo/basic.html b/debug/demo/basic.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Get polygon example</title>
+
+    <!-- stylesheets -->
+    <link rel="stylesheet" href="lib/leaflet/leaflet.css"/>
+    <link rel="stylesheet" href="lib/jquery/jquery-ui-1.10.0.custom.css"/>
+    <link rel="stylesheet" href="css/r360.css"/>
+
+    <style>
+        html, body {
+
+            width: 100%;
+            height: 100%;
+        }
+
+        #map {
+
+            width: 500px;
+            height: 400px;
+        }
+    </style>
+
+    <!-- scripts -->
+    <script src="lib/jquery/jquery-1.10.2.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="lib/jquery/jquery-ui-1.10.4.min.js"></script>
+    <script src="lib/leaflet/leaflet.js"></script>
+    <script src="js/underscore.js"></script>
+    <script src="js/raphael-min.js"></script>
+    <script src="js/r360.js"></script>
+
+     <script type="text/javascript">
+        $(document).ready(function(){
+
+            // add the map and set the initial center to berlin
+            var map = L.map('map').setView([52.51, 13.37], 13);
+            // attribution to give credit to OSM map data and VBB for public transportation 
+            var attribution ="<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox © OpenStreetMap</a> | ÖPNV Daten © <a href='http://www.vbb.de/de/index.html' target='_blank'>VBB</a> | developed by <a href='http://www.route360.net/de/' target='_blank'>Route360°</a>";
+
+            // initialising the base map. To change the base map just change following
+            // lines as described by cloudmade, mapbox etc..
+            // note that mapbox is a paided service
+            L.tileLayer('http://a.tiles.mapbox.com/v3/mi.h220d1ec/{z}/{x}/{y}.png', {
+                    maxZoom: 18,
+                    attribution: attribution
+            }).addTo(map);
+
+            // set the service key, this is a demo key
+            // please contact us and request your own key
+            r360.config.serviceKey = 'C6UAZQHErAfbv2sqqUJP';
+
+            // create a marker and add it to the map
+            var marker = L.marker([52.51, 13.37]);
+            marker.addTo(map);
+
+            // create the layer to add the polygons
+            var cpl = r360.route360PolygonLayer();
+            // add it to the map
+            map.addLayer(cpl);
+
+            // you need to define some options for the polygon service
+            // for more travel options check out the other tutorials
+            var travelOptions = r360.travelOptions();
+            // we only have one source which is the marker we just added
+            travelOptions.addSource(marker);
+            // we want to have polygons for 5 to 30 minutes
+            travelOptions.setTravelTimes([300, 600,900, 1200, 1500, 1800]);
+
+            // call the service
+            r360.PolygonService.getTravelTimePolygons(travelOptions, function(polygons){
+
+                // add the returned polygons to the polygon layer 
+                cpl.addLayer(polygons);
+
+                // zoom the map to fit the polygons perfectly
+                map.fitBounds(cpl.getBoundingBox());
+            });
+        });
+    </script>
+
+</head>
+<body>
+    <div id="map"></div>
+</body>
+</html>
diff --git a/debug/demo/css/demo.css b/debug/demo/css/demo.css
@@ -9,12 +9,30 @@ header {
 
 #map-example1, #map-addTravelTimeControlExample, 
 #map-addTravelTypeControlExample, #map-addTravelStartDateControlExample, 
-#map-addPlaceAutoCompleteControlExample, #map-routingExample, #map-filterExample, #map-multipleExample {
+#map-addPlaceAutoCompleteControlExample, #map-routingExample, #map-filterExample, #map-multipleExample, #map-htmlControlExample {
 
     height: 400px;
     margin-bottom: 15px; 
 }
 
+.html-control {
+
+    /*position: static;*/
+    background-color: white;
+    color: black;
+    width: 344px;
+    max-height: 320px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+    padding: 7px;
+    z-index:10000;
+    color: black;
+    overflow-y: scroll;
+}
+
 .tutorial, .api {
 
     padding-top: 100px;