Usage of the map field - imona/tutorial GitHub Wiki

Map field is a transient field type that can be used to show data on the map. It is a transient field. It can be added via:

1. Adding a map to the screen

Edit layout on entity form
Right click - add component - add map.

It can be resized using right click - resize on edit mode.

2. Service methods on the map

Map can be accessed using getComponent("map_unique_id") method. Methods can be used on the map from service scripts:

- putMarker(latitude, longitude): Puts a marker to the point with the given latitude and longitude.
- removeAllMarkers(): Removes all markers and vectors on the map.
- center(latitude, longitude): Centers the map on the point with the given latitude and longitude.
- drawLine(latitude1, longitude1, latitude2, longitude2): Draws a line between the two points with the given latitudes and longitudes.
- zoomLevel: Zoom level of the map, between 0-18. 0 is the furthest and 18 is the closest.

Here is an example usage:

var params = ["layer" : "religion", "tur" : "CAMİ", "per_page" : 100];

var json = callRestServiceViaGet("http://apicitysdk.ibb.gov.tr/admr.istb.fatih/nodes?per_page={per_page}&layer={layer}&religion::TURU={tur}&geom", params);

getComponent("mosque_result_text").value = json;

var results = json.results;

var map = getComponent("map_field");
map.removeAllMarkers();

var latitude = 0.0;
var longitude = 0.0;

var centerLat = 0.0;
var centerLng = 0.0;

for (result : results) {
    longitude = result.geom.coordinates[0];
    latitude = result.geom.coordinates[1];
    centerLat += latitude;
    centerLng += longitude;
    map.putMarker(latitude, longitude);
}

centerLat = centerLat / results.size();
centerLng = centerLng / results.size();

if (!results.isEmpty()) {
    map.center(centerLat, centerLng);
    map.zoomLevel = 13;
}

3. Map click listener event

A click listener can be added to the map, triggering when a point on the map is clicked. To add:

Right click on the map field in edit mode
Listener.. - Click Listener

The script saved on that listener will trigger when any point on the map is clicked (excluding markers). In that script, latitude and longitude of the clicked point can be accessed. The variables are: pointLatitude and pointLongitude

Usage Example:

info("<br/>" + "Latitude: " + pointLatitude + "<br/>" + "Longitude: " + pointLongitude);

4. Pin click listener event

A pin click listener can be added to the map, triggering when a pin on the map is clicked. To add:

Right click on the map field in edit mode
Listener.. - Pin Click Listener

The script saved on that listener will trigger when a pin is clicked. In that script, latitude and longitude of the pin can be accessed. The variables are: vectorLatitude and vectorLongitude