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>