j-MapZones

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

The component for drawing and displaying zones on the map. This component uses OpenLayers library with the OpenStreetMap map engine. The component uses 3rd party dependencies.

Configuration:

height {Number/String} fixed height or a parent element (default: 200)
color {String} enables custom color for created polygon (default: #fcba03)
zoom {Number} a default zoom level (default: 11)
modify {Boolean} enables modifiyng of the polygon (default: true)
opacity {Number} determines the transparency of the polygon in percentage (default: 20)
NEW exec {String} a link to the function(value), it's executed when the value is changed

Data-source needs to contain:

{
    points: [{ lat: 48.75152530164132, lng: 19.13902142954625 }, { lat: 48.726826662905296, lng: 19.123238694044034 }, ...] // polygon points
    color: '#FD391A', // optional
    zoom: 13 // optional
}

Good to know:

SHIFT + click on vertices (created point) will delete selected point

Use it with <ui-component name="mapzones">. 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: Dodo Marton / Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<div style="width:400px">
	<ui-component name="mapzones" path="map" config="height:400;color:#FD391A"></ui-component>
</div>

<script>
	var map = { 
		points: [
			{ lat: 48.75152530164132, lng: 19.13902142954625 },
			{ lat: 48.726826662905296, lng: 19.123238694044034 },
			{ lat: 48.739833820262106, lng: 19.190119425971947 },
			{ lat: 48.75152530164132, lng: 19.13902142954625 }
		],
		color: '#FD391A',
		zoom: 13 
	};
</script>