j-Leaflet

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

This component uses Leaflet library with the OpenStreetMap map engine. The component uses 3rd party dependencies.

Configuration:

height {Number/String} fixed height or a parent element (default: 200)
margin {Number} a margin for parent element (default: 0)
marker {Boolean} enables marker (default: true)
draggable {Boolean} enables draggable marker (default: false)
zoom {Number} a default zoom level (default: 10)
maxzoom {Number} a maximum zoom level (default: 19)
icon {String} a URL to the default marker icon
iconanchor {String} optional, icon anchor in the for x,y (default: undefined)
iconsize {String} optional, icon size in the for w,h (default: undefined)
move {String} move event - a link to the function or variable function(pos)
click {String} a marker click event - a link to the function or variable function(pos)
center {String} a default location (e.g. Bratislava, Slovakia) if the setter value is empty/nullable
NEW: exec {String} optional, a link to the function(value, component) (it will be executed when the value is changed)

Methods:

component.search(location, callback) searchs locality in the OpenStreetMap API (response is array)
component.parse(pos) returns parsed GPS to array [lat, lon, zoom]
component.center(pos) centers map to the specific position

Use it with <ui-component name="leaflet">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<div style="width:400px">
	<ui-component name="leaflet" path="totalgps" config="height:200"></ui-component>
</div>

<script>
	var totalgps = '48.7357552902333, 19.1465583527431';
</script>