{"version":"1.0","type":"rich","title":"Custom Map Box Navigation Controls","description":"This example shows custom-styled navigation controls for a Mapbox GL map, replacing the default icons with 30x30 SVG graphics for zoom in, zoom out, compass, and fullscreen actions. The code uses Mapbox GL JS’s `NavigationControl` and `FullscreenControl` APIs to position the buttons in the top-right and bottom-right corners. It embeds optimized SVG data URIs directly into CSS classes like `.mapboxgl-ctrl-zoom-in` and `.mapboxgl-ctrl-compass-arrow`, overriding default backgrounds with `!important`. The icons are created in Sketch, exported to SVG, and optimized before being compressed into CSS background images.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-6359b473413635ca56e27257adfd8076?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}