Leaflet

https://leafletjs.com/
Admin
Leaflet is an open-source JavaScript library for mobile-friendly interactive maps. It is designed...
Tokens:51,485
Snippets:429
Trust Score:9.5
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install Leaflet with npm

Source: https://leafletjs.com/download.html

Run this command to fetch a local copy of Leaflet using the npm package manager. The release files will be available in node_modules/leaflet/dist.

```bash
npm install leaflet
```

--------------------------------

### Install Leaflet build dependencies

Source: https://leafletjs.com/download.html

First step to build Leaflet from source: install the project dependencies. Requires Node.js to be installed.

```bash
npm install
```

--------------------------------

### createTile() with asynchronous initialization using done callback

Source: https://leafletjs.com/examples/extending/extending-2-layers.html

Shows how to use the second parameter 'done' in createTile() for asynchronous initialization. The example delays the tile creation with setTimeout and calls done(null, tile) after a random delay.

```javascript
createTile: function (coords, done) {
    var tile = document.createElement('div');
    tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
    tile.style.outline = '1px solid red';

    setTimeout(function () {
        done(null, tile);	// Syntax is 'done(error, tile)'
    }, 500 + Math.random() * 1500);

    return tile;
}

```

--------------------------------

### TMS tileset base URL

Source: https://leafletjs.com/examples/wms/wms.html

Example base URL for a TMS tileset, using the @png suffix and placeholders for z, x, and y.

```text
http://base_url/tms/1.0.0/{example_layer}@png/{z}/{x}/{y}.png

```

--------------------------------

### WMS layers control example

Source: https://leafletjs.com/examples/wms/wms.html

Builds a layers control with four WMS layer options to compare single-layer and multi-layer requests. The order of layers in the comma-separated list affects composition, but the WMS server decides how to render them.

```javascript
var basemaps = {
    Topography: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
        layers: 'TOPO-WMS'
    }),

    Places: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
        layers: 'OSM-Overlay-WMS'
    }),

    'Topography, then places': L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
        layers: 'TOPO-WMS,OSM-Overlay-WMS'
    }),

    'Places, then topography': L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
        layers: 'OSM-Overlay-WMS,TOPO-WMS'
    })
};

L.control.layers(basemaps).addTo(map);

basemaps.Topography.addTo(map);

```

--------------------------------

### Create a Leaflet map with tiles and a marker popup

Source: https://leafletjs.com/index.html

Creates a Leaflet map in the 'map' div, adds OpenStreetMap tiles with attribution, and places a marker with a popup. Use this as the basic starting point for any Leaflet map.

```javascript
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS popup.<br> Easily customizable.')
    .openPopup();
```

--------------------------------

### HTML page including the plugin file and using the kitten layer

Source: https://leafletjs.com/examples/extending/extending-2-layers.html

Shows how to include the plugin file in an HTML page and use the custom layer. The example includes a script tag for leaflet.js, the plugin file, and a script that creates a map and adds the kitten layer.

```html
<html>
…
<script src='leaflet.js'>
<script src='L.KittenLayer.js'>
<script>
    var map = L.map('map-div-id');
    L.tileLayer.kitten().addTo(map);
</script>
…

```

--------------------------------

### Factory function example for a Leaflet class

Source: https://leafletjs.com/examples/extending/extending-1-classes.html

Shows a factory function that returns a new instance of a class, following the convention of lowerCamelCase for factory names.

```javascript
function myBoxClass(name, options) {
    return new MyBoxClass(name, options);
}
```

--------------------------------

### Leaflet TiltHandler using deviceorientation events

Source: https://leafletjs.com/examples/extending/extending-3-controls.html

Example handler that pans the map on deviceorientation events. It uses window listeners and treats the Gamma angle as horizontal pan and Beta angle as vertical pan (1 degree = 1 pixel). Requires a mobile browser supporting the deviceorientation event, which is flaky and ill-specified.

```javascript
L.TiltHandler = L.Handler.extend({
    addHooks: function() {
        L.DomEvent.on(window, 'deviceorientation', this._tilt, this);
    },

    removeHooks: function() {
        L.DomEvent.off(window, 'deviceorientation', this._tilt, this);
    },

    _tilt: function(ev) {
        // Treat Gamma angle as horizontal pan (1 degree = 1 pixel) and Beta angle as vertical pan
        this._map.panBy( L.point( ev.gamma, ev.beta ) );
    }
});
```

--------------------------------

### TMS server endpoint

Source: https://leafletjs.com/examples/wms/wms.html

Example TMS server endpoint. This is the base URL for the TMS service and also the capabilities document.

```text
http://base_url/tms/1.0.0

```

--------------------------------

### L.Class.initialize() with L.setOptions()

Source: https://leafletjs.com/examples/extending/extending-1-classes.html

Defines a class with default options and an initialize constructor that uses L.setOptions() to merge provided options with defaults. Demonstrates that defaults are used when not overridden.

```javascript
var MyBoxClass = L.Class.extend({

    options: {
        width: 1,
        height: 1
    },

    initialize: function(name, options) {
        this.name = name;
        L.setOptions(this, options);
    }
    
});

var instance = new MyBoxClass('Red', {width: 10});

console.log(instance.name); // Outputs "Red"
console.log(instance.options.width); // Outputs "10"
console.log(instance.options.height); // Outputs "1", the default

```

--------------------------------

### Create an ImageOverlay with L.imageOverlay

Source: https://leafletjs.com/examples/overlays

Creates an image overlay with the given URL, bounds, and options. The options object is optional.

```javascript
var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, options);

```

--------------------------------

### Create base layers, map, and layers control with L.control.layers

Source: https://leafletjs.com/examples/layers-control.html

Sets up two base tile layers (osm and osmHOT), initializes the map with osm and the cities overlay, defines baseMaps and overlayMaps objects for the control, and creates the layers control. The control detects already-added layers and sets checkboxes/radioboxes accordingly; only one base layer should be added at instantiation.

```javascript
var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
});

var osmHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'});

var map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [osm, cities]
});

```

```javascript
var baseMaps = {
    "OpenStreetMap": osm,
    "OpenStreetMap.HOT": osmHOT
};

var overlayMaps = {
    "Cities": cities
};

```

```javascript
var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

```

--------------------------------

### Create an image overlay with options

Source: https://leafletjs.com/examples/overlays

Creates an image overlay with multiple options: opacity 0.8, an error overlay URL, alt text, and interactive set to true. The overlay is added to the map.

```javascript
var imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
var altText = 'Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection.';
var latLngBounds = L.latLngBounds([[40.799311, -74.118464], [40.68202047785919, -74.33]]);

var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
    opacity: 0.8,
    errorOverlayUrl: errorOverlayUrl,
    alt: altText,
    interactive: true
}).addTo(map);

```

--------------------------------

### Basic canvas GridLayer with createTile()

Source: https://leafletjs.com/examples/extending/extending-2-layers.html

Defines a custom GridLayer that creates a canvas element and draws circles that get bigger as you zoom in. Uses the tile size from getTileSize() and the canvas 2D context.

```javascript
L.GridLayer.CanvasCircles = L.GridLayer.extend({
    createTile: function (coords) {
        var tile = document.createElement('canvas');

        var tileSize = this.getTileSize();
        tile.setAttribute('width', tileSize.x);
        tile.setAttribute('height', tileSize.y);

        var ctx = tile.getContext('2d');

        // Draw whatever is needed in the canvas context
        // For example, circles which get bigger as we zoom in
        ctx.beginPath();
        ctx.arc(tileSize.x/2, tileSize.x/2, 4 + coords.z*4, 0, 2*Math.PI, false);
        ctx.fill();

        return tile;
    }
});

```

--------------------------------

### Create Leaflet map with tile layer

Source: https://leafletjs.com/examples/overlays

Creates a Leaflet map centered at [37.8, -96] with zoom level 4 and adds an OpenStreetMap tile layer. This is the base map for the video overlay example.

```javascript
var map = L.map('map').setView([37.8, -96], 4);

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
```

--------------------------------

### Basic Leaflet map with GeoJSON states

Source: https://leafletjs.com/examples/choropleth.html

Creates a basic Leaflet map centered on the US, adds an OpenStreetMap tile layer, and displays the GeoJSON states data. This is the starting point for the choropleth map.

```javascript
var map = L.map('map').setView([37.8, -96], 4);

var tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

L.geoJson(statesData).addTo(map);

```

--------------------------------

### Add video overlay with L.videoOverlay

Source: https://leafletjs.com/examples/overlays

Adds a video overlay using L.videoOverlay with an array of video URLs, a latLngBounds, and options for opacity, error overlay, interactivity, autoplay, muted, and playsInline. The video must be north-up and fit the map proportions.

```javascript
var videoUrls = [
    'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
    'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
];
var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
var latLngBounds = L.latLngBounds([[32, -130], [13, -100]]);

var videoOverlay = L.videoOverlay(videoUrls, latLngBounds, {
    opacity: 0.8,
    errorOverlayUrl: errorOverlayUrl,
    interactive: true,
    autoplay: true,
    muted: true,
    playsInline: true
}).addTo(map);
```

--------------------------------

### Leaflet custom watermark control

Source: https://leafletjs.com/examples/extending/extending-3-controls.html

Custom control that displays a watermark image. It implements onAdd() to return an HTMLElement and onRemove() for cleanup. The factory L.control.watermark creates the control, and the example adds it to the map at the bottomleft position.

```javascript
L.Control.Watermark = L.Control.extend({
    onAdd: function(map) {
        var img = L.DomUtil.create('img');

        img.src = '../../docs/images/logo.png';
        img.style.width = '200px';

        return img;
    },

    onRemove: function(map) {
        // Nothing to do here
    }
});

L.control.watermark = function(opts) {
    return new L.Control.Watermark(opts);
}

L.control.watermark({ position: 'bottomleft' }).addTo(map);
```

--------------------------------

### Initialize map with fitWorld

Source: https://leafletjs.com/examples/mobile

Initializes the map showing the whole world using fitWorld and adds an OpenStreetMap tile layer with maxZoom 19.

```javascript
var map = L.map('map').fitWorld();

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);
```

--------------------------------

### Style GeoJSON features individually with a style function

Source: https://leafletjs.com/examples/geojson.html

Pass a function to the style option to style features based on their properties. The function receives a feature and returns a style object. In this example, the 'party' property determines the color.

```javascript
var states = [{
    "type": "Feature",
    "properties": {"party": "Republican"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
    }
}, {
    "type": "Feature",
    "properties": {"party": "Democrat"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-109.05, 41.00],
            [-102.06, 40.99],
            [-102.03, 36.99],
            [-109.04, 36.99],
            [-109.05, 41.00]
        ]]
    }
}];

L.geoJSON(states, {
    style: function(feature) {
        switch (feature.properties.party) {
            case 'Republican': return {color: "#ff0000"};
            case 'Democrat':   return {color: "#0000ff"};
        }
    }
}).addTo(map);
```

--------------------------------

### L.Class.addInitHook() - Run code after initialize()

Source: https://leafletjs.com/examples/extending/extending-1-classes.html

Registers an initialization hook with L.Class.addInitHook() that runs after initialize() and setOptions(), so this.options is available. The hook calculates an area from width and length.

```javascript
MyBoxClass.addInitHook(function(){
    this._area = this.options.width * this.options.length;
});

```

--------------------------------

### Filter GeoJSON features with the filter option

Source: https://leafletjs.com/examples/geojson.html

Use the filter option to control feature visibility. The function receives a feature and layer and returns true to show or false to hide. In this example, 'Busch Field' is hidden because show_on_map is false.

```javascript
var someFeatures = [{
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "show_on_map": true
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
    }
}, {
    "type": "Feature",
    "properties": {
        "name": "Busch Field",
        "show_on_map": false
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.98404, 39.74621]
    }
}];

L.geoJSON(someFeatures, {
    filter: function(feature, layer) {
        return feature.properties.show_on_map;
    }
}).addTo(map);
```

--------------------------------

### Initialize map and set view

Source: https://leafletjs.com/examples/quick-start

Create a Leaflet map and set its view to the given coordinates and zoom level. The setView method returns the map object, enabling method chaining.

```javascript
var map = L.map('map').setView([51.505, -0.09], 13);
```

--------------------------------

### GeoJSON feature structure for US states

Source: https://leafletjs.com/examples/choropleth.html

Example of a GeoJSON feature object used in the choropleth map. Each feature contains a 'name' and 'density' property, with the geometry omitted for brevity. The data is stored in the 'us-states.js' file and assigned to the 'statesData' variable.

```json
{
    "type": "Feature",
    "properties": {
        "name": "Alabama",
        "density": 94.65
    },
    "geometry": ...
    ...
}

```

--------------------------------

### Add markers and set view

Source: https://leafletjs.com/examples/crs-simple/crs-simple.html

Adds a marker for Sol and sets the map view to show it, using [y, x] coordinates.

```javascript
var sol = L.latLng([ 145, 175.2 ]);
L.marker(sol).addTo(map);
map.setView( [70, 120], 1);
```

--------------------------------

### Add base layer and overlay dynamically with addBaseLayer and addOverlay

Source: https://leafletjs.com/examples/layers-control.html

Dynamically adds a new base layer (OpenTopoMap) and a new overlay (Parks) to an existing layers control using addBaseLayer and addOverlay.

```javascript
var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.'),
    rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');
    
var parks = L.layerGroup([crownHill, rubyHill]);
var openTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: 'Map data: © OpenStreetMap contributors, SRTM | Map style: © OpenTopoMap (CC-BY-SA)'
});

layerControl.addBaseLayer(openTopoMap, "OpenTopoMap");
layerControl.addOverlay(parks, "Parks");

```

--------------------------------

### L.Class.addInitHook() with method name and arguments

Source: https://leafletjs.com/examples/extending/extending-1-classes.html

Alternate addInitHook syntax that calls a named method with arguments. The method _calculateVolume computes volume using options that are already set.

```javascript
MyCubeClass.include({
    _calculateVolume: function(arg1, arg2) {
        this._volume = this.options.width * this.options.length * this.options.depth;
    }
});

MyCubeClass.addInitHook('_calculateVolume', argValue1, argValue2);

```

--------------------------------

### Custom L.TileLayer with getTileUrl() for random kitten images

Source: https://leafletjs.com/examples/extending/extending-2-layers.html

Defines a custom L.TileLayer subclass that overrides getTileUrl() to return a random PlaceKitten image URL. Also defines a factory function L.tileLayer.kitten() and adds the layer to the map.

```javascript
L.TileLayer.Kitten = L.TileLayer.extend({
    getTileUrl: function(coords) {
        var i = Math.ceil( Math.random() * 4 );
        return "https://placekitten.com/256/256?image=" + i;
    },
    getAttribution: function() {
        return "<a href='https://placekitten.com/attribution.html'>PlaceKitten</a>"
    }
});

L.tileLayer.kitten = function() {
    return new L.TileLayer.Kitten();
}

L.tileLayer.kitten().addTo(map);

```

--------------------------------

### Create a custom marker icon with L.icon and use it in L.marker

Source: https://leafletjs.com/examples/custom-icons.html

Create a single custom icon with L.icon and add a marker using it. The icon object specifies the icon image, shadow, and anchor points relative to the marker's location.

```javascript
var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});
```

```javascript
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
```

--------------------------------

### Create city markers and group them with L.layerGroup

Source: https://leafletjs.com/examples/layers-control.html

Creates four city markers with popups and groups them into a single LayerGroup named 'cities' so they can be added or removed from the map at once.

```javascript
var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
    denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
    aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
    golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

```

```javascript
var cities = L.layerGroup([littleton, denver, aurora, golden]);

```

--------------------------------

### Create map with CRS.Simple

Source: https://leafletjs.com/examples/crs-simple/crs-simple.html

Initializes a Leaflet map with the CRS.Simple coordinate reference system, which maps one map unit to one pixel.

```javascript
var map = L.map('map', {
    crs: L.CRS.Simple
});
```

--------------------------------

### Custom play/pause controls for video overlay

Source: https://leafletjs.com/examples/overlays

Defines custom L.Control subclasses to pause and play the video overlay once it's loaded. The controls use L.DomUtil.create and L.DomEvent.on to handle button clicks, calling getElement().pause() and getElement().play() respectively.

```javascript
videoOverlay.on('load', function () {
    var MyPauseControl = L.Control.extend({
        onAdd: function() {
            var button = L.DomUtil.create('button');
            button.title = 'Pause';
            button.innerHTML = '<span aria-hidden="true">⏸</span>';
            L.DomEvent.on(button, 'click', function () {
                videoOverlay.getElement().pause();
            });
            return button;
        }
    });
    var MyPlayControl = L.Control.extend({
        onAdd: function() {
            var button = L.DomUtil.create('button');
            button.title = 'Play';
            button.innerHTML = '<span aria-hidden="true">▶️</span>';
            L.DomEvent.on(button, 'click', function () {
                videoOverlay.getElement().play();
            });
            return button;
        }
    });

    var pauseControl = (new MyPauseControl()).addTo(map);
    var playControl = (new MyPlayControl()).addTo(map);
});
```

--------------------------------

### Define a custom icon class with L.Icon.extend and create multiple markers

Source: https://leafletjs.com/examples/custom-icons.html

Define a reusable icon class by extending L.Icon with shared options, create three icon instances with new, and add markers with popups. The L.icon shortcut is a convenience wrapper for new L.Icon(options), which you can replicate for your own classes.

```javascript
var LeafIcon = L.Icon.extend({
    options: {
        shadowUrl: 'leaf-shadow.png',
        iconSize:     [38, 95],
        shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
    }
});
```

```javascript
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
    redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
    orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});
```

```javascript
L.icon = function (options) {
    return new L.Icon(options);
};
```

```javascript
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
L.marker([51.495, -0.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
L.marker([51.49, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");
```

--------------------------------

### Create a standalone popup with L.popup()

Source: https://leafletjs.com/examples/quick-start

Creates a standalone popup as a layer. Uses openOn instead of addTo to automatically close any previously opened popup when a new one is opened.

```javascript
var popup = L.popup()
    .setLatLng([51.513, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);

```
Tokens:
Raw