Skip to content

Instantly share code, notes, and snippets.

@mastersigat

mastersigat/.block

Created February 14, 2021 20:39
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/e27abb40e77f7a7d90637358e9033d9f to your computer and use it in GitHub Desktop.
Save mastersigat/e27abb40e77f7a7d90637358e9033d9f to your computer and use it in GitHub Desktop.
Download ZIP
#MapboxGL / WMS
Raw
.block
license: mit
Raw
index.html
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
<link href="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.css" rel="stylesheet" />
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.Mypopup .mapboxgl-popup-content {
background-color: black;
color : white;
opacity : 0.7;
}
.menu {
position: absolute;
top: 10px;
left: 30px;
width: 180px;
background-color: #FFFFFF;
opacity: 0.89;
color: #000000;
font: 13px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding:10;
}
</style>
</head>
<body>
<div id="map"></div>
<div class='menu'>
<hr>
<label class="categoryLabel"><B>Données Réferentielles</B></label>
<br>
<input type="checkbox" id="Ortho2020" value="Ortho2020" onchange="switchlayer('Ortho2020')" />
<label for="Ortho2020">Ortho2020</label>
<hr>
<label class="categoryLabel"><B>Données RM</B></label>
<br>
<input type="checkbox" id="Cadastre" value="Cadastre" onchange="switchlayer('Cadastre')" checked/>
<label for="Cadastre">Cadastre</label>
<br>
<input type="checkbox" id="Metro" value="Metro" onchange="switchlayer('Metro')" checked/>
<label for="Metro">Stations de métro</label>
<hr>
</div>
<script>
//Appel de la carte
var map = new mapboxgl.Map({
container: 'map',
style: 'https://geoserveis.icgc.cat/contextmaps/positron.json',
zoom: 16.5,
center: [-1.674, 48.105],
pitch: 20
});
// Ajout des données en WMS
map.on('load', function () {
// Ortho2020
map.addSource('Ortho2020', {
'type': 'raster',
'tiles': [
'https://public.sig.rennesmetropole.fr/geoserver/ows?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.3.0&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&raster-opacity=0.5&layers=raster:ortho2020'
],
'tileSize': 256
});
map.addLayer(
{'id': 'Ortho2020',
'type': 'raster',
'source': 'Ortho2020',
'layout': {'visibility': 'none'},
'paint': {'raster-opacity':0.6,}}
);
// Stations de métros
map.addSource('Metro', {
'type': 'raster',
'tiles': [
'https://public.sig.rennesmetropole.fr/geoserver/ows?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.3.0&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=trp_coll:metro_station'
],
'tileSize': 256
});
map.addLayer(
{
'id': 'Metro',
'type': 'raster',
'source': 'Metro',
'paint': {}
}
);
// Cadastre
map.addSource('Cadastre', {
'type': 'raster',
'tiles': [
'https://public.sig.rennesmetropole.fr/geoserver/ows?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.3.0&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=ref_cad:parcelle'
],
'tileSize': 256
});
map.addLayer(
{
'id': 'Cadastre',
'type': 'raster',
'source': 'Cadastre',
'paint': {}
}
);
});
// Configuration affichage menu couches
switchlayer = function (lname) {
if (document.getElementById(lname ).checked) {
map.setLayoutProperty(lname, 'visibility', 'visible');
} else {
map.setLayoutProperty(lname, 'visibility', 'none');
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment