diff --git a/resources/templates/home.html b/resources/templates/home.html
index 7509df9..31a313d 100644
--- a/resources/templates/home.html
+++ b/resources/templates/home.html
@@ -29,6 +29,7 @@
+ {% script "/vendor/leaflet/dist/leaflet.js" %}
{% style "/assets/bootstrap/css/bootstrap.min.css" %}
{% style "/assets/font-awesome/css/font-awesome.min.css" %}
{% style "/css/screen.css" %}
diff --git a/src/cljs/youyesyet/core.cljs b/src/cljs/youyesyet/core.cljs
index 3cdbd2e..6438006 100644
--- a/src/cljs/youyesyet/core.cljs
+++ b/src/cljs/youyesyet/core.cljs
@@ -8,7 +8,8 @@
[ajax.core :refer [GET POST]]
[youyesyet.ajax :refer [load-interceptors!]]
[youyesyet.handlers]
- [youyesyet.subscriptions])
+ [youyesyet.subscriptions]
+ [youyesyet.views.map :as maps])
(:import goog.History))
(defn nav-link [uri title page collapsed?]
@@ -49,8 +50,12 @@
[:div {:dangerouslySetInnerHTML
{:__html (md->html docs)}}]]])])
+(defn map-page []
+ (maps/map-div))
+
(def pages
{:home #'home-page
+ :map #'map-page
:about #'about-page})
(defn page []
diff --git a/src/cljs/youyesyet/views/map.cljs b/src/cljs/youyesyet/views/map.cljs
index 197525b..aebab1e 100644
--- a/src/cljs/youyesyet/views/map.cljs
+++ b/src/cljs/youyesyet/views/map.cljs
@@ -1,5 +1,6 @@
(ns youyesyet.views.map
- (:require [re-frame.core :refer [reg-sub]]))
+ (:require [re-frame.core :refer [reg-sub]]
+ [reagent.core :as reagent]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;;;
@@ -37,13 +38,53 @@
;;; https://github.com/reagent-project/reagent-cookbook/tree/master/recipes/leaflet
;;; but using OSM data because we can't afford commercial, so also cribbed from
;;; https://switch2osm.org/using-tiles/getting-started-with-leaflet/
+;;; Note that this is raw reagent stylee; it should be refactoed into re-frame stylee
+;;; when I understand it better.
-(defn map-div
- "Generate the actual div containing the map."
+;; which provider to use
+(def *map-provider* :osm)
+
+
+(defn map-did-mount-mapbox
+ "Did-mount function loading map tile data from MapBox (proprietary)."
+ []
+ (let [map (.setView (.map js/L "map") #js [55.86 -4.25] 13)]
+ ;; NEED TO REPLACE FIXME with your mapID!
+ (.addTo (.tileLayer js/L "http://{s}.tiles.mapbox.com/v3/FIXME/{z}/{x}/{y}.png"
+ (clj->js {:attribution "Map data © [...]"
+ :maxZoom 18}))
+ map)))
+
+
+(defn map-did-mount-osm
+ "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"
+ (clj->js {:attribution "Map data © OpenStreetMap contributors"
+ :maxZoom 18}))
+ map)))
+
+
+(defn map-did-mount
+ "Select the actual map provider to use."
+ []
+ (case *map-provider*
+ :mapbox (map-did-mount-mapbox)
+ :osm (map-did-mount-osm))
+ ;; potentially others
+ )
+
+
+(defn map-render
+ "Render the actual div containing the map."
[]
[:div#map {:style {:height "360px"}}])
-(defn panel
- "Generate the map panel"
+
+(defn map-div
+ "A reagent class for the map object."
[]
- [div-map])
+ (reagent/create-class {:reagent-render map-render
+ :component-did-mount map-did-mount}))
+