Graticule integration (#52)

* Graticule integrated

* Graticule integrated

* Cellsize spec removed

* Test passing

* Colored grid

* map exposed to public API and Readme section added

* tweaks

* Library included

* Tweaks

* tweaks

* Set interval changed

Author: mridulnagpal

README.md

@@ -58,4 +58,5 @@ To add new tests, edit the `*_spec.js` files in `/spec/javascripts/`.
 |`getFullLat()`   | Used to get the full latitude of the center of the map, regardless what the precision is| `blurredLocation.getFullLat()`  This would return the full latitude value as a floating numeric|
 |`getFullLon()`   | Used to get the full longitude of the center of the map, regardless what the precision is| `blurredLocation.getFullLon()`  This would return the full longitude value as a floating numeric|
 |`getPrecision()` | Used to get the precision of degrees currently occupied by one cell of the grid. This would return an integer which represents the number of decimal places occupied by a cell. For instance, a precision of 1 will mean 0.1 degrees per cell, 2 will mean 0.01 degrees, and so on | `blurredLocation.getPrecision()` This would return the precision of the map at the current zoom level |
-| getPlacenameFromCoordinates()| Used to get the human-readable location name in text of specific latitude and longitude. This would take in 3 arguments namely latitude, longitude and a callback function which is called on success and would return address of the location pinpointed by those co-ordinates| `blurredLocation.getPlacenameFromCoordinates(43,43,function(result) {console.log(result);} // This would return the output to the console`|
+| `getPlacenameFromCoordinates()`| Used to get the human-readable location name in text of specific latitude and longitude. This would take in 3 arguments namely latitude, longitude and a callback function which is called on success and would return address of the location pinpointed by those co-ordinates| `blurredLocation.getPlacenameFromCoordinates(43,43,function(result) {console.log(result);} // This would return the output to the console`|
+|map |Used to access the leaflet map element to perform leaflet commands on it| blurredLocation.map //This would return the leaflet map element|

dist/Leaflet.BlurredLocation.js

@@ -31,7 +31,8 @@
     "jasmine-jquery": "^2.1.1",
     "matchdep": "^1.0.1",
     "require": "^2.4.20",
-    "resig-class": "^1.0.0"
+    "resig-class": "^1.0.0",
+    "leaflet-graticule": "git://github.com/jywarren/Leaflet.Graticule.git#patch-1"
   },
   "dependencies": {
     "jquery": "^3.2.1",

package.json

@@ -29,19 +29,19 @@ describe("Basic testing", function() {
     expect(blurredLocation.hasOwnProperty("gridSystem")).toBe(true);
   });
 
-  it("Checks if cellSize changes with change in zoom", function() {
-
-    blurredLocation.setZoom(13);
-
-    expect(blurredLocation.gridSystem.getCellSize().rows).toBe(58.25);
-    expect(blurredLocation.gridSystem.getCellSize().cols).toBe(94.63);
-
-    blurredLocation.setZoom(10);
-
-    expect(blurredLocation.gridSystem.getCellSize().rows).toBe(72.8);
-    expect(blurredLocation.gridSystem.getCellSize().cols).toBe(118.3);
-
-  });
+  // it("Checks if cellSize changes with change in zoom", function() {
+  //
+  //   blurredLocation.setZoom(13);
+  //
+  //   expect(blurredLocation.gridSystem.getCellSize().rows).toBe(58.25);
+  //   expect(blurredLocation.gridSystem.getCellSize().cols).toBe(94.63);
+  //
+  //   blurredLocation.setZoom(10);
+  //
+  //   expect(blurredLocation.gridSystem.getCellSize().rows).toBe(72.8);
+  //   expect(blurredLocation.gridSystem.getCellSize().cols).toBe(118.3);
+  //
+  // });
 
   it("Checks if getPrecision works and changes on zoom", function() {
     blurredLocation.goTo(blurredLocation.getLat(), blurredLocation.getLon(),13);

spec/javascripts/test_spec.js

@@ -18,11 +18,12 @@ describe("UI testing", function() {
     expect(blurredLocation.getLat()).toBe(20);
     expect(blurredLocation.getLon()).toBe(15);
 
-    lngEl.val(20);
+    latEl.val(2);
+    lngEl.val(23);
 
     latEl.change();
 
-    expect(blurredLocation.getLat()).toBe(20);
-    expect(blurredLocation.getLon()).toBe(20);
+    expect(blurredLocation.getLat()).toBe(2);
+    expect(blurredLocation.getLon()).toBe(23);
   });
 });

spec/javascripts/ui_spec.js

@@ -3,18 +3,29 @@ BlurredLocation = function BlurredLocation(options) {
   var L = require('leaflet');
   var blurredLocation = this;
   var blurred = true;
+  require('leaflet-graticule');
 
   options = options || {};
-  options.map = options.map || L.map('map');
+  options.location = options.location || {
+    lat: 41.011234567,
+    lon: -85.66123456789
+  };
+
+  options.zoom = options.zoom || 6;
+
+  options.map = options.map || new L.Map('map',{zoomControl:false}).setView([options.location.lat, options.location.lon], options.zoom);
+
   options.pixels = options.pixels || 400;
 
   options.gridSystem = options.gridSystem || require('./core/gridSystem.js');
+
   options.Interface = options.Interface || require('./ui/Interface.js');
 
   gridSystemOptions = options.gridSystemOptions || {};
   gridSystemOptions.map = options.map;
   gridSystemOptions.gridWidthInPixels = gridWidthInPixels;
   gridSystemOptions.getMinimumGridWidth = getMinimumGridWidth;
+
   gridSystem = options.gridSystem(gridSystemOptions);
 
   InterfaceOptions = options.InterfaceOptions || {};
@@ -26,15 +37,9 @@ BlurredLocation = function BlurredLocation(options) {
 
   Interface = options.Interface(InterfaceOptions);
 
-  L.tileLayer("https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png").addTo(options.map);
-
-  options.location = options.location || {
-    lat: 41.011234567,
-    lon: -85.66123456789
-  };
+  var tileLayer = L.tileLayer("https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png").addTo(options.map);
 
-  options.zoom = options.zoom || 13;
-  options.map.setView([options.location.lat, options.location.lon], options.zoom);
+  // options.map.setView([options.location.lat, options.location.lon], options.zoom);
 
   function getLat() {
     if(isBlurred())
@@ -153,7 +158,7 @@ BlurredLocation = function BlurredLocation(options) {
   }
 
   function getFullLon() {
-    return options.map.getCenter().lng;
+    return parseFloat(options.map.getCenter().lng);
   }
 
   function setBlurred(boolean) {
@@ -192,6 +197,7 @@ BlurredLocation = function BlurredLocation(options) {
     isBlurred: isBlurred,
     setBlurred: setBlurred,
     truncateToPrecision: truncateToPrecision,
+    map: options.map,
   }
 }
 

src/blurredLocation.js

@@ -2,197 +2,35 @@ module.exports = function gridSystem(options) {
 
   var map = options.map || document.getElementById("map") || L.map('map');
   options.cellSize = options.cellSize || { rows:100, cols:100 };
-  // A function to return the style of a cell
-  function create_cell_style(fill) {
-    return {
-      stroke: true,
-      color: ' #ff0000 ',
-      dashArray: null,
-      lineCap: null,
-      lineJoin: null,
-      weight: 2,
-      opacity: 1,
-      fill: fill,
-      fillColor: null, //same as color by default
-      fillOpacity: 0.5,
-      clickable: true
-    }
-  }
-
-  L.VirtualGrid = L.FeatureGroup.extend({
-    include: L.Mixin.Events,
-
-    options: {
-      cellSize: options.cellSize || { rows:100, cols:100 },
-      delayFactor: 0.5,
-    },
-
-    initialize: function(options) {
-      L.Util.setOptions(this, options);
-      L.FeatureGroup.prototype.initialize.call(this, [], options);
-    },
-
-    onAdd: function(map) {
-      L.FeatureGroup.prototype.onAdd.call(this, map);
-      this._map = map;
-      this._cells = [];
-      this._setupGrid(map.getBounds());
-
-      map.on("move", this._moveHandler, this);
-      map.on("zoomend", this._zoomHandler, this);
-      map.on("resize", this._resizeHandler, this);
-    },
-
-    onRemove: function(map) {
-      L.FeatureGroup.prototype.onRemove.call(this, map);
-      map.off("move", this._moveHandler, this);
-      map.off("zoomend", this._zoomHandler, this);
-      map.off("resize", this._resizeHandler, this);
-    },
-
-    _clearLayer: function(e) {
-      this._cells = [];
-    },
-
-    _moveHandler: function(e) {
-      this._cells = [];
-      this._renderCells(e.target.getBounds());
-    },
-
-    _zoomHandler: function(e) {
-      this.clearLayers();
-      this._renderCells(e.target.getBounds());
-
-      var pixels = options.pixels || 400;
-      var degrees = options.getMinimumGridWidth(pixels);
-      setCellSizeInDegrees(degrees.degrees);
-    },
-
-    _renderCells: function(bounds) {
-      var cells = this._cellsInBounds(bounds);
-      this.focused_cell_id = cells.length == 0 ? null : cells[0].id;
-
-      gridSquareNWCorner = function() {
-        var lat = cells[0].bounds._northEast.lat;
-        var lng = cells[0].bounds._southWest.lng;
-        var NW = { lat: lat, lng: lng }
-        return NW;
-      };
-
-      this.fire("newcells", cells);
-      for (var i = cells.length - 1; i >= 0; i--) {
-        var cell = cells[i];
-
-        var should_fill_cell = cell.id == this.focused_cell_id;
 
-        (function(cell, i) {
-          var cur_style = create_cell_style(should_fill_cell);
+  require('leaflet-graticule');
 
-          setTimeout(this.addLayer.bind(this, L.rectangle(cell.bounds, cur_style)), this.options.delayFactor * i);
+  options.graticuleOptions = options.graticuleOptions || {
+                 showLabel: true,
+                 zoomInterval: [
+                    {start: 2, end: 2, interval: 40},
+                    {start: 3, end: 3, interval: 20},
+                    {start: 4, end: 4, interval: 10},
+                    {start: 5, end: 7, interval: 5},
+                    {start: 8, end: 20, interval: 1}
+                  ],
+                 opacity: 1,
+                 color: '#ff0000',
+             }
 
-        }.bind(this))(cell, i);
 
-        this._loadedCells.push(cell.id);
-      }
-    },
+  var layer = L.latlngGraticule(options.graticuleOptions).addTo(map);
 
-    _resizeHandler: function(e) {
-      this._setupSize();
-    },
-
-    _setupSize: function() {
-      this._rows = Math.ceil(this._map.getSize().x / this._cellSize.rows);
-      this._cols = Math.ceil(this._map.getSize().y / this._cellSize.cols);
-    },
-
-    _setupGrid: function(bounds) {
-      this._origin = this._map.project(L.latLng(0,0));
-      this._cellSize = this.options.cellSize;
-      this._setupSize();
-      this._loadedCells = [];
-      this.clearLayers();
-      this._renderCells(bounds);
-    },
-
-    _cellPoint: function(row, col) {
-      var x = this._origin.x + (row * this._cellSize.rows);
-      var y = this._origin.y + (col * this._cellSize.cols);
-      return new L.Point(x, y);
-    },
-
-    _cellExtent: function(row, col) {
-      var swPoint = this._cellPoint(row, col);
-      var nePoint = this._cellPoint(row - 1, col - 1);
-      var sw = this._map.unproject(swPoint);
-      var ne = this._map.unproject(nePoint);
-      return new L.LatLngBounds(ne, sw);
-    },
-
-    _cellsInBounds: function(bounds) {
-      var offset = this._map.project(bounds.getNorthWest());
-      var center = bounds.getCenter();
-      var offsetX = this._origin.x - offset.x;
-      var offsetY = this._origin.y - offset.y;
-      var offsetRows = Math.round(offsetX / this._cellSize.rows);
-      var offsetCols = Math.round(offsetY / this._cellSize.cols);
-      var cells = [];
-      for (var i = 0; i <= this._rows; i++) {
-        for (var j = 0; j <= this._cols; j++) {
-          var row = i - offsetRows;
-          var col = j - offsetCols;
-          var cellBounds = this._cellExtent(row, col);
-          var cellId = row + ":" + col;
-          cells.push({
-            id: cellId,
-            bounds: cellBounds,
-            distance: cellBounds.getCenter().distanceTo(center),
-          });
-        }
-      }
-      cells.sort(function(a, b) {
-        return a.distance - b.distance;
-      });
-      return cells;
-    }
-  });
-
-  L.virtualGrid = function(options, url) {
-    return new L.VirtualGrid(options);
-  };
-
-  var layer = L.virtualGrid({
-                cellSize: { rows:100, cols:100 }
-              }).addTo(map);
-
-  function setCellSizeInDegrees(degrees) {
-
-    layer.remove();
-    var pixels = options.gridWidthInPixels(1);
-    var div = 1/degrees;
-    options.cellSize = { rows:pixels.x/div, cols:pixels.y/div};
-    layer = L.virtualGrid({
-          cellSize: options.cellSize
-        }).addTo(map);
-  }
-
-  function getCellSize() {
-    return options.cellSize;
+  function addGrid() {
+     layer = L.latlngGraticule(options.graticuleOptions).addTo(map);
   }
 
   function removeGrid() {
-    layer.remove();
-  }
-
-  function addGrid() {
-    layer = L.virtualGrid({
-              cellSize: options.cellSize
-            }).addTo(map);
+  layer.remove();
   }
 
   return {
-    setCellSizeInDegrees: setCellSizeInDegrees,
-    getCellSize: getCellSize,
     removeGrid: removeGrid,
-    addGrid: addGrid
+    addGrid: addGrid,
   }
 }