Adding features to leaflet blurred location display (needs breaking up into separate issues)

[mridulnagpal]

@jywarren Shall we extend this as well. Can you create some issues, I would love to work on this!!

[jywarren]

Yes, let's do! Are there some we can copy over from the big planning issue in leaflet-blurred-location? I have one: add the ability to re-center the map via a geocoding search field. It could be almost identical to the input system, but just recenter the map of displayed locations. Make sense? Also 2b on this has a lot: publiclab/plots2#1416

…

On Sat, Mar 3, 2018 at 12:10 AM, Mridul Nagpal ***@***.***> wrote: @jywarren <https://github.com/jywarren> Shall we extend this as well. Can you create some issues, I would love to work on this!! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJwj_0s7NWrc4Rz1NFudQjAhuu2Ktks5taiXHgaJpZM4SayPc> .

[mridulnagpal]

@jywarren Can you give an example?

[jywarren]

Sure! Basically imagine using this library over at http://publiclab.org/people -- and imagine you want to enter Kenya and see mostly people around Kenya. There could be a search text input to type "kenya" and just like in the location input form for adding to your profile, it could autocomplete and show suggestions like "Nairobi, Kenya" for example. If you clicked that, it'd recenter the map and zoom in on Nairobi.

Make sense? Thanks!!!

[mridulnagpal]

Isn't something like this already being done in leaflet blurred location?

[mridulnagpal]

@jywarren Can you give a code example?

[jywarren]

^ yes, it is very similar, except that we are doing this where we are displaying a list of locations, rather than inputting a location.

@sagarpreet-chadha is working on a similar feature and perhaps this could be approached collaboratively: publiclab/plots2#2585

We want this feature both for display of blurred locations, and for general maps on PublicLab.org, so can you two discuss where you think it best to implement it so it appears in both? If it's pretty simple code we can just include it in multiple places, but let's think through the advantages of where we could implement this cleanly. Thanks!!

[sagarpreet-chadha]

Hi @mridulnagpal !

I think we have various maps (including inline maps) on our website , so i think lets create a new library or may be use this library to create a library such that we can display all maps using this library only AND each map having its own unique feature like :

