While reading the article about MapBox's map utility to searching for flight MH370, I noticed that they have a stationary "floating" target (or crosshairs) icon that helps users identify the center of the map, presumably to help them get the exact coordinates they are intending to report.

I've searched our site, but cannot find anything that relates to how to create this object that (I assume) just sits above the map frame.

How would one add a target (or crosshairs) icon centered on their own Leaflet map?


It makes use of the Leaflet function getCenter(). The function returns the geographical center of the map view.

BBoxfinder has the same thing. Looking into the source code I found the following:

// Add in a crosshair for the map
var crosshairIcon = L.icon({
    iconUrl: 'images/crosshair.png',
    iconSize:     [20, 20], // size of the icon
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
crosshair = new L.marker(map.getCenter(), {icon: crosshairIcon, clickable:false});

// Move the crosshair to the center of the map when the user pans
map.on('move', function(e) {

The coordinates are added to the HTML with jQuery:

| improve this answer | |
  • Thanks, this was perfect! I spent so long in trying to position an external diff, wish I'd found this earlier. Note : clickable is now interactive – Nikhil VJ May 17 '19 at 2:14

You can also float a crosshair image or character over your map using HTML and CSS. I'm using a plus sign in this example but you can swap that out for an image.

calc(50% - 10px) works out to be 1/2 of the map div, minus 1/2 of the crosshair div.


#crosshair {
    left: calc(50% - 10px);
    top: calc(50% - 10px); 
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 10000;
    text-align: center;
    font-weight: normal;
    font-size: 16px;
    color: #222;
    text-shadow: 1px 1px 3px #fff;


<div id="map">
    <div id='crosshair'>+</div>
| improve this answer | |

This thread might help even if it is in GoogleAPI, the idea is essentially the same I believe. Set marker position to map.getCenter() then map.on('move', updateMarker(map.getCenter())?

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.