Table of contents

 

 


Official Content

To create Native applications of the Uber or Easy taxi style, there is a set of properties associated with the Panel Grid control, whose Control Type property = Maps.

The values that are configured for these properties will be presented as Layers, allowing you to change the map’s behavior.

The Layers are as follows:

  1. Selection Layer: Allows you to change the navigation mode to select a location.
  2. Direction Layer: Allows the map information to be displayed as routes between points.
  3. Animation Layer: Allows you to draw animations between points on the map.

Below, there are more detailed descriptions of the Layers, use scenarios, the possibilities they offer, and the properties that allow you to achieve these objectives.

1. Selection Layer (Navigation to select a location)

In Maps (Grid with Control Type property = Maps) it is possible to enable a navigation mode that allows you to select a location (GeoPoint). In this navigation, there is an icon in the center that remains fixed and you can move the map to select a position (and get its coordinates). This is handled with the Selection Layer property

When the Selection Layer property = True, it will be possible to move on the map at runtime, having a fixed icon in the center that obtains the position and triggers an event.

The navigation is similar to what is achieved using the PickLocation Method.

SDlayer1Selection

The icon can be configured using the Location Selection Target Image property. Also, by setting the Selection Layer property = True, the Selection Target Image Class property is enabled to associate a class to that image (by default there is a class created under the name: SDMapPinImage).

In addition, by setting the Selection Layer property = True, two events are available: ControlValueChanging and ControlValueChanged.

ControlValueChanging(GeoPoint) event

This event is triggered while the map is moving. For example:

Event Grid1.ControlValueChanging(&geoPoint)
       composite
            msg(&geoPoint.Tostring())
      endcomposite
Endevent

ControlValueChanged(GeoPoint) event

This event is triggered when you stop moving the map. For example:

Event Grid1.ControlValueChanged(&geoPoint)
       composite
            msg(&geoPoint.Tostring())
       endcomposite
Endevent

You get the position to which the map was moved in the GeoPoint type parameter.

The code in the example shows the string corresponding to the position to which the map was moved (i.e.: POINT(Long Lat)).

The event ControlValueChanged is overloaded with values, therefore the parameter could be Character type (instead of GeoPoint).


2. Direction Layer (Directions between Locations)

In Maps (Grid with Control Type property = Maps), it is possible to view the best way between one or more locations (GeoPoints). To this end, the Directions Layer property is available.

When you set the Directions Layer property to True, it is possible to draw the route between the points of the Grid. Each point or position in the Grid will be given by the attribute or variable configured in the Location Attribute property.

 SDLayer2Direction

Also, when setting the Directions Layer property to True, two more properties are enabled to be configured: Transport Type property and Default Route Class property.


Another way to show the route between Locations (without using the Direction Layer property)

In certain cases, you don't want to draw the route beforehand because you don't have the Locations in advance, but you need them to be provided to you on the spot. For this, the Maps external object provides Geography functionalities and is the evolution of the Geolocation External Object.

The Maps external object provides the following to show the route between Locations:

  • CalculateDirections method

This method allows calculating the direction between two GeoPoints.

Syntax: Maps.CalculateDirections(&InitialGeoPoint,&FinalGeoPoint)

After invoking the method, the route(s) are provided asynchronously in an SDT from the event DirectionsCalculated.

  • DirectionsCalculated event

This event returns the direction between two GeoPoints after calling the method CalculateDirections.

Syntax: DirectionsCalculated(SDT Collection Route, Genexus.Common.Messages)

Example

Event Maps.DirectionsCalculated(&routes, &messages)
    composite
         if &messages.Count = 0 
           &i = 1
           do While &routes.Count >= &i 
             &geoline = &Routes.Item(&i).geoline
             Grid1.DrawGeoLine(&geoline,"8")
             &i+=1
           enddo
        endif
    endcomposite
endevent 

&routes is a collection variable of the Route Structure Data Type.

To draw on a map the direction between two or more locations obtained with the Maps external object, there is a set of methods offered by the Grid of Control Type = Maps.

This method allows you to draw a GeoLine in the Grid control, whose Control Type property = Maps.

Syntax: DrawGeoLine(Geoline, Theme Class Name)

Theme Class Name is based on the Character data type.

  • SetZoomLevel method

This method allows you to specify the Zoom level in the Grid control, whose property control Type = Maps.

Syntax: SetZoomLevel(Numeric)

Numeric is a value between 1 and 23

  • SetMapCenter method

This method allows you to specify the center of the Map in the Grid control, whose property control Type = Maps.

Syntax: SetMapCenter(GeolPoint, Numeric)

GeoPoint Indicates the coordinate where the map will be centered.
Numeric Indicates the Zoom level (optional).

Example: 

    composite
        &geoPoint.FromString("POINT( -56.1701774597168 -34.91676309400329)")
        Grid1.SetMapCenter(&geoPoint,8)
    endcomposite

 

3. Animation Layer

In Maps (Grid with Control Type property = Maps), it is possible to view the animation of one or more locations (GeoPoints). This allows you to show, for example, the fleet of units in a typical mobility application such as Uber, Cabify, etc. 

To solve something like this, you need to configure the Animations Layer property = True. This will make it possible to view at runtime the animation of the records specified in the grid given by an attribute or variable that indicates its location (GeoPoint or Geolocation Domain) at runtime.

More information: Animations Layer property


Scope

Objects: Panel
Generators:  Android, Apple, Angular


Last update: February 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant