Google Maps with Clojurescript.
Clojure JavaScript
Switch branches/tags
Nothing to show
Pull request Compare This branch is 7 commits behind develop.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
resources/public
src
.gitignore
Procfile
README.md
bootstrap.sh
project.clj

README.md

What is Contour?

Contour is Google Maps v3 web app written entirely in ClojureScript! Very early days. We have a demo on Heroku.

Overview

Contour is Google Maps v3 web app written entirely in ClojureScript. In other words, it's awesome.

The project rides on Noir, a framework for writing web applications in Clojure.

It also rides on the wonderful ClojureScript project which is a compiler for Clojure that emits JavaScript code! For bonus points it's also compatible with the with the advanced compilation mode of Google Closure optimizing compiler.

Show me CODE

Here's a side-by-side of JavaScript and ClojureScript. The "Hello World" of Google Maps in JavaScript looks like this:

    var map;

    function initialize() {
        var myOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);

The "Hello World" of Google Maps in ClojureScript looks like this:

    (def *map* nil)
    
    (def my-opts
      {"zoom" 8
       "mapTypeId" google.maps.MapTypeId.ROADMAP
       "center" (google.maps.LatLng. -34.397, 150.644)})
    
    (defn map-load []
      (let [elem (goog.dom/getElement "map_canvas")]
        (set! *map* (google.maps.Map. elem my-opts))))
    
    (events/listen js/window "load"
                   map-load)

Let's get started

To get started, you'll need to install a few tools, but it's painless.

  • Contour (this project)
  • Leiningen (Build tool for clojure, located on github)
  • ClojureScript
  • cljs-watch

Contour

Fire up your command line and:

    git clone https://github.com/sritchie/contour.git
    cd contour

Leiningen

Next install Leiningen, the build tool for Clojure. These instructions are copied from the Leiningen README:

  • Download this script which is named lein
  • Place it on your path so that you can execute it. (I like to use ~/bin)
  • Set it to be executable. (chmod 755 ~/bin/lein)

ClojureScript

Next install ClojureScript. Pick a root directory (rootdir) where you want clojureScript to live and run the following commands:

    cd contour # from above
    sh bootstrap.sh /path/to/rootdir

And then just follow the instructions at the end of the install.

cljs-watch

Next install cljs-watch. This is a small script that watches your source directory for changes to clojureScript files. When it sees a change, it recompiles everything for live updates. Change your source, reload the browser, and you're set! The install is the same as for leiningen, just with a different script:

  • Download the script which is named cljs-watch.
  • Place it on your path. (I like to use ~/bin)
  • Set it to be executable. (chmod 755 ~/bin/cljs-watch)

Usage

Use two terminals. In the first:

    cd contour
    lein deps
    lein ring server    

And in the second:

    cd contour
    cljs-watch

Access 127.0.0.1:3000 and your golden!

License

Copyright © 2011 Sam Ritchie

Distributed under the Eclipse Public License, the same as Clojure.

Notes (NOT meant to make sense!)

https://github.com/whizbangsystems/innovation-fund-js/blob/master/src/forma-data/static/config.js

More on Overlays: http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

  • Add MarkerClusterer to externs.

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js

  • Read about what externs actually are :)
  • Redo robin's utils.