Menu
There's an example of how to make a point draggable (which has a layer) and there's an example of how to setup a marker with a custom image, but how would I make that custom image draggable on the map when it doesn't have a layer associated with it?!
329
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
