argenmap.jquery v2

Cómo empezar

argenmap.jquery es una librería escrita en JavaScript y funciona incluyendo el archivo con el script en tu página o sitio web.

No es necesario que lo descargues, podés incluirlo directamente desde el sitio web del Instituto Geográfico Nacional.

En estos pasos te enterás como hacer una página simple con un mapa de Argentina con argenmap.jquery

Paso 1: HTML

Primero tenés que tener un archivo HTML bien redactado. Este es un ejemplo de un HTML5 básico:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Paso 2: scripts

Ahora tenés que incluir los scripts de jQuery y de Argenmap en la sección head de tu página.

<!-- jQuery, vinculado directo a cdn de google -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- ArgenMap v2, vinculado directo desde el Instituto Geográfico Nacional -->
<script type="text/javascript" src="https://www.ign.gob.ar/argenmap2/argenmap.jquery.min.js"></script>

Importante: El orden de los scripts es importante, si los incluís al revés (primero argenmap y luego jQuery) podés ver un error.

Paso 3: contenedor

Para ubicar el mapa necesitás usar un contenedor. Este puede ser una etiqueta p, div o cualquier otra etiqueta que te permita alojar cómodamente el mapa.

Lo importante es que el contenedor necesita tener definido un alto en pixels. Esto podés hacerlo con CSS o bien definiendo el estilo con el atributo style de la etiqueta que uses.

Para los fines prácticos en este ejemplo usamos el estilo definido en el atributo style de un div

<div id="mapa" style="height:450px;"></div>

Es conveniente usar un atributo class o id para luego poder ubicar fácilmente el contenedor con los selectores CSS que utiliza jQuery

Paso 4: instanciar el mapa

Por último tenés que inicializar el mapa con un selector de jQuery. Para esto necesitás ejecutar código cuando la página haya terminado de cargarse, con un script como este:

<script>
//con esta llamada, el código se ejecuta
//cuando la página terminó de cargarse
$(document).ready(function(){
  $('#mapa').argenmap();
});
</script>

#mapa es el selector id del div que insertamos en el paso anterior.

Todo junto te queda así:

<!DOCTYPE html>
<html>
  <head>
  <!-- jQuery, vinculado directo a cdn de google -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <!-- ArgenMap v2, vinculado directo desde el Instituto Geográfico Nacional -->
  <script type="text/javascript" src="https://www.ign.gob.ar/argenmap2/argenmap.jquery/argenmap.jquery.min.js"></script>
  </head>
  <body>
	<div id="mapa" style="height:450px;"></div>
	<script>
	//con esta llamada, el código se ejecuta
	//cuando la página terminó de cargarse
	$(document).ready(function(){
	  $('#mapa').argenmap();
	});
	</script>
  </body>
</html>

Podés copiar y pegar este código para ver el ejemplo más simple de una página con un mapa de Argenmap

Conclusión

argenmap.jquery es muy fácil de usar, podés tener tu mapa en menos de 5 minutos.

Claro que si te ponés serio podés hacer mucho más: instanciar argenmap con opciones iniciales, manipular zoom y centro, agregar capas y marcadores.

Para personalizar tu mapa y aprender las funcionalidades de argenmap.jquery, podés ver la documentación de la API, o consultar los ejemplos, usar el constructor de mapas y colaborar o hacer preguntas en el foro de ayuda.

argenmap v2

Audiencia

Requerimientos