KISS-Géoportail

Affichage de couches Géoportail avec l'API Leaflet et un plugin jQuery.
L'affichage se fait :

via le plugin jQuery : $("#map").geoportail()

ou directement en HTML :

<div id="map" class="geoportalMap" data-apikey="MACLE" data-coord="48.84475,2.4237,15" data-pin="blue">
    Coucou !
</div>

Coucou !

Code :

<div id="map" class="geoportalMap"
    data-apikey="MACLE" 
    data-coord="48.84475,2.4237,15" data-pin="blue" 
    data-layer="MAP|PHOTO|OSM" 
    data-overlay="ROADS">
    Coucou !
</div>

Je suis un cercle...
Coucou !
KISS !
C'est facile !
2 av pasteur, 94160 Saint-Mandé

Code :

<div class="geoportalMap" data-apikey="MACLE" data-zoom="17" data-scale="true" >
    <!-- Mes Layers -->
    <ul class="geoportalContainer">
        <li class="geoportalLayer" data-layer="OSM" ></li>
        <li class="geoportalLayer" data-layer="PHOTO" style="visibility:visible"></li>
        <li class="geoportalOverlay" data-layer="PARCELS" ></li>
        <li class="geoportalOverlay" data-layer="ROADS" style="visibility:visible; opacity:0.6"></li>
    </ul>
    <!-- Mes formes -->
    <ul class="geoportalContainer">
        <li class="geoportalCircle" data-coord="48.84475,2.4237,50" >
            Je suis un cercle...
        </li>
        <!-- Mes punaises -->
        <li class="geoportalPin" data-coord="48.84475,2.4237" >
            Coucou !
        </li>
        <li class="geoportalPin" data-coord="48.8444,2.4249" data-center="true" style="background-image:'punaise.gif';">
            <a href='http://fr.wikipedia.org/wiki/Principe_KISS' target="new" style='font-weight:bold;'>KISS !</a>
            <br />C'est facile !
        </li>
        <!-- Mon adresse -->
        <li class="geoportalAddresse" data-position:"center" style="background-image:'punaise.gif';">
            2 av pasteur, 94160 Saint-Mandé
        </li>
    </ul>
</div>