Center on clicked symbol, addresses #1516

[danswick]

cc: @lyzidiamond

Would love some feedback on this example. Does it adequately replicate this popular Mapbox.js example?

[jfirebaugh]

    map.featuresAt(e.point, {layer: 'myMarkers', radius: 20, includeGeometry: true}, function (err, features) {
        if (err) throw err;
        if (features.length) {
            map.flyTo({center: features[0].geometry.coordinates});
        }
    });

• Uses the layer option for featuresAt to avoid getting results for any other layers
• Uses the coordinates from the marker itself, like the Mapbox.js example

Reference #1002 for a future API enhancement that would simplify this example to:

map.on('click', 'myMarkers', function (e) {
    map.flyTo({center: e.features[0].geometry.coordinates});
});

[danswick]

Thanks for the note, @jfirebaugh! Added your suggestions and cursor change on hover to indicate markers are clickable (thanks, @edenh!).

Also just want to take everyone's temperature on terminology here. There isn't really a "marker" in GL, so I renamed this example "Center on symbol" to stick with GL terms. Does that make sense or is it even more confusing? I considered "Center on point," but that may be even worse. cc: @lyzidiamond.

[bhousel]

Phrases like "marker", "layer", "control" are terms of art in Mapbox.js / Leaflet development, and I think it's best to carry them forward when speaking about Mapbox GL as well.

[jfirebaugh]

Committed to mb-pages in 28eca5a. Thanks!