yunjinzh / map-effects-100

Cool tips to design UI/UX on Leaflet maps.

Map Effects 100

Map Effects 100 has cool tips to design UI/UX on your Map.

Map?

• Leaflet

Quick Start

git clone https://github.com/muxlab/map-effects-100.git
npm i
npm start

Index

Main page

1. Fade-in Highlight Style

• Classified Highlight Color
• Rising Popup
• Interlocking Legend
• SVG Marker Animation
• Binding Chart to Map Operations
• Raphael Animation
• Time Animation Play
• Search Nearest with Turf
• Hex Grid with Turf
• Container Scroll Driven Map Navigation
• Map Driven Container Scroll Navigation
• Social Media Avatar on Map
• Custom Popup with D3
• SVG Border Line Generation
• Responsive Popup with Picture
• Map on Video
• ZINE for Map
• Transforming Marker into Picure Frame
• Bouncing Popup
• Blurred Background
• Bootstrap Tooltip
• Vignetting Map

Key code snipets of each file is here!

...Feel free to come with us

Library & Leaflet Plugin

Library

• jQuery
• jQuery UI
• D3
• Chart.js
• Turf
• Bootstrap

CSS

• Font Awesome

Leaflet Plugin

• Leaflet.RaphaelLayer
• Leaflet.VectorIcon

Contribution

You can join the project with the GitHub flow (Fork & Pull Request) in accordance with CONTRIBUTING or propose your ideas at Issues.

Licensing

Copyright 2016 MUX Lab.

MIT.