Mapa interactivo donde podrán ubicarse los POIs (puntos de interés) que el usuario pase como parámetro en la instanciación del recurso. La interfaz es simple e interactiva vía mouse y/o teclado. El mapa utilizado pertenece a OpenStreetMap y es de uso libre.

Para acceder al recurso se utiliza un objeto HTML iframe, el cual deberá embeberse en la página destino. El uso de iframe permite una buena interacción con el usuario para las funciones de control a modo de “vista” del recurso, no permitiendo la manipulación dinámica del mismo en tiempo real (para ello será necesario publicar el framework).

Para crear la instancia se deberá pasar al servicio por método POST un objeto JSON con el siguiente esquema simplificado:

{
  "opciones": [],
  "pois": [
    "coordenadas": {
      "latitud": {
        "type": "number"
      },
      "longitud": {
        "type": "number"
      }
    },
    "titulo": {
      "type": "string"
    },
    "contenido": {
      "type": "string"
    }
  ]
}

donde el campo “contenido” correspondiente a la lista de POIs será interpretado como HTML, por lo que es posible publicar hiper-vínculos, imágenes, etc..

El tamaño del mapa está dado a partir del tamaño del objeto HTML iframe, es decir que el mapa se ajusta al tamaño de la ventana embebida, esto facilita su utilización en aplicaciones responsivas.

...
<iframe src="http://www.rec.unicen.edu.ar/apps-php/localizacion/mapa.php" name="frame-mapa" width="800" height="400">Cargando...</iframe>
<form "http://www.rec.unicen.edu.ar/apps-php/localizacion/mapa.php" method="post" target="frame-mapa">
    <input type="hidden" name="id" value='{"pois":[{"coordenadas":{"latitud":"-36.767890483305","longitud":"-59.880865752697"},"titulo":"ESCUELA SUPERIOR DE DERECHO","contenido":"Escuela Superior de Derecho"}]}' />
    <input type="submit" value="Ver mapa" />
</form>
...