/c8oprj-lib-leaflet

This is the Leaflet Interactive maps for OpenStreetMap for Convertigo

Primary LanguageJavaScript

lib_Leaflet

This is the Leaflet Interactive maps for OpenStreatMap for Convertigo

For more technical informations : documentation

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:

    UsageClick 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

namecomment
autoCenterIf true the map will automatically be centered on current users GPS position
centerThe map will be centered on this coordinates described by this object 

{ lat: 46.879966, lng: -121.726909}
circlesAdd 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.
geoCodeSearchAddressIf true the a search box will be displayed at the top of the map to enable users to search for addresses.
layersThe 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.
markersAdd 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
	...
]
polygonsAdd 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
	...
]
zoomZoom factor

events

namecomment
GpsCenteredThis 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.
MapReadyThis 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.