update demo to google mutant

[sashadev-sky]

Fixes #81 (<=== Add issue number here)

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

• PR is descriptively titled 📑 and links the original issue above 🔗
• tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with grunt
• code is in uniquely-named feature branch and has no merge conflicts 📁
• screenshots/GIFs are attached 📎 in case of UI updates
• @mention the original creator of the issue in a comment below for help or for a review

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software

Thanks!

==========================

changes:

• google mutant layer now used with labels incorporated for index.html and select.html. Uses new API which is now documented: addGoogleMutant
• map doubleclick toggles labels on / off
• also now documented are the map doubleClickLayers and boxSelector handlers
• version bump to 0.7.4
• port image doubleclick functionality over from MK
• updated some linting rules

[sashadev-sky]

@jywarren @rexagod

1. there were some problems with using the suggested google Mutant plugin, it was never properly timed with the overlay under it. Maybe this implementation is outdated?

I figured out we can use the layers without the plugin as well and the timing issue is gone:

map._googleMutant = L.tileLayer('http://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
  maxZoom: 18,
}).addTo(map);

2. I thought that lowering the opacity low enough to see the labels of the cities didn't look right because it made everything look less defind, and for a bright image the image just stuck out a lot and they didn't match anymore. So I kept the layers at 0.8 opacity and added a layer on top of just labels thats bright enough to see over it.

3. I thought it would be nice to be able to toggle the layers visibility, so I overrode the DoubleClickZoom on the map to toggle the layers instead of zooming the map (there are still multiple other ways to zoom map)

here is the result:

what do you guys think?

[jywarren]

This is looking rad; ready for final review? Thanks!

[sashadev-sky]

@jywarren I wanted confirmation that you liked the idea before continuing with it. So what I think I will do is update index.html and select.html to this google maps implementation. Update the docs about the double click functionality. Dry up some code.

Some questions are:

1. Should labels be showing initially or not? (Next up: We can add an option for this as well)
2. How do we feel about this opacity? (Next up: We can add a slider for the opacity of the background?)
3. Do we want a 3rd demo featuring a different way to use this library over the regular openStreetMaps map we had initially. Maybe other.html
4. Will we update the MapKnitter code to use this instead of two separate layers for the openStreetMap and google mutant layer
5. In MapKnitter we currently have code that on image doubleclick we switch the mode of the image. If we want to keep this intact, we should port that over into LDI in this PR. is this something we still want?

@rexagod any input from you would be great too!

[jywarren]

Hi @sashadev-sky !!! Awesome here.

Should labels be showing initially or not? (Next up: We can add an option for this as well)

Hm, i guess I don't mind either way!

How do we feel about this opacity? (Next up: We can add a slider for the opacity of the background?)

This looks good! Rad re: slider.

Do we want a 3rd demo featuring a different way to use this library over the regular openStreetMaps map we had initially. Maybe other.html

What kind of different way are you thinking? Sorry, i don't quite follow?

Will we update the MapKnitter code to use this instead of two separate layers for the openStreetMap and google mutant layer

Sure, we can do that.

In MapKnitter we currently have code that on image doubleclick we switch the mode of the image. If we want to keep this intact, we should port that over into LDI in this PR. is this something we still want?

Ah, that is pretty convenient, actually. Yeah let's do!

[jywarren]

Looking awesome. Also just noting we should use an actual aerial image, as in http://publiclab.github.io/Leaflet.DistortableImage/examples/select ! Thank you, Sasha, you're killing it on LDI!!

[sashadev-sky]

@jywarren ok awesome, I am going to port over the double click functionality and merge this! And maybe open up an issue about the background opacity slider. For now, the user is able to just pass whatever opacity they'd like at initialization. The labels you can also choose whether will be initially there or not. I documented this all in README!

[sashadev-sky]

@jywarren oh also aerial image I wanted to merge @rexagod's EnableExif functionality 1st because it will make it a lot easier to find the image on the map