Smap permet de simplifier l'utilisation de cartes OpenStreeMap via l'API Leaflet.
- Compatibilité :
- IE11+
- Dépendances requises :
- jQuery >= 3.3.0
- Leaflet >= 1.5.1
- Dépendances facultatives :
- Leaflet.GestureHandling : 1.1.8
- Leaflet.markercluster 1.4.1
Démos :
var smap = $('#map').smap([options]);
-
@param {object} options (optionnel) Options de Smap
var smap = $('#map').smap({ map: { center: [46.16101, -1.14994] } });
| Option | Type | Valeur par défaut | Description |
|---|---|---|---|
| map | object | Options de Leaflet * | Objet pour les options ci-dessous |
| center | array | undefined | Tableau à 2 entrées [lat, lng] |
| zoom | int | 10 | Zoom par défaut de la carte |
| minZoom | int | 4 | Niveau de zoom minimum |
| maxZoom | int | 18 | Niveau de zoom maximum |
| zoomPosition | string | 'topright' | Position y/x du contrôle du zoom dans la carte |
| gestureHandling | boolean | true | Active la librairie GestureHandling |
| autoCenter | boolean | true | Centre automatiquement la carte par rapport à la position des markers |
| tileLayer | object L.tileLayer | L.tileLayer | Fond de la carte ** |
| enableClusters | boolean | true | Utilise la librairie markercluster pour regrouper les markers trop proches |
(*) Voir https://leafletjs.com/reference-1.5.0.html#map
(**) Exemples de fonds de carte : https://leaflet-extras.github.io/leaflet-providers/preview/
Retourne l'objet L (Leaflet) représentant la carte. Permet ensuite d'utiliser l'API de Leaflet.
- @return {L.map} map
var leafletMap = smap.leaflet();
Change le centre de la carte
- @param {array} center Tableau à 2 entrées [lat, lng]
smap.setCenter([46.16101, -1.14994]);
Change le zoom actuel de la carte. Doit être compris entre minZoom et maxZoom
- @param {int} zoom Zoom
smap.setZoom(14);
Modifie globalement certaines options de Leaflet. Voir API Leaflet
- @param {object} options Objet contenant les options à modifier
smap.setMapOptions({
zoomPosition: 'bottomleft',
minZoom: 10
});
Recentre la carte soit selon la position de toutes les markers, soit selon le centre de la carte.
smap.fitBounds();
Ajoute des markers sur la carte
- @param {array} markers Tableau contenant les infos des markers. Voir API Leaflet
- @param {boolean} replace Doit remplacer les markers existant ou être ajoutés à la suite
// Markers array
var markers = [
{
position: [46.16101, -1.14994],
popup: '<h2>Bonjour</h2>'
},
{
position: [46.16101, -1.14994],
popup: '<h2>Bonjour</h2>'
}
];
// Add to map
var map = $('#map').smap({
map: {
center: markers[0].position
}
}).addMarkers(markers);
Retourne la liste des markers
- @return {SmapMarkers[]} Tableau d'objets SmapMarkers représentant l'ensemble des markers présents sur la carte.
var mapMarkers = map.getMarkers();
Vous n'avez pas besoin d'initialiser vous-même la classe SmapMarker, Smap s'en charge via la méthode Smap.addMarkers
| Option | Type | Valeur par défaut | Description |
|---|---|---|---|
| position | array | [] | Tableau à 2 entrées [lat, lng] |
| customIcon | boolean | true | Active la personnalisation HTML/CSS de l'icône du marker |
| icon | object | Voir ci-dessous | |
| html | string | undefined | HTML de l'icône du marker. Par exemple, le contenu d'un SVG |
| data | object | {data: {id: undefined}} | Data attributes à appliquer sur le marker (data-xx) |
| iconSize | array | [50, 50] | Tableau à 2 entrées [width, height] pour désigner la taille de l'icône. |
| popupAnchor | array | [0, -20] | Tableau à 2 entrées [x, y] représentant le décalage de la popup par rapport au marker |
| popup | string/jQuery object | undefined | Contenu du la popup si besoin |
| showPopup | boolean | false | Affiche la popup du marker directement à sa création. Idéal dans le cas d'une carte avec un seul marker |
| centerOnFocus | boolean | true | Au focus/click sur le marker, la carte se centre sur ses coordonnées. A utiliser avec précaution si les popup ont beaucoup de contenu (leur hauteur ne sera plus prise en compte, et elles pourraient être coupées à l'affichage. |
| sourceContainer | jQuery object | undefined | Référence à un élément HTML qui représente le marker et ses informations ailleurs dans la page, et permet des intéractions entre les deux. Au hover/focus sur le marker, une classe est ajouté à l'élément HTML désigné ici, et inversement. Voir [Exemples d'utilisation](#Exemples d'utilisation SmapMarker) |
| classes | object | Voir ci-dessous | Objet pour les options ci-dessous |
| prefix | string | 'marker' | Préfix de classe |
| marker | string | '{prefix}--default' | Variante du marker |
| popup | string | '{prefix}-popup' | Classe représentant la popup associée au marker |
| focused | string | 'is-focused' | Classe au survol du marker (hover par exemple) |
| active | string | 'is-active' | Classe au click sur un marker, popup ouverte |
Retourne la position du marker sous forme de tableau [lat, lng]
- @return {array} position
Retourne la position du marker sous forme d'un objet L.LatLng
- @return {L.LatLng} position
Retourne le markup HTML du marker
- @return {jQuery} marker
Retourne l'objet L (Marker) représentant le marker. Permet ensuite d'utiliser l'API de Leaflet.
- @return {L.marker} marker
Retourne l'objet L (Leaflet) représentant la carte associée au marker. Permet ensuite d'utiliser l'API de Leaflet.
- @return {L.map} map
Ci-dessous un exemple (à retrouver dans la démo) simple d'utilisation du script, avec l'implémentation de l'option Smap.sourceContainer.
HTML : Liste d'informations et carte
<ul class="list-group" id="map-source">
<li data-marker-id="1">
<div>
<h6>PHARMACIE ASSELIN SCANU</h6>
<small class="lat">46.16101</small>
<small class="lng">-1.14994</small>
</div>
<span>#1</span>
</li>
<li data-marker-id="2">
<div>
<h6>PHARMACIE DU GABUT</h6>
<small class="lat">46.1555</small>
<small class="lng">-1.14981</small>
</div>
<span>#2</span>
</li>
</ul>
<div id="map-1" class="map map--primary"></div>
JS : Récupération des infos de la liste et affichage sur la carte
var markers = [];
var markerSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 63.7"><path d="M52 26.4c0 5.2-2.1 10.5-6.5 16.2-3.9 5-9.2 9.8-13.6 14-1.7 1.5-3.3 3-4.7 4.4-1.5-1.4-3.1-2.9-4.7-4.4-4.6-4.2-9.7-9-13.6-14C4.1 36.9 2 31.6 2 26.4c0-3.3.7-6.5 1.9-9.5C5.2 14 7 11.4 9.2 9.1c2.4-2.2 5-4 7.9-5.2C20.2 2.7 23.6 2 26.9 2s6.7.7 9.7 1.9c2.9 1.2 5.7 3 7.9 5.3 2.4 2.2 4 4.9 5.4 7.8 1.4 2.8 2.1 6.1 2.1 9.4z" stroke="#fff" stroke-width="4"/></svg>';
/* Markers list
========================================================================== */
$('#map-source').children().each(function (i, item) {
item = $(item);
markers.push({
position: [
item.find('.lat').text(),
item.find('.lng').text()
],
icon: {
html: markerSVG,
iconSize: [40, 47],
data: {
id: item.attr('data-marker-id')
}
},
popup: item.html(),
sourceContainer: item
});
});
/* Map declaration
========================================================================== */
var map = $('#map-1').smap({
map: {
center: markers[0].position
}
}).addMarkers(markers);