LeafletJs is easy to use. Just follow these instructions and your good to go;
Chapter 1: Enable Leaflet
After referencing the leaflet components you can simply drag and drop the Leaflet widget onto you web page. The only parameter that is needed is the Map height. This works best with pixel height like "650px" instead of other options (like percentage based). Note that this height will not be visible in Service Studio. If you want to have an indicator of the size taken you can place the Leaflet widget inside a Container and give this Container the same Height.
Chapter 2: Add Objects
This Leaflet applications contains several Client Actions to add Leaflet objects to the map.
2.1: Markers
You can add a Marker by calling the AddMarker Client Action;
The only input is the Marker structure where the Marker Name and the Marker.Point (Latitude and Longitude) are mandatory. All other properties are optional.
2.2: Circles
There are 2 Client Actions to draw circles on the map. One that has the radius of the circle in meters (and can become invisible when zoomed out enough) and one with a fixed radius in pixels, this circle will always be visible and have the same size whatever the zoom factor.
2.2.1: Circle
This Circle has the radius in Meters
Mandatory properties are the Circle Name, Circle.Point (Latitude and Longitude) and the Radius. All other properties are optional.
2.2.2: CircleMarker
This Circle has the radius in Pixels
Mandatory properties are the CircleMarker Name, CircleMarker.Point (Latitude and Longitude) and the Radius. All other properties are optional.
2.3: Other objects
There are several other objects you can use. They all use the same pattern as the Marker and the Circle.
Chapter 3: Feature Groups
3.1: What is a Feature Group
<tbd>
3.2: Create and use a Feature Group
Chapter 4: Functions
This chapter describes the most used functions of Leaflet. Please refer to the Description for functions that are not documented here;
4.1: Draw, Show and Hide
To draw an object for the first time you need to use the Client Action "Draw...". You can then use the Client Action "Hide" to remove the object from the map. You can then use either Draw or Show to display the Object again. Draw will reinitialize the Leaflet Object where Show will use original Leaflet Object.
4.2: FlyTo
To move around the map you can use the function "FlyTo". This will create a transition animation that will take the user from one location on the map to the next. You can change the ZoomLevel if you want during this action.
4.3: SetZoom
You can change the Zoom level of the map dynamically. Be sure to use a valid ZoomSize (differs per Tile Provider).
4.4: FitBounds
If you want to show a certain portion of the world you can use "FitBounds". Please note that it can be possible that Leaflet will go out of bounds if needed to draw inside the entire Map Container.
Chapter 5: Structures
To change the behavior of the different Leaflet components you can use the options provided in the different structures. Please refer to the Description of the structure and it's properties for the intended effect. This component does not allow you add custom JSON configuration.
Chapter 6: Troubleshooting
6.1: Maps don't appear when I change screens
The most probable cause for this is that you also used a Leaflet Map on the previous screen. All Leaflet maps gets destroyed by default when you change screens. If you re-use the Leaflet Map name (or just used the default one) this destroy action can happen after the new screen is rendered. This then results in a blank canvas where the map should appear. Please use custom map names to prevent this.