jul 122012
 

Buenas,

Pues nada, ya estamos aquí con una nueva versón de la GMLib. Esta nueva versión viene con bastantes cambios y, como no, con un componente nuevo. Aquí tenéis la relación de las novedades:

  • Nuevo componente, el TGMGeoCode, para poder realizar Geocodificaciones (pasar de una dirección a una lat/lng o de una lat/lng a una dirección).
  • Error:  TGMBaseInfoWindow -> la función GetConvertedString ahora tiene en cuenta la comilla simple.
  • Cambio: TGMCircle -> la propiedad Radius pasa a ser un entero.
  • Nuevo: TGMCircle -> añadida propiedad AutoResize.
  • Error: TLatLng -> corregido error en la función LatLngToStr (gracias Erasmo).
  • Cambio: TLatLng -> se controla la posible excepción en la función StringToReal (cambio de string a real).
  • Cambio: TLatLngBounds -> se suprime la función GetCenter.
  • Error: TGMMarker -> se controlan la comilla simple en la propiedad Title.
  • Nuevo: TGMPolyline -> añadida propiedad CountLinePoints.
  • Nuevo: TLinePoint -> añadido método ToStr.
  • Nuevo: TLinePoint -> añadida método StringToReal.
  • Nuevo: TRectangle -> añadido método GetCenter.
  • Nuevo: TGMMap -> añadidos eventos OnActiveChange, OnIntervalEventsChange y OnPrecisionChange.
  • Error: TGMMap -> corregido error en RemoveLinkedComponent cuando se intentaba suprimir un objeto sin estar la lista creada.
  • Cambio: TGMMap -> se controlan los métodos Set de las propiedades Zoom y MapType para actualizar el mapa automáticamente.
  • Cambio: TGMMap -> Zoom, MaxZoom y MinZoom se limitan al rango de 0 a 15
  • Nuevo: TLinkedComponent -> se añade la propiedad Text (visible a todos sus descendientes menos a TMarker porque ya tiene la propiedad Title).
  • Nuevo: TGMLinkedComponent -> añadida propiedad Count.
  • Error: cuando había figuras de diferentes tipos juntas o superpuestas, daba un error de JavaScript al pasar el ratón sobre ellas (gracias Erasmo).
  • Nuevo: mega demo que incluye la gestión de todos los componentes.

Como siempre, más información en la página de los componentes.

Qué los disfrutéis

Nos leemos

jun 262012
 

Buenas,

Siguiendo con los GMLib, hoy os traigo la versión 0.1.4 Pre-Alpha, con los siguientes cambios y novedades:

  • Nuevo componente, el TCircle. Con este componente ya terminamos con las figuras.
  • Nuevo: se ha ampliado la funcionalidad del TGMMap haciéndolo imprimible mediante los métodos PrintNoDialog, PrintWithDialog, PrintPreview y PrintPageSetup, y también la posibilidad de guardar el mapa a un JPG mediante el método SaveToJPGFile.
  • Cambio: cambios en el JavaScript del mapa para evitar duplicidad de código.
  • Error: corregido error en el método LatLngToStr de la clase TLatLng (gracias Shaun)

Como siempre, más información en la página de los componentes.

Que los disfrutéis

Nos leemos

jun 212012
 

Buenas,

