Show Crosshairs in Leaflet Maps

Demonstration of floating crosshairs in Leaflet to indicate the centre of the map

This map is used to demonstrate how a crosshairs can be displayed on a map. These crosshairs will 'float' as the map is panned and zoomed. This will allow the user to determine where the centre of the map is before they place a marker or save the map position.


In this example the cursor is also set to be a crosshairs icon.


Leaflet Maps

External Libraries

MapCenterCoord - A Leaflet control to display the coordinates of the map center, especially useful on touch/mobile devices

The Javascript

var tileProviderURL="";
var tileProviderAttribution='© <a href="//">OpenStreetMap</a> contributors';

var mapDivID = "map_canvas";
var latlng=[0,0];
var zoom = 2;

function initialize()
	document.getElementById(mapDivID).style.cursor = "crosshair";
	map =,{
		fullscreenControl: true,
  		fullscreenControlOptions: {
    		position: 'topleft'
	}).setView(latlng, zoom);
	L.tileLayer('{id}/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: 'Map data © <a href="//"<OpenStreetMap</a> contributors, ' +
			'<a href="//"<CC-BY-SA</a>', 
		id: 'mapbox.streets'
	var openstreetmap = L.tileLayer('https://{s}.'+tileProviderURL+'/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: tileProviderAttribution
	L.control.locate().addTo(map);	//Add "Show me where I am" control

Version History

Version Date Description
Version 1.0 25th July 2019 Initial version

Comments For This Page

No comments yet, be the first !

Add your own comment below and let others know what you think: