lib_Leaflet

This is the Leaflet Interactive maps for OpenStreatMap for Convertigo

For more technical informations : documentation

• Installation
• Mobile Library
  • Shared Components
    • LeafletMap

Installation

1. In your Convertigo Studio click on to import a project in the treeview

2. In the import wizard

   

   paste the text below into the Project remote URL field:

   Usage	Click the copy button at the end of the line
   To contribute	lib_Leaflet=https://github.com/convertigo/c8oprj-lib-leaflet.git:branch=master
   To simply use	lib_Leaflet=https://github.com/convertigo/c8oprj-lib-leaflet/archive/master.zip

3. Click the Finish button. This will automatically import the lib_Leaflet project

Mobile Library

Describes the mobile application global properties

Shared Components

LeafletMap

The Leaflet Shared Component. Use this component to add OpenStreetMaps maps to you applications.

variables

name	comment
autoCenter	If true the map will automatically be centered on current users GPS position
center	The map will be centered on this coordinates described by this object { lat: 46.879966, lng: -121.726909}
circles	Add Circles on the map using an array of objects : [ // Circle #1 { lat: 46.879966, // lat of the circle center lng: -121.726909, // lng of the circle center radius: 5000 // Circle radius }, // Circle #2 ... ] You can add as many circles you want in the array.
geoCodeSearchAddress	If true the a search box will be displayed at the top of the map to enable users to search for addresses.
layers	The maps will display layers coming for data sources. You can give the layer information here by using an array of objects such as : [ // layer #1 { name: 'OpenStreetMap', // Name of the layer source source: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', // Layer url pattern (here To feed the layer from Open // Street Maps) options: { // Layer options maxZoom: 18, attribution: '...' } }, // Layer #2 ... ] You can add as many layers you want.
markers	Add Markers on the maps using an array of Objects : [ // Marker #1 { lat: 46.879966, // lat of marker lng: -121.726909, // lng of Marker options: { title: 'here' // All the marker options you can find at https://leafletjs.com/reference.html#marker }, tooltip: 'I am Here', // The tooltip on the marker popup: 'I am Here' // a Popup displayed over the marker }, // Marker #2 ... ]
polygons	Add polygons to the maps using an Array of objects : [ // Polygon #1 [ [ 46.8, -121.85 ], // Latlng segment #1 [ 46.92, -121.92 ], // Latlng segment #2 [ 46.87, -121.8 ] // Latlng segment #3 ], // Polygon #2 ... ]
zoom	Zoom factor

events

name	comment
GpsCentered	This event will be emitted when the GPS has be acquired and the map centered on the current GPS position. The parent.out will hold a { lat: nnn, lng: mmm } Object holding the acquired GPS position.
MapReady	This event will be emitted when the map is ready and displayed. The (map) will hold a reference to the underlying leaflet map object so you can use the leaflet Api to interact with it.