How to make a marker with a custom image draggable in MapboxGL?

i came up with this from some another example i found, and mixed the two. It worked for what i wanted... I remember seeing this while looking for answers (a few times) so i came back to share.
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add custom icons with Markers</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
#marker6060 {
    background-image: url('https://placekitten.com/g/60/60/');
    background-size: cover;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
}
#marker5050 {
    background-image: url('https://placekitten.com/g/50/50/');
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}
#marker4040 {
    background-image: url('https://placekitten.com/g/40/40/');
    background-size: cover;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}
</style>

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

<script>
mapboxgl.accessToken = 'YOURS, NOT MINE.';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-65.017, -16.457],
    zoom: 5
});

var element6060 = document.createElement('div');
element6060.id = 'marker6060';
var marker6060 = new mapboxgl.Marker({
    element: element6060,
    draggable: true,
    color: '#000000'
})
    .setLngLat([-66.324462890625, -16.024695711685304])
    .addTo(map);
    element6060.addEventListener('click', function() {
      var message = 'Kitty 6060';
        window.alert(message);
    });



var element5050 = document.createElement('div');
element5050.id = 'marker5050';
var marker5050 = new mapboxgl.Marker({
    element: element5050,
    draggable: true,
    color: '#000000'
})
    .setLngLat([-61.2158203125, -15.97189158092897])
    .addTo(map);
    element5050.addEventListener('click', function() {
      var message = 'Kitty 5050';
        window.alert(message);
    });


var element4040 = document.createElement('div');
element4040.id = 'marker4040';
var marker4040 = new mapboxgl.Marker({
    element: element4040,
    draggable: true,
    color: '#000000'
})
    .setLngLat([-63.29223632812499, -18.28151823530889])
    .addTo(map);
    element4040.addEventListener('click', function() {
      var message = 'Kitty 4040';
        window.alert(message);
    });



    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='utf-8' />
        <title>Add custom icons with Markers No Layer, Draggable</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
        <style>
            body { margin:0; padding:0; }
            #map { position:absolute; top:0; bottom:0; width:100%; }
        </style>
    </head>
    <body>

    <style>
    #marker6060 {
        background-image: url('https://placekitten.com/g/60/60/');
        background-size: cover;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        cursor: pointer;
    }
    #marker5050 {
        background-image: url('https://placekitten.com/g/50/50/');
        background-size: cover;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
    }
    #marker4040 {
        background-image: url('https://placekitten.com/g/40/40/');
        background-size: cover;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
    }
    </style>

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

    <script>
    mapboxgl.accessToken = 'YOURS, NOT MINE.';

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [-65.017, -16.457],
        zoom: 5
    });

    var element6060 = document.createElement('div');
    element6060.id = 'marker6060';
    var marker6060 = new mapboxgl.Marker({
        element: element6060,
        draggable: true
    })
        .setLngLat([-66.324462890625, -16.024695711685304])
        .addTo(map);
        element6060.addEventListener('click', function() {
          var message = 'Kitty 6060';
            window.alert(message);
        });



    var element5050 = document.createElement('div');
    element5050.id = 'marker5050';
    var marker5050 = new mapboxgl.Marker({
        element: element5050,
        draggable: true
    })
        .setLngLat([-61.2158203125, -15.97189158092897])
        .addTo(map);
        element5050.addEventListener('click', function() {
          var message = 'Kitty 5050';
            window.alert(message);
        });


    var element4040 = document.createElement('div');
    element4040.id = 'marker4040';
    var marker4040 = new mapboxgl.Marker({
        element: element4040,
        draggable: true
    })
        .setLngLat([-63.29223632812499, -18.28151823530889])
        .addTo(map);
        element4040.addEventListener('click', function() {
          var message = 'Kitty 4040';
            window.alert(message);
        });



    </script>

    </body>
    </html>




</script>

</body>
</html>
Recommended topics

Hot tags
