<body>
<main>
<h1>L'interMEDIAire</h1>
<h2>Leaflet</h2>
<div id="map" class="map">
<div class="map__map map_meta">
<span class="map_meta_items" data-lat="">50.838378</span>
<span class="map_meta_items" data-lg="">4.3953359</span>
<span class="map_meta_items" data-client="">La Maison Cauchie</span>
<span class="map_meta_items" data-titre="">La Maison Cauchie – MAJ</span>
<span class="map_meta_items" data-link="">https://lintermediaire.be/maj-maison-cauchie/</span>
</div>
</div>
</main>
</body>
/*COULEURS*/
$noir: rgba(0,0,0,1);
$noirfonce: rgba(29,31,32,1);
$noiropaque: rgba(29,31,32,.9);
$rose: rgba(152,38,114,1);
$bleu: rgba(128,155,189,1);
$blanc: rgba(255,255,255,1);
$gris: rgba(55,55,55,1);
$gris2: rgba(255,255,255,.8);
$gris3: rgba(204,204,204,1);
$padding: 20px 10px;
/*TOUS LES ELEMENTS*/
*,*:after,*:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*LEAF LET*/
.map {
height: 420px;
}
body {
margin: 0px auto;
padding: $padding;
width: 640px;
background: $noir;
color: $blanc;
font-size: 1em;
}
main {
padding: $padding;
background: $noirfonce;
}
a {
color: $rose;
text-decoration: none;
transition: all .3s ease-in-out;
}
a:hover,a:active {
color: $blanc;
}
h1 {
margin: 0;
padding: 0;
font-size: 1.4em;
color: $bleu;
}
h2 {
margin-top: 15px;
width: 100%;
color: $rose;
}
h3 {
display: inline-block;
color: $rose;
text-transform: uppercase;
font-size: 2em;
}
h1,h2,h3 {
font-family: 'Inconsolata', monospace;
}
p {
opacity: .85;
color: $noir;
line-height: 1.6em;
}
img {
margin-top: 20px;
width: 100%;
height: auto;
}
/*www.lintermediaire.be*/
View Compiled
$(document).ready(function() {
if($('.map').length>0) {
/*MAP*/
var map = L.map('map').setView([50.838378,4.3953359], 10);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Clients de lintermediaire.be',
maxZoom: 16
}).addTo(map);
var LeafIcon = L.Icon.extend({
options: {
iconSize: [48, 48],
shadowSize: [0, 0],
iconAnchor: [24, 24],
shadowAnchor: [4, 62],
popupAnchor: [0,-48],
iconUrl: 'https://lintermediaire.be/wp-content/uploads/2019/02/map-marker.png'
}
});
var greenIcon = new LeafIcon(),
redIcon = new LeafIcon(),
orangeIcon = new LeafIcon();
L.icon = function (options) {
return new L.Icon(options);
};
$('.map_meta').each(function(index,element) {
var lat = $(this).children('.map_meta_items[data-lat]').text();
var lg = $(this).children('.map_meta_items[data-lg]').text();
var client = $(this).children('.map_meta_items[data-client]').text();
var titre = $(this).children('.map_meta_items[data-titre]').text();
var link = $(this).children('.map_meta_items[data-link]').text();
addresses = [{
'location': [lat,lg],
'client': client,
'titre': titre,
'link': link,
}];
for (pint of addresses) {
var contentString = '<div class="map_content">'
+'<h3 class="map_title">'
+pint.client
+'</h3>'
+'<br><br><strong class="map_category">Projet :</strong> '+'<p class="map_text">'+pint.titre+'</p>'
+'</p><p class="flex-center">'
+'<a class="btn" href="'
+pint.link
+'">Plus d\'infos</a></p>'
+ '</div>';
L.marker(pint.location, {icon: new LeafIcon()}).addTo(map).bindPopup(contentString);
}
});
}
});
