Marcadores y +++ - Benemérita Universidad Autónoma de Puebla

Transcripción

Visualización de Información
Marcadores y +++
Dr. Ivo H. Pineda Torres
Facultad de Ciencias de la Computación
Benemérita Universidad Autónoma de Puebla
Otoño 2012
CAPÍTULO 5
Marcando un lugar. usando un marcador que es una imagen colocada
en un lugar determinado.
Como dijimos se debe tener un mapa disponible con sus propiedades
para poder trabajar sobre él. Pues adelante jóvenes, que la
información no puede esperar.
El marcador se debe crear y luego colocar.
2 of 31
Marcando simplemente
(function() {
window.onload = function() {
// Creación del obejtoy sus propiedades
// we want to pass to the map
var options = {
zoom: 12,
center: new google.maps.LatLng(40.7257, -74.0047),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creando el mapa
var map = new google.maps.Map(document.getElementById(’map’)
};
})();
3 of 31
Marcando el camino
//Poniendo la marca en un lugar dado por el centro
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.7257, -74.0047),
map: map
map: map,
title: ’Casilla 1188’<--------});
4 of 31
Esto es muy util para nuestro proyecto
Tooltip: Es la caja donde se añade texto que acompaña el marcador.
5 of 31
Así
Los marcadores se les puede cambiar el color, en nuestro caso, si se
desea mostrar los marcadores por casilla en cada elección deberán ser
de diferente color.
Elección 2006 verde, elección 2012 rojo
6 of 31
Asi sería la marca
// Adding a marker to the map
map: map,
title: ’Click me’,
icon: ’http://gmaps-samples.googlecode.com/svn/trunk/markers
});
7 of 31
(function() {
window.onload = function() {
// Creación del objeto con propiedades y pasarlos al mapa
var options = {
zoom: 12,
center: new google.maps.LatLng(40.7257, -74.0047),
mapTypeId: google.maps.MapTypeId.ROADMAP};
// Creating the map
var map = new google.maps.Map(document.getElementById(’map’)
// Poniendo las marcas
map: map,
title: ’Click’,
icon: ’http://gmaps-samples.googlecode.com/svn/trunk/markers
});};})();
8 of 31
Mostrando información adicional
En nuestro caso deseamos añadir información adicional a cada
marcador, la cual indicará:
• Distrito, número de la casilla y tipo.
• Partido Ganador para presidente
• Partido ganador para diputados
• Partido ganador para senadores.
9 of 31
Creación y control del tamaño de la ventana
var infowindow = new google.maps.InfoWindow({
content:’<div class="info">Info: Casilla </div>’
});
En el CSS:
.info {
width:}
250px;
¿Qué te sugiere lo anterior ?¿Qué tipo de eventos se pueden disparar
al hacer Click?
10 of 31
Eventos y el listener
Cuando se hace click tres eventos pueden ocurrir y podemos
seleccionar uno de estos:
1
mousedown Ocurre primero cuando se mantiene presionado el
botón del mouse.
2
mouseup Ocurre cuando se libera el botón.
3
click Ocurre después que los dos anteriores pasaron.
Algo similar ocurre cuando se presiona una tecla:
1
keydown
2
keyup
3
keypress
11 of 31
Event Listener
Estos eventos tiene en común que pueden ser capturados por el
código y por ende hacer algo deseado, como conectarse a la base de
datos y obtener la información sobre la casilla en cuestión.
// Creating an InfoWindow with the content text: "Hola Mexic
content: ’Hola Mexicanos’
});
// Añadir un evento click event al marcador
google.maps.event.addListener(marker, ’click’, function() {
infowindow.open(map,marker);
// Aca va el código a ejecutarse...
});
12 of 31
Se verá así
13 of 31
Más marcas en el mapa
En nuestro caso necesitamos poner varios marcadores en nuestro
mapa y como sabrás no es recomendado hacerlo a mano, para eso
estamos aca para CREAR una forma segura y rápida .
14 of 31
Más marcas en el mapa
En nuestro caso necesitamos poner varios marcadores en nuestro
mapa y como sabrás no es recomendado hacerlo a mano, para eso
estamos aca para CREAR una forma segura y rápida .
Una recomendación será hacer uso de arreglos y lazos. ¿Arreglos en
JavaScript? Siiiiii
Arreglos en JS son una colección de variables y puede contener lo que
Ud. desee. Recuerda que ya tenemos guardadas las coordenadas de
cada casilla y pensando a futuro debe tener un método de captura
para añadir nuevas casillas o borrar otras en nuestro mapa.
Veamos como lo haremos.
14 of 31
Desplegando en una pasada las marcas de nuestras
casillas
Se asume que se ha creado el mapa, se le indicado el centro, se han
definido sus propiedades,
//Creación del arreglo
var CasillasPue = [];
//añadiendo lat y longitud a cada casilla
// ( NY, SF y Seattle)
CasillasPue.push(new google.maps.LatLng(40.756, -73.986));
No se te ocurra hacerlo a mano que eso quita puntos!!!!!!
15 of 31
asi es mejor
// Colocación de las marcas por cada elemento del arreglo
for (var i = 0; i < places.length; i++) {
// Creación del nuevo marcador
position: CasillasPue[i],
map: map,
title: ’Casilla ’ + i); }
16 of 31
asi es mejor
// Colocación de las marcas por cada elemento del arreglo
// Creación del nuevo marcador
map: map,
title: ’Casilla ’ + i); }
Como lo podrias mejorar
16 of 31
asi es mejor
// Looping através del arreglo CasillasPue
// Creating a new marker
map: map,
title: ’Casilla ’ + i
});
}
17 of 31
Desde HTML
<html><h2>Read File in Javascript</h2>
<script language="JavaScript">
function openFile() {
window.location= ’file:///’ + document.form.selectedFile.val
</script>
<body>
<form name="form">
<input type="file" name="selectedFile">
<input type=button onClick="openFile()" value="Open File">
</form> </body></html>
y luego read file with javascript para llenar el arreglo y proceder a
marcar en el mapa!!!!
18 of 31
Poniendo Información en las ventanas
La idea aca es que cuando se haga click sobre el marcador de la
casilla una ventana tipo InfoWindow debe salir, justamente después
de haber creado la marca:
// Adding an event-listener
// Creating a new infowindow
content: ’Place number ’ + i
});
infowindow.open(map, marker);
}});
Problema, se pasan variables en vez de valores, con una cerradura o
çlosure"se arregla !!!
19 of 31
Tenemos un problema
20 of 31
Solución: con funciones anónimas
(function(i, marker) {
// Creating the event listener. It now has access to the val
// i and marker as they were during its creation
content: ’Place number ’ + i
});infowindow.open(map, marker);
});
})(i, marker);
21 of 31
Desplegar varias informaciones de una casilla, en
varias ventanas
22 of 31
Variables globales en JavaScript
Retienen la información del objeto InfoWindow y reusamos, creación
debe ser fuera del loop:
// Declara infowindow como var global fuera del loop
var infowindow;
// Add a click event to the marker
// Check to see if the infowindow already exists
if (!infowindow) {
// Create a new InfoWindow object
infowindow = new google.maps.InfoWindow();
}});// Mostrar contenido de InfoWindow
infowindow.setContent(’Place number ’ + i);
// Asociando InfoWindow al marcador
infowindow.open(map, marker);});
23 of 31
Ajustar los marcadores en la vista
24 of 31
Ajustar los marcadores en la vista
Debemos crear el objeto que que define el área donde se colocarán los
marcadores y es por eso que es importante definir o tener las
coordenadas de lo que será nuestro entorno o marco del mapa.
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(37.775,-122.419),
new google.maps.LatLng(47.620,-73.986));
25 of 31
Manejo de datos espaciales, que lindo y
automáticamente
Pasos que se deben seguir para lograr que todos los marcodres
queden dentro de la vista
1
Crear un ojeto vacio para definir el marco.
2
Extender el objeto los datos que se tienen de manera que el API
determine las esquinas Sw y NE.
3
Ajustar el mapa de acuerdo al rectángulo que se definió.
26 of 31
Creación del objeto vacio, extensión y AJUSTE
// C r e a t i n g a LatLngBounds o b j e c t
v a r bounds = new g o o g l e . maps . LatLngBounds ( ) ;
27 of 31
Creación del objeto vacio, extensión y AJUSTE
// C r e a t i n g a LatLngBounds o b j e c t
v a r bounds = new g o o g l e . maps . LatLngBounds ( ) ;
// Looping through the places array
for (var i = 0; i < places.length; i += 1) {
[...]
// Extending the bounds object with each LatLng
bounds.extend(places[i]);}
// A d j u s t i n g t h e map t o new b o u n d i n g box
map . f i t B o u n d s ( bounds )
27 of 31
QUE TAL SI AÑADIMOS RIO DE
JANEIRO(37.09,-95.71) AL viewport
28 of 31
QUE TAL SI AÑADIMOS RIO DE
JANEIRO(37.09,-95.71) AL viewport
Ver código completo marcado como Listing 5-26 en la pp 98 o 116
del pdf
28 of 31
donde obtener íconos
1
Iconos para mapas;
http://code.google.com/p/google-maps-icons/
29 of 31
1
Iconos para mapas;
2
Marcadores con color:
http://www.benjaminkeen.com/?p=105
29 of 31
1
Iconos para mapas;
2
3
Marcadores de Mapito:
http://www.mapito.net/map-marker-icons.html
29 of 31
1
Iconos para mapas;
2
3
4
Creador de íconos de google Maps: http:
//www.powerhut.co.uk/googlemaps/custom_markers.php
29 of 31
1
Iconos para mapas;
2
3
4
5
Sombreador de ícnos de Google:
http://www.cycloloco.com/shadowmaker/shadowmaker.htm
29 of 31
1
Iconos para mapas;
2
3
4
5
Sombreador de ícnos de Google:
http://www.cycloloco.com/shadowmaker/shadowmaker.htm
6
Fábrica Mapicon:http://www.cartosoft.com/mapicons/
29 of 31
que tenemos
Resumen
1 Como poner un marcador en el mapa.
Por lo que ahora esás preparado para hacer la etapa de marcar en
nuestro sistema de Información Geográfico. Avanzamos con paso
firme.
CAPITULO 6 te da información de como utilizar otros íconos, tu
puedes decidir otros .
30 of 31
que tenemos
Resumen
2
Como cambiar el ícono del marcador.
firme.
30 of 31
que tenemos
Resumen
2
3
Asociar un ventana tipo Infowindow a un marcador
firme.
30 of 31
que tenemos
Resumen
2
3
4
Asociar un evento a los objetos
firme.
30 of 31
que tenemos
Resumen
2
3
4
5
Como poner varias marcas en el mapa
firme.
30 of 31
que tenemos
Resumen
2
3
4
5
Como poner varias marcas en el mapa
6
Como ajustar automáticamente la vista para ver variosmarcadores.
firme.
30 of 31
que tenemos
!!México, SIN PRI
31 of 31

Marcadores y +++ - Benemérita Universidad Autónoma de Puebla

Transcripción

Documentos relacionados

INSTRUCCIONES PARA EL USO DE GOOGLE@ MAPS Para poder

Presentación

93.417.78.43 E-Mail:

Ayuda: Sección App Google Maps Esta aplicación de Google Maps

Visualización de Información - Capit. 7