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