Toggle a JMap layer visibility
This example shows how to toggle the visibility of a JMap layer on the map.
Try it out in Codepen.io
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta charset="UTF-8">
<style>
#toggle-button {
margin-bottom: 1rem;
}
#my-custom-map {
width: 600px;
height: 600px;
border: 1px solid grey;
}
</style>
</head>
<body class="jmap_wrapper">
<div>
<span>Toggle layer visibility: </span>
<button id="toggle-button">Wait the map is loading</button>
</div>
<div id="my-custom-map"></div>
<script type="text/javascript">
window.JMAP_OPTIONS = {
projectId: 1,
restBaseUrl: "https://jmapdoc.jmaponline.net/services/rest/v2.0",
anonymous: true,
map: {
onStartupMapReadyFn: function() {
var button = document.getElementById("toggle-button");
button.onclick = function () {
const layerId = 4
const currentLayerVisibility = JMap.Layer.isVisible(layerId);
JMap.Layer.setVisible(layerId, !currentLayerVisibility);
};
button.innerHTML = "Toggle";
},
containerId: "my-custom-map",
zoom: 8.794068040447577,
center: {
x: -73.66584749530894,
y: 45.54275797936188
},
scaleControlVisible: true,
scaleControlPosition: "top-right"
}
}
</script>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-core-js@7_Kathmandu_HF3"></script>
</body>
</html>Dernière mise à jour