This component allows users to dynamically update the content of an embedded map iframe based on selections made from a dropdown menu using a Feature Permalink. It is particularly useful for applications requiring geographic data visualization where the user needs to view different regions or aspects of a map without reloading the entire page.
Features
- Dynamic Iframe Source Update: Changes the source URL of an iframe dynamically based on user input from a dropdown menu.
- User-Friendly Interface: Provides a straightforward dropdown menu for selecting map features, enhancing the interactive experience without necessitating full page reloads.
- Easy Integration: Designed for easy integration into any webpage with minimal dependencies, using standard HTML and jQuery or JavaScript.
Implementation
The component consists of a dropdown menu linked to an iframe. When a user selects an option from the dropdown, the iframe's source URL is updated to reflect the selected geographic identifier (gid). This is handled through a JavaScript function that constructs the new URL and applies it to the iframe.
Run the following Pen to see the interactive version:
Other Methods
The same principles can be applied in your framework of choice, such as React, Vue, or Angular.
Interactive demos
- jQuery, button
- jQuery, no button
- Vanilla JavaScript, no button
- Vanilla JavaScript, predefined lat/lon locations, no button