Visualización de Información

Transcripción

1 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

2 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

3 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( , ), maptypeid: google.maps.maptypeid.roadmap }; // Creando el mapa var map = new google.maps.map(document.getelementbyid( map ) }; })(); 3 of 31

4 Marcando el camino //Poniendo la marca en un lugar dado por el centro var marker = new google.maps.marker({ position: new google.maps.latlng( , ), map: map map: map, title: Casilla 1188 < }); 4 of 31

5 Esto es muy util para nuestro proyecto Tooltip: Es la caja donde se añade texto que acompaña el marcador. 5 of 31

6 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

7 Asi sería la marca // Adding a marker to the map var marker = new google.maps.marker({ position: new google.maps.latlng( , ), map: map, title: Click me, icon: }); 7 of 31

8 (function() { window.onload = function() { // Creación del objeto con propiedades y pasarlos al mapa var options = { zoom: 12, center: new google.maps.latlng( , ), maptypeid: google.maps.maptypeid.roadmap}; // Creating the map var map = new google.maps.map(document.getelementbyid( map ) // Poniendo las marcas var marker = new google.maps.marker({ position: new google.maps.latlng( , ), map: map, title: Click, icon: });};})(); 8 of 31

9 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

10 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

11 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

12 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 var infowindow = new google.maps.infowindow({ 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

13 Se verá así 13 of 31

14 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

15 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

16 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, )); CasillasPue.push(new google.maps.latlng(37.775, )); CasillasPue.push(new google.maps.latlng(47.620, )); No se te ocurra hacerlo a mano que eso quita puntos!!!!!! 15 of 31

17 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 var marker = new google.maps.marker({ position: CasillasPue[i], map: map, title: Casilla + i); } 16 of 31

18 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 var marker = new google.maps.marker({ position: CasillasPue[i], map: map, title: Casilla + i); } Como lo podrias mejorar 16 of 31

19 asi es mejor // Looping através del arreglo CasillasPue for (var i = 0; i < places.length; i++) { // Creating a new marker var marker = new google.maps.marker({ position: CasillasPue[i], map: map, title: Casilla + i }); } 17 of 31

20 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

21 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 google.maps.event.addlistener(marker, click, function() { // Creating a new infowindow var infowindow = new google.maps.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

22 Tenemos un problema 20 of 31

23 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 google.maps.event.addlistener(marker, click, function() { var infowindow = new google.maps.infowindow({ content: Place number + i });infowindow.open(map, marker); }); })(i, marker); 21 of 31

24 Desplegar varias informaciones de una casilla, en varias ventanas 22 of 31

25 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 google.maps.event.addlistener(marker, click, function() { // 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

26 Ajustar los marcadores en la vista 24 of 31

27 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, ), new google.maps.latlng(47.620, )); 25 of 31

28 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

29 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

30 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 the map to new bounding box map. f i t B o u n d s ( bounds ) 27 of 31

31 QUE TAL SI AÑADIMOS RIO DE JANEIRO(37.09,-95.71) AL viewport 28 of 31

32 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

33 donde obtener íconos 1 Iconos para mapas; 29 of 31

34 donde obtener íconos 1 Iconos para mapas; 2 Marcadores con color: 29 of 31

35 donde obtener íconos 1 Iconos para mapas; 2 Marcadores con color: 3 Marcadores de Mapito: 29 of 31

36 donde obtener íconos 1 Iconos para mapas; 2 Marcadores con color: 3 Marcadores de Mapito: 4 Creador de íconos de google Maps: http: // 29 of 31

37 donde obtener íconos 1 Iconos para mapas; 2 Marcadores con color: 3 Marcadores de Mapito: 4 Creador de íconos de google Maps: http: // 5 Sombreador de ícnos de Google: 29 of 31

38 donde obtener íconos 1 Iconos para mapas; 2 Marcadores con color: 3 Marcadores de Mapito: 4 Creador de íconos de google Maps: http: // 5 Sombreador de ícnos de Google: 6 Fábrica Mapicon: 29 of 31

39 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

40 que tenemos Resumen 1 Como poner un marcador en el mapa. 2 Como cambiar el ícono del marcador. 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

41 que tenemos Resumen 1 Como poner un marcador en el mapa. 2 Como cambiar el ícono del marcador. 3 Asociar un ventana tipo Infowindow a un marcador 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

42 que tenemos Resumen 1 Como poner un marcador en el mapa. 2 Como cambiar el ícono del marcador. 3 Asociar un ventana tipo Infowindow a un marcador 4 Asociar un evento a los objetos 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

43 que tenemos Resumen 1 Como poner un marcador en el mapa. 2 Como cambiar el ícono del marcador. 3 Asociar un ventana tipo Infowindow a un marcador 4 Asociar un evento a los objetos 5 Como poner varias marcas 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

44 que tenemos Resumen 1 Como poner un marcador en el mapa. 2 Como cambiar el ícono del marcador. 3 Asociar un ventana tipo Infowindow a un marcador 4 Asociar un evento a los objetos 5 Como poner varias marcas en el mapa 6 Como ajustar automáticamente la vista para ver variosmarcadores. 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

45 que tenemos!!méxico, SIN PRI 31 of 31