blade: leaflet in cljs by dribnet

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Blade - tutorial1 example</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
   <!--[if lte IE 8]>
       <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
   <![endif]-->
</head>
<body>
	<div id="mappy" style="width: 960px; height: 500px"></div>
  <!-- https://github.com/dribnet/ArrayLike.js          -->
  <script type="text/javascript" src="_ArrayLikeIsArray.js"></script>
  <!-- https://github.com/Leaflet/Leaflet               -->
  <script src="//cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
  <!-- https://github.com/dribnet/strokes               -->
  <script type="text/javascript" src="blade-tutorial1.js"></script>
</body>
</html>

_ArrayLikeIsArray.js

/**
 * Provides ArrayLike support for for libraries that verify an object
 * is an Array via either Object.prototype.toString or Array.isArray.
 *
 * For more information: https://github.com/dribnet/ArrayLike.js
 */

// this method patches (or implements) Array.isArray
// and stores the original function so it can be restored
(function(ar) {
  var isArray = ar.isArray;
  // toString is only used if Array.isArray does not exist
  var toString = Object.prototype.toString;
  // ar["$originalIsArray"] = isArray;
  ar.isArray = function(obj) {
    var that = this;
    if(obj && obj.__ArrayLike) {
      return true;
    }
    else if (isArray) {
      return isArray.call(that, obj);
    }
    else {
      // fallback - polyfill the Array.isArray method
      return toString.call(obj) === "[object Array]";
    }
  }
})(Array);

// this method patches Object.prototype.toString
// and stores the original function so it can be restored
(function(op) {
  var toString = op.toString;
  // op["$originalToString"] = toString;
  op.toString = function(args) {
    var that = this;
    if(that && that.__ArrayLike) {
      return '[object Array]';
    }
    else {
      return toString.call(that);
    }
  }
})(Object.prototype);

tutorial1.cljs

(ns blade.examples.tutorial1
  (:require [blade :refer [L]]))

(blade/bootstrap)

(def tile-url
  "http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png")

(let [mappy (-> L (.map "mappy") 
                  (.setView [34.0086, -118.4986] 12))]

  (-> L (.tileLayer tile-url {
            :maxZoom 18
            :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>"})
        (.addTo mappy))

  (-> L (.marker [34.0086, -118.4986]) 
        (.addTo mappy)
        (.bindPopup "<b>Hello world!</b><br />I am a popup.")
        (.openPopup))

  (-> L (.circle [34.0286, -118.5486] 1000 {
            :color "red"
            :fillColor "#f03"
            :fillOpacity "0.5"})
        (.addTo mappy)
        (.bindPopup "I am a circle."))

  (-> L (.polygon [
          [33.979, -118.48]
          [33.973, -118.46]
          [33.98, -118.447]])
        (.addTo mappy)
        (.bindPopup "I am a <del>polygon</del> triangle"))

  (let [popup (-> L .popup)]
    (.on mappy "click" (fn [{:keys [latlng]} e]
    (-> popup (.setLatLng latlng)
              (.setContent (str "You clicked the map at " latlng))
              (.openOn mappy))))))