logo
API Documentation
Tutorials
Getting Started Initialization Layers Third party Controls Geometries Vector styles Measures InfoBox Utils
Releases

Tutorials

  • Getting Started
    • Setup
  • Initialization
    • Init with token
    • Init with username/password
    • Init with constrained zoom levels
    • Init empty map
    • Init with multiple maps
    • Init in 3D mode
    • Init with image 3D mode
    • Init map with a restricted extent
  • Layers
    • XYZ Tile
    • WMS Tile
    • WMTS Tile
    • Vector Layer
    • Vector Tiles
    • WFS Layer
    • ArcGIS Feature
    • Group Layer
  • Third party
    • Google
    • Google side by side
    • Cesium
  • Controls
    • Basics
    • Map modes
    • Map orientations
    • Layer control
    • Zoom control
    • Map Bar Control
    • Map Button
    • Map Toggle
    • Vexcel image metadata
    • Vexcel find collection
    • Vexcel show collection
    • Vexcel Infrared
    • Brightness and Contrast Control
  • Geometries
    • Point
    • Line
    • Polygon
    • MultiPolygon
    • WKT reader
    • GeoJSON reader
    • Feature click
    • Feature hover
  • Vector styles
    • Polygon styles
    • Point styles
    • Point shapes styles
    • Text styles
    • Feature styles
  • Measures
    • 2D mode
    • 3D mode
    • Change units
    • Edit
    • Tooltips
    • Custom Tooltips
  • InfoBox
    • InfoBox fixed
    • InfoBox on click
    • InfoBox feature
  • Utils
    • Transform

Tutorial

Map Toggle


This tutorial demonstrates how to implement toggle button controls in your map application. Toggle buttons provide an interactive way for users to switch between two states (on/off) and trigger different actions based on the current state.

You'll learn how to:

  • Create a custom toggle button control with HTML content
  • Style the toggle button to provide visual feedback of its state
  • Implement event handlers that respond to state changes
  • Use the toggle state to control map features or functionality

Toggle buttons are particularly useful for enabling/disabling map features, activating drawing tools, or switching between different modes of operation. The visual feedback helps users understand the current state of the control and the associated functionality.



Classes:

  • Map
  • Toggle

index.html

        
      

main.js

        
    

Documentation generated by Vexcel Imaging