Maps

Learn the properties of the GooglMaps element.

You can enable the map to be displayed and used in Web and Mobile applications. The Web and Android applications you develop are displayed on Google Map, and in iOS applications on Apple Map. After adding the Maps element to your application, you must set the Google Maps API connection via Configuration Manager.

1. Adding the Maps element

2. Properties on Maps element

3. Styling in the Maps Element

1. Adding the Maps element

Drag and drop the Maps element from the Elements panel to the screen. If you drag it to an empty area on the screen, it is added with the Row element. If you drag it into a Column you just add the Maps element.

Maps elements

Adding the Maps Element to the Workspace

The Maps element consists of MapsMarker and Maps MarkerPopUp sections. Both structures can be thought of as Containers. You can select the element you want to add and drag and drop it into MapsMarker or MapsMarkerPopUp. Complex contents can be prepared especially in the Location pop-up. You can give role-based authorizations to the element as well as set its visibility with show/hide/conditional options.

Adding MapsMarker and MapsMarkerPopUp

1. Properties Panel in Maps Element

Select the Maps element you added to the workspace to view the properties of the Maps element.

With the Properties panel on the right side;

• Datasource

• Show Circle Center

• AutoCenter

• Latitude

• Longitude

• Marker Detail Width

• Circle Radius In Km

• Group Picker Icon

• Group Picker Color

• Selected Location Icon

• Current Location Icon

• Keep Center On Zoom

• Authorization

• Visibility

• Actions

You can make the arrangements you need from the titles.

After placing the map in the workspace, it is necessary to create a Datasource for the Maps element.

Datasource

Allows you to select the data table of locations to be displayed on the map.

Open Datasource from view modes. Select the Add button (+) Rest API on the top left panel and create it by giving it a name. Then enter the Service Base URL you want to use. Finally, enter values as you want the API Service to terminate. Enter the expressions /pins and getPins in the API Endpoint section so that the pins can be displayed on the map.

Get, is used to list and display data in API Service.

After the datasource connection is made, actions must be added for the Backend/API. Select the Custom → GoogleMaps → GetPinsFromGoogleMaps custom action from the Add Actions drop-down list in the Properties panel.

After adding the actions, a final adjustment should be made in Properties → Datasource as follows.

Show Circle Center

It serves to show the center of the determined Radius value. This feature is not available if radius is not specified.

Auto Center

You determine the location that you want to be shown on the map as fixed. Wherever you go on the map, no matter how much you zoom in or out on the map. You can set the location to be opened when Auto Center is clicked with this parameter.

Lattitude

The center in the map opening is the area where the latitude value is given. It can be static as well as dynamic values such as the value of an element and the result of the action with the Symbol Picker.

Longitude

The center in the map opening is the area where the longitude value is given. It can be static as well as dynamic values such as the value of the element and the result of the action with the Symbol Picker.

By entering latitude (latitude) and longitude (longitude), the user specifies which coordinate to center the map on at first launch.

Getting Latitude and Longitude Values from Google Maps

First, enter google maps from your browser. Select the desired place or area from the map and right click. It will open a popup window. You can find latitude (latitude) and longitude (longitude) at the top in decimal form. Left click on latitude and longitude to automatically copy the coordinates. Values will be copied.

It is strongly discouraged to use latitude (latitude) and longitude (longitude) taken from the URL. Values may be incorrect.

Marker Detail Width

You can set the width value of Marker Detail.

Marker Detail View

This is the area where you specify how the MarkerDetail will be displayed in the workspace. You can choose one of the PopUp, Drawer, SidePanel display options.

Circle Radius In Km

The area whose data will be displayed is the section where the circular diameter value is entered. You can specify the diameter of the search area in kilometer units.

A circle is created with the diameter given on the map.

Group Picker Icon

In the application you developed, you can customize the icon, where the icons are displayed one by one when zoomed, and grouped into a single pin icon when zoomout is made.

Current Location

Indicates the current location of the user. For this, the application user on the device must have allowed location data.

Keep Center On Zoom

The center changes as the user scrolls through the Map. This center is automatically selected and the event is called again.

Authorization

You can use the authorization options for the Maps element. For the Maps element, you can use authorization options such as Anonymous Access, All Roles Access, Hide, Disable.

Visibility

You can give role-based authorizations to the element, as well as set its visibility with the always visible / hidden (hide) / sometimes visible (conditional visibility) options.

Actions

You can add functions that you can add to the Maps element with Add Actions.

3.Styling in the Maps Element

You can make additional edits to the Maps element by adding layout, border, or shadow.

Layout

You can make visual adjustments such as environmental interior spaces and sizing.

Border

You can add lines to the outer edges of Maps, give radius (corner slopes).

Shadow

You can add shadow effect to Maps element for your web applications.