Coder Social home page Coder Social logo

leaflet / leaflet.vectorgrid Goto Github PK

View Code? Open in Web Editor NEW
590.0 29.0 193.0 851 KB

Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0

JavaScript 77.74% Handlebars 22.26%
vector-tiles leaflet topojson geojson protobuf-vector-tiles

leaflet.vectorgrid's Introduction

Leaflet.VectorGrid

Display gridded vector data (sliced GeoJSON, TopoJSON or protobuf vector tiles) in Leaflet 1.0.0

Demos

demo-geojson.html Sliced GeoJSON
demo-topojson.html Sliced TopoJSON (sorry for the antimeridian mess, topojson-to-geojson seems to not handle it properly)
demo-vectortiles.html Protobuf vector tiles: OpenMapTiles, MapBox, MapZen or even ESRI vector tiles
demo-points.html Clickable points and lines
demo-points-icons.html Points as icons

Using

If you use npm:

	npm install leaflet.vectorgrid

That will make available two files: dist/Leaflet.VectorGrid.js and dist/Leaflet.VectorGrid.bundled.js.

The difference is that dist/Leaflet.VectorGrid.bundled.js includes all of VectorGrid's dependencies:

If you are adding these dependencies by yourself, use dist/Leaflet.VectorGrid.js instead.

If you don't want to deal with npm and local files, you can use unpkg.com instead:

<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>

or, with the same caveats about bundled dependencies:

<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>

Docs

This plugin exposes two new classes:

  • L.VectorGrid.Slicer for displaying GeoJSON or TopoJSON data
  • L.VectorGrid.Protobuf for displaying vector tiles from an online tile server

You can find the API documentation, and the explanation about the styling, at:

https://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html

Dependencies

L.VectorGrid.Slicer requires geojson-vt: the global variable geojsonvt must exist. If topojson data is used, then the topojson global variable must also exist.

L.VectorGrid.Protobuf requires vector-tile and pbf: the global variables VectorTile and Pbf must exist.

By default, VectorGrid is built with those dependencies bundled.

Developing

Run npm install.

TODO

  • Sub-panes for the tile renderers (to set the "z-index" of layers/features)
  • More <g>roups in SVG
  • Offscreen <canvas>es in Canvas
  • getBounds() support for the slicer (inherit/extrapolate from geojson data)
  • Parser for mapbox-like vector stylesheets

Motivation

Before VectorGrid, loading vector tiles in Leaflet could only be done with the Leaflet.MapboxVectorTile or the Hoverboard plugin, but neither of those works with Leaflet 1.0.0 (or greater).

VectorGrid leverages the GridLayer feature introduced in Leaflet 1.0.0.

Legalese


"THE BEER-WARE LICENSE": [email protected] wrote this file. As long as you retain this notice you can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a beer in return.


Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.