Comparateurs de fonds de cartes

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

<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: '&copy OSM'

}),

"OSM Hot": L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {

attribution: '&copy OSM'

}),

"Open Topo Map": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {

attribution: '&copy OSM'

}),

"ESRI Topo Map": L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {

attribution: '&copy ESRI'

}),

"ESRI Satellite": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {

attribution: '&copy ESRI'

}),

"ESRI Nat Geo": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {

attribution: '&copy ESRI'

}),

"CartoDB": L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {

attribution: '&copy CartoDB'

}),

"CartoDB Dark": L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {

attribution: '&copy CartoDB'

}),

"CartoDB Voyager": L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {

attribution: '&copy 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: '&copy ESRI'

}),

"OSM": L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {

attribution: '&copy OSM'

}),

"OSM Hot": L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {

attribution: '&copy OSM'

}),

"Open Topo Map": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {

attribution: '&copy OSM'

}),

"ESRI Topo Map": L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {

attribution: '&copy ESRI'

}),

"ESRI Nat Geo": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {

attribution: '&copy ESRI'

}),

"CartoDB": L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {

attribution: '&copy CartoDB'

}),

"CartoDB Dark": L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {

attribution: '&copy CartoDB'

}),

"CartoDB Voyager": L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {

attribution: '&copy 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

<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: '&copy 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: '&copy 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: '&copy 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: '&copy 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: '&copy 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: '&copy 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: '&copy 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: '&copy 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>