1.2. Partes del mapa
Como se vio en la sección anterior, un mapa es generado uniendo código HTML, declaraciones de estilos y código de inicialización. Vamos a mirar cada una de esas partes un poco más en detalle.
1.2.1. Código HTML del mapa
El código HTML para el mapa del ejemplo anterior genera un sólo elemento en el documento:
<div id="mapa"></div>
Este elemento <div> servirá como contenedor para el mapa.
Acá usamos un elemento
<div>, pero el contenedor del mapa puede ser cualquier elemento del tipo bloque.En este caso, le damos al contenedor un atributo id así podemos hacer referencia a él fácilmente, desde otra parte del código.
1.2.2. Estilo del mapa
argenmap.jquery no adivina el alto de tu mapa. Por esto es que es necesario especificar por estilo cuál va a ser la altura que queremos que tenga el mapa, declarando la altura del contenedor por CSS utilizando la etiqueta style. haciendo referencia al div con id="mapa" para definirle un alto (height).
<style type="text/css">
div#mapa {
height:315px;
}
</style>
En este caso especificamos una altura de 315 píxeles pero no específicamos un ancho.
El comportamiento predeterminado de los bloques (como por ejemplo un div) es ocupar todo el ancho disponible (es decir, width=100%), por lo tanto podemos prescindir de la definición de un ancho para nuestro mapa y dejar que ocupe a lo ancho, lo que ocupa el elemento que lo contiene.
En el ejemplo, definimos el estilo en la sección head, dentro de un
<style></style>. Pero también podríamos hacerlo definiendo el estilo inline (<div id="mapa" style="height:315px"></div>) o en un archivo CSS aparte.
1.2.3. Código de inicialización del mapa
El siguiente paso para generar el mapa es incluir algo de código javascript para construirlo. En nuestro caso, incluímos un elemento <script> en la sección <head> para que haga el trabajo:
<script type="text/javascript">
$(document).ready(function(){
$("#mapa").argenmap().centro(-32,-65).zoom(6);
});
</script>
Antes de que nuestro código de inicialización pueda ser ejecutado, las librerías jQuery, Google Maps API y argenmap.jquery tienen que haber sido cargadas.
De manera similar, nuestro código de incialización no puede correr hasta que el elmento contenedor del mapa esté listo (en este caso
<div id="mapa"></div>) .
1.2.3.1. Análisis del código de inicialización
Miremos en detalle lo que hace el script de inicialización. La primera línea del script usa la técnica jQuery para asegurarse que la siguiente línea sea ejecutada cuando el documento ya esté cargado.
$(document).ready();
En realidad, aquí tenemos dos llamadas a función. $() y .ready(). Esto es práctica común para quien usa jQuery y puede ser confuso para quienes se manejan puramente con javascript.
Al llamar al código de inicialización usando
$(document).ready(), nos aseguramos de que las librerías ya estén cargadas y de que el contenedor del mapa ya esté listo para poder correr el código de inicalización. Esta magia es por cortesía de jQuery y su método $.ready().
Pero en definitiva, lo único que hace falta para hacer uso de esta funcionalidad de jQuery es escribir $(document).ready() y a la función ready() pasarle como parámetro, una función que es la que queremos que se ejecute al estar listo el documento.
Esto nos lleva al siguiente análsis.
La función $.ready() recibe lo siguiente:
function() { $('#mapa').argenmap().centro(-32,-65).zoom(6) }
En esta misma línea hacemos 3 cosas
- Convertimos el
<div>en un mapa de argenmap.
- Centramos el mapa en latitud 32 grados Sur y longitud 65 grados Oeste.
- Acercamos el mapa al nivel de zoom
6.
jQuery permite encadenar las llamadas a función sobre un objeto. Es por eso que una sóla línea podemos operar sobre el mapa para modificar su centro y su nivel de zoom.
Ejercicio
En este ejercicio, vamos a practicar con las partes del mapa separadas. Las partes del código las encontrás en las pestañas HTML, CSS y Javascript.
1. Cambiar el alto del mapa a 600px
- Hacé click en CSS.
- Modificá el valor
315pxy escribí600px.
2. Cambiar el centro del mapa
Vamos a probar con las coordenadas (latitud:-42.5, longitud: -67.3).
- Hacé click en JavaScript.
- Cambiá el código que dice
centro(-32,-65)para que quede:centro(-42.5,-67.3)
2. Cambiar el nivel de zoom del mapa
Vamos a probar con el nivel de zoom 9.
- En la pestaña JavaScript, cambiá el código que dice
zoom(6)para que quede:zoom(9)
1.2.4 ¿Por qué el mapa dice Google Maps?
La base programática de argenmap.jquery v1 es la librería Google Maps API. Podés ver más detalle en Relación entre argenmap.jquery y Google Maps API.
Esta es la anatomía de un mapa de Argenmap.
Para seguir entendiendo toda la funcionalidad y la diferencia entre argenmap.jquery y Google Maps API podés continuar leyendo acerca de las Capas base de Argenmap .
Anterior: 1.1. Crear un mapa
Siguiente: 1.3. Capas base de Argenmap