Plugin: Leaflet Truesize

Tine Wiederer

@errorroutine

There are quite a lot of projects out there that let you compare the size of an area by giving the possibility to drag it around on a world map. Especially "The True Size Of ..." inspired us to make a Leaflet plugin for this use case. It's a great way of making area comparisons interactive and therefore more interesting for the user.

As there hasn't been a Leaflet plugin out there that solves this problem, we created Leaflet Truesize, a plugin for creating draggable and projection aware polygons and polylines for your Leaflet map:

Here are the most important steps to get started:

Installation

npm install leaflet-truesize

Usage

import L from 'leaflet';
import 'leaflet-truesize';

// create leaflet map ...

const geojsonFeature = {
  type: 'Feature',
  properties: {},
  geometry: {
    type: 'Polygon',
    coordinates: [
      [
        [14.7656, 50.986],
        [19.0283, 49.1529],
        [24.1259, 50.2893],
        [21.3134, 54.8766],
      ],
    ],
  },
};

const trueSizeLayer = new L.trueSize(geojsonFeature, {
  color: '#FF0000',
  weight: 1,
  opacity: 1,
  dashArray: '7, 10',
}).addTo(map);

As you can see, there are basic styling options for the draggable area, including color, weight and opacity. Furthermore, you can use the markerDiv option to define an icon that is displayed in the center of the polyline or polygon.

Is there anything missing? Feel free to let us know or make a pull request in the GitHub repository.