Tutorial

Tutorial

Argenmap v2 desde CDN

jQuery https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
Argenmap http://www.ign.gob.ar/argenmap2/argenmap.jquery.min.js

Cómo incoporar Argenmap v2 en una página web

Argenmap v2 es una librería escrita en JavaScript que funciona incluyendo el código en un sitio web. A continuación se describe el procedimiento para incorporar Argenmap v2 en una página web.

1. Incluir la API en una página web

Incorpar el script de jQuery y Argenmap v2 en la sección head de la página web. 

<!-- 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="http://www.ign.gob.ar/argenmap2/argenmap.jquery.min.js"></script>

El orden en el cual se ingresen los scripts es importante, si se carga primero Argenmap v2 y luego jQuery es posible que ocurra un error.

2. Crear un contenedor (div) en la página web en donde se desee incluir el mapa

Argenmap v2 necesita que se establezca un alto específico para el div. Esto es posible realizarlo con CSS o bien definiendo el estilo con el atributo style de la etiqueta que se utilice. 

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

3. Instanciar el mapa

Por último, es necesario inicializar el mapa con un selector de jQuery. Para ello se debe ejecutar el siguiente código una vez que la página haya terminado de cargarse: 

<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 fue insertado en el paso anterior.

4. El código final debiera verse de la siguiente forma

<!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="http://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>




Practicá cómo hacer un mapa Creá tu propio mapa