mapbox-marionette-module

Backbone Marionette based module for working with Mapbox map

[Features] (#Features)
[How to use] (#How to use)
References

##Features

Initialize map
Geolocation

##How to use

Here is the simple html page which might be set up with the Mapbox.js

<html>
<head>
    <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />
    <!--[if lte IE 8]>
      <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.ie.css' rel='stylesheet' />
    <![endif]-->
    <script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.js'></script>
    <script src="js/vendor/jquery-1.7.1.min.js"></script>
    <script src="js/vendor/json2.js"></script>
    <script src="js/vendor/underscore.js"></script>
    <script src="js/vendor/mustache.js"></script>
    <script src="js/vendor/backbone.js"></script>
    <script src="js/vendor/backbone.marionette.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/App.js"></script>
    <script src="js/App.Mapbox.js"></script>

</head>
<body>
  <div id="map" class="dark" style="width: 100%; height: 100%;"></div>
  <script type='text/javascript'>
    $(document).ready(function() {
  	    App.start();
        App.request('map:init', 'map', 'examples.map-y7l23tes', true, function(e) {
            alert('Your location is determined: lng=' + e.latlng.lng + ', lat=' + e.latlng.lat);
        });
  
    });
  </script>
</body>
</html>

First of all it is necessary to include Mapbox.js API modules:

    <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />
    <!--[if lte IE 8]>
      <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.ie.css' rel='stylesheet' />
    <![endif]-->
    <script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.js'></script>

Also we include necessary dependencies:

<script src="js/vendor/jquery-1.7.1.min.js"></script>
<script src="js/vendor/json2.js"></script>
<script src="js/vendor/underscore.js"></script>
<script src="js/vendor/mustache.js"></script>
<script src="js/vendor/backbone.js"></script>
<script src="js/vendor/backbone.marionette.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>

Include main application module:

<script src="js/App.js"></script>

Include mapbox module:

<script src="js/App.Mapbox.js"></script>

HTML div element which is used as holder of the map:

<div id="map" class="dark" style="width: 100%; height: 100%;"></div>

The map is initialized by Request (Marionette.RequestResponse):

App.request('map:init', 'map', 'examples.map-y7l23tes', true, function(e) {
    alert('Your location is determined: lng=' + e.latlng.lng + ', lat=' + e.latlng.lat);
});

Request must be sent to 'map:init' handler. The following parameters must be passed into Request method:

'map' - identifier of map HTML holder (id="map")
'examples.map-y7l23tes' - identifier of map from Mapbox site
flag - if true, then define location, otherwise do not perform geolocation
callback - callback function which is called the location is found

##References Mapbox.js API
Backbone.js
Marionette.js

skarev/mapbox-marionette-module

mapbox-marionette-module