From 709b8a6e87694254b80667a605f46b8edb931894 Mon Sep 17 00:00:00 2001 From: simon Date: Wed, 19 Oct 2016 12:00:06 +0100 Subject: [PATCH] Further work on maps - not fully working yet. --- resources/templates/home.html | 1 + src/cljs/youyesyet/core.cljs | 7 +++- src/cljs/youyesyet/views/map.cljs | 53 +++++++++++++++++++++++++++---- 3 files changed, 54 insertions(+), 7 deletions(-) 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})) +