#9: Woot woot woot!

Map now working with OSM tiles

resources/templates/home.html

@@ -34,6 +34,11 @@
     </div>
 
     <!-- scripts and styles -->
+    <!-- ATTENTION \/ -->
+    <!-- Leaflet -->
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+    <!-- ATTENTION /\ -->
 
     <script type="text/javascript">
         var context = "{{servlet-context}}";

src/cljs/youyesyet/core.cljs

@@ -57,6 +57,7 @@
 (defn home-page []
   [:div.container {:id "main-container"}
    (big-link "About" "#/about")
+   (big-link "Map" "#/map")
    [:div.jumbotron
     [:h1 "Welcome to youyesyet"]
     [:p "Time to start building your site!"]

src/cljs/youyesyet/views/map.cljs

@@ -44,7 +44,11 @@
 ;; which provider to use
 (def *map-provider* :osm)
 
+(def osm-url "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
+(def osm-attrib "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors")
 
+
+;; My gods mapbox is user-hostile!
 (defn map-did-mount-mapbox
     "Did-mount function loading map tile data from MapBox (proprietary)."
   []
@@ -60,8 +64,8 @@
   "Did-mount function loading map tile data from Open Street Map (open)."
   []
   (let [map (.setView (.map js/L "map") #js [55.86 -4.25] 13)]
-    (.addTo (.tileLayer js/L "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    (.addTo (.tileLayer js/L osm-url
-                        (clj->js {:attribution "Map data &copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a> contributors"
+                        (clj->js {:attribution osm-attrib
                                   :maxZoom 18}))
             map)))
 
@@ -79,7 +83,7 @@
 (defn map-render
   "Render the actual div containing the map."
   []
-  [:div#map {:style {:height "360px"}}])
+  [:div#map {:style {:height "500px"}}])
 
 
 (defn map-div