Skip to content

dzwiedzmin/Leaflet.PixiOverlay

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Leaflet.PixiOverlay

An overlay class for Leaflet, a JS library for interactive maps. Allows drawing overlay using Pixi.js, a JavaScript library for drawing using WebGL that seamlessly falls back to HTML5's canvas if needed. Thanks to Leaflet.D3SvgOverlay for inspiration.

screenshot

Features

  • No limitations to polylines, circles or geoJSON. Draw whatever you want with Pixi.js
  • No need to reproject your geometries on zoom, this is done using scaling
  • Zoom animation where Leaflet supports it

Compatible with Leaflet 1.0.x

Demo

A very basic demo.

Largest US cities (1000 markers).

French cities (36700 markers).

French presidential 2017 election results: first round and second round (36000 polygons).

French legislative 2017 election results: first round and second round (36000 polygons).

(graph-draw is used to display boundaries in the election demos when rendered in WebGL)

Installation

Leaflet.PixiOverlay is available as a npm package:

npm install leaflet-pixi-overlay 

Usage

Include Pixi.js and the PixiOverlay libraries:

    <script src="pixi.min.js"></script>
    <script src="L.PixiOverlay.min.js"></script>

Create a map:

    var map = L.map(...);

Create an overlay:

    var pixiOverlay = L.pixiOverlay(function(utils) {
        // your drawing code here
    }, new PIXI.Container());

Add it to the map:

    pixiOverlay.addTo(map);

Examples

Draw a marker

var loader = new PIXI.loaders.Loader();
loader.add('marker', 'img/marker-icon.png');
loader.load(function(loader, resources) {
    var markerTexture = resources.marker.texture;
    var markerLatLng = [51.5, -0.09];
    var marker = new PIXI.Sprite(markerTexture);
    marker.anchor.set(0.5, 1);

    var pixiContainer = new PIXI.Container();
    pixiContainer.addChild(marker);

    var firstDraw = true;
    var prevZoom;

    var pixiOverlay = L.pixiOverlay(function(utils) {
        var zoom = utils.getMap().getZoom();
        var container = utils.getContainer();
        var renderer = utils.getRenderer();
        var project = utils.latLngToLayerPoint;
        var scale = utils.getScale();

        if (firstDraw) {
            var markerCoords = project(markerLatLng);
            marker.x = markerCoords.x;
            marker.y = markerCoords.y;
        }

        if (firstDraw || prevZoom !== zoom) {
            marker.scale.set(1 / scale);
        }

        firstDraw = false;
        prevZoom = zoom;
        renderer.render(container);
    }, pixiContainer);
    pixiOverlay.addTo(map);
});

Draw a triangle

var polygonLatLngs = [
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047],
    [51.509, -0.08]
];
var projectedPolygon;
var triangle = new PIXI.Graphics();

var pixiContainer = new PIXI.Container();
pixiContainer.addChild(triangle);

var firstDraw = true;
var prevZoom;

var pixiOverlay = L.pixiOverlay(function(utils) {
    var zoom = utils.getMap().getZoom();
    var container = utils.getContainer();
    var renderer = utils.getRenderer();
    var project = utils.latLngToLayerPoint;
    var scale = utils.getScale();

    if (firstDraw) {
        projectedPolygon = polygonLatLngs.map(function(coords) {return project(coords);});
    }
    if (firstDraw || prevZoom !== zoom) {
        triangle.clear();
        triangle.lineStyle(3 / scale, 0x3388ff, 1);
        triangle.beginFill(0x3388ff, 0.2);
        projectedPolygon.forEach(function(coords, index) {
            if (index == 0) triangle.moveTo(coords.x, coords.y);
            else triangle.lineTo(coords.x, coords.y);
        });
        triangle.endFill();
    }
    firstDraw = false;
    prevZoom = zoom;
    renderer.render(container);
}, pixiContainer);
pixiOverlay.addTo(map);

API

Factory method

L.pixiOverlay(<function> drawCallback, <PIXI.Container> container, <options> options?)
  • drawCallback - callback to draw/update overlay contents.
  • container a Pixi container (a subclass of PIXI.Container).
  • options - overlay options object.

Drawing callback function

drawCallback(utils)
  • utils - helper object. Contains methods to work with layers coordinate system and scaling.

Overlay options object

available fields:

  • padding - (number; defaults to 0.1) How much to extend the drawing area around the map view (relative to its size).
  • forceCanvas - (bool; defaults to false) Force use of a 2d-canvas for rendering.
  • resolution - (number; defaults to 2 on retina devices and 1 elsewhere) Resolution of the renderer.
  • projectionZoom - (function(map): Number; defaults to function that returns the average of map.getMinZoom() and map.getMaxZoom()) returns the projection zoom level. Customizing this option can help if you experience visual artifacts.

Utils object

available methods:

  • latLngToLayerPoint(latLng, zoom?) - (function) returns L.Point projected from L.LatLng in the coordinate system of the overlay.
  • layerPointToLatLng(point, zoom?) - (function) returns L.LatLng projected back from L.Point into the original CRS.
  • getScale(zoom?) - (function) return the current scale factor of the overlay or the scale factor associated to zoom value.
  • getRenderer() - (function) return the current PIXI renderer.
  • getContainer() - (function) return the PIXI container used in the overlay.
  • getMap() - (function) return the current map.

License

This code is provided under the MIT License (MIT).

About

Bring Pixi.js power to Leaflet maps

Resources

License

Stars

Watchers

Forks

Packages

No packages published