Comparateurs de fonds de cartes
Comparateurs de fonds de cartes
Embedded Files
Dans l'attente d'une solution pour importer mes comparateurs de fonds de plans directement sur BelouMaps, j'ai mis à disposition les lignes de codes. Pour les connaisseurs, vous pouvez retrouver les codes HTML de ces comparateurs pour les ouvrir dans le navigateur internet de votre choix.
Comparateur 1 :
Ce comparateur permet de visionner deux fonds de cartes en simultané. Les mouvements effectués sur l'une des deux cartes portent effet sur les deux pour toujours garder la même emprise spatiale. Le menu déroulant en haut à droite permet de choisir le fond de carte à comparer. Neuf fonds de cartes sont proposés de chaque côté.
Code HTML - Comparateur 1
Code HTML - Comparateur 1
<html>
<!-- Comparateur de fonds de cartes créé par Clément Bouchère le 27 janvier 2021-->
<!-- Chaque carte suit les déplacements efféctuées sur la seconde-->
<head>
<title>Fond de cartes BelouMaps</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="http://labs.easyblog.it/maps/leaflet/dist/leaflet-src.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#encart {
width: 50%;
height: 100%;
float: left;
}
#map {
width: 50%;
height: 100%;
}
#map2 {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="encart">
<div id="map2"></div>
</div>
<div id="map"></div>
<script>
// Fonds de cartes pour Map
// Couche de base
var map = L.map('map').setView([47, 2], 6);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}').addTo(map);
// Couches dans le menu
var baselayers = {
"OSM": L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: '© OSM'
}),
"OSM Hot": L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
attribution: '© OSM'
}),
"Open Topo Map": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
attribution: '© OSM'
}),
"ESRI Topo Map": L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: '© ESRI'
}),
"ESRI Satellite": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: '© ESRI'
}),
"ESRI Nat Geo": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: '© ESRI'
}),
"CartoDB": L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© CartoDB'
}),
"CartoDB Dark": L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '© CartoDB'
}),
"CartoDB Voyager": L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
attribution: '© CartoDB'
})
}
; baselayers.OSM.addTo(map);
// Fonds de cartes pour Map2
// Couche de base
var map2 = L.map('map2').setView([47, 2], 6);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}').addTo(map2);
// Couches dans le menu
var baselayers2 = {
"Satellite": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: '© ESRI'
}),
"OSM": L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: '© OSM'
}),
"OSM Hot": L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
attribution: '© OSM'
}),
"Open Topo Map": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
attribution: '© OSM'
}),
"ESRI Topo Map": L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: '© ESRI'
}),
"ESRI Nat Geo": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: '© ESRI'
}),
"CartoDB": L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© CartoDB'
}),
"CartoDB Dark": L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '© CartoDB'
}),
"CartoDB Voyager": L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
attribution: '© CartoDB'
})
}
; baselayers2.Satellite.addTo(map2);
// Coordonner les mouvements des deux cartes
map.on('moveend', follow).on('zoomend', follow);
map2.on('moveend', follow).on('zoomend', follow);
var quiet = false;
function follow(e) {
if (quiet) return;
quiet = true;
if (e.target === map) sync(map2, e);
quiet = false;
if (e.target === map2) sync2(map, e);
quiet = false;
}
// Synchroniser la map1 avec la map2
function sync(map, e) {
map.setView(e.target.getCenter(), e.target.getZoom(), {
animate: false,
reset: true
});
}
// Synchroniser la map2 avec la map1
function sync2(map2, e) {
map2.setView(e.target.getCenter(), e.target.getZoom(), {
animate: false,
reset: true
});
}
// Map
// Controleur de fonds de cartes
L.control.layers(baselayers, null, { position: 'topright', collapsed: true }).addTo(map);
// Ajouter l'echelle cartographique
L.control.scale().addTo(map);
// Map2
// Controleur de fonds de cartes
L.control.layers(baselayers2, null, { position: 'topright', collapsed: true }).addTo(map2);
// Ajouter l'echelle cartographique
L.control.scale().addTo(map2);
</script>
</body>
</html>
Comparateur 2 :
Ce comparateur permet de visionner 8 fonds de cartes en simultané. Les mouvements effectués sur la carte située en haut à gauche sont répercutés automatiquement sur les 7 autres cartes pour garder le même territoire sur toutes les cartes.
Code HTML - Comparateur 2
Code HTML - Comparateur 2
<html>
<!-- Comparateur de fonds de cartes créé par Clément Bouchère le 28 janvier 2021-->
<!-- La carte de déplacement est la carte située en haut à gauche-->
<!-- Le mouvement des 7 autres cartes suivra cette dernière-->
<head>
<title>Fond de cartes 2 BelouMaps</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="http://labs.easyblog.it/maps/leaflet/dist/leaflet-src.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#total {
width: 100%;
height: 100%;
}
#bande1 {
width: 25%;
height: 100%;
float: left;
}
#bande2 {
width: 25%;
height: 100%;
float: left;
}
#bande3 {
width: 25%;
height: 100%;
float: left;
}
#bande4 {
width: 25%;
height: 100%;
float: left;
}
#map {
width: 100%;
height: 50%;
float: left;
}
#map2 {
width: 100%;
height: 50%;
float: left;
}
#map3 {
width: 100%;
height: 50%;
float: left;
}
#map4 {
width: 100%;
height: 50%;
float: left;
}
#map5 {
width: 100%;
height: 50%;
float: left;
}
#map6 {
width: 100%;
height: 50%;
float: left;
}
#map7 {
width: 100%;
height: 50%;
float: left;
}
#map8 {
width: 100%;
height: 50%;
float: left;
}
</style>
</head>
<body>
<div id="total">
<div id="bande1">
<div id="map"></div>
<div id="map2"></div>
</div>
<div id="bande2">
<div id="map3"></div>
<div id="map4"></div>
</div>
<div id="bande3">
<div id="map5"></div>
<div id="map6"></div>
</div>
<div id="bande4">
<div id="map7"></div>
<div id="map8"></div>
</div>
</div>
<script>
// Map
var map = L.map('map').setView([47, 2], 6);
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: '© OSM'
}).addTo(map);
// Map2
var map2 = L.map('map2').setView([47, 2], 6);
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
attribution: '© OSM Hot'
}).addTo(map2);
// Map3
var map3 = L.map('map3').setView([47, 2], 6);
L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
attribution: '© Open Topo Map'
}).addTo(map3);
// Map4
var map4 = L.map('map4').setView([47, 2], 6);
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: '© ESRI Topo Map'
}).addTo(map4);
// Map5
var map5 = L.map('map5').setView([47, 2], 6);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: '© ESRI World Imagery'
}).addTo(map5);
// Map6
var map6 = L.map('map6').setView([47, 2], 6);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© CartoDB'
}).addTo(map6);
// Map7
var map7 = L.map('map7').setView([47, 2], 6);
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '© CartoDB Dark'
}).addTo(map7);
// Map8
var map8 = L.map('map8').setView([47, 2], 6);
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
attribution: '© CartoDB Voyager'
}).addTo(map8);
map.on('moveend', follow).on('zoomend', follow);
map2.on('moveend', follow).on('zoomend', follow);
map3.on('moveend', follow).on('zoomend', follow);
map4.on('moveend', follow).on('zoomend', follow);
map5.on('moveend', follow).on('zoomend', follow);
map6.on('moveend', follow).on('zoomend', follow);
map7.on('moveend', follow).on('zoomend', follow);
map8.on('moveend', follow).on('zoomend', follow);
// Synchronisation Map
var quiet = false;
function follow(e) {
if (quiet) return;
quiet = true;
if (e.target === map) sync(map2, e);
if (e.target === map) sync(map3, e);
if (e.target === map) sync(map4, e);
if (e.target === map) sync(map5, e);
if (e.target === map) sync(map6, e);
if (e.target === map) sync(map7, e);
if (e.target === map) sync(map8, e);
quiet = false;
}
function sync(map, e) {
map.setView(e.target.getCenter(), e.target.getZoom(), {
animate: false,
reset: true
});
}
</script>
</body>
</html>
Google Sites
Report abuse