add MapView

Author: André Gaul

views/coarse.js

@@ -7,9 +7,11 @@ var common = require('couchmap-common');
 module.exports = Backbone.View.extend({
   CoarseMarkerView: require('./coarseMarker'),
   initialize: function(options) {
-    this.mapView = options.mapView;
-    this.bbox = common.bbox(this.mapView.map.getBounds());
-    this.zoom = common.validate_zoom(this.mapView.map.getZoom()+1);
+    this.proxyView = options.proxyView;
+    var map = this.proxyView.mapView.map;
+
+    this.bbox = common.bbox(map.getBounds());
+    this.zoom = common.validate_zoom(map.getZoom()+1);
     this.layer = L.markerClusterGroup(
       {
         showCoverageOnHover: false,
@@ -23,10 +25,10 @@ module.exports = Backbone.View.extend({
           return this.iconCreate(count);
         }.bind(this)
       })
-      .addTo(this.mapView.map)
+      .addTo(map)
       .on('click', function(a) {
         var model = a.layer.options.view.model;
-        this.mapView.map.fitBounds([
+        map.fitBounds([
           [model.get('bbox_south'), model.get('bbox_west')],
           [model.get('bbox_north'), model.get('bbox_east')]
           ]);
@@ -39,7 +41,7 @@ module.exports = Backbone.View.extend({
         var east = _.max(_.map(models, function(model) { return model.get('bbox_east'); }));
         var south = _.min(_.map(models, function(model) { return model.get('bbox_south'); }));
         var north = _.max(_.map(models, function(model) { return model.get('bbox_north'); }));
-        this.mapView.map.fitBounds([
+        map.fitBounds([
           [south, west],
           [north, east]
           ]);
@@ -48,7 +50,7 @@ module.exports = Backbone.View.extend({
 
     this.markers = {};
 
-    this.listenTo(this.mapView, 'bbox', function(bbox, zoom) {
+    this.listenTo(this.proxyView, 'bbox', function(bbox, zoom) {
       this.bbox = bbox;
       if (this.zoom!=zoom) {
         this.zoom = zoom;
@@ -103,6 +105,6 @@ module.exports = Backbone.View.extend({
       marker.remove();
     });
     this.markers = {};
-    this.mapView.map.removeLayer(this.layer);
+    this.proxyView.mapView.map.removeLayer(this.layer);
   }
 });

views/fine.js

@@ -6,8 +6,8 @@ var Lmarkercluster = require('leaflet-markercluster');
 module.exports = Backbone.View.extend({
   FineMarkerView: require('./fineMarker'),
   initialize: function(options) {
-    this.mapView = options.mapView;
-    this.layer = L.markerClusterGroup().addTo(this.mapView.map);
+    this.proxyView = options.proxyView;
+    this.layer = L.markerClusterGroup().addTo(this.proxyView.mapView.map);
     this.subviews = {};
     this.listenTo(this.collection, 'sync', this.render);
     this.listenTo(this.collection, 'add', this.addModel);
@@ -32,7 +32,7 @@ module.exports = Backbone.View.extend({
   },
   remove: function() {
     _.each(this.subviews, this.removeModel, this);
-    this.mapView.map.removeLayer(this.layer);
+    this.proxyView.mapView.map.removeLayer(this.layer);
   }
 });
 

views/map.js

@@ -0,0 +1,41 @@
+var Backbone =  require('backbone');
+_ = require('underscore');
+var L = require('leaflet');
+
+/* options:
+   addDefaultLayer: optional (default: true)
+   zoomTo: optional (default: 'world'), possible values:
+           undefined: no zoom,
+           'world': zoom to world bounds
+           a bbox object can also be supplied
+*/
+module.exports = Backbone.View.extend({
+  initialize: function(options) {
+    this.map = L.map(this.el);
+    options = _.extend({
+      addDefaultLayer: true,
+      zoomTo: 'world'
+    }, options);
+    // add default OpenStreetMap tile layer
+    if (options.addDefaultLayer) {
+      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(this.map);
+    }
+    // zoom
+    if (options.zoomTo=='world') {
+      this.map.fitWorld();
+    }
+    if (options.zoomTo) {
+      if (_.has(options.zoomTo, 'toLeaflet')){
+        this.map.fitBounds(options.zoom.toLeaflet());
+      }
+      if (_.isArray(options.zoomTo)) {
+        this.map.fitBounds(options.zoomTo);
+      }
+    }
+  },
+  remove: function() {
+    this.map.remove();
+  }
+});

views/proxy.js

@@ -3,17 +3,17 @@ _ = require('underscore');
 var L = require('leaflet');
 var common = require('couchmap-common');
 
+/* options:
+   mapView: mandatory, the mapView (mapView.map has to be the leaflet object)
+*/
 module.exports = Backbone.View.extend({
   initialize: function(options) {
+    this.options = options;
+    this.mapView = options.mapView;
     this.CoarseView = options.CoarseView || require('./coarse');
     this.FineView = options.FineView || require('./fine');
 
-    // create map and add OpenStreetMap tile layer
-    this.map = L.map(this.el, {center: [10, 0], zoom: 2} );
-    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-      }).addTo(this.map);
-    this.map.on('moveend', this.update_bbox, this);
+    this.mapView.map.on('moveend', this.update_bbox, this);
 
     this.listenTo(this.model, {
       'fine': this.render.bind(this, 'fine'),
@@ -22,8 +22,8 @@ module.exports = Backbone.View.extend({
     this.update_bbox();
   },
   update_bbox: function() {
-    var bbox = common.bbox(this.map.getBounds());
-    var zoom = common.validate_zoom(this.map.getZoom()+1);
+    var bbox = common.bbox(this.mapView.map.getBounds());
+    var zoom = common.validate_zoom(this.mapView.map.getZoom()+1);
     this.trigger('bbox', bbox, zoom);
     this.model.update(bbox, zoom);
   },
@@ -35,12 +35,12 @@ module.exports = Backbone.View.extend({
       }
       if (this.mode=='coarse') {
         this.subview = new this.CoarseView(_.extend(this.coarse_options || {}, {
-          mapView: this,
+          proxyView: this,
           collection: this.model.get('coarse_coll')
         }));
       } else {
         this.subview = new this.FineView(_.extend(this.fine_options || {}, {
-          mapView: this,
+          proxyView: this,
           collection: this.model.get('fine_coll')
         }));
       }