Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add bindPopup API to the Marker class #3056

Merged
merged 5 commits into from
Aug 25, 2016
Merged

Add bindPopup API to the Marker class #3056

merged 5 commits into from
Aug 25, 2016

Conversation

mollymerp
Copy link
Contributor

@mollymerp mollymerp commented Aug 23, 2016

This PR introduces methods for using Popups in conjunction with Markers and is not-so-loosely based on Leaflet's API of the same name.

Also includes the first DOM tests in the gl-js unit test suite using jsdom. I had to make some changes to js/util/dom in order for the tests to complete without errors, but there might be other workarounds using jsdom that I'm not aware of.

Provides a fix for the problem of adding a Popupon a click event to a Marker with the current API -- the Popup is created and then immediately destroyed unless you have Popup.closeOnClick: false because the click event bubbles up to the map canvas. Related discussion at #2931

Checklist

* @returns {Marker} `this`
*/

bindPopup: function(content, options){
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make Popup the only type accepted by bindPopup, and remove options. This separates concerns:

  • Popup is responsible for construction and configuration of the popup.
  • bindPopup is responsible for linking it with a Marker. It doesn't need to pass through all functionality provided by Popup.

@mollymerp
Copy link
Contributor Author

@lucaswoj copying from my response to your 'outdated' line comment:
I was having issues with the functions run by the tests failing because document + window weren't in scope. I refactored to use the jsdom-global module which provides a cleanup function that removes the created variables from the global scope and can be called when the tests are complete. Is this acceptable?

Otherwise we can take the approach that mapbox-gl-directions uses (browserify + smokestack + tap) but that would require some refactoring of the test suite.

@lucaswoj
Copy link
Contributor

I put together a PR that removes all uses of browser globals in #3063. I vote that we merge this as-is, ship it in the release today, and tweak the Marker tests within #3063.

@lucaswoj lucaswoj merged commit 9309bb2 into master Aug 25, 2016
@lucaswoj lucaswoj deleted the bind-popup branch August 25, 2016 19:17
setPopup: function (popup) {
if (popup == null) {
this._closePopup();
delete this._popupHandlersAdded;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of tracking state in _popupHandlersAdded, callremoveEventListener when the popup is removed. This will prevent memory leaks and unexpected behavior if the Marker continues to be used without a popup. You'll need to save the this-bound version of _openPopup, say by using util.bindAll(['_openPopup'], this), so that it can be passed to removeEventListener.

lucaswoj added a commit that referenced this pull request Sep 1, 2016
* Fix exceptions thrown when opening marker-bound popup by click

Resolves
#3056 (comment)

* Remove unnecessary guard clause

* Remove private popup property access

* Refactor marker popup binding

* Put markers in the "control container"

* Ensure "click" event is fired on "map" from a marker

* Attach marker click listener to map to avoid setTimeout
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants