publiclab · jywarren · Jun 16, 2017 · May 24, 2017 · May 24, 2017 · May 24, 2017
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -54,7 +54,17 @@ module.exports = function(grunt) {
         options: {
           jshintrc: '.jshintrc'
         },
-}
+      },
+
+      concat: {
+          options: {
+            separator: ';',
+          },
+          dist: {
+            src: ['node_modules/jquery/dist/jquery.min.js', 'node_modules/leaflet/dist/leaflet.js', 'src/object.js'],
+            dest: 'dist/built.js',
+          },
+     },
 
     });
 
@@ -63,4 +73,5 @@ module.exports = function(grunt) {
         'browserify:dist'
     ]);
     grunt.registerTask('test', ['jshint', 'jasmine']);
+    grunt.registerTask('build', ['concat']);
 };
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,11 @@ 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 |
diff --git a/dist/built.js b/dist/built.js
diff --git a/examples/example.html b/examples/example.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+
+    <title>Leaflet.BlurredLocation</title>
+  </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">
+  <body>
+    <!-- START OF EXAMPLE -->
+    <div class="container" >
+      <div class="row" >
+        <div class="col-md-8">
+          <label class="h2 font-size-big"><input type="radio" />&nbsp;&nbsp;Add location to your content</label>
+          <br/><br/>
+          <h4 class="font-size-small">Option 1 : By Placename</h4>
+          </br>
+          <input id="geo_location" type="text" class="form-control"><br/>
+          <h4 class="font-size-small">Option 2 : By dragging the map</h4></br>
+          <h4 class="font-size-small">Option 3 : By giving co-ordinates</h4></br>
+          <div class="col-md-6">
+            <input id="lat" type="text" class="form-control" placeholder="Latitude"><br/>
+          </div>
+          <div class="col-md-6">
+            <input id="lng" type="text" class="form-control" placeholder="Longitude"><br/>
+          </div>
+          <label class="h2 font-size-big"><input type="checkbox" onchange='getLocation(this);'>&nbsp;&nbsp;Obscure my exact location</label>
+        </div>
+        <div class="col-md-4">
+          <h3 class="font-size-small">On a map : </h3>
+          <br />
+          <div id="map" class="leaflet-map" style="width: 400px; height: 400px;"></div>
+          <br/>
+          <h3 class="font-size-small">In Text:</h3><br/>
+          <input id="location" type="text" class="form-control"><br/>
+        </div>
+      </div>
+    </div>
+    <!-- END OF EXAMPLE -->
+  </body>
+  <script src="../dist/built.js"></script>
+
+
+<script>
+var blurredLocation = new BlurredLocation({
+  lat: 41.01,
+  lon: -85.66
+});
+</script>
+</html>
diff --git a/spec/javascripts/test_spec.js b/spec/javascripts/test_spec.js
@@ -1,10 +1,7 @@
-var map;
-
 describe("Basic testing", function() {
   "use strict";
 
   var fixture = loadFixtures('index.html');
-  map = L.map('map');
 
   var blurredLocation = new BlurredLocation({
     lat: 41.01,
@@ -27,6 +24,13 @@ describe("Basic testing", function() {
     expect(blurredLocation.getLon()).toBe(-0.09);
   });
 
+  it("getSize spec", function() {
+    var size = L.point(400,400);
+    expect(blurredLocation.getSize().equals(size)).toBe(true);
+  });
+
+
+
   // it("geocode spec", function() {
   //   var geometry = blurredLocation.geocode("Buenos Aires");
   //   console.log(blurredLocation.getLat());

diff --git a/src/object.js b/src/object.js
@@ -1,29 +1,35 @@
 function BlurredLocation(location) {
-    if(map) {
-      map.setView([location.lat, location.lon], 10);
-      this.getLat = function () {
-        return map.getCenter().lat;
-      }
-      this.getLon = function() {
-        return map.getCenter().lng;
-      }
-      this.goTo = function(lat, lon, zoom) {
-        map.setView([lat, lon], zoom);
-      }
-      this.geocode = function(string) {
-        $.ajaxSetup({async: false});
-        var url = "https://maps.googleapis.com/maps/api/geocode/json?address="+string.split(" ").join("+");
-        var temp = $.ajax({
-            async: false,
-            url: url
-        });
-        var geometry = temp.responseJSON.results[0].geometry.location;
-        var default_zoom = 13;
-        console.log(geometry.lat);
-        map.setView([geometry.lat, geometry.lng],default_zoom);
-        return geometry;
-      }
+    if(!map) {
+       var map = L.map('map');
+       L.tileLayer("https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png").addTo(map);
     }
-}
+    map.setView([location.lat, location.lon], 10);
+    this.getLat = function () {
+      return map.getCenter().lat;
+    }
+    this.getLon = function() {
+      return map.getCenter().lng;
+    }
+    this.goTo = function(lat, lon, zoom) {
+      map.setView([lat, lon], zoom);
+    }
+    this.geocode = function(string) {
+      var url = "https://maps.googleapis.com/maps/api/geocode/json?address="+string.split(" ").join("+");
+      var Blurred = $.ajax({
+          async: false,
+          url: url
+      });
+      // console.log(Object.getOwnPropertyNames(Blurred));
+      // console.log(Blurred.readyState);
 
+      var geometry = Blurred.responseJSON.results[0].geometry.location;
+      var default_zoom = 13;
+      // console.log(geometry.lat);
+      map.setView([geometry.lat, geometry.lng],default_zoom);
+      return geometry;
+    }
+    this.getSize = function() {
+      return map.getSize();
+    }
+}
 exports.BlurredLocation = BlurredLocation;