@mathieumaingret/smap v1.1.0

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

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

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