publiclab · jywarren · Jun 16, 2017 · May 24, 2017 · May 24, 2017 · May 24, 2017
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -22,39 +22,30 @@ module.exports = function(grunt) {
 
         browserify: {
             dist: {
-                src: [
-                    'src/Leaflet.BlurredLocation.js'
-                ],
+                src: ['node_modules/jquery/dist/jquery.min.js', 'node_modules/leaflet/dist/leaflet.js', 'src/core/object.js'],
                 dest: 'dist/Leaflet.BlurredLocation.js'
             }
         },
 
-        uglify: {
-          my_target: {
-            files: {
-              'dist/Leaflet.BlurredLocation.js': ['src/location_tags.js', 'src/locationForm.js', 'main.js']
-            }
-          }
-        },
-
         jasmine: {
           src: "src/client/js/*.js",
           options: {
             specs: "spec/javascripts/*spec.js",
-            vendor: ['node_modules/jquery/dist/jquery.js','node_modules/leaflet/dist/leaflet-src.js','src/*.js','node_modules/jasmine-jquery/lib/jasmine-jquery.js'],
+            vendor: ['node_modules/jquery/dist/jquery.js','node_modules/leaflet/dist/leaflet-src.js','dist/Leaflet.BlurredLocation.js','node_modules/jasmine-jquery/lib/jasmine-jquery.js'],
           }
         },
 
         jshint: {
         all: [
             "Gruntfile.js",
-            "dsit/*.js",
+            "dist/*.js",
             "spec/**/*.js",
         ],
         options: {
           jshintrc: '.jshintrc'
         },
-}
+      },
+
 
     });
 
@@ -63,4 +54,5 @@ module.exports = function(grunt) {
         'browserify:dist'
     ]);
     grunt.registerTask('test', ['jshint', 'jasmine']);
+    grunt.registerTask('build', ['browserify']);
 };
diff --git a/README.md b/README.md
@@ -17,6 +17,7 @@ To set up the library first clone this repo to your local after that run 'npm in
 ## Creating a map object
 
 To create a new object just call the constructor 'BlurredLocation' as shown in the following example:
