Skip to content

Instantly share code, notes, and snippets.

@mastersigat

mastersigat/.block

Last active January 18, 2023 12:17
Show Gist options
  • Save mastersigat/a31738abaa6848db3cc760059664b1bc to your computer and use it in GitHub Desktop.
Save mastersigat/a31738abaa6848db3cc760059664b1bc to your computer and use it in GitHub Desktop.
Download ZIP
#Leaflet / Ajouter des marqueurs (interactivité + photo)
Raw
.block
license: mit
Raw
README.md

Intégrer et gérér des marqueurs dans une carte leaflet (texte, icone et image)

Raw
index.html
<html>
<head>
<title>A Leaflet map!</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<style>
#map {width: 90%; height:600px; margin: auto; }
</style>
</head>
<body>
<div id="map"></div>
<script>
//Appel et configuration carte
var map = L.map('map', {
center: [48.11, -1.66],
zoom: 13 });
// Fonds de carte
var baselayers = {
OSM: L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'),
ESRI: L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}')}
;baselayers.ESRI.addTo(map);
// Configuration Popup
var customOptions = {'maxWidth': '500', 'className' : 'custom'}
// Configuration icone marqueur Rennes 2
var rennesicone = L.icon({
iconUrl: 'https://i0.wp.com/vips2.fr/wp-content/uploads/2017/04/logoRennes2-Noir.png',
iconSize: [45, 50] });
// Configuration image popup Rennes 2
var popuprennes2 = "<h1>Université Rennes 2</h1> <font> Ma super université que j'adore ! </font> <br> <br> <img src='https://www.univ-rennes2.fr/sites/default/files/UHB/SERVICE-RELATIONS-INTERNATIONALES/DSC_6983.JPG' width='350px'/> <br> <br> <iframe src='https://www.youtube.com/embed/t31R1mb0HFc'</iframe> ";
// Ajout marqueur Rennes 2
var Rennes2 = L.marker([48.119, -1.7013],{icon: rennesicone}).bindPopup(popuprennes2,customOptions);
// Configuration icone marqueur Gare
var gareicone = L.icon({
iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/f/fc/Circle-icons-train.svg',
iconSize: [35, 40] });
// Configuration image popup Gare
var popupgare = "<h2>Gare de Rennes</h2> <h3>Motifs de déplacements</h3> <iframe src='https://ressources.data.sncf.com/explore/embed/dataset/repartition-des-motifs-de-deplacements-des-voyageurs-et-non-voyageurs-enquetes-e/analyze/?q=rennes&dataChart=eyJxdWVyaWVzIjpbeyJjaGFydHMiOlt7InR5cGUiOiJiYXIiLCJmdW5jIjoiQVZHIiwieUF4aXMiOiJwb3VyY2VudGFnZSIsInNjaWVudGlmaWNEaXNwbGF5Ijp0cnVlLCJjb2xvciI6IiNBMTAwNkIiLCJwb3NpdGlvbiI6ImNlbnRlciJ9XSwieEF4aXMiOiJtb3RpZl9kdV9kZXBsYWNlbWVudCIsIm1heHBvaW50cyI6NTAsInNvcnQiOiIiLCJzZXJpZXNCcmVha2Rvd24iOiIiLCJzZXJpZXNCcmVha2Rvd25UaW1lc2NhbGUiOiIiLCJjb25maWciOnsiZGF0YXNldCI6InJlcGFydGl0aW9uLWRlcy1tb3RpZnMtZGUtZGVwbGFjZW1lbnRzLWRlcy12b3lhZ2V1cnMtZXQtbm9uLXZveWFnZXVycy1lbnF1ZXRlcy1lIiwib3B0aW9ucyI6eyJxIjoicmVubmVzIn19fV0sInRpbWVzY2FsZSI6IiIsImRpc3BsYXlMZWdlbmQiOnRydWUsImFsaWduTW9udGgiOnRydWV9&static=false&datasetcard=false' width='400' height='300' frameborder='1'></iframe>";
// Ajout marqueurs Gare
var Gare = L.marker([48.1032, -1.6725],{icon: gareicone}).bindPopup(popupgare,customOptions);
// Ajout marqueurs Rennes 1
var Rennes1 = new L.LayerGroup();
L.marker([48.12, -1.6353]).bindPopup('<b>Université Rennes 1</b>').addTo(map)
L.marker([48.11791, -1.641]).bindPopup('<b>INSA Rennes</b>').addTo(map)
//Gestion des marqueurs
// Gestion des marqueurs
var marqueurs = {"Rennes2": Rennes2,"Gare": Gare};
// Selecteur des marqueurs
L.control.layers(baselayers, marqueurs, {position: 'topright', collapsed: false, autoZIndex: true}).addTo(map);
// Echelle cartographique
L.control.scale().addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment