Public Lab Research note

GSoC Submission for Map of Projects

by mridulnagpal | August 23, 2017 20:04 23 Aug 20:04 | #14784 | #14784

Project proposal:

Organisation: PublicLab (

Project repo:

Commit History:

Link to all the commits I have made:

Language: Javascript

Working demo:

Project Description

In this project, I have created a Javascript library namely leaflet-blurred-location. This library allows us to blur our location instead of giving our exact co-ordinates. It adds a grid to any leaflet map marked by latitudes and longitudes. It has a parameter called precision which can be set using the blurredLocation object which defined the amount of blurring of the location. There's a current working live demo (link). One can play with all the features of the library using the blurredLocation object using the console. There is a well defined documentation of the project on its github page (link). It also has some helping functions (all defined in It will soon be released on npm.

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({  
lat: 41.01,  
lon: -85.66  

object.getLat(); //should return 41.01  
object.getLon(); //should return -85.66


Automated tests are an essential way to ensure that new changes don't break existing functionality, and can help you be confident that your code is ready to be merged in. We use Jasmine for testing:

To run tests, open /test.html in a browser. If you have phantomjs installed, you can run gruntjasminegruntjasmine to run tests on the commandline.

You can find the installation instructions for phantomjs in its official [build documentation]( For Ubuntu/debian based system you can follow [these instructions]( or use the script mentioned there.

To add new tests, edit the ⋅spec.js⋅spec.js files in /specjavascripts/specjavascripts.



Option Use Usage (Default)
location To set the initial co-ordinates of the map options.location={lat:1.0,lon:1.0}options.location={lat:1.0,lon:1.0}
zoom To set the initial zoom of the map options.z∞m=6options.z∞m=6
mapID To set the ID of the map container options.mapID='map'options.mapID='map'
pixels To set the pixel size to calculate precision options.πxels=400options.πxels=400


Option Use Usage (Default)
latId To set the input listener for latitude options.InterfaceOptions.latId='lat'options.InterfaceOptions.latId='lat'
lngId To set the input listener for longitude options.InterfaceOptions.lngId='lng'options.InterfaceOptions.lngId='lng'


Methods Use Usage (Example)
gettLat() Used to get the current latitude of the center of the map. blurredLocation.getLat() //This would return the value in numerics
gettLon() Used to get the current latitude of the center of the map blurredLocation.getLon() //This would return the value in numerics
goTo(lat,lon,zoom) 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)blurredLocation.goTo(44.51,-89.99,13) Will set center of map to (44.51,-89.99) with zoom set as 13
setBlurred(boolean) Used to enable "location blurring" to obscure the location being input. The location will be obscured to the smallest latitude/longitude grid square which the center on the map falls within
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
map Used to access the leaflet map element to perform leaflet commands on it //This would return the leaflet map element
setZoomByPrecision() Used to zoom map to the given precision. This would pan the map to adjust the specified precision. blurredLocation.setZoomByPrecision(2) // This would zoom the map so that the precision of map becomes 2


Feature Use
Geo Location Current location of the map will be reverse geocoded and the name of the location will be displayed. The extent of address depends on the precision level you currently are on. For instance for precision 0 only the country name will be provided as you zoom in precision will increase and so will the address details, such as state, city, etc.
Truncated Co-ordinates You may enter co-ordinates in the input boxes, string search or pan the map to a certain location and the co-ordinate input boxes will be truncated with the current location of the map with appropiate precision as well.
Privacy System Your exact location won't be posted, only the grid square it falls within will be shown. Zoom out to make it harder to tell exactly where your location is. Drag the map to change your location and the amount of blurring.
Get my location This will automatically track your location using the IP of your browser and pan the map to the samez



Hi @ mridulnagpal , the documentation looks good. But can you work on the formatting a bit since the markdown is broken at places ? Also include the links to any FTO issues you made. Also you can link your commits like . That will show all the contributions you made

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

@anayo2012 How does it look now. Should I make any more changes?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

@warren Does this look, okay? Also do I add Leaflet.BlurredLocationDisplay to this?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

@mridulnagpal Yes it looks good now. Can you try putting the code snippet in ``` (3 backticks ) blocks. That would make it look better.

Reply to this comment...

@ananyo2012 Done, any other changes?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

Just a last change. Put the Commit History Link just after the Project repo. Everything is fine otherwise.

Reply to this comment...

@ananyo2012 Done, cheers!! Thanks.

Reply to this comment...

@mridulnagpal You forgot to remove the one at the bottom. Sorry for neat-picking. This looks Ok now. Go ahead and complete your evaluation. You can always edit the research note afterwards.

Reply to this comment...

Sorry I missed it, thanks :)

Reply to this comment...

I submitted a PR for a bunch of revisions of the README -- mostly tidying things up, adding a few key bits of info too. Take a look and merge!

Reply to this comment...

Sorry for late reply -- yes, feel free to add the Display segment here. It was a cool last-minute addition and it's great that you're doing it!

Reply to this comment...

Login to comment.