API Georeferenciada

Introduccion

El siguiente tutorial muestra el uso del API Georeferenciada de la ciudad, por medio de una llamada obtendremos una lista de lugares cercanos en un radio de 500 metros y los visualizaremos en un mapa de Google Maps. Lo unico que necesitas son conocmientos basicos de Javascript y/o jQuery.

Prueba de la consulta

Primero, analicemos el resultado de una consulta al API por medio de cURL. Tambien puedes hacerlo mediante el navegador.

curl -X GET http://datos.labplc.mx/georeferencia.json?&latitud=19.443739&longitud=-99.182540&radio=500
-- resultado --
{
    "consulta": {
        "cuadrante": {
            "id": 366,
            "delegacion": "MIGUEL HIDALGO",
            "sector": "TACUBA",
            "nomenclatura": "P-3.4.16",
            "telefono": "5546052431",
            "idnextel": "62*800*10357",
            "coordenadas": "{\"type\":\"Polygon\",\"coordinates\":[[[-99.178062,19.438181],[-99.17609,19.440644],[-99.176714,19.441394],[-99.178522,19.44363],[-99.181316,19.447005],[-99.181496,19.447257],[-99.182294,19.448204],[-99.182422,19.447386],[-99.182634,19.446034],[-99.18299,19.443529],[-99.183547,19.43966],[-99.183575,19.439084],[-99.183536,19.438526],[-99.183599,19.438239],[-99.183438,19.437979],[-99.183358,19.437394],[-99.182123,19.437298],[-99.181466,19.437037],[-99.180569,19.436691],[-99.179693,19.436326],[-99.17931,19.436135],[-99.178062,19.438181]]]}"
        },
        "ubicaciones": [
            {
                "id": "770ed3b6-b699-4fea-af1c-24eb58165ee1",
                "nombre": "Clínica México-España",
                "latitud": "19.445328",
                "longitud": "-99.182686",
                "distancia": "176.565104891",
                "id_delegacion": 11,
                "nombre_delegacion": "Miguel Hidalgo",
                "direccion": "Mariano Escobedo 148, Col. Anáhuac, C.P. 11320",
                "id_categoria": 1,
                "nombre_categoria": "hospitales",
                "dataset": "salud_hospitales",
                "detalles": {
                    "id": "Clínica-135",
                    "institucion": "SEDESA",
                    "tipo": "Clínica, Centro de Mastografías, Prueba de Híbridos, Laboratorio de Citopatología, ",
                    "subtipo": "T-III",
                    "telefono": "55450335",
                    "horario": "Lunes a Viernes \r\n8 a 14:30",
                    "id_ubicacion": "770ed3b6-b699-4fea-af1c-24eb58165ee1"
                }
            },
            {
                "id": "881a3709-f65a-4c07-a4c7-ff7cebcbed13",
                "nombre": "Verificentro 9024",
                "latitud": "19.4454166666667",
                "longitud": "-99.1824388888889",
                "distancia": "186.016666561",
                "id_delegacion": 11,
                "nombre_delegacion": "Miguel Hidalgo",
                "direccion": "MARIANO ESCOBEDO # 164, COL. ANAHUAC",
                "id_categoria": 4,
                "nombre_categoria": "verificentros",
                "dataset": "sedema_verificentros",
                "detalles": {
                    "id": 9024,
                    "razon_social": "SERVICIOS DE MEDICION ORGANIZADA DE GASES, S.A. DE C.V.",
                    "telefono": "55317894 55450421",
                    "id_ubicacion": "881a3709-f65a-4c07-a4c7-ff7cebcbed13"
                }
            },
            {
                "id": "4ac3cf2a-2d8b-4add-b7d6-a11d982ee340",
                "nombre": "PREESCOLAR GENERAL\n- ELIZABETH KENNY",
                "latitud": "19.4418760001094",
                "longitud": "-99.1822150001557",
                "distancia": "209.034105201",
                "id_delegacion": 11,
                "nombre_delegacion": "Miguel Hidalgo",
                "direccion": "\nLAGO ISEO NO 132, ANAHUAC I, DELEGACION MIGUEL HIDALGO, MEXICO DF.",
                "id_categoria": 6,
                "nombre_categoria": "escuelas",
                "dataset": "escuelas",
                "detalles": false
            },
            {
                "id": "50065543-28aa-4f6d-a16e-4b635176cfee",
                "nombre": "PRIMARIA PARA ADULTOS\n- ESTADO DE HIDALGO",
                "latitud": "19.4448520001264",
                "longitud": "-99.1797060000127",
                "distancia": "322.092456988",
                "id_delegacion": 11,
                "nombre_delegacion": "Miguel Hidalgo",
                "direccion": "DOMCILIO:\nAV MARINA NACIONAL NO 222, ANAHUAC I, DELEGACION MIGUEL HIDALGO, MEXICO DF.",
                "id_categoria": 6,
                "nombre_categoria": "escuelas",
                "dataset": "escuelas",
                "detalles": false
            },
            {
                "id": "6ec791c0-4bc6-47d5-87c0-2dfc57435164",
                "nombre": "Estacionamiento Publico MH-0319",
                "latitud": "19.44638889",
                "longitud": "-99.18116666",
                "distancia": "326.869098803",
                "id_delegacion": 11,
                "nombre_delegacion": "Miguel Hidalgo",
                "direccion": "MARINA NACIONAL 159",
                "id_categoria": 3,
                "nombre_categoria": "estacionamientos",
                "dataset": "estacionamientos",
                "detalles": {
                    "id_utl": "MH-0319 ",
                    "id_ubicacion": "6ec791c0-4bc6-47d5-87c0-2dfc57435164",
                    "edificio": false,
                    "estructura": false,
                    "superficie": false,
                    "cajones": null,
                    "id": "4e82b578-321d-4d80-b72a-779925efd810"
                }
            },
            {
                "id": "a872e9db-3484-4b55-bb22-4a51b375dc18",
                "nombre": "PREESCOLAR GENERAL CON SERVICIO ASISTENCIAL\n- MARIA LUNA",
                "latitud": "19.4433670000855",
                "longitud": "-99.1786759999598",
                "distancia": "407.842441926",
                "id_delegacion": 11,
                "nombre_delegacion": "Miguel Hidalgo",
                "direccion": "\nLAGO XOCHIMILCO NO 145, ANAHUAC I, DELEGACION MIGUEL HIDALGO, MEXICO DF.",
                "id_categoria": 6,
                "nombre_categoria": "escuelas",
                "dataset": "escuelas",
                "detalles": false
            },
            {
                "id": "3532f8e2-2b55-4ff7-a4c7-7f0ef3df6009",
                "nombre": "Estacionamiento Publico MH-0114",
                "latitud": "19.440082",
                "longitud": "-99.184731",
                "distancia": "465.634936418",
                "id_delegacion": 11,
                "nombre_delegacion": "Miguel Hidalgo",
                "direccion": "LAGO ALBERTO 320",
                "id_categoria": 3,
                "nombre_categoria": "estacionamientos",
                "dataset": "estacionamientos",
                "detalles": {
                    "id_utl": "MH-0114 ",
                    "id_ubicacion": "3532f8e2-2b55-4ff7-a4c7-7f0ef3df6009",
                    "edificio": true,
                    "estructura": false,
                    "superficie": false,
                    "cajones": 1100,
                    "id": "f1b6a5d3-b1d1-452d-80b2-7e6210cad8fc"
                }
            },
            {
                "id": "2b3e3091-6b85-4dbf-99d6-7539137f238a",
                "nombre": "Estacionamiento Publico MH-0113",
                "latitud": "19.439632",
                "longitud": "-99.18442",
                "distancia": "495.648331642",
                "id_delegacion": 11,
                "nombre_delegacion": "Miguel Hidalgo",
                "direccion": "LAGO ALBERTO 319",
                "id_categoria": 3,
                "nombre_categoria": "estacionamientos",
                "dataset": "estacionamientos",
                "detalles": {
                    "id_utl": "MH-0113 ",
                    "id_ubicacion": "2b3e3091-6b85-4dbf-99d6-7539137f238a",
                    "edificio": false,
                    "estructura": false,
                    "superficie": false,
                    "cajones": null,
                    "id": "67fd90b0-d9e6-4a9d-b11b-adf22a99632c"
                }
            },
            {
                "id": "e495641b-ded8-4dfb-a325-4dc3fb935a0c",
                "nombre": "ESCUELA SECUNDARIA TECNICA 5",
                "latitud": "19.4392850000078",
                "longitud": "-99.1819779999108",
                "distancia": "496.56570042",
                "id_delegacion": 11,
                "nombre_delegacion": "Miguel Hidalgo",
                "direccion": "\nLAGO ALBERTO NUM 431, ANAHUAC I, DELEGACION MIGUEL HIDALGO, MEXICO DF.",
                "id_categoria": 6,
                "nombre_categoria": "escuelas",
                "dataset": "escuelas",
                "detalles": false
            }
        ],
        "paginacion": {
            "actual": 1,
            "total": 1
        }
    }
}

La respuesta que obtenemos esta contenida en el objeto consulta, el cual contiene cuadrante, ubicaciones y paginacion. El cuadrante corresponde con el cuadrante de la SSP y los datos del encargado del mismo. Ubicaciones es un array que contiene las ubicaciones cercanas al punto enviado y la paginacion nos permite realizar mas consultas agregando el parametro pagina=numero en la URL de peticion.

Lo siquiente que haremos es preparar nuestra consulta utilizando jsonp para poder obtener el json anterior

http://datos.labplc.mx/georeferencia.json?&latitud=19.443739&longitud=-99.182540&radio=500&jsonp=procesa_datos

Google Maps

El siguiente codigo prepara una sesion para utilizar Google Maps. Es importante tomar en cuenta que para poder utilizar este ejemplo debemos contar con un Key valido de Google Maps API.

<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=tugooglemapskey&sensor=false"></script>

Y ahora agregamos el siguiente codigo de javascript para incializar nuestro mapa

//google maps, marker Central
var map;
var centro_latlng = new google.maps.LatLng(19.443739,-99.182540);
var centro_marker = new google.maps.Marker({
	title:"Mi Ubicacion",
	position:centro_latlng,
	draggable:false
});

//la funcion que recibe los datos de jsonp

function procesa_datos(datos) {
	
	var mapOptions = {
	  //utilizamos como centro la ubicacion central
	  center: new google.maps.LatLng(19.443739,-99.182540),
	  zoom: 16,
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	//inicializar el mapa
	map = new google.maps.Map(document.getElementById("map-canvas"),
	    mapOptions);
	
	//agregamos el marker al mapa
	centro_marker.setMap(map);

	var x = 0;
	for(x=0; x<datos.consulta.ubicaciones.length;x++) {
		console.log("adasdasd");
		
		//alert(datos.consulta.ubicaciones[x].latitud);
		console.log(datos.consulta.ubicaciones[x].latitud);
		console.log(datos.consulta.ubicaciones[x].longitud);
		
		var nuevo_punto = new google.maps.LatLng(datos.consulta.ubicaciones[x].latitud, datos.consulta.ubicaciones[x].longitud);
		console.log(nuevo_punto);
		var nuevo_marker = new google.maps.Marker({
			title:datos.consulta.ubicaciones[x].nombre,
			position:nuevo_punto,
			draggable:false
		});

		nuevo_marker.setMap(map);
	
	}
	
}