# MapLibre GL Style Flipper [![npm version](https://img.shields.io/npm/v/maplibre-gl-style-flipper)](https://www.npmjs.com/package/maplibre-gl-style-flipper) A custom control to switch between different map styles in MapLibre GL JS. ![DEMO](/docs/demo.gif) ## Features - **Easy Integration**: Add a style switcher control to your MapLibre GL JS map with just a few lines of code. - **Customizable Styles**: Define your own map styles with names, images, and URLs. - **Responsive Design**: Buttons adapt to different screen sizes. - **Callback Support**: Execute custom logic when the map style changes. ## Installation Install the package via npm: ```bash npm install maplibre-gl-style-flipper ``` Or include it directly via a CDN: ```HTML ``` ## Usage ### Basic Example Here’s how to use the `StyleFlipperControl` in a simple HTML file: ```HTML MapLibre GL Style Flipper
``` ### Explanation 1. **Map Styles**: - The `mapStyles` object contains the styles you want to switch between. Each style has: - `code`: A unique identifier for the style. - `url`: The URL of the MapLibre GL style. - `image`: The path to an image that represents the style (used in the control buttons). 2. **Map Initialization**: - The map is initialized with a default style (`carto-positron` in this case). 3. **Style Flipper Control**: - The `StyleFlipperControl` is created with the `mapStyles` object and an optional callback function that triggers when the style changes. - The control is added to the map using `map.addControl()`. 4. **Customization**: - You can customize the position of the control by changing the second argument of `map.addControl()` (e.g., `"top-right"`, `"bottom-left"`). --- ## API Reference ### `StyleFlipperControl` #### Constructor new StyleFlipperControl(styles, onStyleChange); - **`styles`**: An object containing map styles. Each key is a style name, and the value is an object with: - `code`: A unique identifier for the style. - `url`: The URL of the MapLibre GL style. - `image`: The path to an image that represents the style. - **`onStyleChange` (optional)**: A callback function that is triggered when the style changes. It receives two arguments: - `styleClass`: The name of the selected style. - `styleCode`: The code of the selected style. #### Methods - **`setCurrentStyleCode(code)`**: - Sets the current style code and highlights the corresponding button. - **`code`**: The code of the style to set as active. - **`saveCustomSourcesAndLayers()`**: - Saves the current custom sources and layers. - **`restoreCustomSourcesAndLayers()`**: - Restores the saved custom sources and layers. --- ## Customization ### CSS Styling You can customize the appearance of the control by overriding the default CSS. Here’s an example: ```HTML ``` --- ## Contributing Contributions are welcome! If you find a bug or have a feature request, please open an issue. --- ## License This project is licensed under the MIT License. See the [LICENSE](https://github.com/geoglify/maplibre-gl-style-flipper/blob/main/LICENSE) file for details.