getblurryscale() undefined error resolved AND changing LBL syntax

README.md

@@ -107,13 +107,11 @@ To create a new object just call the constructor 'BlurredLocation' as shown in t
 
 ```js
 // this "constructs" an instance of the library:
-var blurredLocation = new BlurredLocation({
-  lat: 41.01,
-  lon: -85.66
-});
+var blurredLocation = new BlurredLocation();
+blurredLocation.addTo(map) ;  // var map = L.map('map').setView([23,77] , 3) ;
 
-blurredLocation.getLat(); // should return 41.01
-blurredLocation.getLon(); // should return -85.66
+blurredLocation.getLat(); // should return center of map's latitude which is currently 23 .
+blurredLocation.getLon(); // should return center of map's longitude which is currently 77 .
 ```
 
 ****
@@ -132,7 +130,6 @@ We welcome contributions, and are especially interested in welcoming [first time
 |----------------|---------------------------------------|--------------------------|
 | blurredLocation| the initial co-ordinates of the map   | `{ lat: 1.0, lon: 1.0 }` |
 | zoom           | the initial zoom of the map           | 6                        |
-| mapID          | the ID of the map container           | `'map'`                  |
 | pixels         | the pixel size to calculate precision | `400`                    |
 
 ### Interface options
@@ -156,7 +153,7 @@ We welcome contributions, and are especially interested in welcoming [first time
 | `blurredLocation.getFullLat()`   | Returns non-truncated latitude of map center, regardless of precision | `location.getFullLat()` returns decimal |
 | `blurredLocation.getFullLon()` | Returns non-truncated longitude of map center, regardless of precision | `location.getFullLon()` returns decimal |
 | `blurredLocation.getPrecision()` | Returns precision of degrees -- represented by width or height of one grid cell. Returns an integer which represents the number of decimal places occupied by one cell. For instance, a precision of 1 will mean 0.1 degrees per cell, 2 will mean 0.01 degrees, and so on | `location.getPrecision()` This would return the precision of the map at the current zoom level. |
-| `blurredLocation.getPlacenameFromCoordinates()` | Returns human-readable location name of a 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 |
+| `blurredLocation.getGeocoding().getPlacenameFromCoordinates()` | Returns human-readable location name of a 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.getGeocoding().getPlacenameFromCoordinates(43, 43, function(result) { console.log(result) }` This would return the output to the console |
 | `blurredLocation.map` | Used to access the Leaflet object | |
 | `blurredLocation.setZoomByPrecision()` | Zooms map to the given precision. | `blurredLocation.setZoomByPrecision(2)` This would zoom the map so that the precision of map becomes 2, and each grid square is `0.01` degrees wide and tall. |
 

examples/index.html

@@ -41,18 +41,18 @@ <h1>Leaflet BlurredLocation <small>| by <a href="https://publiclab.org">Public L
       <h3>Enter a location</h3>
 
       <label>
-        <input id="obscureLocation" type="checkbox" checked onchange='blurredLocation.setBlurred(document.getElementById("obscureLocation").checked);'>
+        <input id="obscureLocation" type="checkbox"  onchange='blurredLocation.setBlurred(document.getElementById("obscureLocation").checked);' checked>
         Blur my location
       </label>
 
       <p>
         <label>
-          <input id="scaleDisplay" type="checkbox" checked onchange='blurredLocation.toggleScales(blurredLocation.addScaleToListener, "scale", document.getElementById("scaleDisplay").checked);' checked>
+          <input id="scaleDisplay" type="checkbox"  onchange='blurredLocation.toggleScales(blurredLocation.addScaleToListener, "scale", document.getElementById("scaleDisplay").checked);' >
           Show scale in km
         </label>
 
         <label>
-          <input id="blurryScale" type="checkbox" checked onchange='blurredLocation.toggleScales(blurredLocation.displayBlurryScale, "blurry_scale", document.getElementById("blurryScale").checked);' checked>
+          <input id="blurryScale" type="checkbox"  onchange='blurredLocation.toggleScales(blurredLocation.displayBlurryScale, "scale_blurry", document.getElementById("blurryScale").checked);' >
           Show estimated blurry scale
         </label>
       </p>
@@ -62,7 +62,7 @@ <h3>Enter a location</h3>
       <h3>A. By auto-geocoding your location</h3>
       <p>
         <label>
-        <button class="btn btn-primary" onclick="blurredLocation.geocodeWithBrowser(true);">
+        <button class="btn btn-primary" onclick="blurredLocation.getGeocoding().geocodeWithBrowser(true);">
           <div id="ldi-geocode-button">          
             <i class="fa fa-crosshairs"></i> Find me
           </div>
@@ -91,6 +91,7 @@ <h3>D. By dragging the map</b></h3>
       <p>
         <b>Scale</b> 
         <span id="scale"></span> 
+        <br>
         <span id="scale_blurry"></span>
       </p>
 
@@ -113,23 +114,24 @@ <h3>D. By dragging the map</b></h3>
     </div>
 
     <script>
+      var map123 = L.map('map').setView([23,77] , 3) ;
 
       var options = {
+        //map: map123,
         InterfaceOptions: {
           latId: 'lat',
           lngId: 'lng'
-        },
-        AddScaleDisplay: true ,
-        AddBlurryScale: true
-      }
+        }
+      } ;
 
-      var blurredLocation = new BlurredLocation(options);
+      var blurredLocation = new BlurredLocation(options) ;
+      blurredLocation.addTo(map123) ;
 
-      blurredLocation.panMapToGeocodedLocation("placenameInput");
+      blurredLocation.getGeocoding().panMapToGeocodedLocation("placenameInput");
 
       var changeZoom = function() {
         var zoom = slider.getValue();
-        blurredLocation.map.setZoom(zoom);
+        map123.setZoom(zoom);
       }
 
       var slider = $('#ex1').slider()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-blurred-location",
-  "version": "1.2.8",
+  "version": "2.0.0",
   "description": "",
   "main": "Gruntfile.js",
   "scripts": {

spec/javascripts/fixtures/index.html

@@ -40,6 +40,8 @@ <h3 class="font-size-small">In Text:</h3><br/>
     <!-- END OF EXAMPLE -->
   </body>
   <script>
+    var map123 = L.map('map').setView([1.0,10.0] , 6) ;
     var blurredLocation = new BlurredLocation();
+    blurredLocation.addTo(map123) ;
   </script>
 </html>

spec/javascripts/test_spec.js

@@ -26,7 +26,7 @@ describe("Basic testing", function() {
   });
 
   it("Checks if blurredLocation has a property named gridSystem", function() {
-    expect(blurredLocation.hasOwnProperty("gridSystem")).toBe(true);
+    expect(blurredLocation.hasOwnProperty("getGridSystem")).toBe(true);
   });
 
   // it("Checks if cellSize changes with change in zoom", function() {

spec/javascripts/ui_spec.js

@@ -32,7 +32,7 @@ describe("UI testing", function() {
 
     var latEl = $("#lat");
     var lngEl = $("#lng");
-    blurredLocation.map.panTo(new L.LatLng(40.737, -73.923));
+    map123.panTo(new L.LatLng(40.737, -73.923));
     blurredLocation.setZoomByPrecision(2);
 
     expect(parseFloat(latEl.val())).toBe(40.73);
@@ -45,7 +45,7 @@ describe("UI testing", function() {
     var latEl = $("#lat");
     var lngEl = $("#lng");
 
-    blurredLocation.map.panTo(new L.LatLng(40.737232, -73.923232));
+    map123.panTo(new L.LatLng(40.737232, -73.923232));
     blurredLocation.setZoomByPrecision(2);    
     blurredLocation.setBlurred(false);
 

src/blurredLocation.js

@@ -13,10 +13,9 @@ BlurredLocation = function BlurredLocation(options) {
 
   options.zoom = options.zoom || 6;
 
-  options.mapID = options.mapID || 'map'
+  //options.mapID = options.mapID || 'map';
 
-  options.map = options.map || new L.Map(options.mapID,{})
-                                    .setView([options.location.lat, options.location.lon], options.zoom);
+  //options.map = options.map || new L.Map(options.mapID,{}).setView([options.location.lat, options.location.lon], options.zoom);
 
   options.pixels = options.pixels || 400;
 
@@ -27,36 +26,32 @@ BlurredLocation = function BlurredLocation(options) {
   options.Geocoding = options.Geocoding || require('./core/Geocoding.js')
 
   var gridSystemOptions = options.gridSystemOptions || {};
-  gridSystemOptions.map = options.map;
+  // gridSystemOptions.map = options.map;
   gridSystemOptions.gridWidthInPixels = gridWidthInPixels;
   gridSystemOptions.getMinimumGridWidth = getMinimumGridWidth;
 
   var GeocodingOptions = options.GeocodingOptions || {};
-  GeocodingOptions.map = options.map;
+  // GeocodingOptions.map = options.map;
   GeocodingOptions.goTo = goTo;
   GeocodingOptions.geocodeButtonId = options.geocodeButtonId || "ldi-geocode-button";
 
-  var gridSystem = options.gridSystem(gridSystemOptions);
-  var Geocoding = options.Geocoding(GeocodingOptions);
-
+  // var gridSystem = options.gridSystem(gridSystemOptions);
+  // var Geocoding = options.Geocoding(GeocodingOptions);
+  var gridSystem ;
+  var Geocoding ;
   var InterfaceOptions = options.InterfaceOptions || {};
   InterfaceOptions.panMap = panMap;
-  InterfaceOptions.getPlacenameFromCoordinates = Geocoding.getPlacenameFromCoordinates;
+  // InterfaceOptions.getPlacenameFromCoordinates = getGeocoding().getPlacenameFromCoordinates;
   InterfaceOptions.getLat = getLat;
   InterfaceOptions.getLon = getLon;
-  InterfaceOptions.map = options.map;
+  // InterfaceOptions.map = options.map;
   InterfaceOptions.getPrecision = getPrecision;
   InterfaceOptions.isBlurred = isBlurred;
   InterfaceOptions.DEFAULT_PRECISION = DEFAULT_PRECISION;
 
 
-  var Interface = options.Interface(InterfaceOptions);
-
-  var tileLayer = L.tileLayer("https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png").addTo(options.map);
-
-  options.map.options.scrollWheelZoom = "center";
-  options.map.options.touchZoom = "center";
-
+  //var Interface = options.Interface(InterfaceOptions);
+  var Interface ;
   // options.map.setView([options.location.lat, options.location.lon], options.zoom);
   options.AddScaleDisplay = options.AddScaleDisplay || false ;
   options.scaleDisplay = options.scaleDisplay || "scale";
@@ -69,6 +64,44 @@ BlurredLocation = function BlurredLocation(options) {
    "rural":["country", "county", "town", "village", "house", "house"],
  }
 
+  function addTo(map){
+    options.map = map ;
+    var tileLayer = L.tileLayer("https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png").addTo(options.map) ;
+    options.map.options.scrollWheelZoom = "center";
+    options.map.options.touchZoom = "center";
+
+
+    GeocodingOptions.map = options.map;
+    gridSystemOptions.map = options.map;
+
+    gridSystem = options.gridSystem(gridSystemOptions);
+    Geocoding = options.Geocoding(GeocodingOptions);
+
+    InterfaceOptions.map = options.map;
+    InterfaceOptions.getPlacenameFromCoordinates = getGeocoding().getPlacenameFromCoordinates;
+    Interface = options.Interface(InterfaceOptions) ;
+
+    marker = L.marker([getFullLat(), getFullLon()]);
+    updateRectangleOnPan() ;
+  }
+
+  function getInterface(){
+    return Interface ;
+  }
+
+  function getGridSystem(){
+    return gridSystem ;
+  }
+
+  function getGeocoding(){
+    return Geocoding ;
+  }
+
+  function getmap()
+  {
+    return options.map ;
+  }
+
   function getLat() {
     if(isBlurred())
       return parseFloat(truncateToPrecision(options.map.getCenter().lat, getPrecision()));
@@ -144,13 +177,13 @@ BlurredLocation = function BlurredLocation(options) {
   function setBlurred(boolean) {
 
       if(boolean && !blurred) {
-        gridSystem.addGrid();
+        getGridSystem().addGrid();
         blurred = true;
         enableCenterShade();
       }
       else if(!boolean) {
         blurred = false;
-        gridSystem.removeGrid();
+        getGridSystem().removeGrid();
       }
       updateRectangleOnPan();
   }
@@ -215,8 +248,8 @@ BlurredLocation = function BlurredLocation(options) {
     options.map.off('move',updateRectangleOnPan);
   }
 
-  var marker = L.marker([getFullLat(), getFullLon()]);
-
+  // var marker = L.marker([getFullLat(), getFullLon()]);
+  var marker ;
   function updateMarker() {
     if(marker) marker.remove();
     marker = L.marker([getFullLat(), getFullLon()]).addTo(options.map);
@@ -232,7 +265,7 @@ BlurredLocation = function BlurredLocation(options) {
     options.map.off('move',updateMarker);
   }
 
-    updateRectangleOnPan();
+    // updateRectangleOnPan();
 
   function displayLocation() {
     var lat = getLat();
@@ -259,12 +292,15 @@ BlurredLocation = function BlurredLocation(options) {
   function getBlurryScale(region) {
     var urban = options.blurryScaleNames["urban"]
     var rural = options.blurryScaleNames["rural"]
-
+    var precision = getPrecision() ;
+    if(precision<0 || precision>5){
+      precision = 0 ;
+    }
     if(region == "urban")
-      return urban[getPrecision()]
+      return urban[precision]
 
     if(region == "rural")
-      return rural[getPrecision()]
+      return rural[precision]
   }
 
   function displayBlurryScale() {
@@ -282,44 +318,43 @@ BlurredLocation = function BlurredLocation(options) {
     }
   }
 
-  toggleScales(addScaleToListener, options.scaleDisplay, options.AddScaleDisplay);
-  toggleScales(displayBlurryScale, options.blurryScale, options.AddBlurryScale);
-
   return {
     getLat: getLat,
     getLon: getLon,
     goTo: goTo,
     getSize: getSize,
-    gridSystem: gridSystem,
-    panMapToGeocodedLocation: Geocoding.panMapToGeocodedLocation,
-    getPlacenameFromCoordinates: Geocoding.getPlacenameFromCoordinates,
+    getGridSystem: getGridSystem,
+    // panMapToGeocodedLocation: getGeocoding().panMapToGeocodedLocation,
+    // getPlacenameFromCoordinates: getGeocoding().getPlacenameFromCoordinates,
     panMap: panMap,
-    panMapByBrowserGeocode: Geocoding.panMapByBrowserGeocode,
+   // panMapByBrowserGeocode: getGeocoding().panMapByBrowserGeocode,
     getMinimumGridWidth: getMinimumGridWidth,
     gridWidthInPixels: gridWidthInPixels,
     getPrecision: getPrecision,
     setZoom: setZoom,
-    Interface: Interface,
+    getInterface: getInterface,
     getFullLon: getFullLon,
     getFullLat: getFullLat,
     isBlurred: isBlurred,
     setBlurred: setBlurred,
     truncateToPrecision: truncateToPrecision,
-    map: options.map,
+    map: getmap,
     updateRectangleOnPan: updateRectangleOnPan,
     setZoomByPrecision: setZoomByPrecision,
     disableCenterShade: disableCenterShade,
     enableCenterShade: enableCenterShade,
-    geocodeStringAndPan: Geocoding.geocodeStringAndPan,
-    geocodeWithBrowser: Geocoding.geocodeWithBrowser,
+    // geocodeStringAndPan: getGeocoding().geocodeStringAndPan,
+    // geocodeWithBrowser: getGeocoding().geocodeWithBrowser,
     displayLocation: displayLocation,
     getDistanceMetrics: getDistanceMetrics,
     getBlurryScale: getBlurryScale,
     addScaleToListener: addScaleToListener,
     displayBlurryScale: displayBlurryScale,
     toggleScales: toggleScales,
     getRectangle: getRectangle,
-    getTileLayer: getTileLayer
+    getTileLayer: getTileLayer,
+    getGeocoding: getGeocoding,
+    addTo: addTo
   }
 }