Giter Club home page Giter Club logo

lightning-maps's Introduction

Lightning Maps (Alpha release)

A fast, lightweight slippy map renderer with very minimal dependencies.

Heavily inspired by Pigeon Maps and Leaflet, but with slightly different goals in mind:

Goals

  • Modern, built using ES6+ syntax
  • Lightweight, minimal dependencies
  • Ability to render thousands of markers, by using <canvas> rendering instead of depending on the DOM
  • Supports rendering of complex polygons
  • Wrapper for React (VueJS coming soon)

Using

1. Install

yarn add lightning-maps

Or link directly to our build via the unpkg CDN:

<script src="https://unpkg.com/lightning-maps/lib/LightningMaps.min.js"></script>

2. Create a <canvas> element

<canvas id="map" width="800" height="600"></canvas>

3. Instantiate the map and add a marker

var map = new LightningMaps.Map(canvas, {
  source: function (x, y, z) {
    return `https://maps.geocod.io/tiles/base/${z}/${x}/${y}.png`;
  },
  zoom: 12,
  center: [38.86530697026126, -77.20057854052735]
});

map.addMarker(new LightningMaps.Marker([38.882666, -77.170150]))

4. Success! You now have a map

Example

Development

Run local development build and tests

yarn run dev
yarn run test:watch

Development urls:

Build library for distribution

yarn run build

lightning-maps's People

Contributors

minicodemonkey avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

facorazza

lightning-maps's Issues

Revisit tile loading

  • Are we loading too many tiles?
  • Can we prioritize loading of certain tiles?
  • More testing with low bandwidth simulation

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.