blade / mapbox by dribnet

index.html

<!DOCTYPE html>

<!--- THIS FILE LIFTED FROM THE WEB: 
      //www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-markercluster/ -->

<html>
<head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
  <!--[if lte IE 8]>
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.ie.css' rel='stylesheet' >
  <![endif]-->
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<!--
  Include Leaflet.markercluster's CSS and JavaScript assets.
  Unlike mapbox.js, these are not hosted by MapBox; you will
  need to download and host them yourself.

  Note that the 0.2 release of Leaflet.markercluster is not
  compatible with the version of Leaflet used by mapbox.js.
  This example uses assets from the master branch (@ 6fda9a206)
  of https://github.com/Leaflet/Leaflet.markercluster.
-->
<link rel="stylesheet" href="//www.mapbox.com/mapbox.js/assets/MarkerCluster.css" />
<link rel="stylesheet" href="//www.mapbox.com/mapbox.js/assets/MarkerCluster.Default.css" />

<script type="text/javascript" src="_ArrayLikeIsArray.js"></script>
<script src='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>

<!--[if lte IE 8]>
  <link rel="stylesheet" href="/mapbox.js/assets/MarkerCluster.Default.ie.css" />
<![endif]-->
<script src="//www.mapbox.com/mapbox.js/assets/leaflet.markercluster.js"></script>

<!-- Example data. -->
<script src="//www.mapbox.com/mapbox.js/assets/realworld.388.js"></script>

<div id='map'></div>

<!-- This is blade-mapbox.cljs compiled into javascript. -->
<script type="text/javascript" src="blade-mapbox.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]";
    }
  }
  // also install isArrayLike, but here it matches isArray
  ar.isArrayLike = ar.isArray;
})(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);

blade-mapbox.cljs

(ns blade.examples.mapbox
  (:require 
    [mrhyde.extend-js]
    [blade :refer [L]]))

(blade/bootstrap)

(def mymap (-> L .-mapbox (.map "map" "examples.map-uci7ul8p")
      (.setView [-37.82 175.215] 14)))

(def markers (L/MarkerClusterGroup.))

(doseq [a js/addressPoints]
  (let [[lat lng title] a
        icon ((get-in L [:mapbox :marker :icon]) {:marker-symbol "post" :marker-color "0044FF"})
        marker (-> L (.marker (L/LatLng. lat lng) {:icon icon :title title}))]
    (.bindPopup marker title)
    (.addLayer markers marker)))

(.addLayer mymap markers)