+(There must a div with id="map" in your html to hold the object)
 
 // this "constructs" an instance of the library:
 var object = new BlurredLocation({
@@ -43,3 +44,12 @@ To run tests, open /test.html in a browser. If you have phantomjs installed, you
 You can find the installation instructions for phantomjs in its official [build documentation](http://phantomjs.org/build.html). For Ubuntu/debian based system you can follow [these instructions](https://gist.github.com/julionc/7476620) or use the script mentioned there.
 
 To add new tests, edit the `*_spec.js` files in `/spec/javascripts/`.
+
+## Options
+
+| Methods | Use | Usage (Example)|
+|---|---|---|---|---|
+|getLat   |Used to get the current latitude of the center of the map.|  blurredLocation.getLat() //This would return the value in numerics|
+|getLon|Used to get the current latitude of the center of the map|blurredLocation.getLon() //This would return the value in numerics|
+|goTo   |Takes in three parameters, namely latitude, longitude and zoom. Will set the center of map to co-ordinates input.|blurredLocation.goTo(44.51, -89.99, 13) //Will set center of map to (44.51,-89.99) with zoom set as 13|
+|addGrid  |Used to add a virtual grid to the map| blurredLocation.addGrid() //This would add a virtual grid to the map|
diff --git a/dist/Leaflet.BlurredLocation.js b/dist/Leaflet.BlurredLocation.js
diff --git a/examples/index.html b/examples/index.html
@@ -3,36 +3,13 @@
   <head>
 
     <title>Leaflet.BlurredLocation</title>
-
-    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&language=en&key=AIzaSyDWgc7p4WWFsO3y0MTe50vF4l4NUPcPuwE"></script>
-    <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-    <!-- <link href="../dist/Leaflet.BlurredLocation.css" rel="stylesheet"> -->
-    <!-- <script src="../dist/Leaflet.BlurredLocation.js"></script> -->
   </head>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet">
+  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+  <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+  <script src="../dist/Leaflet.BlurredLocation.js"></script>
   <body>
-  <style>
-    .font-size-small {
-    font-size: 150%;
-    }
-
-    .font-size-big {
-    font-size: 200%;
-    }
-
-    .leaflet-map:after {
-    width: 22px;
-    height: 40px;
-    display: block;
-    content: ' ';
-    position: absolute;
-    top: 50%; left: 50%;
-    margin: -40px 0 0 -11px;
-    background: url('https://publiclab.org/assets/leaflet/dist/images/marker-icon.png');
-    background-size: 22px 40px;
-    pointer-events: none;
-    }
-  </style>
     <!-- START OF EXAMPLE -->
     <div class="container" >
       <div class="row" >
@@ -64,10 +41,11 @@ <h3 class="font-size-small">In Text:</h3><br/>
     </div>
     <!-- END OF EXAMPLE -->
   </body>
-  <script src="../node_modules/leaflet/dist/leaflet.js"></script>
-  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
-  <script src="../src/locationForm.js"></script>
-  <script src="../src/location_tags.js"></script>
-  <script src="../src/main.js"></script>
-  <script src="../src/object.js"></script>
+
+  <script>
+    var blurredLocation = new BlurredLocation();
+    blurredLocation.panMapToGeocodedLocation('geo_location');
+    blurredLocation.panMapWhenInputsChange('lat', 'lng');
+  </script>
 </html>
+s
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   },
   "homepage": "https://github.com/mridulnagpal/map_module#readme",
   "devDependencies": {
+    "bootstrap": "^3.3.7",
     "grunt": "^1.0.1",
     "grunt-browserify": "^5.0.0",
     "grunt-contrib-concat": "^1.0.1",
@@ -29,7 +30,9 @@
     "jasmine-ajax": "^3.3.1",
     "jasmine-jquery": "^2.1.1",
     "matchdep": "^1.0.1",
-    "phantom-jasmine": "^0.3.0"
+    "phantom-jasmine": "^0.3.0",
+    "require": "^2.4.20",
+    "resig-class": "^1.0.0"
   },
   "dependencies": {
     "jquery": "^3.2.1",

diff --git a/spec/javascripts/test_spec.js b/spec/javascripts/test_spec.js
@@ -1,15 +1,14 @@
-var map;
-
 describe("Basic testing", function() {
   "use strict";
 
   var fixture = loadFixtures('index.html');
-  map = L.map('map');
-
-  var blurredLocation = new BlurredLocation({
+  var options = {};
+  options.location = {
     lat: 41.01,
     lon: -85.66
-  });
+  };
+
+  var blurredLocation = new BlurredLocation(options);
 
   it("getLat spec", function () {
     expect(blurredLocation.getLat()).toBe(41.01);
@@ -30,7 +29,6 @@ describe("Basic testing", function() {
   it("addGrid spec", function() {
     expect(blurredLocation.hasOwnProperty("addGrid")).toBe(true);
   });
-
   // it("geocode spec", function() {
   //   var geometry = blurredLocation.geocode("Buenos Aires");
   //   console.log(blurredLocation.getLat());

diff --git a/src/core/addGrid.js b/src/core/addGrid.js
@@ -0,0 +1,142 @@
+module.exports = function addGrid(map) {
+    var map = map || document.getElementById("map") || L.map('map');
+    // 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: 64,
+            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());
+        },
+        _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;
+            };
+            getLocationFromMap(bounds.getCenter().lat, bounds.getCenter().lng);
+            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);
+                    setTimeout(this.addLayer.bind(this, L.rectangle(cell.bounds, cur_style)), this.options.delayFactor * i);
+                }.bind(this))(cell, i);
+                this._loadedCells.push(cell.id);
+            }
+        },
+        _resizeHandler: function(e) {
+            this._setupSize();
+        },
+        _setupSize: function() {
+            this._rows = Math.ceil(this._map.getSize().x / this._cellSize);
+            this._cols = Math.ceil(this._map.getSize().y / this._cellSize);
+        },
+        _setupGrid: function(bounds) {
+            this._origin = this._map.project(bounds.getNorthWest());
+            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);
+            var y = this._origin.y + (col * this._cellSize);
+            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);
+            var offsetCols = Math.round(offsetY / this._cellSize);
+            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(url, options) {
+        return new L.VirtualGrid(options);
+    };
+
+    L.virtualGrid({
+        cellSize: 64
+    }).addTo(map);
+}
diff --git a/src/location_tags.js → src/core/location_tags.js b/src/location_tags.js → src/core/location_tags.js