j-MapZones

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

De component voor het tekenen en weergegeven zones op de kaart. OpenLayers De bibliotheek met de OpenStreetMap De component maakt gebruik van 3de partij afhankelijkheid.

Configuratie:

height {Number/String} vaste hoogte of een ouderlijk element (default: 200)
color {String} maakt het mogelijk om aanpassing te geven van de gecreëerde polygon (default: #fcba03)
zoom {Number} een standaard zoomniveau (default: 11)
modify {Boolean} maakt het mogelijk om de polygon te wijzigen (default: true)
opacity {Number} bepaalt de transparantie van het polygon in percentage (default: 20)
NEW exec {String} een link naar de function(value), het wordt uitgevoerd wanneer de waarde verandert

_Data-bron__ moet bevatten:

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

Goed om te weten:

SHIFT + click op de verticals (gemaakte punt) zal het geselecteerde punt verwijderen

Gebruik het met <ui-component name="mapzones">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator CDN per standaard). auteur: Dodo Marton / Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>