<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<meta charset="utf-8">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
form{
padding: 20px;
border: dotted;
}
</style>
</head>
<body>
<br>
<div style="border:dotted; background-color:red;">
<h3>Guardar Punto</h3>
<input type="text" placeholder="latitud" id="latitudAlta">
<input type="text" placeholder="longitud" id="longitudAlta">
<input type="text" placeholder="nombre" id="nombreAlta">
<button id="botonGuardar">Guardar</button>
</div>
<br>
<div style="border:dotted; background-color:yellow;">
<h3>Eliminar Punto</h3>
<input type="text" placeholder="id punto geografico" id="idBaja">
<button id="botonEliminar">Eliminar</button>
</div>
<br>
<div style="border:dotted; background-color:blue;">
<h3>Buscar Cercanos</h3>
<input type="text" placeholder="latitud" id="latitudCercana">
<input type="text" placeholder="longitud" id="longitudCercana">
<button id="botonBuscarCercanos">Buscar</button>
</div>
<br>
<div style="border:dotted; background-color:green;">
<h3>Buscar Punto</h3>
<input type="text" placeholder="id" id="idBuscar">
<button id="botonBuscarPunto">Buscar</button>
</div>
<script type="text/javascript" src="joda.js"></script>
</body>
</html>