https://ashimsaha.net/assets/LeafletGestureHandling-CBQAKn5e.js

1import{j as e,e as t,_ as l}from"./index-Dumoso4n.js";import{C as s}from"./CodeBlock-C0oJpjGN.js";import{S as r}from"./SuggestedBlogs-CfjCpeFM.js";const o=()=>e.jsxs("div",{children:[e.jsx("div",{className:"max-w-3xl mx-auto px-4 pt-8 pb-24",children:e.jsxs("article",{className:"prose prose-base md:max-w-none lg:prose-lg prose-blue",children:[e.jsx("h1",{children:"Improve Map UX Instantly with leaflet-gesture-handling"}),e.jsx("p",{children:"If your app includes an interactive map, you've probably run into a common UX issue: users accidentally scrolling or dragging the map instead of the page. This problem gets especially frustrating on mobile and touch devices."}),e.jsxs("p",{children:["Enter ",e.jsx("a",{href:"https://github.com/elmarquis/Leaflet.GestureHandling",target:"_blank",rel:"noopener noreferrer",children:"leaflet-gesture-handling"}),"—a small Leaflet plugin that drastically improves the user experience by preventing unintentional map movements and providing intuitive instructions to users."]}),e.jsx(t,{srcImport:()=>l(()=>import("./thumbnail-DlGc5WSL.js"),[]),alt:"Leaflet Gesture Handling Example"}),e.jsx("h2",{children:"What Is leaflet-gesture-handling?"}),e.jsxs("p",{children:["leaflet-gesture-handling is a plugin for ",e.jsx("strong",{children:"Leaflet.js"})," that adds simple but effective gesture control behavior. It prevents unexpected zooming and dragging caused by scroll or touch gestures and displays helpful tooltips to guide users."]}),e.jsx(s,{language:"bash",children:"npm install leaflet-gesture-handling"}),e.jsx("p",{children:"Also include the styles:"}),e.jsx(s,{language:"js",children:`import 'leaflet/dist/leaflet.css';
2import 'leaflet-gesture-handling';
3import 'leaflet-gesture-handling/dist/leaflet-gesture-handling.css';`}),e.jsx("h2",{children:"Why Use leaflet-gesture-handling?"}),e.jsx("h3",{children:"Fixes Common UX Problems"}),e.jsx("p",{children:"Tired of maps hijacking your page scroll? This plugin prevents that, especially on mobile where gestures are easily misinterpreted."}),e.jsx("h3",{children:"Clear Feedback for Users"}),e.jsx("p",{children:'Tooltips are displayed explaining how to interact with the map, such as "Use two fingers to move the map" or "Use ⌘ + scroll to zoom".'}),e.jsx("h3",{children:"Easy to Integrate"}),e.jsx("p",{children:"Just a few lines of configuration are needed to enable gesture handling on your Leaflet map."}),e.jsx("h2",{children:"How to Use It in Your React + Leaflet Project"}),e.jsx(s,{language:"jsx",children:`import { useEffect } from 'react';
4import L from 'leaflet';
5import 'leaflet/dist/leaflet.css';
6import 'leaflet-gesture-handling';
7import 'leaflet-gesture-handling/dist/leaflet-gesture-handling.css';
8
9const MapComponent = ({ map }) => {
10  useEffect(() => {
11    // Register gesture handling
12    L.Map.addInitHook('addHandler', 'gestureHandling', L.Map.GestureHandling);
13    
14    map.options.gestureHandling = true;
15    map.options.gestureHandlingOptions = {
16      text: {
17        touch: 'Use two fingers to move the map',
18        scroll: 'Use ctrl + scroll to zoom the map',
19        scrollMac: 'Use ⌘ + scroll to zoom the map',
20      },
21      duration: 1000,
22    };
23
24    map.gestureHandling.enable();
25
26    return () => {
27      map.gestureHandling.disable();
28    };
29  }, [map]);
30
31  return null;
32};`}),e.jsx("h2",{children:"Customization Options"}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"touch"})," – Message shown on touch devices"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"scroll"})," – Message for Windows/Linux scroll zoom"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"scrollMac"})," – Message for macOS scroll zoom"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"duration"})," – How long the message stays on screen (ms)"]})]}),e.jsx("p",{children:"Customize the experience to match your audience's expectations and device usage."}),e.jsx("h2",{children:"When Should You Use leaflet-gesture-handling?"}),e.jsxs("ul",{children:[e.jsx("li",{children:"If your map is embedded within scrollable content"}),e.jsx("li",{children:"If your users are frequently on mobile or tablets"}),e.jsx("li",{children:"If you're receiving complaints about accidental map movement"}),e.jsx("li",{children:"If you want to improve accessibility and clarity for all users"})]}),e.jsx("h2",{children:"Summary"}),e.jsxs("table",{children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Feature"}),e.jsx("th",{children:"leaflet-gesture-handling"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:"Install"}),e.jsx("td",{children:e.jsx("code",{children:"npm i leaflet-gesture-handling"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Purpose"}),e.jsx("td",{children:"Improve map interaction UX"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Device Support"}),e.jsx("td",{children:"Touch, Scroll, macOS, Windows"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Customization"}),e.jsx("td",{children:"Tooltip text, Duration"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Integration"}),e.jsx("td",{children:"React, Vanilla JS, Vue, etc."})]})]})]}),e.jsx("h2",{children:"Final Thoughts"}),e.jsx("p",{children:"leaflet-gesture-handling might seem like a small addition, but it makes a massive difference in usability—especially for mobile-first or heavily interactive apps. If your users ever struggled to zoom or pan your map, it's time to make their experience frictionless."}),e.jsx("p",{children:"Integrate it once, and your users will thank you forever."})]})}),e.jsx(r,{currentSlug:"leaflet-gesture-handling"})]});

32export{o as default};