Planning overview (revised!)

[jywarren]

This new library is rapidly seeing many new layers, and we need some additional structure to help make the display/management of this amazing data smoother. This would include:

Documentation

• improved workflow for incorporating and accepting new layers (submission template) (Layer submission process, per-layer metadata #135)
• coding guidance on how to actually add a new layer (after we make that process easier, see below): Guide to how to add new layers #136

Bugs

• bounding box re-centering issues: Bounding box ordering, re-centering issues? #110
• jQuery requirement issue: Bug: Jquery script being loaded multiple times. #95

Structure

• improved layer management system with bounding boxes + zooms from layer metadata (including Track the bounding box of each layer, and display only those which intersect with current view #117)
• standardization of layer types (tile, rss, csv, geojson, polygonal, also subtypes like spreadsheet Document SpreadsheetLayers and spin out Leaflet.SpreadsheetLayer as a stand-alone Leaflet library #121 , esri)
  • and code to make adding new layers of a generic type easier
• consolidation and standardization of all layers
• reduction of redundant layer code
• layer metadata -- description, source, docs for each, relevant bounding box and zoom levels, version, in a single file. Maybe rate limits too if we know them
  • URL and "requests" from layers if they are open to community submissions (like OdorLog.com)

UI

See mockup above!

• collapsible sections in the Leaflet layers browser control interface (collapsible) sections in the Leaflet layers browser control interface #156
• UI for highlighting new layers in current viewport as you drag/zoom Display "new items" mark in Layers menu when you enter an area with a new layer #133
• improved popup content, like thumbnail images if they exist: add thumbnail images to some layers #112
• unique-id based layer toggling in URL hash - related to ability to generate permalink with url hash of currently enabled layers #33
• standardization of per-item popover UI (image, description, source, toggle, link) Sketch design ideas for layer browser #59
• legends for some layers (Display optional legends for each layer #103)
• examples for how to enable/disable layers from javascript (i.e. from a separate button or checkbox for example)
• examples for how to open the map at a given location and zoom level using URL hashes: https://github.com/mlevans/leaflet-hash
• search for a location to re-center upon with a 🔍 button and autocomplete geocoder (like at https://github.com/publiclab/leaflet-blurred-location)
• minimial 'dots' ui "minimal" mode #123

Testing

• Adding tests! Test suite #71

---

New layers

• WaterReporter.org (uses GeoJSON - http://leafletjs.com/examples/geojson/ , API : http://docs.waterreporter.org/?Javascript#your-first-request)
• watershed mapper -- for which way water flows? https://www.epa.gov/waterdata/waters-geoviewer
• public comments map via Scott Eustis (i'll add more detail later)
• PLpeople layer : Make people Layer with the use of LBLD .  #174

---

Takes over for #1

---

Individual tasks (that try to break down the above items)

• Try adding a new layer, then a second one, each in a PR. Look for the similarities between layers.
• Follow the format of this pull request to install a Jasmine test suite, load dependencies, and get “npm test” to pass with a very minimal test: write tests that assert the markers are shown or hidden as in the new example code leaflet-blurred-location-display#52
• Connect the test to TravisCI using a .travis.yml file
• Add HTML test fixtures to allow tests to create and initialize a map
• Expand the test to check for proper map setup, following this example of UI testing: https://github.com/publiclab/leaflet-blurred-location/pull/122/files
• Identify common functions we could break out to reduce redundancy between layer code.
• Try making a common function which could be used to reduce redundant code in layers
• Write a test for this function
• Refactor layers to use the common function
• Repeat above for other common functions
• List out the different information which each layer requires, and create a JSON format for storing it in a file. Look for how we can load this information into using CommonJS syntax, like: require(‘/layers/myLayerName/info.json’)
• Try making a standard layer type which would make adding new layers of a specific type easier (for example tile, rss, csv, geojson, polygonal, also subtypes like spreadsheet, esri)
• Develop an improved workflow for incorporating and accepting new layers (a submission template), including a submission form for new layers
• Try developing a minimal 'dots' based display of all layers, based on "minimal" mode #123
• Develop a function which scans through available layers to see which overlap with the current map bounds and zoom levels (and expand layer metadata with these new fields if needed)
• Use above function to hide/show or add/remove layers based on overlap
• Develop a setting to display new layers for a given map bounds, or to add the layer to the menu but not enable it
• Develop an event listener to handle new layers being identified, and alert the user somehow Display "new items" mark in Layers menu when you enter an area with a new layer #133
• Refine/expand per-item popup design (displaying image, description, source, toggle, link, if available)
• Develop and implement common functions to assign data source fields from layers to specific fields in a popup (like, identifying an image and using it as the popup thumbnail image)

[sidntrivedi012]

@jywarren The thread looks really nice. Would like to ask that can we write tests in Jest? Its kinda nice and efficient to use for Javascript testing.

[sidntrivedi012]

You can find more info about jest here - https://jestjs.io/

[avsingh999]

@sidntrivedi012 I like your thinking but I do not understand Why we use jest for Test because In a test we have to enable all layers like @jywarren open this issue #101 correct me if I am wrong @jywarren @sidntrivedi012
thanks : )

[jywarren]

We currently use Jasmine for a number of tests and so would lean that direction for consistency across PL libraries... and it tests HTML as well (it wasn't clear that Jest does this, but maybe?). Can we move to the dedicated testing issue for more discussion, this is great!!!

…

On Sun, Mar 10, 2019 at 2:34 PM Siddhant N Trivedi ***@***.***> wrote: You can find more info about jest here - https://jestjs.io/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#134 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJwQrUQb48V3N5l3bYUK_WJn_aqdGks5vVVANgaJpZM4bltoC> .

[sidntrivedi012]

@jywarren Sure. Jasmine is great. And it's really a very nice notion to maintain consistency in the project.

[vaarigupta]

@jywarren I am an outreachy applicant and am interested to work on it. Please assign me this issue to work

[ananyaarun]

@jywarren , @gauravano I went through the project Extend Leaflet Environmental Layers with new layer menu and layer addition workflow carefully.It looks very interesting to me !! I did start contributing to this repository as well apart from plots2 to try and understand the workflow here.

I have also worked on a project closely related to this previously.
Here is the link https://github.com/ananyaarun/Open-Street-Maps
A map i particularly visualized using leaflet can be seen here
https://ananyaarun.github.io/OSM3/

I would love to apply to this project as well :) Can i have more info in this regard ? Can i record my contribution and experience for this project in the main outreachy website itself ?

Thanks!

[grvsachdeva]

Hey @vaarigupta, this issue is for Outreachy and so not available for claiming. But, we would love to have your help with other issues of this repo https://github.com/publiclab/leaflet-environmental-layers/issues/. Thanks!

[grvsachdeva]

I would love to apply to this project as well :) Can i have more info in this regard ? Can i record my contribution and experience for this project in the main outreachy website itself ?

hey @ananyaarun, if you're eligible for raising multiple proposals for a single org, then sure we would love to see your proposal. Yes, please go ahead and mention all the contributions you did in this repo. Thanks!

[vaarigupta]

Hey @vaarigupta, this issue is for Outreachy and so not available for claiming. But, we would love to have your help with other issues of this repo https://github.com/publiclab/leaflet-environmental-layers/issues/. Thanks!

Ya I am willing to participate in outreachy this year. So please suggest me how can I make contribution?

[grvsachdeva]

Hey @vaarigupta, I think for being able to raise proposal, you need to solve a issue of this project. So, go through https://github.com/publiclab/leaflet-environmental-layers/issues and start with issues, which looks good to you. We don't have much first-timers-only issues in this project, but I will see if some can be created.

Thanks!

[jywarren]

Hi! Actually there are so many parts of this that we expect it will take more than one Outreachy term to complete, so we are happy to have contributions before then as well! Please feel free to pick out a piece of this and give it a try. I might recommend #156 is mainly the installation of a plugin, so it could make a good self-contained issue to start with!

[ananyaarun]

@jywarren @gauravano is extending leaflet layers an outreachy project or a gsoc project or both ?
I see it listed under both the outreachy website and this link for gsoc ideas
https://publiclab.org/wiki/gsoc-ideas

[grvsachdeva]

It's part of both

…

On Mon, Apr 1, 2019 at 1:58 PM Ananya Arun ***@***.***> wrote: @jywarren <https://github.com/jywarren> @gauravano <https://github.com/gauravano> is extending leaflet layers an outreachy project or a gsoc project or both ? I see it listed under both the outreachy website and this link for gsoc ideas https://publiclab.org/wiki/gsoc-ideas — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#134 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AT6S9vnD8EAQfvurjvlPgdNBV0BSqJNmks5vccMRgaJpZM4bltoC> .

[sagarpreet-chadha]

Added #174 to the list of new layers 🗺 !

[nstjean]

Where do users go to use this full map and all its possibilities? I know MapKnitter.com uses mapping, but only for one layer. https://publiclab.org/maps/ has environmental layers listed on the map at the top, but it doesn't look the same as it does using the /example/ directory in my dev environment.

Basically, is this used only within PublicLab.org and other of our sites, or is there/will there be a site users can go to create their own maps to share?

[sagarpreet-chadha]

Hey @nstjean ,
Yes we have done some changes recently and we will soon publish the new version. I dont know if this library is integrated to other websites apart from PL.org and mapknitter.

Yes definately we will work on making a utility that will generate maps with layer and an iframe link that people can use to embed the map on their websites. Thanks!

I hope this helps!

[sagarpreet-chadha]

Infact very soon i will be working on this similar iframe feature, discussion ongoing here #274

[nstjean]

Excellent! I understand the plans much better now. :)

[jywarren]

Adding here -- a search box so you can quickly search for locations on the earth would be great! Not open by default but behind a magnifying glass icon maybe, that pops open and then you can start searching.

[crisner]

@jywarren I have checked off a few tasks that had been done recently from the checklist above.

[jywarren]

Awesome!