Ejemplos
Ejemplos
Creando un mapa básico
Código
<script>
//un mapa en una sola línea de código :)
$('#mapa').argenmap();
</script>
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>
<script>
//inicializando el mapa con opciones
var opciones = {centro: [-32.6533333,-70.0108333]};
$('#mapa').argenmap(opciones);
</script>
<script>
//encadenando llamadas, en una sola línea de código
$('#mapa').argenmap().centro(-32.6533333,-70.0108333);
</script>
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>
<script>
//inicializando el mapa con opciones
var opciones = {zoom: 12,centro: [-32.653,-70.011]};
$('#mapa').argenmap(opciones);
</script>
<script>
//encadenando llamadas, en una sola línea de código
$('#mapa').argenmap().centro(-32.653,-70.011).zoom(12);
</script>
Resultado
Alternando a la vista satelital
Código
<script>
//un mapa en una sola línea de código :)
$('#mapa').argenmap({tipo: 'satelite'});
</script>
<script>
//inicializando el mapa
$('#mapa').argenmap();
//cambiando a capa base satélite
$('#mapa').capaBase('Satélite');
</script>
<script>
//encadenando llamadas, en una sola línea de código
$('#mapa').argenmap().capaBase('Satélite');
</script>
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>
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>
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>
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>
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>
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>