Hoy os traigo una nueva versión de los componentes GMLib, la versión 0.1.3 Pre-Alpha, con bastantes cambios internos y novedades:

  • Nuevo componente, el TRectangle que, como su nombre indica, no es más que un rectángulo.
  • Cambio: se ha cambiado la carpeta destino de los DCU. Ahora, cada versión de Delphi tiene la suya.
  • Nuevo: se ha añadido el evento OnChange en la clase TLatLng.
  • Nuevo: se ha añadido el método público StringToReal en la clase TLatLng. Este método tiene en cuenta la configuración regional en el momento de hacer el cambio. Con esta función se intenta corregir los problemas que había entre los países con diferente configuración regional.
  • Nuevo: se ha añadido el método GetCenter en la clase TLatLngBounds.
  • Cambio: se han publicado las propiedades NE y SW de la clase TLatLngBounds.
  • Nuevo: se ha añadido la propiedad Tag (entero) a la clase TLinkedComponent (por lo que afecta a todos los CollectionItems heredados de la misma como TMarker, TPolygon,….).
  • Nuevo: se ha añadido la propiedad FObject (TObject) a la clase TLinkedComponent.
  • Nuevo: se han añadido métodos protegidos (SetProperty) en la clase TLinkedComponent para generalizar el cambio de las propiedades y evitar la duplicidad de código.
  • Nuevo: se ha añadido la propiedad Icon al TMarker para poder especificar un icono a mostrar (en lugar del estándar). Éste puede ser un archivo en el PC o una imagen en la web. El componente lo que hace es comprobar si existe el dato especificado como archivo y, en caso de no existir, asume que es una URL (no me he complicado mucho la vida en hacer muchas comprobaciones). En blanco para la imagen por defecto.
  • Nuevo: se ha añadido el evento OnIconChange a la clase TGMMarker.
  • Cambio: se han cambiado todos los métodos Set de las clases descendientes de TLinkedComponent para evitar la duplicidad de código y hacer las llamadas a los nuevos métodos de TLinkedComponent (SetProperty).

Como siempre, más información en la página de los componentes.

Que los disfrutéis

Nos leemos

may 292012
 

Buenas,

Sigo con las nuevas actualizaciones de los componentes, hoy presentando la 0.1.2 Pre-Alpha. Las novedades de esta nueva versión son las siguientes:

  • Un nuevo componente, el TGMPolygon. Éste es como el TGMPolyline pero con la particularidad que el último punto se unirá con el primero.
  • Bug: corregido error en TGMMarker que hacía que al cambiar alguna de sus propiedades diera un error de JavaScript.
  • Cambio: cuando cambia la lat/lng de un TLinePoint, se actualiza en el mapa.
  • Bug: implementado SetPath en JavaScript.

Como siempre, más información en la página de los componentes.

Que los disfrutéis

Nos leemos

 

abr 162012
 

Buenas,

Hoy vengo a presentaros una nueva versión (la 0.1.1 Pre-Alpha) de los componentes GMLib. Las novedades de esta nueva versión son las siguientes:

  • Un nuevo componente, el TGMPolyline, para la creación de polilineas (una polilinea es un conjunto de puntos unidos entre sí mediante líneas).
  • Corrección de algún bug encontrado.
  • Se le ha añadido la propiedad AutoOpen a la clase TInfoWindow.
  • Se ha añadido el evento OnPositionChange a la clase TInfoWindow.
  • Muchos cambios en el JavaScript para hacer las funciones más genéricas.
  • Se ha añadido el método Clear a la clase base TGMLinkedComponent.
  • Se ha añadido el método Assign a la clase base TGMLinkedComponent.
  • Se ha añadido el método Clear en la clase base TLinkedComponents.
  • Se ha cambiado las referencias a la API de Google Maps al nuevo dominio.
  • Cuando se cambia la lat/lng de un marcador, se cambia automáticamente en el mapa.
  • Se ha añadido el método Assign en la clase TGMSize.

Podéis encontrar más explicaciones en la página de los componentes.

Espero que os sea de utilidad

Nos leemos

 

mar 202012
 

Buenas,

A raíz de los diferentes artículos hechos sobre el uso de la API de Google Maps desde aplicaciones Delphi, se me ocurrió el realizar una serie de componentes que encapsularan dicho funcionamiento y hacer más fácil la vida al programador.

