Add map using leaflet.js and cloudmade

mlandauer · Oct 5, 2013 · df4fae1 · df4fae1
1 parent ae68e29
commit df4fae1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/www/css/starter-template.css b/www/css/starter-template.css
@@ -21,4 +21,8 @@ body {
 .center {
   text-align: center;
   width: 100%;
+}
+
+#map {
+  height: 400px;
 }
diff --git a/www/index.html b/www/index.html
@@ -21,6 +21,10 @@
       <script src="../../assets/js/html5shiv.js"></script>
       <script src="../../assets/js/respond.min.js"></script>
     <![endif]-->
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
+    <!--[if lte IE 8]>
+     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
+    <![endif]-->
   </head>
 
   <body>
@@ -80,7 +84,7 @@ <h4 class="list-group-item-heading pull-right">{{distanceText}} {{bearingText}}<
         </div>
       </div>
       <div class="container">
-        <p>A map will go here!</p>
+        <div id="map"></div>
       </div>
     </script>
 
@@ -133,6 +137,7 @@ <h2>Access</h2>
     <script src="js/libs/jquery-2.0.3.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="js/libs/bootstrap.min.js"></script>
+    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
 
     <script src="js/libs/handlebars-1.0.0.js"></script>
     <script src="js/libs/ember.js"></script>
@@ -142,5 +147,6 @@ <h2>Access</h2>
     <script src="js/router.js"></script>
     <script src="js/models/campsite.js"></script>
     <script src="js/controllers/campsites.js"></script>
+    <script src="js/views/map.js"></script>
   </body>
 </html>
diff --git a/www/js/views/map.js b/www/js/views/map.js
@@ -0,0 +1,10 @@
+App.MapView = Ember.View.extend({
+  didInsertElement: function() {
+    var map = L.map('map').setView([51.505, -0.09], 13);
+
+    L.tileLayer('http://{s}.tile.cloudmade.com/be7a385fc3034f60805677eadddb4130/997/256/{z}/{x}/{y}.png', {
+      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
+      maxZoom: 18
+    }).addTo(map);
+  }
+});