Todos los métodos de la API son plugins de jQuery que trabajan sobre el mapa instanciado en una etiqueta HTML. De tal manera, si instanciamos un mapa en un div:
<div id="mapa" style="height:300px"></div> <script> $('#mapa').argenmap(); </script>y luego, más adelante en el código o en la estructura de nuestra aplicación, queremos cambiar el centro o agregar un marcador, la llamada será:
<script> $('#mapa').centro(-34.1445,-58.84); $('#mapa').agregarMarcador({nombre:'Mi casa',lat:-34.216,lon:-58.719}); </script>
Crea una instancia de mapa sobre un elemento HTML. Preferentemente divs con un alto definido en píxels, pero cualquier elemento de tipo block con un alto definido puede usarse.
Argenmap puede instanciarse pasando un objeto como argumento. El objeto puede tener opciones de inicialización. A continuación puedes ver el detalle de las opciones con las que puede inicializarse Argenmap
argumento | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
opciones | objeto |
no |
objeto con opciones de inicialización |
nombre | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
zoom | int | 4 |
no |
Establece el nivel de zoom inicial para el mapa |
centro | array | [-35,-57] |
no |
Establece las coordenadas del centro del mapa. Es un array compuesto por latitud y longitud . |
tipo | string | baseign |
no |
Indica el tipo de mapa que va a instanciarse. Las opciones son vacio , blanco : un mapa sin ninguna capa, satelite ; satelital , hibridoign : mapa con la vista de imágenes de satélite; baseign : mapa con la capa base del IGN. |
proyeccion | string | EPSG:3857 |
no |
La proyección que tendrá el mapa. Estas pueden ser EPSG:3857 y EPSGL:4326 . |
capas | array | [] |
no |
Un array con strings de capas predefinidas. Esta opción puede ser usada en conjunto con tipo blanco para instanciar un mapa con sólo una de las capas (baseign y satelite . |
listarCapaDeMarcadores | boolean | false |
no |
Indica si las capas que contienen los marcadores (si los hubiere) serán visibles en la lista de capas, permitiendo prender y apagar la capa desde el control del mapa. |
mapaFijo | boolean | false |
no |
Si se provee esta opción en true se eliminan los controles de navegación y de zoom, haciendo que el mapa no pueda moverse salvo que se haga por código. |
mostrarBarraDeZoom | boolean | false |
no |
Configurando esta opción en true puede visualizarse una barra para controlar el nivel de zoom. |
proxy nuevo | string | http://crossproxy.aws.af.cm/?u= |
no |
Opción para usar un proxy en todas las consultas que deban hacerse fuera del dominio donde se está mostrándose el mapa. Usar un string vacío para anular la opción. |
Aún configurando mostrarBarraDeZoom
en true
, si el alto del mapa no es suficiente, la barra de zoom se ocultará automáticamente.
IMPORTANTE: Las capas satelitales y base están preparadas para mostrarse en EPSG:3857
, si necesitás instanciar un mapa en EPSG:4326
para luego importar capas WMS que necesiten esa proyección, deberás hacerlo tipo blanco
y luego agregar las capas WMS que necesites.
Luego de instanciar un mapa, puede usarse .centro(lat,lng)
para cambiar el centro del mapa.
Si llamás a .centro()
sin parámetros, devuelve el centro actual del mapa, un array
del tipo [lat,lng].
argumento | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
lat | float | null |
sí |
número indicando los grados decimales de latitud |
lng | float | null |
sí |
número indicando los grados decimales de longitud |
Cuando se usa .centro()
para pedir las coordenadas del centro del mapa se rompe la encadenabilidad de jQuery y este devuelve un array
Aumenta, disminuye o devuelve el nivel de zoom.
Si llamás a zoom() sin parámetros, devuelve un int
que representa el nivel de escala del mapa.
argumento | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
zoom | int | null |
sí |
un entero de 0 a 19 indicando el nivel de zoom al que se quiere visualizar el mapa. |
Cuando se usa .zoom()
para pedir el nivel de zoom del mapa se rompe la encadenabilidad de jQuery y este devuelve un int
.
Cambia a la capa base suministrada como parámetro.
Si no se provee ningún nombre de capa, devuelve el nombre de la capa base actual.
argumento | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
capaBase | string | null |
sí |
El nombre de una de las capas base estándar (Satélite o Base IGN ) o el nombre de una capa base previamente agregada con agregarCapaBaseWMS()
|
Cuando se usa .capaBase()
para pedir la capa base actual del mapa se rompe la encadenabilidad de jQuery y este devuelve un string
indicando el nombre de la capa base actual del mapa.
Superpone una capa desde un servicio WMS al mapa
argumento | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
opciones | objeto | null |
sí |
un set de pares de key :valor que configura el pedido a la capa WMS. Las keys que pueden pasarse son los parámetros que pueden pasarse a cualquier WMS: |
nombre | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
url | string | string vacío |
sí |
La URL del servidor WMS. Ejemplo: http://mapa.ign.gob.ar/wms?. La URL debe finalizar con el signo ? o con el signo & |
capas | string | string vacío |
sí |
Los nombres de las capas separados por comas. (corresponde al formato del parámetro LAYERS de WMS) de las capas que se quieren pedir al servidor WMS, separadas por coma. Ejemplo: departamentos,rios,ciudades |
nombre | string | string vacío |
no |
Nombre que tendrá la capa a agregar. Este es el nombre que se mostrará en el administrador de capas. |
formato | string | image/png |
no |
el formato MIME de archivo: image/jpeg, image/jpg, image/png, image/png8, image/gif |
transparente | boolean | true |
no |
Indica si la capa se pedirá en modo transparente al servicio WMS. Esta opción funciona en conjunto con formato . |
esCapaBase | boolean | false |
no |
Indica si la capa debe tratarse como una capa base o una capa superpuesta. Las capas base pueden alternarse con otras capas base, las superpuestas pueden prenderse o apagarse. |
mostrarAlCargar | boolean | true |
no |
Indica si la capa debe mostrarse una vez que sea agregada. En el caso de ser una capa base esta opción hará que se cambie automáticamente a esta capa una vez cargada. |
proyeccion | string | La proyección en la que esté instanciado el mapa. |
no |
Indica la proyección en la que se pide la capa al servicio WMS. Debe coincidir con la proyección en la que se instanció el mapa. |
version | string | 1.1.1 |
no |
Indica como debe ser conformado el pedido al servicio WMS según la version del servidor WMS que se está consultando. |
El nombre que uses para la capa también será el que uses para hacer referencia a la capa en otros métodos como quitarCapa
o modificarCapa
. Podés dejarlo vacío, pero si vas a necesitar modificar o quitar la capa es buena práctica que le asignes un nombre
El servicio WMS tiene que estar configurado para poder generar las imágenes con el sistema de referencia EPSG:3857
que es el código que define la proyección de OpenStreetMap, Google Maps, Bing Maps, ESRI WEB Maps y demás mapas web populares.
Agrega una capa base desde un servicio WMS al mapa. Esta función es igual a agregarCapaWMS
pero con todas las opciones configuradas por defecto para conformar una capa base.
argumento | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
opciones | objeto | null |
sí |
un set de pares de key :valor que configura el pedido a la capa WMS. Las keys que pueden pasarse son los parámetros que pueden pasarse a cualquier WMS: |
nombre | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
url | string | string vacío |
sí |
La URL del servidor WMS. Ejemplo: http://mapa.ign.gob.ar/wms?. La URL debe finalizar con el signo ? o con el signo & |
capas | string | string vacío |
sí |
Los nombres de las capas separados por comas. (corresponde al formato del parámetro LAYERS de WMS) de las capas que se quieren pedir al servidor WMS, separadas por coma. Ejemplo: departamentos,rios,ciudades |
nombre | string | string vacío |
no |
Nombre que tendrá la capa a agregar. Este es el nombre que se mostrará en el administrador de capas. |
formato | string | image/jpeg |
no |
el formato MIME de archivo: image/jpeg, image/jpg, image/png, image/png8, image/gif |
transparente | boolean | false |
no |
Indica si la capa se pedirá en modo transparente al servicio WMS. Esta opción funciona en conjunto con formato . |
esCapaBase | boolean | true |
no |
Indica si la capa debe tratarse como una capa base o una capa superpuesta. Las capas base pueden alternarse con otras capas base, las superpuestas pueden prenderse o apagarse. |
mostrarAlCargar | boolean | true |
no |
Indica si la capa debe mostrarse una vez que sea agregada. En el caso de ser una capa base esta opción hará que se cambie automáticamente a esta capa una vez cargada. |
proyeccion | string | La proyección en la que esté instanciado el mapa. |
no |
Indica la proyección en la que se pide la capa al servicio WMS. Debe coincidir con la proyección en la que se instanció el mapa. |
version | string | 1.1.1 |
no |
Indica como debe ser conformado el pedido al servicio WMS según la version del servidor WMS que se está consultando. |
El nombre que uses para la capa también será el que uses para hacer referencia a la capa en otros métodos como quitarCapa
o modificarCapa
. Podés dejarlo vacío, pero si vas a necesitar modificar o quitar la capa es buena práctica que le asignes un nombre
El servicio WMS tiene que estar configurado para poder generar las imágenes con el sistema de referencia EPSG:3857
que es el código que define la proyección de OpenStreetMap, Google Maps, Bing Maps, ESRI WEB Maps y demás mapas web populares.
Superpone una capa KML en el mapa
argumento | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
opciones | objeto | null |
sí |
un set de pares de key :valor que configura la capa KML. |
nombre | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
url | string | string vacío |
sí |
La URL del archivo KML. |
nombre | string | string vacío |
no |
Nombre que tendrá la capa. Este es el nombre que se mostrará en la lista de capas. |
agruparItems nuevo | boolean | true |
no |
Indica si los marcadores de la capa KML deben ser agrupados cuando estén demasiado juntos |
sld nuevo | string | string vacío |
no |
URL de un archivo de estilización en formato SLD |
filtro nuevo | string | string vacío |
no |
tipo de geometría a mostrar. Valores posibles Point , Line o Polygon . Configurando este filtro se solucionan problemas que posee el importador de KML cuando se encuentra con Multigeometrías (como suele suceder cuando se agrega un KML directo desde GeoServer, donde los polígonos incluyen un punto como centroide).
|
Atención: El archivo KML y, de ser provisto, el archivo SLD deben estar en el mismo dominio, de lo contrario recibirás un error de Política del mismo origen (Same origin policy).
Para evitar el error de Política del mismo origen (Same origin policy) Argenmap utiliza un proxy simple en PHP configurado a través de la opción proxy de la instancia de Argenmap. Una vez asignado, todos los requests pasan por este proxy. Vos podés utilizar un script de proxy propio y configurarlo asignando su url a proxy
.
Superpone una imagen en el mapa
argumento | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
opciones | objeto | null |
sí |
un set de pares de key :valor que configura la capa imagen. |
nombre | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
url | string | string vacío |
sí |
La URL del archivo de imagen, puede ser relativa o absoluta. |
nombre | string | string vacío |
no |
Nombre que tendrá la capa. Este es el nombre que se mostrará en la lista de capas. |
limites | array | [] |
si |
Un array compuesto por coordenadas Sur, Oeste, Norte y Este |
transparencia | float | 1 |
no |
valor de transparencia para la capa de imagen. Es un valor entre 0 y 1 |
encuadrarAlCargar | boolean | false |
no |
Indica si el nivel de zoom del mapa debe ajustarse para mostrar la imagen cargada o no. |
Quita una capa del mapa.
La referencia a la capa a quitar es a través del nombre
asignado a la capa.
argumento | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
nombre | string | null |
sí |
El nombre asignado a la capa cuando fue creada. |
Para crear un marcador se puede suministrar un objeto con opciones o simplemente hacer la llamada $(selector).agregarMarcador()
y por defecto el marcador se agregará en el centro del mapa.
argumento | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
opciones | objeto | null |
sí |
un set de pares de key :valor que configura opciones extra para el marcador que va a ser creado: |
nombre | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
lat | float | null |
sí |
La latitud para el marcador (coordenadas geográficas) |
lon | float | null |
sí |
La longitud para el marcador (coordenadas geográficas) |
nombre | string | Marcador |
no |
El nombre que tendrá el marcador. Recordá que si bien es opcional, es importante definir el nombre e intentar que sea único para luego poder accederlo si necesitaras modificarlo o quitarlo. |
ícono | string | null |
no |
El nombre de uno de los íconos de la galeria o bien la URL de la imagen PNG a utilizar como ícono.
Podés ver todos los íconos en la sección íconos. El marcador utiliza como punto de anclaje el centro horizontal y el borde inferior de la imagen. Ver Map Icons Collection. |
contenido | string | null |
no |
Contenido HTML que se mostrará al hacer click sobre el marcador. Si no se provee esta opción, el marcador ignorará el click del mouse. |
mostrarContenido | boolean | false |
no |
Indica si el contenido del marcador debe mostrarse automáticamente al agregar el marcador |
capa | string | Marcadores |
no |
Los marcadores se agregan en una capa en el mapa. Con este parámetro podés indicar en qué capa se van a agregar. De no existir la capa, se crea automáticamente. Con esta opción se pueden generar grupos de marcadores que luego podrás apagar o prender activando y desactivando la capa (ver siguiente opción: listarCapa) |
listarCapa | boolean | false |
no |
Por defecto la capa donde se apoyan los marcadores no se lista en el administrador de capas. Si se configura este valor a true la capa aparecerá en el administrador de capas para poder activarla o desactivarla convenientemente. |
Si agregás un marcador con el mismo nombre que otro, el más nuevo reemplazará al anterior. Este comportamiento provoca que al agregar más de un marcador sin nombre, empiecen a pisarse entre sí (por adoptar el nombre por defecto 'Marcador'). Esto no es un error, está hecho así intencionalmente.
Modifica un marcador previamente creado. Las opciones para modificar el marcador son las mismas que al momento de crear uno
La referencia del marcador a modificar es el nombre
asignado al marcador y es el primer parámetro de este método.
argumento | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
nombre | string | null |
sí |
El nombre asignado al marcador cuando fue creado. |
opciones | objeto | null |
sí |
set de pares key :valor con las mismas opciones que se usan para crear un marcador
|
Quita un marcador del mapa.
La referencia al marcador a quitar es a través del nombre
asignado al marcador.
argumento | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
nombre | string | null |
sí |
El nombre asignado al marcador cuando fue creado. |
Crea varios marcadores sobre el mapa a partir de un array de objetos que definen las opciones de cada marcador.
Cada objeto es igual al que recibe agregarMarcador()
argumento | tipo | predeterminado | requerido | descripción |
---|---|---|---|---|
[marcador1, marcador2,..., marcadorN] | array | null |
sí |
Array de objetos simples. Cada objeto debe ser un objeto de opciones válido como se usaría con agregarMarcador(). |
Argenmap 2 utiliza la API de OpenLayers versión 2.12.
Una vez que se instancia argenmap en un selector, se guarda una instancia de clase Argenmap
asociado al mismo a través de la funcionalidad $.data()
de jQuery.
Asimismo, la clase Argenmap
guarda una instancia de clase OpenLayers.Map en la propiedad mapa
. Referenciando a esta propiedad podés acceder a cualquier otra funcionalidad que necesites de OpenLayers para realizar operaciones y aplicaciones más complejas:
var claseOpenLayersMap = $('#mapa').data('argenmap').mapa; claseOpenLayersMap.getZoom(); //devuelve el nivel de zoom actual del mapa
Documentación de OpenLayers 2.12: http://dev.openlayers.org/releases/OpenLayers-2.12/doc/apidocs/files/OpenLayers-js.html
Ejemplos de OpenLayers: http://openlayers.org/dev/examples/
La galería de íconos es un diccionario de conveniencia para utilizar marcadores predeterminados. En lugar de suministrar la URL de una imagen que fueras a utilizar como ícono de un marcador, podes usar el nombre de uno de estos íconos.
El diccionario está compuesto por íconos de la librería Map Icons Collection de Nicolas Mollet.
Por ejemplo, estas dos llamadas a .agregarMarcador()
tienen el mismo resultado:
$('#mapa').agregarMarcador({icono:"tornado"})
$('#mapa').agregarMarcador({icono:"http://ign.gob.ar/argenmap2/argenmap.jquery/img/iconos/tornado.png"})
nombre | ícono | descripción |
---|---|---|
Establecimientos | ||
aeropuerto | ![]() |
Aeropuertos y pistas de aterrizaje |
cajero | ![]() |
ATM / Cajero electrónico |
correo | ![]() |
Correo |
restaurante | ![]() |
Comedor / Restaurante |
hospital | ![]() |
Hospital / Clínica |
policia | ![]() |
Comisaría / Estación de policía |
estacionDeServicio | ![]() |
Estación de servicio |
tren | ![]() |
Estación de tren |
Eventos | ||
manifestacion | ![]() |
Manifestación / Turba |
peligro | ![]() |
Atención / Peligro |
delito | ![]() |
Delito / Crimen |
inundacion | ![]() |
Inundaciones |
tormenta | ![]() |
Tormenta |
tornado | ![]() |
Tornado |
terremoto | ![]() |
Terremoto / Derrumbe |
volcan | ![]() |
Erupción volcánica / Cenizas |
corteDeLuz | ![]() |
Corte de luz / Apagón |
Terreno | ||
pico | ![]() |
Montaña / Cerro / Pico |
cascada | ![]() |
Cascada / Salto |
glaciar | ![]() |
Glaciar |