Toggle interactions
Enable or disable UI handlers on a map.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Toggle interactions</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script><link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css" rel="stylesheet" /><style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><style>.listing-group {font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;font-weight: 600;position: absolute;top: 10px;right: 10px;z-index: 1;border-radius: 3px;max-width: 20%;color: #fff;} .listing-group input[type='checkbox']:first-child + label {border-radius: 3px 3px 0 0;} .listing-group label:last-child {border-radius: 0 0 3px 3px;border: none;} .listing-group input[type='checkbox'] {display: none;} .listing-group input[type='checkbox'] + label {background-color: #3386c0;display: block;cursor: pointer;padding: 10px;border-bottom: 1px solid rgba(0, 0, 0, 0.25);} .listing-group input[type='checkbox'] + label {background-color: #3386c0;text-transform: capitalize;} .listing-group input[type='checkbox'] + label:hover,.listing-group input[type='checkbox']:checked + label {background-color: #4ea0da;} .listing-group input[type='checkbox']:checked + label:before {content: '✔';margin-right: 5px;}</style><div id="map"></div><nav id="listing-group" class="listing-group"><input type="checkbox" id="scrollZoom" checked="checked" /><label for="scrollZoom">Scroll zoom</label><input type="checkbox" id="boxZoom" checked="checked" /><label for="boxZoom">Box zoom</label><input type="checkbox" id="dragRotate" checked="checked" /><label for="dragRotate">Drag rotate</label><input type="checkbox" id="dragPan" checked="checked" /><label for="dragPan">Drag pan</label><input type="checkbox" id="keyboard" checked="checked" /><label for="keyboard">Keyboard</label><input type="checkbox" id="doubleClickZoom" checked="checked" /><label for="doubleClickZoom">Double click zoom</label><input type="checkbox" id="touchZoomRotate" checked="checked" /><label for="touchZoomRotate">Touch zoom rotate</label></nav> <script>goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = new goongjs.Map({container: 'map',style: 'https://tiles.goong.io/assets/goong_map_web.json',center: [105.83991, 21.028],zoom: 11.15}); document.getElementById('listing-group').addEventListener('change', function (e) {var handler = e.target.id;if (e.target.checked) {map[handler].enable();} else {map[handler].disable();}});</script> </body></html>