I am currently using mapbox js in conjunction with a satellite imagery API and I am wondering how to display a very simple marker of the last click (from the user) on the map.
Ideally when the user clicks in the map it would be display a small semi-transparent square which would correspond to the zoomed in area being displayed by the satellite API.
There's a ton of information about interacting with current markers that were created beforehand, but I want to dynamically create a marker on click that only lives until the next click.
It would be something like below, only with a smaller radius.
I am currently using mapbox js in conjunction with a satellite imagery API and I am wondering how to display a very simple marker of the last click (from the user) on the map.
Ideally when the user clicks in the map it would be display a small semi-transparent square which would correspond to the zoomed in area being displayed by the satellite API.
There's a ton of information about interacting with current markers that were created beforehand, but I want to dynamically create a marker on click that only lives until the next click.
It would be something like below, only with a smaller radius.
Share Improve this question asked Apr 12, 2016 at 18:56 maxwellmaxwell 2,38127 silver badges36 bronze badges1 Answer
Reset to default 6If you are just looking to add the circle and remove it on the next mouseclick, something like this would work:
L.mapbox.accessToken = 'pk.eyJ1IjoiY2NhbnRleSIsImEiOiJjaWVsdDNubmEwMGU3czNtNDRyNjRpdTVqIn0.yFaW4Ty6VE3GHkrDvdbW6g';
var map = L.mapbox.map('map', 'mapbox.streets').setView([38.91338, -77.03236], 16);
streetsBasemap = L.tileLayer('https://api.tiles.mapbox./v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2NhbnRleSIsImEiOiJjaWVsdDNubmEwMGU3czNtNDRyNjRpdTVqIn0.yFaW4Ty6VE3GHkrDvdbW6g', {
maxZoom: 18,
minZoom: 6,
zIndex: 1,
id: 'mapbox.streets'
}).addTo(map);
map.on('click', addMarker);
function addMarker(e){
if (typeof circleMarker !== "undefined" ){
map.removeLayer(circleMarker);
}
//add marker
circleMarker = new L.circle(e.latlng, 200, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
}body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Single marker</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox./mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox./mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<style>
</style>
</head>
<body>
<div id='map'></div>
</body>
</html>