Add support for maplibre-gl-measures plugin#101
Conversation
giswqs
commented
Oct 25, 2025
Integrate the maplibre-gl-measures plugin to enable distance and area measurements on MapLibre maps. Changes: - Add add_measures_control() method to MapLibreMap class with support for: - Metric and imperial unit systems - Custom button titles - Custom styling options (colors, widths, opacity) - Configurable position on the map - Add remove_measures_control() method for cleanup - Update maplibre_widget.js to: - Load maplibre-gl-measures library from CDN - Handle measures control initialization and restoration - Support control lifecycle management - Add comprehensive notebook example (maplibre_measures.ipynb) demonstrating: - Basic usage with metric and imperial units - Custom button titles and styling - Integration with satellite imagery - Combination with other map controls - Export to HTML functionality 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Pull Request Overview
This PR adds support for the maplibre-gl-measures plugin, enabling distance and area measurement functionality on MapLibre maps. Users can measure distances along lines and calculate areas within polygons using both metric and imperial units.
Key Changes:
- Added
add_measures_control()andremove_measures_control()methods to the MapLibreMap class - Implemented JavaScript loading logic for the measures plugin with multiple CDN fallbacks
- Created comprehensive example notebook demonstrating various measurement features
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| anymap/maplibre.py | Adds Python API methods for adding/removing measures control with configurable units and styling options |
| anymap/static/maplibre_widget.js | Implements plugin loading with AMD/CommonJS environment handling and control restoration logic |
| docs/examples/maplibre_measures.ipynb | Provides examples of basic usage, custom styling, and integration with other map features |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const restoreModuleEnv = () => { | ||
| if (hadAMDDefine) window.define = previousDefine; | ||
| if (hadModule) window.module = previousModule; | ||
| else delete window.module; | ||
| if (hadExports) window.exports = previousExports; | ||
| else delete window.exports; | ||
| }; |
There was a problem hiding this comment.
The restoreModuleEnv function has inconsistent logic compared to the existing implementation shown in the context. When hadAMDDefine is true, it should restore window.define, but when false it should delete window.define. The current code only handles the restore case. This should match the pattern: if (hadAMDDefine) window.define = previousDefine; else delete window.define;
| // Disable AMD before injecting script | ||
| if (hadAMDDefine) window.define = undefined; | ||
| if (hadModule) window.module = undefined; | ||
| if (hadExports) window.exports = undefined; | ||
|
|
There was a problem hiding this comment.
This code block (lines 2268-2271) disables AMD/CommonJS after the loop has already completed and restoreModuleEnv() has been called. This appears to be dead code since the environment variables have already been restored at line 2258, and the ESM fallback at line 2276 doesn't require this disabling step.
| // Disable AMD before injecting script | |
| if (hadAMDDefine) window.define = undefined; | |
| if (hadModule) window.module = undefined; | |
| if (hadExports) window.exports = undefined; |
|
🚀 Deployed on https://68fc4fed114e4e1ec30fdb4c--opengeos.netlify.app |