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.

Sign up for GitHub

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

Jump to bottom

Provide default element for Marker class per #3557 #5661

Merged
merged 5 commits into from
Nov 16, 2017
Merged

Provide default element for Marker class per #3557 #5661

merged 5 commits into from
Nov 16, 2017

Conversation

Syntaf
Copy link
Contributor

@Syntaf Syntaf commented Nov 12, 2017 •
edited
Loading

This PR creates a basic html element for when the element parameter to the Marker class is null. The icon is pulled from https://www.mapbox.com/maki-icons/ (marker-15), so there shouldn't be any licensing issues.

If this is PR is a valid solution to #3557, maybe something in the docs could be added to show a default marker exists? I can add that if necessary.

Here is a sample index.html to test this:

<!DOCTYPE html>
<html>
<head>
    <title>Mapbox GL JS debug page</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>

<body>
<div id='map'></div>

<script src='/dist/mapbox-gl-dev.js'></script>
<script src='/debug/access_token_generated.js'></script>
<script>

var map = window.map = new mapboxgl.Map({
    container: 'map',
    zoom: 2.5,
    center: [-77.01866, 38.888],
    style: 'mapbox://styles/mapbox/streets-v10',
    hash: true
});

map.on('load', function() {
    // default marker
    var marker = new mapboxgl.Marker()
    .setLngLat([30.5, 50.5])
    .addTo(map);

    // custom element marker
    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(http://via.placeholder.com/25x25)';
    el.style.width = '25px';
    el.style.height = '25px';

    var marker2 = new mapboxgl.Marker(el)
    .setLngLat([41, 50.5])
    .addTo(map);
});

</script>
</body>
</html>

(Updated) Example of icon:
marker

@jfirebaugh
Copy link
Contributor

Thanks for the contribution @Syntaf, this is a much-requested feature!

Would you mind changing the default to use the SVG content @samanpwbb suggested here?

@Syntaf
Copy link
Contributor Author

Syntaf commented Nov 13, 2017

Ah, I must have missed that comment. Seems like a much better icon for this feature, I'll modify it to use that SVG when I'm home today.

@Syntaf
Copy link
Contributor Author

Syntaf commented Nov 14, 2017

Modified the code to use the marker suggested, and updated the example picture in the original PR.

@jfirebaugh
Copy link
Contributor

This looks great @Syntaf, thanks again for the contribution. Can you make two small additions and then I'll merge?

  • Add a test in marker.test.js. This can just be a copy of the constructor test that omits the parameter.
  • Where the JSDoc comment currently says "creates a div element by default", update that to give a brief description of the new default.

@jfirebaugh jfirebaugh merged commit 66039ea into mapbox:master Nov 16, 2017
@andrewharvey andrewharvey mentioned this pull request Jan 18, 2018
Merged
5 tasks
@renovate renovate bot mentioned this pull request Feb 2, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jfirebaugh jfirebaugh jfirebaugh approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@Syntaf @jfirebaugh