Archivo

Posts Tagged ‘mapa’

Mi primer mapa con Leaflet

30 de abril de 2017 Deja un comentario

En primer lugar, entro en la web de descarga de Leaflet:

http://leafletjs.com/download.html

Y me descargo la versión estable (en este caso era la Leaflet 1.0.3). Descomprimo el zip en mi directorio de trabajo (en una carpeta llamada js, lógicamente hay que tenerlo todo ordenado).

Si no queremos hacer esto, podemos directamente:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js">script>

Si miramos lo que hemos descargado, vemos que tenemos un fichero con Leaflet minimizado (leaflet.js), otro fichero con las css (leaflet.css), una carpeta con imágenes, un fichero js con el fuente legible de Leaflet (leaflet-src.js).

Por lo tanto, en nuestro head tendremos que poner:

 
 

En el body de nuestra página deberemos poner un DIV con ID sobre el que queramos poner un mapa:

 

Asegúrate que le pones altura en los CSS a este DIV:

     #mimapaleaflet{
           height:180px;
     }

Después del código que inserta el DIV, insertaremos un script javascript para cargar una capa base:

var mymap = L.map('mimapaleaflet').setView([51.505, -0.09], 13);

L.map es la clase central de la API. Se usa para crear y manipular el mapa. En el mapa establecemos unas coordeanas de la vista y un nivel de zoom.

A continuación añadimos un mapa base como tile layer, en este caso las imágenes de OSM. Crear un tile layer lleva implícito establecer la URL, el texto con la atribución y el máximo nivel de zoom de la capa:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
maxZoom: 18
}).addTo(map);

Añadimos un control de escala:

     L.control.scale().addTo(mymap);

Y un marcador (un POI), que se podrá mover al establecerlo como draggable.

     L.marker([51.50, -0.071],{draggable: true}).addTo(mymap);

El resultado es algo así:

leaflet

Añadir un popup:

Es simple, únicamente hay que añadir a la sentencia de creación del marcador:

     .bindPopup(«<b>Hello world!</b><br>I am a popup.»);

Con esto añadimos un popup que, aparece al hacer clic sobre el marcador y desaparece al hacer clic sobre otro marcador.

.

Categorías: Desarrollo web, Mapas-GIS-Publicación Etiquetas: , , , , , , , ,

Map de Google Chart

26 de agosto de 2014 1 comentario

No confundir con la API de Google Maps!!

mapMap nos va a permitir posicionar pares Lat-Long en un mapa. Podría utilizarse con direcciones también, pero eso no me interesa, voy a trabajar exclusivamente con coordenadas X-Y.

Ejemplo Completo:

<html>
  <head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script>
    google.load('visualization', '1', { 'packages': ['map'] });
    google.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['Country', 'Population'],
        ['China', 'China: 1,363,800,000'],
        ['India', 'India: 1,242,620,000'],
        ['US', 'US: 317,842,000'],
        ['Indonesia', 'Indonesia: 247,424,598'],
        ['Brazil', 'Brazil: 201,032,714'],
        ['Pakistan', 'Pakistan: 186,134,000'],
        ['Nigeria', 'Nigeria: 173,615,000'],
        ['Bangladesh', 'Bangladesh: 152,518,015'],
        ['Russia', 'Russia: 146,019,512'],
        ['Japan', 'Japan: 127,120,000']
      ]);

    var options = { showTip: true };

    var map = new google.visualization.Map(document.getElementById('chart_div'));

    map.draw(data, options);
  };
  </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Podemos ver cómo la estructura es exactamente igual a la estructura de cualquier otro control de Google Chart.

Paquete a cargar

map

google.load("visualization", "1", {packages: ["map"]});

.

Datos

Antes he comentado que sólo voy a utilizar pares Latitud-Longitud, no como en el ejemplo anterior, así que la estructura de los datos serían como en el siguiente ejemplo:

  var data = google.visualization.arrayToDataTable([
    ['Lat', 'Long', 'Name'],
    [37.4232, -122.0853, 'Work'],
    [37.4289, -122.1697, 'University'],
    [37.6153, -122.3900, 'Airport'],
    [37.4422, -122.1731, 'Shopping']
  ]);

Vemos como la estructura es Latitud – Longitud – Nombre.

Limitación: Sólo se pueden cargar 400 marcadores.

.

Opciones

Modificando marcadores:

Ejemplo.

  var options = {
    icons: {
      default: {
        normal: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
        selected: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
      }
    }
  };

La opción icons nos lo va a permitir.

Otras opciones:

  • Habilitar la rueda del ratón para hacer zoom – enableScrollWheel. Por defecto está a false
  • showTip – Habilitar que se muestre el valor Name cuando hacemos clic. Por defecto está a false.
  • showLine – Dibuja una línea que une los puntos. Por defecto a false.
  • lineColor y lineWidth – Sirven para configurar la línea anterior.
  • mapType – Tipo de mapa que aparecerá. Por defecto está hybrid. Los valores posibles son ‘normal’, ‘terrain’, ‘satellite’ or ‘hybrid’.
  • useMapTypeControl – sirve para que aparezca el control que nos permite cambiar el tipo de mapa.
  • zoomLevel – Es el nivel de zoom. Va desde 0 (mundo completo) a 19. De todas formas, el nivel de zoom se ajusta a los datos dibujados

Nota: Las opciones width y height parecen no funcionar. Modificar las CSS del DIV para darle alto y ancho.

Más info:

https://google-developers.appspot.com/chart/interactive/docs/gallery/map

.

Categorías: Desarrollo web Etiquetas: , , , , , , ,

API Key de Google Maps para hacer pruebas en Localhost

26 de agosto de 2014 Deja un comentario

Key for browser apps (with referers)

API key:
AIzaSyCTuazTT4ftRrTOscHQYPabgJPLiBS9YXc
Referers:
localhost

 

// Gracias al siguiente código, cargo de forma asíncrona la API de Google Maps 
// y, cuando la página esté cargada, genero el mapa      
function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCTuazTT4ftRrTOscHQYPabgJPLiBS9YXc
                     &sensor=false&region=ES&callback=initialize";
  document.body.appendChild(script);
}
window.onload = loadScript;

 

Tengo que tener una función initialize en javascript para crear el mapa y mostrarlo.

<script type="text/javascript">
function initialize() {	
	// Creando el mapa --------------------------------------------
   var mapOptions = {
     ....
   }
   var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

Vemos que debo tener un DIV con ID=’map_canvas’ en el body.

Categorías: Desarrollo web Etiquetas: , , ,

Cómo añadir controles al mapa

5 de noviembre de 2012 Deja un comentario

Si lo deseas, puedes confeccionar tu interfaz mediante la eliminación, la adición y la modificación del comportamiento y de los controles de la interfaz de usuario y asegurarte de que las futuras actualizaciones no modifiquen este comportamiento. Si solo deseas añadir o modificar comportamientos existentes, deberás asegurarte de que el control se haya añadido explícitamente a tu aplicación.

Algunos controles aparecen en el mapa de forma predeterminada, mientras que otros no se mostrarán a menos que lo solicites explícitamente. La adición o la eliminación de controles del mapa se especifica mediante los siguientes campos del objeto Map options; campos que deberás establecer en true para mostrar los controles y en false para ocultarlos:

{
  panControl: boolean,
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  overviewMapControl: boolean
}

Con el siguiente ejemplo se configura el mapa para que oculte los controles de navegación (de zoom y desplazamiento) y muestre el control de escala. Ten en cuenta que no se inhabilita explícitamente la interfaz de usuario predeterminada, de manera que estas modificaciones se añadan al comportamiento de la misma.

function initialize() {
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    panControl: false,
    zoomControl: false,
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}

Ver ejemplo(control-simple.html)

Categorías: Desarrollo web Etiquetas: , , , , ,

Aspectos generales de los controles de mapas

5 de noviembre de 2012 Deja un comentario

Los mapas de Google Maps contienen elementos de interfaz de usuario que permiten al usuario interactuar con el mapa. Estos elementos se denominan controles y puedes incluir variaciones de ellos en la aplicación que hayas creado con el API de Google Maps. También puedes optar por no hacer nada y dejar que el API de Google Maps se ocupe del comportamiento de todos los controles.

El API de Google Maps dispone de varios controles integrados que puedes emplear en tus mapas:

  • El control de zoom muestra un control deslizante (en el caso de mapas grandes) o botones «+/-» pequeños (en el caso de mapas pequeños) para controlar el nivel de zoom del mapa. Este control aparece en la esquina superior izquierda del mapa de forma predeterminada en dispositivos no táctiles o en la esquina inferior izquierda del mapa de forma predeterminada en los dispositivos táctiles.
  • El control de desplazamiento muestra botones para desplazarse por el mapa. Este control aparece en la esquina superior izquierda del mapa de forma predeterminada en dispositivos no táctiles. El control de desplazamiento también te permite girar imágenes a 45°, si están disponibles.
  • El Cómo controlar escala muestra un elemento de escala del mapa. Este control está inhabilitado de forma predeterminada.
  • El Control MapType permite al usuario alternar entre los diferentes tipos de mapas, como ROADMAP (mapa de carreteras) y SATELLITE (satélite). Este control aparece en la esquina superior derecha del mapa de forma predeterminada.
  • El control de Street View incluye un icono de hombrecito naranja que se puede arrastrar hasta el mapa para habilitar la función de Street View. Este control aparece en la esquina superior izquierda del mapa de forma predeterminada.
  • El control de giro incluye un icono circular pequeño que te permite girar mapas que contienen imágenes oblicuas. Este control aparece en la esquina superior izquierda del mapa de forma predeterminada. (Para obtener más información, consulta imágenes a 45°).
  • El control de mapa general muestra un mapa general en miniatura que refleja la ventana gráfica del mapa actual dentro de una zona más amplia. Este control aparece en la esquina inferior derecha del mapa y se muestra contraído de forma predeterminada.

No puedes acceder ni modificar estos controles del mapa directamente, pero puedes modificar los campos MapOptions del mapa que afectan a la visibilidad y a la presentación de los controles. Puedes ajustar la presentación de los controles creando una instancia del mapa (con las opciones adecuadas MapOptions) o modificar un mapa de forma dinámica ejecutando setOptions() para cambiar las opciones del mapa.

…

Categorías: Desarrollo web Etiquetas: , , , , , ,

Niveles de zoom

5 de noviembre de 2012 Deja un comentario

Para ofrecer un mapa de todo el planeta como una única imagen, es necesario un mapa muy grande o un mapa pequeño con una resolución muy baja. Por consiguiente, las imágenes de mapa en Google Maps y el API de Google Maps se dividen en «mosaicos» de mapas y «niveles de zoom». A niveles bajos de zoom, un conjunto pequeño de mosaicos de mapas cubre una superficie amplia; a niveles de zoom más elevados, los mosaicos tienen una resolución mayor y cubren una superficie más pequeña.

Tú especificas la resolución con la que se mostrará un mapa al configurar la propiedad zoom de Map, donde un zoom de 0 corresponde a un mapa de la Tierra totalmente alejado y los niveles mayores de zoom acercan el mapa con una resolución más elevada.

Las tres imágenes siguientes representan la misma ubicación de Tokio a niveles de zoom de 0,7 y 18.

Para obtener más información sobre la forma en que el API de Google Maps carga los mosaicos según el nivel de zoom, consulta la sección Coordenadas de mosaico en la documentación de los tipos de mapas.

Categorías: Desarrollo web Etiquetas: , , , ,

Opciones de mapa

5 de noviembre de 2012 Deja un comentario 
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

Antes de inicializar un mapa, debemos crear un objeto Map options que contenga las variables de inicialización correspondientes. Este objeto no se construye, sino que se crea como un objeto literal. Como queremos centrar el mapa en un punto específico, también debemos crear un valor latlng que aloje esta ubicación y la transmita a las opciones del mapa. Para obtener más información sobre cómo especificar distintas ubicaciones, consulta la sección Latitudes y longitudes a continuación.

También debemos establecer el nivel de zoom inicial y especificar mapTypeId como valor de google.maps.MapTypeId.ROADMAP. Se admiten los siguientes tipos:

  • ROADMAP, que muestra los mosaicos normales en 2D predeterminados de Google Maps.
  • SATELLITE, que muestra imágenes de satélite.
  • HYBRID, que muestra una mezcla de mosaicos fotográficos y una capa de mosaicos para los elementos del mapa más destacados (carreteras, nombres de ciudades, etc.).
  • TERRAIN, que muestra mosaicos de relieve físico para indicar las elevaciones del terreno y las fuentes de agua (montañas, ríos, etc.).

A diferencia del API de Google Maps v. 2, no existe ningún tipo de mapa predeterminado. Debes establecer de forma específica un tipo de mapa inicial para poder ver los mosaicos correspondientes.

Categorías: Desarrollo web Etiquetas: , , , , , , ,

Elementos DOM de mapa

5 de noviembre de 2012 Deja un comentario

El Document Object Model o DOM (‘Modelo de Objetos del Documento’ o ‘Modelo en Objetos para la Representación de Documentos’) es esencialmente una interfaz de programación de aplicaciones (API) que proporciona un conjunto estándar de objetos para representar documentos HTML y XML, un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos. A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML, que es para lo que se diseñó principalmente.

Para que el mapa se muestre en una página web, debemos reservar un lugar para él. Normalmente, lo hacemos mediante la creación de un elemento div con nombre y la obtención de una referencia a este elemento en el modelo de objetos de documento (DOM) del navegador.

En el ejemplo anterior, definimos un objeto <div> denominado «map_canvas» y definimos su tamaño mediante atributos de estilo. Ten en cuenta que este tamaño se establece en «100%», lo que amplía el mapa hasta que ocupa toda la pantalla del dispositivo móvil. Es posible que sea necesario ajustar estos valores según el desplazamiento y el tamaño de la pantalla del navegador. Ten en cuenta que el mapa siempre adoptará el tamaño del elemento en el que esté contenido, por lo que siempre debes establecer un tamaño para el elemento <div> de forma explícita.

 

Categorías: Desarrollo web Etiquetas: , , , ,

Generando un menú para un sitio web

13 de junio de 2012 Deja un comentario

Un menú con listas

Vamos a ir viendo la evolución de los menús en los sitios web. Lo haremos a través de un ejemplo.

Vamos a desarrollar un sitio con 5 páginas. Una página principal llamada MENU.HTML. En ella vamos a poner nuestro menú. Iremos haciendo distintas versiones para ver cómo evolucionamos.

Las otras 4 páginas serán las 4 secciones de nuestro sitio y de nuestro menú.

Creamos una carpeta llamada MENU y dentro metemos los 5 ficheros.

menu.html

Contiene un título con «Curso Programador»

Contiene una lista con 4 enlaces:

  • Arquitectura de ordenadores
  • Metodología de programación
  • Lenguajes de programación
  • Redes de computadores

Y una imagen grande debajo de la lista que tiene algo que ver con la programación.

arquitectura.html

metodologia.html

lenguajes.html

redes.html

Todos los ficheros tienen como título el texto que venía en los enlaces. También tienen un encabezado de la página con el título de la misma. Y una imagen que represente «Volver» que permita volver al menú principal.

El código fuente de menu.html es:

y el aspecto de la página es:

Si quisiéramos centrar la página anterior, podemos utilizar align=center en el H1, introducir la imagen dentro de un P y a éste aplicarle un align=center y para la lista ordenada sería necesario meterla entre <center> y </center>.

El problema del <center> es que no alinea a la izquierda los puntos o números de la lista. Para solucionarlo, eliminarmos el <center> y creamos una tabla centrada de una única celda. Dentro de esta celda metemos nuestra lista de menú.

Así, quedaría de la siguiente manera:

Ahora generamos el fichero arquitectura.html. Cuando esté terminado, copiamos y pegamos y generamos el resto de ficheros.

que quedaría con el siguiente aspecto:

Un menú con tablas

Continuando con el ejemplo anterior, vamos a generar un menú algo mejor.

Crearemos una nueva página menú. Para ello, simplemente vamos a copiar la carpeta MENU anterior y la llamaremos MENU2.

Modificaremos el fichero MENU.HTML. En él insertaremos, debajo del encabezado, una tabla, centrada, con una fila y 4 celdas, en cada celda meteremos un enlace y colorearemos la tabla a nuestro gusto. Así tendremos un menú horizontal.

que tendrá el siguiente aspecto:

Un menú con mapas de imágenes

Igual que en el paso anterior, copiamos la carpeta y generamos una nueva carpeta llamada MENU3.

De nuevo modificaremos el fichero MENU.HTML, insertaremos una imagen que anteriormente hemos generado que contenga 4 botones y definiremos un mapa de enlaces sobre la misma para hacer las veces de menú.

Categorías: Desarrollo web Etiquetas: , , ,

Ejercicio 16 – Mapa de Andalucía – HTML

12 de junio de 2012 Deja un comentario

Con la siguiente imagen

genera una página web que contenga un mapa con esa imagen y que para cada provincia te lleve a una página asociada a la misma (ejemplo, a la diputación de esa provincia o a la página de turismo de esa provincia).

Categorías: Desarrollo web Etiquetas: , , ,