De momento os presento los tres primeros componentes:

  • TGMMaps: componente que diseña el mapa plano, sin objetos, sólo con lo necesario para visualizar una zona y desplazarte por la misma (zoom, scroll, ……). También es el que gestiona la comunicación con el mapa a nivel de eventos y/o cambio de cualquier tipo de propiedad/objeto del mapa. A su vez, mantiene un TList con todo objeto que se linca a él y que represente algún tipo de objeto en el mapa (marcadores, ventanas de información, lineas, polilíneas, rectángulos,……).
  • TGMMarker: componente que mantiene una relación de marcadores (clase TMarker) mediante una TCollection (TMarkers).
  • TGMInfoWindow: componente que mantiene una relación de ventanas de información o balloons (clase TInfoWindow) mediante una TCollection (TInfoWindows).

El próximo componente será el TGMPolyline, para gestionar las polilíneas.

He creado una página específica de estos componente donde se explica el funcionamiento, sus propiedades y métodos y desde donde podréis descargar los fuentes y demos.

Espero que os sean de utilidad

Nos leemos

nov 232010
 

Buenas,

Hoy nuestro viaje lo iniciaremos en Nueva York e iremos tan tranquilos hasta Pekin, aquí al lado vamos, jejeje

Para ver cómo podemos llegar, iremos a Google Maps y pondremos las ciudades de origen y destino en las casillas correspondientes que aparecen al pulsar en “Cómo llegar”.

Esta vez la curiosidad la tenemos en el punto 31. Sólo de pensarlo ya me entran todos los males, jejejeje

Espero os guste

Nos leemos

nov 162010
 

Buenas,

Pues siguiendo el viaje que empezamos en el mensaje anterior, hoy nos vamos a dirigir a Taiwan, pero esta vez vamos a ir andando, así que vamos a poner en el Google Maps que queremos ir de China a Taiwan escogiendo el hombrecito que indica andando.

Ahora vamos a ir bajando hasta encontrar el punto 298, jejejejeje

La verdad es que prefiero los 782 km de la moto de agua 😀

Nos leemos

oct 192010
 

Buenas,

Vimos en un mensaje anterior cómo configurar visualmente nuestro mapa de Google Maps. Antes de ver el StreetView quería comentar una cosa al respecto. En la documentación del API podemos observar la existencia de un método llamado setOptions que, como parámetro, recibe un objeto de tipo MapOptions. Por el nombre del método y el parámetro recibido podríamos pensar que no sería necesaria la creación de todo el mapa si queremos cambiar el comportamiento inicial del mapa. Pues bien, he realizado la prueba y no termina de funcionar como debe, así que daremos por válido lo que decía antes de que se debe de establecer todo en la creación.

Y ahora, el StreetView

Bien, dicho ésto, vamos a ver el StreetView.

Cualquier mapa de Google Maps contiene la imagen de un hombrecito en la zona del zoom (ver imagen 1 al pie del mensaje) que arrastrándolo y soltándolo donde queramos, nos abre el StreetView. Fijaros que, en el momento de arrastrarlo, donde existe StreetView se colorea en azul (ver imagen 2 al pie del mensaje).

