j-MapZones

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Le composant pour dessiner et afficher les zones sur la carte. Ouverture La bibliothèque avec le OpenStreetMap Le moteur de la carte. le composant utilise les dépendances de 3ème partie.

Configuration :

height {Number/String} hauteur fixe ou un élément parent (defaut: 200)
color {String} permet la couleur personnalisée pour le polygone créé (defaut: #fcba03)
zoom {Number} un niveau de zoom par défaut (defaut: 11)
modify {Boolean} permet de modifier le polygone (defaut: true)
opacity {Number} détermine la transparence du polygone en pourcentage (defaut: 20)
NEW exec {String} un lien vers le function(value), il est exécuté lorsque la valeur est modifiée

Data-source doit contenir :

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

Bon à savoir :

SHIFT + click sur les sommets (point créé) supprimera le point sélectionné

Utilisez-le avec <ui-component name="mapzones">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Dodo Marton / Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

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>