Ejemplos

Ejemplos

Creando un mapa básico

Código

<script>
  //un mapa en una sola línea de código :)
  $('#mapa').argenmap();
</script>

Ejecutar ejemplo

Resultado

Modificando el centro del mapa

Código

<script>
//un mapa en una sola línea de código :)
$('#mapa').argenmap();
//cambiamos el centro a las coordenadas del Aconcagua
$('#mapa').centro(-32.6533333,-70.0108333);
</script>

Ejecutar ejemplo

<script>
//inicializando el mapa con opciones
var opciones = {centro: [-32.6533333,-70.0108333]};
$('#mapa').argenmap(opciones);
</script>

Ejecutar ejemplo

<script>
//encadenando llamadas, en una sola línea de código
$('#mapa').argenmap().centro(-32.6533333,-70.0108333);
</script>

Ejecutar ejemplo

Resultado

Cambiando el nivel de zoom

Código

<script>
//un mapa en una sola línea de código :)
$('#mapa').argenmap({centro: [-32.653,-70.011]});
//cambiamos el zoom
$('#mapa').zoom(12);
</script>

Ejecutar ejemplo

<script>
//inicializando el mapa con opciones
var opciones = {zoom: 12,centro: [-32.653,-70.011]};
$('#mapa').argenmap(opciones);
</script>

Ejecutar ejemplo

<script>
//encadenando llamadas, en una sola línea de código
$('#mapa').argenmap().centro(-32.653,-70.011).zoom(12);
</script>

Ejecutar ejemplo

Resultado

Alternando a la vista satelital

Código

<script>
//un mapa en una sola línea de código :)
$('#mapa').argenmap({tipo: 'satelite'});
</script>

Ejecutar ejemplo

<script>
//inicializando el mapa
$('#mapa').argenmap();
//cambiando a capa base satélite
$('#mapa').capaBase('Satélite');
</script>

Ejecutar ejemplo

<script>
//encadenando llamadas, en una sola línea de código
$('#mapa').argenmap().capaBase('Satélite');
</script>

Ejecutar ejemplo

Resultado

Generando un marcador en el centro

Código

<script>
//agregarMarcador sin parámetros agrega
//un marcador al centro del mapa
//un mapa en una sola línea de código :)
$('#mapa').argenmap().agregarMarcador();
</script>

Ejecutar ejemplo

Resultado

Generando marcadores con popup

Código

<script>
//un mapa en una sola línea de código :)
$('#mapa').argenmap()
  .centro(-32.91110160485335,-68.83364868164072)
  .zoom(10);
$('#mapa').agregarMarcador({
  lat: -32.91110160485335,
  lon: -68.83364868164072,
  contenido: '<h3>Hola mundo!</h3>Soy un marcador pinup!',
  nombre: 'marcador1'
});
</script>

Ejecutar ejemplo

Resultado

Generando varios marcadores

Código

<script>
//un mapa en una sola línea de código :)
$('#mapa').argenmap();

//creamos los marcadores en un array
var marcadores = [
  {nombre: 'cataratas', lat: -25.695278, lon: -54.436667, contenido:'Cataratas del Iguazú!'},
  {nombre: 'atucha', lat: -34.05, lon: -59.2, contenido:'Atucha: central eléctrica'},
  {nombre: 'minera', lat: -27.31,  lon: -66.608617, contenido:'Minera Lumbrera: buena mina'},
  {nombre: 'vacio', lat: -32.911,lon: -68.833, contenido:'No soy solo un marcador vacío, tengo sentimientos :(',icono:'hueco'}
];
$('#mapa').agregarMarcadores(marcadores);
</script>

Ejecutar ejemplo

Resultado

Generando marcadores agrupados

Código

<script>
//un mapa en una sola línea de código :)
$('#mapa').argenmap();

//tomamos los marcadores del ejemplo anterior, pero agregamos
//capa y listarCapa para poder ver
//los grupos en el administrador de capas
var marcadores = [
  {nombre: 'cataratas', lat: -25.695278, lon: -54.436667, contenido:'Cataratas del Iguazú!', capa: 'Maravillas', listarCapa:true},
  {nombre: 'atucha', lat: -34.05, lon: -59.2, contenido:'Atucha: central eléctrica', capa: 'Recursos', listarCapa: true},
  {nombre: 'minera', lat: -27.31,  lon: -66.608617, contenido:'Minera Lumbrera: buena mina', capa: 'Recursos'},
  {nombre: 'vacio', lat: -32.911,lon: -68.833, contenido:'No soy solo un marcador vacío, tengo sentimientos :(', icono:'hueco', capa: 'Maravillas'}
];
$('#mapa').agregarMarcadores(marcadores);
</script>

Ejecutar ejemplo

Resultado

Superponiendo capa WMS

Código

<script>
//un mapa en una sola línea de código :)
$('#mapa').centro(-25.9788, -59.4379).zoom(7);

//configuración para una capa del WMS de Formosa
var formosa = {
  url:'http://idef.formosa.gob.ar/servicios/wms?',
  capas:'mce_prov_escuelas',
  nombre: 'Escuelas de la provincia de Formosa'
};
$('#mapa').agregarCapaWMS( formosa );
</script>

Ejecutar ejemplo

Resultado

Superponiendo capas KML publicadas

Código

<script>
//un mapa en una sola línea de código :)
$('#mapa').centro(-25.9788, -59.4379).zoom(7);

//configuración para una capa del WMS de Formosa
var arroyos = {
  url:'arroyos.kml',
  nombre: 'Cuencas de arroyos'
};
var inundaciones = {
  url:'inundacion.kml',
  nombre: 'Zonas inundadas'
};
var topografia = {
  url:'topografia.kml',
  nombre: 'Curvas de nivel'
};
$('#mapa').agregarCapaKML( inundacion )
  .agregarCapaKML(arroyos)
  .agregarCapaKML(topografia);
</script>

Ejecutar ejemplo

Resultado