Built with blockbuilder.org
Created
February 14, 2021 20:39
-
-
Save mastersigat/e27abb40e77f7a7d90637358e9033d9f to your computer and use it in GitHub Desktop.
#MapboxGL / WMS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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