• /people map with SEARCH + Recent Contributors ,
• /profile with FULL Screen And Near-by Users maybe ,
• a new-layer map with all options to choose different layer ( #2486 ) ,
• etc..

Basically making all different features in a library and giving the developer/end-user the options to use any combination of these features . Makes sense ?

What do you think ?

[mridulnagpal]

@jywarren Let's continue with this, shall we?

[mridulnagpal]

@jywarren Any views?

[jywarren]

Sorry Mridul! Been traveling (again!). Looking over this now.

[jywarren]

So, the basic function is:

to display a collection of blurred locations (generated for example with Leaflet.BlurredLocation) at varying zoom levels.

When zooming to higher zoom levels, blurrier locations will not be shown, if they are not at a high enough precision to be useful. For example:

When zoomed in to level _____, locations with 0.000 or better precision will be shown.

But when zooming further to level ____, locations with 0.0000 may be hidden, since they may likely fall outside the viewport.

(reference https://github.com/publiclab/leaflet-blurred-location/issues/98)

I like what @sagarpreet-chadha is suggesting -- i think the ability to search the map is key.

[jywarren]

So does this make sense? That in this library, as you zoom in, some locations appear only within some zoom levels, that are close to the precision they were entered in? If they have lots of precision, they might appear in many zoom levels, but if they are very imprecise (highly blurred), they would be hidden once you zoom in too far.

We could write a test to check for this -- so it would start the map up, go to a certain zoom level, and check what's visible, then zoom in further and check again, for 3 or 4 zoom levels. Then we could write the functions of this library to ensure that the markers are properly displayed for those given zoom levels.

@sagarpreet-chadha and @stefannibrasil and @milaaraujo are working on API queries that may also be used to populate this map on the Public Lab website. @sagarpreet-chadha can help explain how it was done to 'refresh on drag' with a new query to the API on features like this:

https://publiclab.org/wiki/inline-maps

(although those don't seem to be refreshing?)

Another task might be to add a "loading" indicator -- a spinner -- while map refreshes are occurring, so you know it's still loading.

[sagarpreet-chadha]

Hi @jywarren ...dynamic fetching of new data on zooming or panning is still not solved in this issue publiclab/plots2#1934 (and not done by me 😄) .

Lets confirm if @stefannibrasil and @milaaraujo are working on it ❓
Else i will start work on it 👍 👍 👍

Thanks !

[sagarpreet-chadha]

I have done that in leaflet-environmental-layers as of now 😄 .

[mridulnagpal]

@sagarpreet-chadha @jywarren How do we fetch all the location objects from the database?

[jywarren]

ah, sorry, that issue seems so long ago! Thanks!

…

On Fri, Jun 29, 2018 at 12:54 PM Mridul Nagpal ***@***.***> wrote: @sagarpreet-chadha <https://github.com/sagarpreet-chadha> @jywarren <https://github.com/jywarren> How do we fetch all the location objects from the database? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ6QvYz1UFjpopRL_NqVqdUgbiXypks5uBlucgaJpZM4SayPc> .

[stefannibrasil]

Hi, everyone, for now, we are not working on that, but we definitely can in the next weeks! What I am almost finishing is this #2790

[sagarpreet-chadha]

Thats great @stefannibrasil !

@mridulnagpal ...we use API 😄 .
See the list of API's here : https://github.com/publiclab/plots2/blob/master/app/api/srch/search.rb
and
this for example : https://github.com/publiclab/plots2/blob/37372c2e3840eb7d63a2861e18bb57196de5add8/app/views/map/_leaflet.html.erb#L14

Hope that helps !

[jywarren]

For starters i think you can use a set of example data that's in the same format, so look at functions here:

https://publiclab.org/api/docs/ and https://github.com/publiclab/plots2/blob/master/doc/API.md

and maybe use https://publiclab.org/api/srch/taglocations?srchString=41,-89

You can have this be an example file you save statically in the library, in fact, in the example.

[jywarren]

But we might also think about the API providing a standard GeoJSON output?

[mridulnagpal]

@jywarren Working on a prototype, will push a demo soon!!

[mridulnagpal]

Hey @jywarren I tried
$.getJSON("https://publiclab.org/api/srch/taglocations?srchString=41,-89", function(data) { console.log(data); });
And am getting the error:

Failed to load https://publiclab.org/api/srch/taglocations?srchString=41,-89: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

[jywarren]

Ah, I think we need a cors permission on publiclab.org - @icarito would you be able to help? Thanks!

…

On Thu, Jul 12, 2018, 11:04 AM Mridul Nagpal ***@***.***> wrote: Hey @jywarren <https://github.com/jywarren> I tried $.getJSON("https://publiclab.org/api/srch/taglocations?srchString=41,-89", function(data) { console.log(data); }); And am getting the error: Failed to load https://publiclab.org/api/srch/taglocations?srchString=41,-89: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJyJqLBdUaQIAzUNmcdmmzi8ewLVkks5uF2VggaJpZM4SayPc> .

[icarito]

Sure, will do!

…

On 12/07/18 11:13, Jeffrey Warren wrote: Ah, I think we need a cors permission on publiclab.org - @icarito would you be able to help? Thanks! On Thu, Jul 12, 2018, 11:04 AM Mridul Nagpal ***@***.***> wrote: > Hey @jywarren <https://github.com/jywarren> I tried > $.getJSON("https://publiclab.org/api/srch/taglocations?srchString=41,-89", > function(data) { console.log(data); }); > And am getting the error: > > Failed to load > https://publiclab.org/api/srch/taglocations?srchString=41,-89: No > 'Access-Control-Allow-Origin' header is present on the requested resource. > Origin 'null' is therefore not allowed access. > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#9 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AABfJyJqLBdUaQIAzUNmcdmmzi8ewLVkks5uF2VggaJpZM4SayPc> > . > — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAMMS3liqR7Ra2gA0qJFyudHj-cvHrENks5uF3XGgaJpZM4SayPc>.

[icarito]

Hi!
Please test! I think widely enabling Access-Control-Allow-Origin could facilitate some spoofing so I've enabled it only for the /api/ routes! I hope that is enough? Let me know if you want other routes with that header added!

[mridulnagpal]

@icarito Yeah thanks man it works!!

[mridulnagpal]

@jywarren Here is the prototype

[stefannibrasil]

hey, everyone, @milaaraujo and I would be happy to help with anything. Do you still need some method from the API that we can help with? Cheers!

[mridulnagpal]

@stefannibrasil The CORS error was resolved and now I can use the API, thanks :)

[jywarren]

Ooh, this is really nice @mridulnagpal -- do you have a PR open for this? Do you think you could configure your fork's gh-pages branch and push this code there so we can try it out at https://mridulnagpal.github.io/leaflet-blurred-location-display/examples/ ?

Great work!

[mridulnagpal]

@jywarren Done, you can test it here!!
https://mridulnagpal.github.io/leaflet-blurred-location-display/examples/

[jywarren]

Cool! I'm not seeing any markers, though. And there does seem to be an old error, maybe we're not using the latest version here?

But good start, exciting!

[mridulnagpal]

@jywarren I am directly installing from npm, should we update the version there?

[mridulnagpal]

@jywarren #10 will be done once the API is updated, what should we add till then?

[jywarren]

OK i'm publishing a new version on npm! But, where do I look for the markers? Should I be seeing them when I start it up?

[jywarren]

published!

[jywarren]

Can we put a list of sample locations in the example/index.html file to show how this works, in the demo? And is this code now in the master branch? Can you push it into the publiclab/gh-pages branch too so we can show the demo there? Thanks!

[jywarren]

And with demo locations in the example file, we can move forward on #10, too, right? Thanks, Mridul!!!

[mridulnagpal]

@jywarren Do you mean move to a location by default where there are already tags?

[jywarren]

No, i meant actually that we hard code in some locations, so, you could inline in the index.html, have a static array of locations that help do demonstrate the usage of this library without relying on a remote resource. What do you think?

[mridulnagpal]

Got it, working on it!!

[mridulnagpal]

@jywarren What's next?

[mridulnagpal]

@jywarren Should we move to something new as well?

[jywarren]

Yes, as soon as you're getting #13 working, i think you should think about how each grid square could be shaded darker based on how many blurred locations are within it -- want to think a little bit about how that could work? Would a function go through the visible grid squares and count, then establish a scale from "none" to "many" and shade accordingly, each time setZoom is run?