Skip to content

Modernize for Leaflet v1.x and fix zoom bug#64

Open
atogle wants to merge 10 commits intomasterfrom
modernize-v1.1
Open

Modernize for Leaflet v1.x and fix zoom bug#64
atogle wants to merge 10 commits intomasterfrom
modernize-v1.1

Conversation

@atogle
Copy link
Member

@atogle atogle commented Jan 20, 2026

Summary

  • Fix zoom bug: Marker no longer floats to new position when zooming during animation
  • Modernize to ES6 syntax: const/let, arrow functions, UMD module wrapper
  • Add TypeScript type definitions: Full .d.ts file with JSDoc comments
  • Add Vitest test suite: 16 tests covering all functionality
  • Update package.json: v1.1.0, types, test scripts, peerDependencies
  • Remove Bower: Deprecated since 2017
  • Update demo: Leaflet 1.9.4, remove jQuery, working basemap tiles
  • Update README: Full documentation with TypeScript examples, options table, changelog

Test plan

  • Run npm install && npm test - all 16 tests should pass
  • Run npx serve . and open http://localhost:3000/example/
  • Click "Start" and verify markers animate along paths
  • Zoom in/out during animation - markers should snap, not float
  • Verify markers fade out when animation completes

atogle added 10 commits January 20, 2026 12:29
- Convert to ES6 syntax (const/let, arrow functions)
- Add UMD wrapper for AMD/CommonJS/browser support
- Fix zoom bug: disable CSS transitions during zoom to prevent
  marker floating to new position
- Remove legacy _chunk() fallback for non-CSS3 browsers
- Rename 'clickable' option to 'interactive' (Leaflet 1.x naming)
- Add proper cleanup in onRemove()
Adds AnimatedMarker.d.ts with:
- AnimatedMarkerOptions interface extending MarkerOptions
- AnimatedMarker class with start(), stop(), setLine() methods
- Factory function animatedMarker()
- JSDoc comments for all public API
Comprehensive tests covering:
- Constructor and initialization
- Default and custom options
- setLine() functionality
- autoStart behavior
- start() and stop() methods
- onEnd callback execution
- Animation progression through waypoints
- Zoom bug fix (transition disable/enable)
- Event listener cleanup on remove
- Factory function
- Bump version to 1.1.0
- Add types field for TypeScript support
- Add files field to specify published files
- Add test scripts (vitest run, vitest watch)
- Add keywords for better npm discoverability
- Add peerDependencies for leaflet ^1.0.0
- Add devDependencies: vitest, jsdom, leaflet
- Update homepage URL to use https
Bower has been deprecated since 2017. npm is the standard
package manager for JavaScript packages.
index.html:
- Remove IE conditional comments
- Update Leaflet CDN to 1.9.4
- Remove jQuery dependency
- Clean up HTML structure

demo.js:
- Convert to ES6 syntax (const, arrow functions, forEach)
- Replace jQuery with vanilla JS
- Switch to CARTO basemap tiles (MapBox tiles no longer free)
- Use CSS transitions instead of jQuery fadeOut
- Add npm and license badges
- Add requirements section
- Add installation instructions (npm, CDN)
- Add ES modules and TypeScript usage examples
- Add options table with descriptions
- Add methods documentation
- Add development section with test commands
- Add changelog documenting all 1.1.0 changes
- Modernize all code examples to ES6 syntax
The test was checking exact _i values at each timer tick, but the
actual timing depends on distance calculations. Simplified to verify
the animation starts, progresses, and completes with onEnd callback.
The map was floating on top of the start button and logo ribbon.
Increased z-index to 1000 for both #start and #branding to ensure
they appear above Leaflet's map controls.
@atogle atogle self-assigned this Jan 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant