JMap Cloud
English
English
  • Welcome to JMap Cloud documentation
  • JMap Cloud Portal
    • JMap Cloud Portal User Guide
      • Introduction
        • Accessing JMap Cloud Portal
        • User Interface
        • Dashboard
      • Roles
      • Functions Reserved for Administrators
        • Managing the Organization
          • General
          • API Keys
          • Members
          • Invitations
      • Connecting Data: Data Sources
        • Creating Data Sources
          • Vector/Raster Data Files
          • Non-spatial tabular data files
          • WMS/WMTS Service
          • Vector Tile Service
          • Feature Service
        • Status of a Data Source
        • Managing Data Sources
          • Displaying and editing information
          • Updating data
          • Permissions
          • Removing a spatial data source
        • Uploading Files
      • Organizing Data into Projects
        • Creating a New Project
        • Managing a Project
          • Open the Project
          • Editing a project
          • Permissions
          • Getting the project's public link
          • MVT Cache
          • Deleting the project
      • Configuring Project Content
      • Jobs
  • JMap NG
    • JMap NG User Guide
      • Introduction
        • Connecting to JMap NG
        • User Interface
        • Navigating on the Map
        • Profile and user settings
      • The Data
        • The Layers Panel
        • Data Layers
          • Displaying layers
          • Thematics
          • Layer Information
          • Geographic Extent of the Layer
          • Making layer elements selectable
      • I Wish to...
        • Display Element Information
        • Select Elements on the Map
        • Measure Distances and Surfaces
        • Add Annotations to the Map
        • Export / Print a Map
    • JMap NG Developer Documentation
      • Startup Options
      • Extensions
      • Examples
        • Start the JMap NG Core library
        • Start the JMap NG App
        • Add a JMap NG App extension
        • Toggle a JMap layer visibility
        • Add a layer to display custom data from GeoJSON file
        • Locate and select features by attribute query
        • Add an event on move end
        • Add attributions on the map
        • Locate and select feature by id
        • Locate and select feature(s) by location
        • Custom mouseover on a layer
        • Create a custom form in a div
      • Changelog
  • JMap Cloud API
    • JMap Cloud API Documentation
  • JMap Cloud Plugin for QGIS
    • JMap Cloud Plugin User Guide
      • Installing the plugin
      • Connecting to JMap Cloud
      • Opening a project
      • Editing features
      • Exporting a project
Propulsé par GitBook

K2 Geospatial 2023

Sur cette page
Exporter en PDF
  1. JMap NG
  2. JMap NG Developer Documentation
  3. Examples

Toggle a JMap layer visibility

PrécédentAdd a JMap NG App extensionSuivantAdd a layer to display custom data from GeoJSON file

Dernière mise à jour il y a 11 mois

This example shows how to toggle the visibility of a JMap layer on the map.

Try it out in 

<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>
Codepen.io