Giter VIP home page Giter VIP logo

leaflet-blurred-location's People

Contributors

akshatm147 avatar aliciapaz avatar amitsin6h avatar brissettdwayne avatar bubblemelon avatar cesswairimu avatar dependabot-preview[bot] avatar dependabot[bot] avatar faithngetich avatar fers490 avatar i-am-g2 avatar jywarren avatar mdquigley avatar mridulnagpal avatar nikshiko avatar nstjean avatar rexagod avatar ryanscovill avatar sagarpreet-chadha avatar vladimirmikulic avatar vsk4 avatar warborn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

leaflet-blurred-location's Issues

Ensure addGrid.js code is drawing a grid to a decimal precision

The grid seems to have a statically set size of 64 -- https://github.com/publiclab/leaflet-blurred-location/blob/master/src/core/addGrid.js#L24

But it should be drawing a grid that's based on a precision of latitude/longitude, so, for example grid lines on:

44.001, 44.002, 44.003, 44.004

Am i misunderstanding the code, and this is actually the case?

__________________________________________
|72.0,44.3           |72.0,44.4           |
|                    |                    |
|                    |                    |
|                    |                    |
-------------------------------------------
|72.1,44.3           |72.1,44.4           |
|                    |                    |
|                    |                    |
|                    |                    |
-------------------------------------------

Add explanation of relation of zoom level to precision

Ultimately, this library will show a grid on a map, that displays squares of a precision -- so, at one zoom level, it might be latitudes of:

35.01, 35.02, 35.03, 35.04

Like this:

__________________________________________
|72.0,44.3           |72.0,44.4           |
|                    |                    |
|                    |                    |
|                    |                    |
-------------------------------------------
|72.1,44.3           |72.1,44.4           |
|                    |                    |
|                    |                    |
|                    |                    |
-------------------------------------------

Let's use this graphic and also figure out exactly what the precision of latitude/longitude corresponds to each zoom level. Then add this to the README to explain exactly what's going on in a clear way:

(this isn't correct, but to show how we should explain it)

Zoom level 10 will result in a grid with 0.01 spacing
Zoom level 11 -- twice as zoomed in -- will result in a grid with 0.001 spacing
Zoom level 12 will still show 0.001 spacing
Zoom level 13 will start to show 0.0001 spacing

move input listeners into separate UI section of code

The code for #23 and #25 is really just the interface, not the core functionality of the library. We should move it into a submodule called Interface.js and require it into BlurredLocation.Interface to keep our code better separated and organized.

add getPlacename() method to public API

We shoudl be able to get a string description of the placename, and I believe this already exists -- let's document it in the README and expose it in the public API if it's not already.

Source indentation and README table fix

Small followup issues, one from the PR i just closed and the other is that the README table is looking broken -- probably just needs some formatting help.

Add +/- zoom buttons to Leaflet map

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

The problem

The map as it is now is hard to zoom around in on some interfaces (i.e. trackpad) , so let's add some zoom buttons, like on this Leaflet example:

http://leafletjs.com/examples/quick-start/

That example also says zoom controls should be on by default. Not sure why they aren't in this map!

Solution

Ah, so we have to remove the {zoomControl: false} part of this line:

https://github.com/publiclab/leaflet-blurred-location/blob/master/src/blurredLocation.js#L17

options.map = options.map || new L.Map(options.mapID, { zoomControl: false }).setView([options.location.lat, options.location.lon], options.zoom);

I think we can just replace {zoomControl: false} with {}.

Steps to Fix

  • claim this issue with a comment here, below, and ask any clarifying questions you need
  • set up a repository locally following the README instructions, and make sure that all tests pass
  • try to fix the issue following the steps above, but even before you're done, you can:
  • commit your changes and start a pull request (see contributing to Public Lab software) but mark it as "in progress" if you have questions or if you haven't finished
  • alert someone via the developers list (see below) to have your pull request merged. This may take a few extra steps depending on when you do it, but we'll help you out!

Please email the developers list (see https://publiclab.org/wiki/developers) or go to the chatroom if you have questions, and take a look at our first-timers landing page for more information!

Add a getPrecision() method showing # of decimals current grid is showing

So if the grid drawn is to 44.001 precision, .getPrecision() would return 3. This should have a test written to it -- zoom the map with a Leaflet command, and check that the precision has changed!

It can be calculated based on the zoom level of the map, and should match the grid drawn by the Grid system (detailed in #18).

As the map is zoomed in and out, the precision will change (as shown in the displayed grid).

Integrating add grid to BlurredLocation object

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

The Problem

We need to integrate a file of code to an object, to avoid including it in our html pages. We are creating an object which you will find here https://github.com/publiclab/leaflet-blurred-location/blob/master/src/object.js. We need to add a new method to this object which would add a grid to the existing map.

Solution

At first set up the repo and test the repo using https://github.com/publiclab/leaflet-blurred-location/blob/master/examples/index.html. Now you need to take the method from https://github.com/publiclab/leaflet-blurred-location/blob/master/src/locationForm.js named addGrid and make it a method of the object we will be creating here https://github.com/publiclab/leaflet-blurred-location/blob/master/src/object.js.

It will be something like adding
this.addGrid = function(map) { // All the stuff from locationForm.js }

Steps to fix

  • claim this issue with a comment here, below, and ask any clarifying questions you need
  • set up a repository locally following the README instructions, and make sure that all tests pass
  • try to fix the issue following the steps above, but even before you're done, you can:
  • commit your changes and start a pull request (see contributing to Public Lab software) but mark it as "in progress" if you have questions or if you haven't finished
  • alert someone via the developers list (see below) to have your pull request merged. This may take a few extra steps depending on when you do it, but we'll help you out!

re-calculate coordinates when changing isBlurred

In the demo, when you click the checkboxes to turn blurring on and off, it doesn't trigger a recalculation of the coordinates: https://publiclab.github.io/leaflet-blurred-location/examples/

That's bad because if someone checked "blur my location" then immediately saved the location, it wouldn't be blurred!

We should trigger recalculation here:

https://github.com/publiclab/leaflet-blurred-location/blob/master/src/blurredLocation.js#L201

Probably by triggering updateRectangleOnPan():

https://github.com/publiclab/leaflet-blurred-location/blob/master/src/blurredLocation.js#L232

add setZoomByPrecision() method

Precision is set by zoom, so to set precision, we can just zoom to a specific level for now.

But soon, a setZoomByPrecision() method would be great, so you could go to a precision you intend.

Test that .getLat() and .getLon() change after map.setView()

Let's add a test that ensures that the methods .getLat() and .getLon() change after the Leaflet map is interacted with. We can simulate this in tests with map.setView([lat, lon], zoom):

map.setView([51.505, -0.09], 13);
blurredLocation.getLat() == 51.505;

Later, we should ensure that it returns that value, but truncated to the current precision/zoom level, so:

var object = new basic.BlurredLocation({
  lat: 41.01,
  lon: -85.66
});
blurredLocation.getLat() == 41.01;
map.setView([51.505532, -0.092362]);
expect(blurredLocation.getLat()).toBe(51.50);

In general, testing could use a lot of Leaflet features: http://leafletjs.com/examples/quick-start/

(this can be broken out into a separate issue)

clarify correlation between zoom, precision, + human-readable placename in docs

We should clarify the exact correlation between zoom and precision and human-readable placename.

See how in the README, we walk through the relationship between precision and decimal places and zoom level; we could do the same (with a table of what precisions relate to what human readable location "scales" like city, state, country) for this.

We should probably start by making a table which lays out the available human readable place names, so we can propose appropriate precision values for each.

So something like:

Zoom level Lat/lon coordinate precision Human-readable placename
0 x0.0 planet
5 x0.0 state, province, country
6 x.0 state, province, region
10 0.x city, postal code
13 0.0x neighborhood
16 0.00x block
Zoom level | Lat/lon coordinate precision | Human-readable placename
--|----|---
0 | `x0.0` | planet
5 | `x0.0` | state, province, country
6 | `x.0` | state, province, region
10 | `0.x` | city, postal code
13 | `0.0x` | neighborhood
16 | `0.00x` | block

truncate unblurred lat/lon to reasonable precision

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

The problem

Currently we get 16 places of precision in latitude and longitude -- like 89.0023587573869784 -- which is FAR beyond any reasonable precision. We should return something more reasonable;

~110,000 meters = 1 degree at the equator, so latitude of 1.000000 (six places) has precision of a meter. GPS is very rarely that precise, but six places seems much more reasonable than 16.

Solution

We could make that adjustment here: https://github.com/publiclab/leaflet-blurred-location/blob/master/src/blurredLocation.js#L54

and here: https://github.com/publiclab/leaflet-blurred-location/blob/master/src/blurredLocation.js#L61

using the same truncation as when isBlurred is true, but just to 6 places.

Steps to Fix

  • claim this issue with a comment here, below, and ask any clarifying questions you need
  • set up a repository locally following the README instructions, and make sure that all tests pass
  • try to fix the issue following the steps above, but even before you're done, you can:
  • commit your changes and start a pull request (see contributing to Public Lab software) but mark it as "in progress" if you have questions or if you haven't finished
  • alert someone via the developers list (see below) to have your pull request merged. This may take a few extra steps depending on when you do it, but we'll help you out!

Please email the developers list (see https://publiclab.org/wiki/developers) or go to the chatroom if you have questions, and take a look at our first-timers landing page for more information!

Uncaught Error: Invalid LatLng object: (NaN, NaN) when zooming out

I see this error at https://publiclab.org/locations/form when i start zooming the map. @mridulnagpal - any idea why?

VM4334:532 Uncaught Error: Invalid LatLng object: (NaN, NaN)
    at M (eval at <anonymous> (jquery.js?body=1:339), <anonymous>:532:2603)
    at C (eval at <anonymous> (jquery.js?body=1:339), <anonymous>:532:2823)
    at T.extend (eval at <anonymous> (jquery.js?body=1:339), <anonymous>:532:20013)
    at T (eval at <anonymous> (jquery.js?body=1:339), <anonymous>:532:2493)
    at z (eval at <anonymous> (jquery.js?body=1:339), <anonymous>:532:2546)
    at e._boundsToLatLngs (eval at <anonymous> (jquery.js?body=1:339), <anonymous>:532:122265)
    at e.initialize (eval at <anonymous> (jquery.js?body=1:339), <anonymous>:532:122131)
    at new e (eval at <anonymous> (jquery.js?body=1:339), <anonymous>:532:14439)
    at Object.t.rectangle (eval at <anonymous> (jquery.js?body=1:339), <anonymous>:532:136921)
    at drawCenterRectangle (eval at <anonymous> (jquery.js?body=1:339), <anonymous>:751:19)

Be careful not to use variable name "location" -- it's a reserved word in JavaScript

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

The problem

We will need to change the README to avoid using location as that will change the URL of the page and direct the browser to load a different URL.

Solution

We need to change any instance of using simply location to blurredLocation in the README file, which is here:

https://github.com/publiclab/leaflet-blurred-location/blob/master/README.md

Thanks!

Steps to Fix

  • claim this issue with a comment here, below, and ask any clarifying questions you need
  • set up a repository locally following the README instructions, and make sure that all tests pass
  • try to fix the issue following the steps above, but even before you're done, you can:
  • commit your changes and start a pull request (see contributing to Public Lab software) but mark it as "in progress" if you have questions or if you haven't finished
  • alert someone via the developers list (see below) to have your pull request merged. This may take a few extra steps depending on when you do it, but we'll help you out!

Please email the developers list (see https://publiclab.org/wiki/developers) or go to the chatroom if you have questions, and take a look at our first-timers landing page for more information!

Disable scroll panning -- scroll wheel should only zoom, not pan

This caused some confusion in tests with a friend of mine -- when using trackpad pinch or scroll gestures, it recenters the map and makes it really easy to lose your location when you zoom out too far and then back in using a pinch gesture.

But regular panning with drag should still work. This is a bit weird but I think it'll make it more usable. We can search for "Disable Leaflet pinch to pan" or "Lock location while pinch zooming" and such to see if this is a configurable option of Leaflet maps.

Another way to put this is that pinch-zooming or scroll-zooming should treat the center of the map as the point to zoom upon, not the position of the gesture (or the mouse).

Add explanatory text

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. Read more about this privacy system

Also by the map, we shoudl show:

Drag the map to change your location and the amount of blurring.

BlurredLocationDisplay

I've been thinking, and I wanted to propose a change to the final stage of your work, if you're interested and you agree.

We had discussed integrating this with PublicLab.org, but instead of working on that, I was thinking that it could be better to provide a new (fairly big) feature which would make it easier to use this on PublicLab.org, and to defer the integration steps for now.

Once people enter a lot of blurred locations, we will need a way to display them, but as grid squares, you know? Like, let's say 20 people enter locations at varying levels of precision. How do we display them? Showing a marker at the "blurred" location is kind of misleading. Better, perhaps, to:

  1. have a separate library or a feature of this library that can display a bunch of blurred locations on a Leaflet map
  2. have it display a Graticule, and shade grid squares that contain one or more blurredLocation
  3. when you click on a grid square containing blurred locations (i.e. grid square 40.01, 80.01 would include 40.015, 80.016 and 40.01065, 80.010632), display a popup with a list of those locations that fall within the grid square
  4. either don't display a 40.01 blurred location if your zoom level is currently to precision 0.001 (that is, more zoomed in) or, show that location for /all/ grid squares that overlap with the blurred location of lower precision (so, that location would show up multiple times)

This is a bit complex to think through, but I think implementation could actually be pretty easy. You could, for example, do (although this seems a bit messy):

// this "constructs" an instance of the library at a center point:
var location = new BlurredLocation({
  lat: 41.01,
  lon: -85.66
});
location.mode('display'); // disable the location input mode; alternatively something like location.hideInput();
location.displayList([
  [35.35, 39.26, "Popup Text"],
  [35.35, 39.26, "Popup Text"]
]);

Something like that. You could try to follow syntax in http://leafletjs.com/examples/quick-start/, more or less.

What do you think about this? I know it's a bit change to the end of the project, but I realized a means to display a map will be important to being able to use this library.

Add onSubmit handlers to lat/lon inputs on example

Make it so that when you enter a latitude in the latitude input and press return, it runs blurredLocation.setLat(latitude) which runs blurredLocation.panMap().

I noticed a bug also where panMap calls map.panTo() but that needs to be options.map.panTo().

Truncate placename if isBlurred == true

this one is harder -- because it's difficult to semantically determine what to display as text for a highly blurred location.

My suggestion is that we come up with some kind of manual mapping, like:

1: country
0.1: state/province
0.01: city
0.001: city

maybe we look at what different fields the geocoder returns, and assign a zoom range for each, kind of like how we did for the zoom levels and precisions?

We may want to decide for example that the text description never gets better than "city" -- and we'll want to test this out by looking at a lot of places to be sure the text description doesn't give away more than the blurred coordinates.

Does this make sense?

I think we'll need a getBlurredPlacename() method to perform this work.

Begin compiling source files together using Browserify

Does this make sense as a request? See how in the demo, you still need to include src/location_tags.js and each other source file? The ideal is that we would be able to use Browserify and then you can link your separate source files together using require('sourcefile.js') -- and then we'd only need to include a single file in the HTML.

I suggested a step here that would need Browserify to be working in order to be possible: https://github.com/publiclab/leaflet-blurred-location/pull/8/files#r120509041

Maybe @aspriya and @ryzokuken and you could talk a bit about how this works in their libraries.

@aspriya is already using Browserify in https://github.com/publiclab/inline-markdown-editor#contributing -- see how it has docs as follows (which we should replicate into this repository too):

Make changes to the files in the /src/ directory, then run grunt build to compile into /dist/inlineMarkdownEditor.js. This will use grunt-browserify to concatenate and include any node modules named in require() statements. You'll then be able to try it out in /examples/index.html. Run grunt and leave it running to build as you go.

This is already set up in your Gruntfile, see: https://github.com/publiclab/leaflet-blurred-location/blob/master/Gruntfile.js

But it looks like your /dist/Leaflet.BlurredLocation.js is not compiling properly.

Actually the tests should be running against the compiled code, not the source code; see how in this repository it's pointed at the source code (/src/*.js):

https://github.com/publiclab/leaflet-blurred-location/blob/master/Gruntfile.js#L41

But in inline-markdown-editor, it's pointed at dist/*.js:

https://github.com/publiclab/inline-markdown-editor/blob/master/Gruntfile.js#L36

Just needs some tweaks to address these issues and you'll be good to start using require() statements!

Begin to name the specs with descriptions of their intended purpose

The method names are supposed to be descriptive, but we should also use the longer descriptions of each spec to spell out in more detail what the expected behavior is.

https://github.com/publiclab/leaflet-blurred-location/blob/master/spec/javascripts/test_spec.js#L30

This also helps us because if the description is too long, we probably should break the method into two, so it does only one thing. Another reason tests are helpful!

Map should show marker, not rectangle, when blurring is off

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

The problem

When you disable blurring, it should just show a single marker pegged to the center of the view frame, indicating the exact (unblurred) location.

Right now it hides the grid but continues showing a square:

screenshot 2017-09-29 at 10 26 57 am

Solution

This is managed in setBlurred(): https://github.com/publiclab/leaflet-blurred-location/blob/master/src/blurredLocation.js#L199-L208

I think updateRectangleOnPan() should be changed to not draw a rectangle if isBlurred is false.

Instead, it should ensure that a single marker is displayed, pegged to the center. Here's some sample code that may be a starting point: https://stackoverflow.com/questions/46004250/central-leaflet-marker-always-when-map-moves

Another way to solve this might be to actually display the Leaflet icon in HTML outside the map, and absolute-positioned. This could cause trouble if you resize the map (when the absolute positioning would have to change), but is worth considering and wouldn't have any "lag" from having to move the center point marker every time you drag.

Steps to Fix

  • claim this issue with a comment here, below, and ask any clarifying questions you need
  • set up a repository locally following the README instructions, and make sure that all tests pass
  • try to fix the issue following the steps above, but even before you're done, you can:
  • commit your changes and start a pull request (see contributing to Public Lab software) but mark it as "in progress" if you have questions or if you haven't finished
  • alert someone via the developers list (see below) to have your pull request merged. This may take a few extra steps depending on when you do it, but we'll help you out!

Please email the developers list (see https://publiclab.org/wiki/developers) or go to the chatroom if you have questions, and take a look at our first-timers landing page for more information!

Planning overview

OK, just starting out here, feel free to edit/adapt this! Each of these could become a milestone with issues, perhaps?

Basically, in this new repository, the library should be exposed via a "constructor", like:

 // this "constructs" an instance of the library:
var location = new BlurredLocation({
  lat: 41.01,
  lon: -85.66
});

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

Setup phase

  1. Create separate library at https://github.com/publiclab/leaflet-blurred-location
  2. maybe assign https://github.com/mridulnagpal/leaflet-blurred-location to be derived from publiclab fork, so we can open pull requests against this more easily?
  3. Move any relevant issues to the blurred-location repository from publiclab/plots2#1070
  4. Get demo running in separate repo, with simple HTML template and constructor like var location = new BlurredLocation(options);
  5. Write minimal “setup” docs in README, show what options can be, or are required, if any, point at the example HTML and setup code, show constructor usage
  6. (#22) document relationship between zoom levels and precision in docs, using ideas from http://leafletjs.com/examples/zoom-levels/
  7. release on Bower and NPM -- @jywarren will do this
  8. Get this running on plots2 via bower include and version ~0.0.1 at https://publiclab.org/locations/form

Interface phase

  1. initial "location entry" interface without privacy, via first release of #1
    • this could include a "simple location entry" example at examples/simple.html which starts without the grid and has no checkbox to turn on blurring -- just a "normal" location input.
  2. test for above - described in #5
  3. Display latitude/longitude using location.getLat() and location.getFullLat()
  4. Create method for location.goTo(lat, lon, [zoom])
  5. Display both short and full length coordinates as you drag, below the map box
  6. Adapt text-based search to use location.geocode(string)
  7. develop a button (in example) which fetches lat & lon and submits an example method like alert(lat + ',' + lon)

Interface phase 2

  1. Debug “shaded” square - drift, double
  2. Debug box transparency
  3. Debug text-based search
  4. Check against #2 mockup

Write tests

  1. Test location.goTo()
  2. Test location.geocode() with test string like “Buenos Aires”
  3. Test location.getLat() and getLon()
  4. Test that location.getFullLat() is longer than location.getLat() etc
  5. Test location.getPrecision()
  6. Test location.setPrecision() (this might be run as you zoom the Leaflet map in and out, and/or you could make the map zoom by running this)

Now once we have clearly tested behaviors we can rely upon, we can move on to integration, using those very standardized methods!

Integration phase

  1. open new issue on https://github.com/publiclab/plots2 with integration steps
  2. Get form to appear in a modal on standard addLocation() call http://getbootstrap.com/javascript/#modals
  3. Get form to use addTag interface
  4. Get form to add location:blurred tag
  5. Restructure UserTags to be more like Tags, so we can send it lat:___ & lon:____ tags, just like a node (captured in publiclab/plots2#1417)
  6. Remove LocationTags code
  7. Develop JSON API (with @david-days) for querying people or nodes by lat/lon bounding box, like: /api/geo/41.0/-61.5 (to get a 1x1 degree bounding box?)
  8. Connect map display in Inline Maps up to the JSON API https://publiclab.org/wiki/inline-maps
  9. Get inline maps to refresh on drag or zoom using new API
  10. Display success/failure message "Your location was saved." and offer refresh or display an indication that the content is geolocated

Optional

  1. Reverse geocode while you drag - display textual location like "Buffalo, NY" when you pan the map over that city, using this code
  2. Consider a way to quantify how blurry your location is — in meters/kilometers?
  3. offer to use the geolocation API to find where you are now
  4. get listed on http://leafletjs.com/plugins.html (submitted Leaflet/Leaflet#6015)

Delay for now

Some features, in discussion with @steviepubliclab and @ebarry, are not as urgent, and we’d like to de-emphasize them in favor of getting the above systems running faster.

  • Adding external information such as gear required, organizers, etc. to any event notes' map.
  • Location subscriptions/notifications

maintain marker/rectangle location on map center while dragging

...not just when you release.

I did some testing with a friend and observed a few UI issues we could improve on. This is one.

My friend wanted to drag the marker, not the map. I think this will make it more clear that the marker is "locked" always to the center.

Interface design reference

Copied over from @ebarry's comment at publiclab/plots2#650

locationinterface

  • when dragging the map, the highlighted box should change while you drag. The crosshairs stay fixed in the middle.
  • The highlighted box should be red (or hot pink, something bright).
  • We must provide two ways -- text and map -- to input as well as to display location. That's why my gif shows "This is what others will see" for both text and map display, for either way of inputting location. When we are displaying content, we may choose to ether print the location in text, or to show the entire map. We still need to think through when we'd choose which format.

Change getPlacenameFromCoordinates() to be asynchronous and use a callback handler

getPlacenameFromCoordinates() is not working because it makes an AJAX call and that runs asynchronously:

  function getPlacenameFromCoordinates(lat, lng) {
    var loc = "Location not found";

    $.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng, function(data) {
      if (data.results[0]) {
        loc = data.results[0].formatted_address;
      }
    });
    return loc;
  }

https://github.com/publiclab/leaflet-blurred-location/blob/master/src/core/object.js#L78-L87

At the time it wants to return loc the response hasn't come back yet. So we need to pass it a function to be run on completion, and you can tell it what to do with the location string there:

getPlacenameFromCoordinates(lat, lon, callback)

the callback can be anything, even alert() -- so:

getPlacenameFromCoordinates(10, 40, alert) would pop up an alert with the result.

bounding boxes wrong when precision is 10x

As shown in this screenshot, when you zoom out so that the grid squares are 10x10 degrees, the bounding area gets drawn incorrectly:

screenshot 2017-11-06 at 11 47 56 am

To reproduce, zoom out from the default view in the demo.

https://publiclab.github.io/leaflet-blurred-location/examples/

The code driving this is here:

https://github.com/publiclab/leaflet-blurred-location/blob/master/src/blurredLocation.js#L219-L230

The behavior at >1.0 precision is a bit odd, since we display latitudes/longitudes rounded to the nearest 10, and this happens on the left side of the decimal. It's not a common use, probably, since that's a huge area to mark a location for, but we should still fix it -- the bounding box should fill the entire center grid rectangle.

highlight center grid square using Graticule plugin

Corresponding to the current output of getLat/getLon (these coodriates would be the north west corner of the text.

This could possibly involve some extending of the Graticule plugin, we'll have to look at the best way to do this.

Or if that's too complex, we could just draw the shaded rectangle over the Graticule grid.

Developing a button to display current latitude and longitude the current position of map is pointing to

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!
blu
If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

The Problem

We have an API available to get the current lat and lon of the map. What we need to do is create a button for template here https://github.com/publiclab/leaflet-blurred-location/blob/master/examples/example.html which will be available as soon as #7 is merged.

Solution

In the file example.html we need to add a button which when clicked alerts us with the lat, lon. The API reference is blurredLocation.getLat() and blurredLocation.getLon() which would return the lat and lon respectively. blurredLocation is a Global object which controls the map. You need to get those co-ordinates from the API using blurredLocation.getLat() and blurredLocation.getLon(). And then display them to the user. It will be something like this in the example.html file.
<button onclick="displayLocation()">Location</button>

And adding the function to object.js file

function displayLocation() { if(blurredLocation) { var lat = blurredLocation.getLat(); var lon = blurredLocation.getLon(); alert(lat+','+lon); } }

Remember as soon as you make changes in object.js either run grunt build or have grunt watch running while you save changes, to test them.

Steps to fix

  • claim this issue with a comment here, below, and ask any clarifying questions you need
  • set up a repository locally following the README instructions, and make sure that all tests pass
  • try to fix the issue following the steps above, but even before you're done, you can:
  • commit your changes and start a pull request (see contributing to Public Lab software) but mark it as "in progress" if you have questions or if you haven't finished
  • alert someone via the developers list (see below) to have your pull request merged. This may take a few extra steps depending on when you do it, but we'll help you out!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.