ramiroaznar · August 2, 2017 10:41
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>UK Reverse geocoding with CARTO.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />

    <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> 

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>

  </head>
  <body>

    <!-- map div -->
    <div id="map"></div>

    <script>
      function main() {

        // declare map variable
        map = L.map('map', { 
              zoomControl: false,
              center: [54, -3],
              zoom: 7
              });

        // add basemap
        L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CARTO</a>'}).addTo(map);

        // get city, region and country when clicking
        map.on('click', 
          function(e){

            // get lat and long coordinates
            var latitude = e.latlng.lat, longitude = e.latlng.lng;
            console.log("You clicked the map at latitude " + latitude.toFixed(2) + ", and longitude " + longitude.toFixed(2) + ".");
            console.log("Reverse geocoding:")

            // add Leaflet marker
            var marker = L.marker([latitude, longitude]).addTo(map);

            // get closest city
            var cityQuery = "SELECT lsoa11nm as name FROM uk_cities ORDER BY the_geom <-> ST_SetSRID(ST_MakePoint(" + longitude + ", " + latitude + "), 4326) LIMIT 1",

            // get region
               regionQuery = "SELECT * FROM uk_administrative_regions WHERE ST_Intersects(the_geom, ST_SetSRID(ST_MakePoint(" + longitude + ", " + latitude + "), 4326)) LIMIT 1",

            // store queries
               queries = [cityQuery, regionQuery],

            // values array
               valuesArray = [], count = 0;

            var sql = cartodb.SQL({ user: 'ramirocartodb' });

            // iterate queries
            _.each(queries, function(query, index, queries) {
              
              sql.execute(query)
              .done(function(query) {
                var value = query.rows[0].name;
                console.log(value);

                // add values to array
                valuesArray.push(value);

                // add popup
                if (++count == queries.length) {
                  marker.bindPopup("<b>UK Reverse Geocoding</b><br>Coordinates: " + "[" + latitude.toFixed(2) + ", " + longitude.toFixed(2) + "]<br>City: " + valuesArray[0] + "<br>Region: " + valuesArray[1]).openPopup();
                }

              })
              .error(function(errors) {
                console.log("Something went wrong!")
              })

            });

        });

      }
    window.onload = main;
    </script>

  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>UK Reverse geocoding with CARTO.js</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />

	<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

	<style>
	html, body, #map {
	height: 100%;
	padding: 0;
	margin: 0;
	}
	</style>

	</head>
	<body>

	<!-- map div -->
	<div id="map"></div>

	<script>
	function main() {

	// declare map variable
	map = L.map('map', {
	zoomControl: false,
	center: [54, -3],
	zoom: 7
	});

	// add basemap
	L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CARTO</a>'}).addTo(map);

	// get city, region and country when clicking
	map.on('click',
	function(e){

	// get lat and long coordinates
	var latitude = e.latlng.lat, longitude = e.latlng.lng;
	console.log("You clicked the map at latitude " + latitude.toFixed(2) + ", and longitude " + longitude.toFixed(2) + ".");
	console.log("Reverse geocoding:")

	// add Leaflet marker
	var marker = L.marker([latitude, longitude]).addTo(map);

	// get closest city
	var cityQuery = "SELECT lsoa11nm as name FROM uk_cities ORDER BY the_geom <-> ST_SetSRID(ST_MakePoint(" + longitude + ", " + latitude + "), 4326) LIMIT 1",

	// get region
	regionQuery = "SELECT * FROM uk_administrative_regions WHERE ST_Intersects(the_geom, ST_SetSRID(ST_MakePoint(" + longitude + ", " + latitude + "), 4326)) LIMIT 1",

	// store queries
	queries = [cityQuery, regionQuery],

	// values array
	valuesArray = [], count = 0;

	var sql = cartodb.SQL({ user: 'ramirocartodb' });

	// iterate queries
	_.each(queries, function(query, index, queries) {

	sql.execute(query)
	.done(function(query) {
	var value = query.rows[0].name;
	console.log(value);

	// add values to array
	valuesArray.push(value);

	// add popup
	if (++count == queries.length) {
	marker.bindPopup("<b>UK Reverse Geocoding</b><br>Coordinates: " + "[" + latitude.toFixed(2) + ", " + longitude.toFixed(2) + "]<br>City: " + valuesArray[0] + "<br>Region: " + valuesArray[1]).openPopup();
	}

	})
	.error(function(errors) {
	console.log("Something went wrong!")
	})

	});

	});

	}
	window.onload = main;
	</script>

	</body>
	</html>