Este hombrecito es, como todo aspecto visual de un mapa de Google Maps, configurable en la creación del mapa. Estas propiedades las obvié en el mensaje anterior expresamente para poderlas explicar ahora. Por supuesto, pertenecen al objeto MapOptions.

  • streetViewControl: booleano para mostrar o no el hombrecito.
  • streetView: propiedad de tipo StreetViewPanorama que representa la panorámica StreetView que se mostrará al soltar el hombrecillo. Si no se define ninguna, se generará una predeterminada y se mostrará en el div del mapa. Os recomiendo una lectura de esta clase dado que aquí sólo veremos el constructor de la misma, el cual recibe dos parámetros, container que es dónde se mostrará (un div) y opts de tipo StreetViewPanoramaOptionsdel que veremos ahora sus propiedades:
    • addressControl: booleano para mostrar o ocultar el cartel con la dirección.
    • addressControlOptions: propiedad de tipo StreetViewAddressControlOptionscon las opciones de visualización del control de dirección.
      • position: propiedad de tipo ControlPosition para especificar dónde aparecerá el control. Por defecto TOP_LEFT.
      • style: string con la especificación CSS a aplicar al control de posición. Por ejemplo, {backgroundColor: ‘red’}.
    • enableCloseButton: booleano para mostrar o ocultar el botón de cierre de la ventana StreetView.
    • linksControl: booleano para mostrar o ocultar el control de desplazamiento por las calles.
    • navigationControl: booleano para mostrar o ocultar el control de navegación.
    • navigationControlOptions: propiedad de tipo NavigationControlOptionscon las opciones de visualización del control de navegación.
      • position: propiedad de tipo ControlPosition para especificar dónde aparecerá el control. Por defecto TOP_LEFT.
      • style: propiedad de tipo NavigationControlStyle para especificar el tipo de navegador.
    • position: propiedad de tipo LatLng donde se centrará el mapa.
    • pov: propiedad de tipo StreetViewPovpara especificar la orientación de la cámara (según ángulo, inclinación y zoom).
      • heading: numérico que expresa el ángulo en grados respecto al norte absoluto siendo el norte 0º, el este 90º, el sur 180º y el oeste 270.
      • pitch: numérico que expresa la inclinación de la cámara en grados respecto al vehículo de Street View y oscila entre 90º (arriba) y -90º (abajo).
      • zoom: numérico para indicar el nivel del zoom siendo el más lejano el 0.

En la imagen 3 podéis ver a qué se refiere cada una de las propiedades.

Desde Delphi

Vista la teoría, llega el momento de ponerlo en práctica.

Cuando creamos un mapa, tenemos dos opciones, especificar una panorámica o dejar que el objeto mapa cree una predeterminada. Con la primera opción, podremos controlar todo el aspecto visual del StreeView. En cambio, si dejamos que se cree la predeterminada, mediante los métodos del StreetViewPanorama sólo podremos controlar la longitud/latitud (método setPosition) y la orientación de la cámara (método setPov).

Una vez creado el mapa, sea de la forma que sea, podemos acceder a la panorámica del mismo gracias al método getStreetView de la clase Map. Así mismo, podríamos establecer una panorámica nueva mediante setStreetView.

En nuestro ejemplo, escogeremos la opción de personalizar el StreetView en la creación del mapa y mostrarlo en un div diferente al mapa, así podremos ver las diferentes alternativas que tenemos. Para ello, lo primero es modificar la pantalla para poder acceder a las opciones del StreetView (ver imagen 4 al pie del mensaje). Hay que tener presente que, si las coordenadas pasadas no tienen una referencia válida para StreetView, éste no aparecerá.

