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.

...Loading...

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

Version Date Description
Version 1.0 10th January 2008 First Version
Version 1.1 13th February 2009 Fixed G_SATELLITE_TYPE is not defined error
Version 1.2 23rd June 2009 Use var cname=place.AddressDetails.Country.CountryName;
Version 2.0 4th November 2010 Implemented Google Maps API V3. Markers retain county name on hover over.
Version 3.0 18th January 2012 Impemented google.maps.Geocoder() instead of GClientGeocoder()
Version 3.1 5th November 2013 Minor Updates
Version 4.0 10th October 2018 Implemented Leaflet Maps

Comments For This Page

Map goes into error when trying to click to recognize Palestine (Gaza, West Bank)
Also Crimea.
By Mike on 26th June 2015
To localize my cottage
By Adrisse on 14th July 2012
from where we will download your code.. i am unable to run... actually we need click for state on google map same as click for country. Please help!!!!!
By Gagan on 3rd February 2012
mapTypeControl has been removed to make things harder!
By Daft Logic on 19th November 2010
For some reason it doesn't seem to work when you click on Norway. Neither when you click on lakes or the sea.
By Erlend on 17th August 2009
JimBroad, not sure why! I will update (simplify) it. Thanks for the feedback.
By Daft Logic on 23rd June 2009
Why didn't you just use

var cname=place.AddressDetails.Country.CountryName;
By JimBroad on 3rd June 2009
thanks!
On 18th June 2008

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

Share This Page

Share this page with others using one of the methods below. Telling others about Daft Logic is good and we appreciate your support!