Documentation Smap

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 :

Exemples d'utilisation

Créer des cartes Smap

var smap = $('#map').smap([options]);

@param {object} options (optionnel) Options de Smap

var smap = $('#map').smap({
    map: {
        center: [46.16101, -1.14994]
    }
});

Options Smap

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

API Leaflet

(*) Voir https://leafletjs.com/reference-1.5.0.html#map

(**) Exemples de fonds de carte : https://leaflet-extras.github.io/leaflet-providers/preview/

API Smap

leaflet()

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();

setCenter()

Change le centre de la carte

@param {array} center Tableau à 2 entrées [lat, lng]

smap.setCenter([46.16101, -1.14994]);

setZoom()

Change le zoom actuel de la carte. Doit être compris entre minZoom et maxZoom

@param {int} zoom Zoom

smap.setZoom(14);

setMapOptions()

Modifie globalement certaines options de Leaflet. Voir API Leaflet

@param {object} options Objet contenant les options à modifier

smap.setMapOptions({
   zoomPosition: 'bottomleft',
   minZoom: 10
});

fitBounds()

Recentre la carte soit selon la position de toutes les markers, soit selon le centre de la carte.

smap.fitBounds();

addMarkers()

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);

getMarkers()

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();

Créer des markers : SmapMarker

Vous n'avez pas besoin d'initialiser vous-même la classe SmapMarker, Smap s'en charge via la méthode Smap.addMarkers

Options SmapMarker

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

API SmapMarker

getPosition()

Retourne la position du marker sous forme de tableau [lat, lng]

@return {array} position

getLatLng()

Retourne la position du marker sous forme d'un objet L.LatLng

@return {L.LatLng} position

getContainer()

Retourne le markup HTML du marker

@return {jQuery} marker

leaflet()

Retourne l'objet L (Marker) représentant le marker. Permet ensuite d'utiliser l'API de Leaflet.

@return {L.marker} marker

map()

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

Exemples d'utilisation

Ci-dessous un exemple (à retrouver dans la démo) simple d'utilisation du script, avec l'implémentation de l'option Smap.sourceContainer.

Démo disponible ici

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);

@mathieumaingret/smap

Documentation Smap

Créer des cartes Smap

Options Smap

API Leaflet

API Smap

leaflet()

setCenter()

setZoom()

setMapOptions()

fitBounds()

addMarkers()

getMarkers()

Créer des markers : SmapMarker

Options SmapMarker

API SmapMarker

getPosition()

getLatLng()

getContainer()

leaflet()

map()

Exemples d'utilisation

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@mathieumaingret/smap

Documentation Smap

Créer des cartes Smap

Options Smap

API Leaflet

API Smap

leaflet()

setCenter()

setZoom()

setMapOptions()

fitBounds()

addMarkers()

getMarkers()

Créer des markers : SmapMarker

Options SmapMarker

API SmapMarker

getPosition()

getLatLng()

getContainer()

leaflet()

map()

Exemples d'utilisation

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads