755 : Map view does not update

[vurtn]

Sorry for my english.

Why

The map view does not update when we change the filters (#755).

What

• Create a geocode method
• Create an add_marker method
• Create a watcher
• Get the current state of the map
• Add a message if there is no match

How

Ouch. So... The problem is that the component is never refreshed. The change of contributions is made but has no impact in the component. I changed several things:

First i splitted the function loaded to : geocode and add_markers. I extracted some variables in parameters to be able to output this logic if desired in a separate file.

Then I realized that the markers are added when the component is created but we don't have access to them otherwise. The wrapper documentation didn't really help me so I fetched the map via @map-init to see what's available. It's the mapbox-gl map. So i searched how to remove the markers on it before drawing. In the method add_markers i remove the old points if they exists (source and layer) before adding the new ones.

I check the contributions in the watcher to avoid the whole process if they are the same.

Instead of display an empty map if there is no match, i just printed a message. The result :

Testing

I don't know how to test this.

Next Steps

Not seem to be concerned (or see the next point).

Outstanding Questions, Concerns and Other Notes

While trying to solve this issue, i wondered if it would not be good to change the library. I see 2 points to justify my point of view :

• The last update of mapbox-gl-vue is more than a year ago and the project seems abandoned.
• I am not a lawyer so i'm maybe wrong but mapbox-gl-vue is GPL-3.0 License. On this website we can see :

Can I use GPL-licensed code in my MIT-licensed project?
No. The project as a whole must conform to the terms of the GPL license and must be distributed under the terms of that license. Therefore such a project as a whole must be distributed as GPL, but can still contain MIT-licensed software.

Accessibility

Not seem to be concerned.

Security

Not seem to be concerned.

Meta

Not seem to be concerned.

Pre-Merge Checklist

I think the reviewer will check this so i let it empty.

• Security & accessibility have been considered
• Tests have been added, or an explanation has been given why the features cannot be tested
• Documentation and comments have been added to the codebase where required
• Entry added to CHANGELOG.md if appropriate
• Outstanding questions and concerns have been resolved
• Any next steps have been turned into Issues or Discussions as appropriate

Best regards and stay safe !

[h-m-m]

I assume you've got an auto-formatter or something like that. Because it unindented all the code in this script section, we're having trouble seeing what did and did not change. Can you revert the whitespace changes so it's easier for us to review this PR?

[vurtn]

Done 👍

[h-m-m]

Thanks for digging into this @gamecat2d

We had one or two people who worked for Mapbox helping out Ruby for Good when this feature was first added. Let me see if we can contact them for help and suggestions about the points you raised, both about adding and removing markers and about the maintenance and licensing issues for the component.

It may take us a few weeks to get someone from Mapbox to respond. Hopefully it won't take too long

[stanleypliu]

As a starting point to address @gamecat2d's point about switching libraries (I haven't worked with mapbox-gl-vue before), we could switch to using Mapbox GL JS as a CDN or NPM package instead, which is indeed supported (but making sure to use the right version as I believe v2 bills per map load).

[marenab]

+1 for the switch to GL JS if that's an option. More documentation and support from Mapbox is possible if you're building with GL JS, like this one: https://docs.mapbox.com/mapbox-gl-js/example/filter-markers/

FWIW v1 also bills by map load (when using a Mapbox basemap), the difference with v2 is that it bills by map load regardless of where your basemap tiles come from. So there'd be no difference between v1 or v2 in terms of map loads billing if you're using a Mapbox basemap. Also, the Community team can help with donated/discounted services if you're concerned about surpassing the 50k free map loads per month: https://www.mapbox.com/community/

[vurtn]

Sorry for my english.

Thanks @marenab and @stanleypliu for your answers ! I have one more question : What is the advantage of mapbox over leaflet especially if the tiles are Open Street Map? The code seems easier to me with leaflet to do basic things and if you don't use mapbox tiles, you don't even need to have any API key. I discovered mapbox with this project and now i'm searching what are the possible alternatives. I don't understand the pros to use a commercial product (mapbox) for this project (mutual aid).

Have a great day and stay safe !

[marenab]

That's a choice for your team to make @gamecat2d. Some folks prefer to build with Leaflet, some prefer GL JS. I'd say the main advantages of GL JS are that there are more supported features / documentation and the performance of vector tiles (instead of Leaflet's raster tiles) is smoother and faster to load. But your call! If you do choose Mapbox, the Mapbox Community team can support.

There is also a GL-Leaflet binding, if you'd like to build with Leaflet but bring in Mapbox vector tiles: https://github.com/mapbox/mapbox-gl-leaflet

[h-m-m]

I've read over the comments in this thread and done some digging of my own.

@finn2d — I understand your interest in using other mapping tools. If I was doing this project by myself, I might have given them a much closer look before choosing. That said, we're doing this project with the help and support of the Ruby for Good community, which means we have a lot of people who can to give support us if we stick with Mapbox. (Like @marenab and @stanleypliu! Thanks you two for jumping in on this one.) So I'd prefer to stick with Mapbox for now, if that's okay. If that leads to problems later with API billing, I'm happy to wait to solve those problems once we have them.

I found that there are some more recent open source packages that tie Vue together to Mapbox, including the Mapbox GL JS tools. Since you have more experience in some of these mapping tools than I do, would you mind looking through what's available and seeing if any of them could solve our problems here while still sticking with Mapbox? Let me know what you think.

And again, thanks @finn2d for spending time on this. We really appreciate it!

[solebared]

@vurtn, thanks for working on this! 🙏🏾 . Apologies for taking so long to resolve this PR.

You raise some important concerns about the mapbox-gl-vue library being the wrong license and unmaintained. I've documented those concerns in #993.

In the meantime, this PR appears to solve the immediate issue and is good to merge. I see some potential opportunities for minor refactorings but don't think they're worth addressing until we pick an alternative to mapbox-gl-vue.

Thanks again! 🔥