Skip to content

Instantly share code, notes, and snippets.

@mastersigat

mastersigat/.block

Last active February 4, 2018 20:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mastersigat/1a1594890af519eaa74e22f08ca82f1e to your computer and use it in GitHub Desktop.
Save mastersigat/1a1594890af519eaa74e22f08ca82f1e to your computer and use it in GitHub Desktop.
Download ZIP
#Leaflet / Personnaliser les menus
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Panel Layers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=0.8, user-scalable=no" />
<link rel="stylesheet" href="http://labs.easyblog.it/maps/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="http://labs.easyblog.it/maps/leaflet-panel-layers/src/leaflet-panel-layers.css" />
<script src="https://unpkg.com/ion-rangeslider@2.2.0/js/ion.rangeSlider.js"></script>
<script src="http://labs.easyblog.it/maps/leaflet/dist/leaflet-src.js"></script>
<script src="http://labs.easyblog.it/maps/leaflet-panel-layers/src/leaflet-panel-layers.js"></script>
<style>
#map {
position: absolute; /* On définit la carte comme étant en pleine page */
top: 0;
right: 0;
left: 0;
bottom: 0;
}</style>
</head>
<body>
<br />
<div id="map"></div>
<script>
var map = L.map('map', {
zoom: 17,
center: L.latLng([48.113, -1.672])
}),
ESRI = new L.TileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}');
map.addLayer(ESRI);
// Ajout des fonds de carte
var baseLayers = [
{ name: "ESRI World Topo Map",
layer: ESRI},
{ name: "Aerial",
layer: L.tileLayer.wms('https://public.sig.rennesmetropole.fr/geoserver/ows?',
{layers: 'raster:ortho2014', opacity: 0.7})},
{
group: "Openstreetmap",
collapsed: true,
layers: [
{ name: "OSM",
layer: L.tileLayer("http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png")},
{ name: "Open Cycle Map",
layer: L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png')},
{ name: "Transports",
layer: L.tileLayer('http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png')} ]
}
];
// Ajouts des flux WMS
var WMS = [{
// Groupe 1
group: "Cadastre",
layers: [
{active: false,
name: "Cadastre",
layer: {
type: "tileLayer.wms",
args: ['http://geobretagne.fr/geoserver/cadastre/wms',
{layers: 'CP.CadastralParcel',format: 'image/png',transparent: true,
}]}},
{active: false,
name: "DIVCAD",
layer: {
type: "tileLayer.wms",
args: ['http://mapsref.brgm.fr/wxs/refcom-brgm/refign',
{layers: 'PARVEC_DIVCAD',format: 'image/png',transparent: true,
}]}},
{active: false,
name: "refcadastre",
layer: {
type: "tileLayer.wms",
args: ['https://public.sig.rennesmetropole.fr/geoserver/ows?',
{layers: 'ref_cad:cadastre',format: 'image/png',transparent: true,
}]}},
]},
// Groupe 2
{ group: "Batiments",
layers: [
{active: true,
name: "Bati",
layer: {
type: "tileLayer.wms",
args: ['http://mapsref.brgm.fr/wxs/refcom-brgm/refign',
{layers: 'TOPO_E_BATI',format: 'image/png',transparent:true,
//minZoom: 13
}]}},
{active: true,
name: "Parcel Bati",
layer: {
type: "tileLayer.wms",
args: ['http://mapsref.brgm.fr/wxs/refcom-brgm/refign',
{layers: 'PARVEC_BATIMENT',format: 'image/png',transparent:true,
//minZoom: 13
}]}}
]}
];
var menubasemaps = new L.Control.PanelLayers(baseLayers, null, {
//compact: true,
//collapsed: true,
position: 'topright',
}).addTo(map);
var menuwms = new L.Control.PanelLayers(null, WMS, {
//compact: true,
//collapsed: true,
position: 'topright',
collapsibleGroups: false,
}).addTo(map);
var scale = 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