LassoZoomer: Fast Rectangle Zoom for AJAX Maps

Software Development
, , , ,
1

Map zoom rectangle
Map zoom rectangle1059×556 66.5 KB

LassoZoomer is a bookmarklet that lets you zoom into a rectangular area on AJAX-based maps (like Google Maps) by simply dragging your mouse. It’s a handy tool for quickly focusing on a specific region without fiddling with zoom buttons or scroll wheel. For developers, integrating this functionality into your own map mashup is incredibly simple—just two lines of code.

How It Works

The bookmarklet injects a small JavaScript snippet into the page that intercepts mouse drag events on the map. When you click and drag, it draws a rectangle overlay and then triggers the map’s fitBounds method to zoom to that area. It works with Google Maps (both v2 and v3) and similar mapping libraries that support bounds-based zooming.

Using the Bookmarklet

  1. Create a new bookmark in your browser.
  2. Set the URL to the following minified code (or use the full version for readability):
javascript:(function(){var d=document,s=d.createElement('script');s.src='https://cdn.jsdelivr.net/gh/lassozoomer/lassozoomer@latest/bookmarklet.min.js';d.body.appendChild(s);})();
  1. Visit any map page (e.g., Google Maps) and click the bookmarklet.
  2. Drag on the map to select a rectangle—the map zooms to that area instantly.

Adding to Your Own Map Mashup

If you’re building a map-based web app, you can enable LassoZoomer with just two lines of code after initializing your map:

// Assuming 'map' is your Google Maps instance
var lasso = new LassoZoomer(map);
lasso.enable();

That’s it! The library handles all the event listeners, rectangle drawing, and zoom logic. You can customize the rectangle style (color, opacity) via options:

var lasso = new LassoZoomer(map, {
  strokeColor: '#FF0000',
  strokeWeight: 2,
  fillOpacity: 0.2
});

Modern 2026 Trends & Best Practices

While LassoZoomer was originally built for Google Maps, today’s mapping ecosystem has evolved. In 2026, developers often use MapLibre GL JS or Leaflet for open-source mapping, and Google Maps Platform remains popular but with stricter API key requirements. The core concept of rectangle zoom is still relevant, but modern implementations typically use:

  • Custom controls: Instead of a bookmarklet, integrate the zoom tool as a map control button.
  • Touch support: Ensure drag selection works on mobile devices with touch events.
  • Performance: Use requestAnimationFrame for smooth rectangle drawing.
  • Frameworks: If using React, consider react-leaflet or @react-google-maps/api for easier integration.

For a modern alternative, check out Leaflet.draw plugin, which provides a full drawing toolbar including rectangle selection. However, LassoZoomer remains a lightweight, no-dependency solution for quick zoom tasks.

Give it a try and let me know how it works for you!

2

:hammer_and_wrench: Featured GitHub Resource:

:open_book: Topic Overview (Wikipedia):

A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. They are stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. Bookmarklets are usually small snippets of JavaScript executed when a user clicks on them. When clicked, bookmarklets can perform a wide variety of operations, such as running a search query from selected text or extracting data from a table.
— Read more on Wikipedia

:books: Official Documentation & Reference Links: