JSFiddle - React, Tailwind, and code Playground

by saturngod

HTML

<h1>What township name in Yangon ?</h1>
<input type="text" id="lat" placeholder="Lat" value="16.812093"/>
<input type="text" id="lon" placeholder="Lon" value="96.144276"/>
<input type="submit" id="byBtn" value="Change" onclick="getData()"/>
<div id="name"></div>

CSS

#name {
    font-size:20px;
    padding-top:10px;
}

JavaScript

function getData(){
    
   var lat = parseFloat(document.getElementById('lat').value);
    var lon = parseFloat(document.getElementById('lon').value);
   
    if(isNaN(lat)) {
        alert("Invalid Lat");
        return;
    }
    else if (isNaN(lon)) {
        alert("Invalid Lon");
        return;
    }

    sql = "SELECT name FROM YANGON WHERE ST_Intersects (the_geom,CDB_LatLng("+lat+","+lon+"))"
                
    $("#name").html("Loading...");
    $.getJSON('https://saturngod.cartodb.com/api/v2/sql/?q='+sql, function(data) {
        if(data.rows.length > 0 ) {
            row = data.rows[0];
            $("#name").html(row.name);
        }
    });
   
  
    
}