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.

References

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="tile.openstreetmap.org";
var tileProviderAttribution='© <a href="//www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

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

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

Version History