Lo primero que hay que hacer es adaptar nuestra función JavaScript para poder recibir la configuración del StreetView. Para ello añadiremos 8 nuevos parámetros. También se tiene que crear el objeto StreetViewPanorama con sus opciones. Y puestos a modificar, para no repetir código, crearemos funciones para la obtención de las diferentes constantes.

  function GetPosition(aPos) {
    switch (aPos) {
      case "BOTTOM": return google.maps.ControlPosition.BOTTOM; break;
      case "BOTTOM_LEFT": return google.maps.ControlPosition.BOTTOM_LEFT; break;
      case "BOTTOM_RIGHT": return google.maps.ControlPosition.BOTTOM_RIGHT; break;
      case "LEFT": return google.maps.ControlPosition.LEFT; break;
      case "RIGHT": return google.maps.ControlPosition.RIGHT; break;
      case "TOP": return google.maps.ControlPosition.TOP; break;
      case "TOP_LEFT": return google.maps.ControlPosition.TOP_LEFT; break;
      default: return google.maps.ControlPosition.TOP_RIGHT;
    }
  }

  function GetNavigationControl(aNav) {
    switch (aNav) {
      case "ANDROID": return google.maps.NavigationControlStyle.ANDROID; break;
      case "SMALL": return google.maps.NavigationControlStyle.SMALL; break;
      case "ZOOM_PAN": return google.maps.NavigationControlStyle.ZOOM_PAN; break;
      default: return google.maps.NavigationControlStyle.DEFAULT;
    }
  }

  function MenuStyle(aStyleMenu) {
    switch (aStyleMenu) {
      case "DROPDOWN_MENU": return google.maps.MapTypeControlStyle.DROPDOWN_MENU; break;
      case "HORIZONTAL_BAR": return google.maps.MapTypeControlStyle.HORIZONTAL_BAR; break;
      default: return google.maps.MapTypeControlStyle.DEFAULT;
    }
  }

  function MapType(aTMap) {
    switch (aTMap) {
      case "HYBRID": return google.maps.MapTypeId.HYBRID; break;
      case "ROADMAP": return google.maps.MapTypeId.ROADMAP; break;
      case "SATELLITE": return google.maps.MapTypeId.SATELLITE; break;
      default: return google.maps.MapTypeId.TERRAIN;
    }
  }

  function DoWeb(Lat,Lon,TMap,aZoom,ZClick,MoveMap,Keyb,Wheel,HideAll,ShowTM,
                 PosTM,StyleTM,ShowNav,PosNav,StyleNav,ShowScale,PosScale,
                 SV,DirecSV,PosDirecSV,CloseSV,LinksSV,NavSV,PosNavSV,StyleNavSV) {
    if (map != null) map.setStreetView(null);
    panorama = null;
    map = null;

    aTMap = MapType(TMap);
    aPosTM = GetPosition(PosTM);
    aStyleTM = MenuStyle(StyleTM);
    aPosNav = GetPosition(PosNav);
    aStyleNav = GetNavigationControl(StyleNav);
    aPosScale = GetPosition(PosScale);
    aPosDirecSV = GetPosition(PosDirecSV);
    aPosNavSV = GetPosition(PosNavSV);
    aStyleNavSV = GetNavigationControl(StyleNavSV);

    var latlng = new google.maps.LatLng(Lat,Lon); 

    var panoOpts = {
      addressControl: DirecSV,
      addressControlOptions: {position: aPosDirecSV},
      enableCloseButton: CloseSV,
      linksControl: LinksSV,
      navigationControl: NavSV,
      navigationControlOptions: {position: aPosNavSV, style:aStyleNavSV},
      position: latlng
    }

    panorama =
        new google.maps.StreetViewPanorama(document.getElementById("streetview"),
        panoOpts);

    var myOptions = {
      center: latlng,
      mapTypeId: aTMap,
      zoom: aZoom, 

      disableDoubleClickZoom: ZClick,
      draggable: MoveMap,
      keyboardShortcuts: Keyb,
      scrollwheel: Wheel, 

      mapTypeControl: ShowTM,
      mapTypeControlOptions: {position: aPosTM, style: aStyleTM},
      navigationControl: ShowNav,
      navigationControlOptions: {position: aPosNav, style: aStyleNav},
      scaleControl: ShowScale,
      scaleControlOptions: {position: aPosScale},

      streetViewControl: true,
      streetView: panorama
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

A nivel de código Delphi, lo único que tendremos que hacer es modificar la llamada a la función JavaScript pasándole los nuevos parámetros.

Si quisiéramos que la panorámica de StreetView se viera en el mismo div que el mapa, bastará con que cambiemos la línea de creación del panorama y pasarle de parámetro el div del mapa

panorama =
    new google.maps.StreetViewPanorama(document.getElementById("map_canvas"),
    panoOpts);

No obstante, con las pruebas que he realizado, sólo funciona correctamente la primera vez que se crea el mapa con la panorámica de StreetView personalizada. Si alguien hace pruebas y ve cómo arreglarlo, estaría agradecido que me lo comentara.

Más en próximos artículos.

 

Como siempre, podéis descargaros el programa demo desde aquí.

Nos leemos