Skip to content

Instantly share code, notes, and snippets.

@mastersigat
Last active January 18, 2023 12:12
Show Gist options
  • Save mastersigat/4bdc64fe4738a2e735fdb869f1327cf9 to your computer and use it in GitHub Desktop.
Save mastersigat/4bdc64fe4738a2e735fdb869f1327cf9 to your computer and use it in GitHub Desktop.
# Leaflet / Sélecteur de fonds de carte
license: mit

Carte leaflet avec fonds de carte issus de flux de tuiles raster et de flux WMS

<html>
<head>
<title>A Leaflet map!</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<style>
#map {width: 99%; height:100%; 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 });
// Ajout fonds de carte (tile et WMS)
var baselayers = {
// Services de tuiles
OSM: L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',{attribution: '&copy; Openstreetmap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}),
ESRI: L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', ),
Hydda: L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/base/{z}/{x}/{y}.png'),
CartoDB: L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'),
// WMS
OrthoRM:L.tileLayer.wms('https://public.sig.rennesmetropole.fr/geoserver/ows?', {layers: 'raster:ortho2014', opacity: 0.5}),
Ancien:L.tileLayer.wms('http://geobretagne.fr/geoserver/photo/wms?', {layers: 'satellite-ancien'})
};baselayers.OSM.addTo(map);
// Selecteur fonds de carte
L.control.layers(baselayers, null, {position: 'topright', collapsed : false }).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