El formato JSON en los últimos años ha dominado la programación de páginas web y por ende siempre buscamos obtener nuestra información mediante este formato, principalmente cuando necesitamos la información desde Javascript.
Algo muy usual es que necesitemos poner un selector de ubicación en un formulario y para esto paginasweb.cr pone a disposición un servicio que devuelve provincias, cantones y distritos en formato JSON de manera gratuita con un CDN asegurando que el servicio siempre va a estar disponible de manera gratuita para cualquier uso, tanto comercial en producción o académico.
¿Como se usa?
La lista de provincias cantones y distritos tienen como ID el número real con el que trabaja el Tribunal Supremo de elecciones de Costa Rica. Esa es la razón por lo que los id’s no comienzan en 0 como en un arreglo usual.
Provincias
Para obtener las provincias de Costa Rica la dirección es la siguiente:
https://ubicaciones.paginasweb.cr/provincias.json
Lo cual devuelve una versión mimificada de lo siguiente:
{
1: "San José",
2: "Alajuela",
3: "Cartago",
4: "Heredia",
5: "Guanacaste",
6: "Puntarenas",
7: "Limón"
}
Cantones
Para obtener los cantones de una provincia específica se debe crear una URL como la siguiente:
https://ubicaciones.paginasweb.cr/provincia/id_provincia/cantones.json
Entonces por ejemplo si quisiéramos los cantones de la provincia de San José que tiene el id #1 la URL sería:
https://ubicaciones.paginasweb.cr/provincia/1/cantones.json
Lo cual devuelve una versión mimificada de lo siguiente:
{
1: "Central",
2: "Escazú",
3: "Desamparados",
4: "Puriscal",
5: "Tarrazú",
6: "Aserrí",
7: "Mora",
8: "Goicoechea",
9: "Santa Ana",
10: "Alajuelita",
11: "Vázquez De Coronado",
12: "Acosta",
13: "Tibás",
14: "Moravia",
15: "Montes De Oca",
16: "Turrubares",
17: "Dota",
18: "Curridabat",
19: "Pérez Zeledón",
20: "León Cortés Castro"
}
Distritos
Para obtener los distritos de un cantón específico se debe crear una URL como la siguiente:
https://ubicaciones.paginasweb.cr/provincia/id_privincia/canton/id_canton/distritos.json
Entonces por ejemplo si quisiéramos los distritos del cantón de Montes de Oca (Cantón #15 de San José) de la provincia de San José (provincia #1) la URL sería:
https://ubicaciones.paginasweb.cr/provincia/1/canton/15/distritos.json
Lo cual devuelve una versión mimificada de lo siguiente:
{
1: "San Pedro",
2: "Sabanilla",
3: "Mercedes",
4: "San Rafael"
}
Ejemplo
El siguiente es un ejemplo en jQuery de como obtener la lista de provincias de Costa Rica y generar un selector de provincia.
<html>
<head>
<title>Obteniendo las provincias</title>
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#enlaceajax").click(function (evento) {
$.ajax({
dataType: "json",
url: "https://ubicaciones.paginasweb.cr/provincias.json",
data: {},
success: function (data) {
var html = "<select>";
for(key in data) {
html += "<option value='"+key+"'>"+data[key]+"</option>";
}
html += "</select";
$('#destino').html(html);
}
});
});
})
</script>
</head>
<body>
<a href="#" id="enlaceajax">Obtener provincias</a>
<br>
<div id="destino"></div>
</body>
</html>
Un ejemplo más completo utilizando los mapas de Google
Notas importantes
- El servicio usa el header access-control-allow-origin:* para que pueda ser solicitado usando Javascript desde cualquier dominio.
- El servicio puede ser solicitado por medio de http y https
Problema en Firefox Ubuntu 16.04
Imagen: https://ibb.co/e7Op26
Gracias por tu comentario Alejandro. La semana pasada cambié de servidor y olvidé activar el CORS a ese sitio.
Ya esta funcionando de nuevo.
Saludos
Hola Felipe, crees posible agregar el nuevo cantón #16 de Alajuela: Río Cuarto. Con el distrito: Río Cuarto??
Buenos días Emilio
Gracias por el comentario, ya agregué el cantón #82 de Costa Rica: Río Cuarto con su único distrito con el mismo nombre, como se puede ver en la siguiente noticia de la presidencia Costa Rica
Sera posible hacerlo a la inverza? mediante la ubicacion GPS que se carguen la probincia, canton y distrito? ya que la mayoria de gente no sabe este dato