Try Xenarius Free

Map Demo

This app illustrates the Map widget’s interactive features, such as geolocation, routes, managing and displaying markers. At present, Google Maps is a service providing maps for Xenarius.

Please let us know if some of the missing functionality is critical for the success of your application and we’ll do our best to further improve our product.

Creating Data Provider

To display markers, we’ll need an array storing marker coordinates. In this example, we use the In-Memory Array type. You can also use other types, corresponding to your data provider (e.g., OData Service, REST Service or Local Store). To learn about supported data providers, see Data Connection.

Getting Google API Key

To display data on the map, Xenarius uses the Google Maps service. All Google Maps Geocoding API apps use API key authentication. Adding a key to a query enables you to control the use of API by the app in the Google API Console, set quotas upon the key instead of the IP-address, and enables Google to contact you regarding your app if required.

To start using the Google Maps Geocoding API, click the following button to navigate to the Google API Console and get help on accomplishing the procedure and automatic activation of the Google Maps Geocoding API: Get the key.

Binding Data to the Map

To display markers on the map, you need to bind your data to the Map widget. Select the map and switch to the Widget Properties panel. Expand the Data Source item and select the required array in the Provider or Array drop-down list. Your data and the map are now bound together.

Creating a New Marker with the Specified Coordinates

In this demo app, a new marker is added using the On Click event handler of the Map widget. The adding occurs in the Logic Editor using the Insert operation.

Creating a New Marker

The above expression constructed in the following way:

  • $data.location – specifies the coordinates from the event context. In this case, the coordinates correspond to the location of the click event.

  • Markers – a variable storing the array of markers into which a new marker will be inserted.

  • location – a field of the Markers object in which the coordinates will be saved.

Geolocation

Geolocation is provided using the Current Location operation in the Logic Editor. In this example, the Current Location operation is implemented for the On Click event of the Button widget.

The Current Location operation saves the current coordinates of a device into a variable. The data is transferred in the following format:

{lat: number, lng: number}, where lat stands for latitude and lng stands for longitude.

On receiving data from Current Loсation, these coordinates are added to the Markers array (using the Insert operation) that, in turn, becomes a data provider for our map.

To move the view area to the current device location, you need to use properties for positioning (center) and scaling (zoom) of the added marker using the Set operation.

Geolocation

Displaying Routes

To display routes, the Map widget provides the Show Route option. This option successively binds markers of the data provider in the array.

Displaying Additional Information in the Pop-up Window

Displaying a pop-up window on clicking a marker is a common scenario. In our app, this pop-up is a separate View Marker Details. Let’s link the pop-up occurrence with the On Marker Click event. To do this, use the Navigate to View operation.

Deleting a Marker

Marker deletion is implemented using the Delete operation in the logic editor. This operation has the following format:

Delete [nothing] from [data provider]

Deleting a Marker

Switching to Google Maps

Sometimes, your app may need to switch to Google Maps for displaying markers and routes. To do this, we use the Load operation to save all information about markers to a markers variable and implement switching using the Google Map operation.