Click For Country

Click For Country is intended to illustrate the ability of the GClientGeocoder object to return the address of a location on a map. To use it, click on the map somewhere and if you click on a land mass, you should see the country name appear below the map.

Further Uses and Ideas:

• Click For Country Game

How it Works

Note: The L.esri.basemapLayer('Imagery') is used because it displays no labels or place names.

var map;
var latlng=[0,0];
var zoom = 2;
var mapDivID = "map_canvas";
var marker;
var messageDIV = document.getElementById("message");

function initialize() 
{
	document.getElementById(mapDivID).style.cursor = "crosshair";
	
	map = L.map(mapDivID,{
		fullscreenControl: true,
  		fullscreenControlOptions: {
    		position: 'topleft'
  			}
	}).setView(latlng, zoom);
	
	var openstreetmap = L.tileLayer('https://{s}.'+tileProviderURL+'/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: tileProviderAttribution
	});
	var ESRIImg  = L.esri.basemapLayer('Imagery');
	var ESRIImbLab  = L.esri.basemapLayer('ImageryLabels');
	
	var baseLayers = {
		"OSM": openstreetmap,
		"Satellite": ESRIImg
	};
	
	var overlays = {
		"Labels": ESRIImbLab,
	};
	
	ESRIImg.addTo(map);

	addEventMapClicked();
}

function addEventMapClicked()
{
	//Map Clicked Event
	map.on('click', function(event)
	{										  
		messageDIV.innerHTML="Map Clicked. Searching..";
		console.log("Map Clicked at " +event.latlng.lat);
			
		//Remove any exisiting markers from the map
		if (marker) 
		{
			marker.remove();
		}
			
		//Create a marker then place it on the map
		marker=placeMarker(event.latlng,map);
		
		$.ajax({url: "https://nominatim.openstreetmap.org/reverse?format=jsonv2&accept-language=en-US&lat="+event.latlng.lat+"&lon="+event.latlng.lng+"&zoom=14&addressdetails=1", success: function(result){
			if (result && result.address && result.address.country) 
			{
				var cname=result.address.country;	
				//Is there a county name?
				if (cname=="")
				{
					messageDIV.innerHTML="Country Clicked: [None]";
					messageDIV.style.color = "red";
				}
				else
				{
					messageDIV.innerHTML="Country Clicked: "+cname;
					messageDIV.style.color = "green";
				}
			}
			else
			{
				messageDIV.innerHTML="Country Clicked: [none]";
				messageDIV.style.color = "red";
			}
		}});
 	});
}

function placeMarker(point,maptoadd) 
{
	var marker = L.marker(point,{}).addTo(maptoadd);
	return marker;
}

Relevant Links

Leaflet - a JavaScript library for interactive maps

Version History