mariusandra/pigeon-maps: ReactJS Maps without external dependencies


41 bookmarks. First posted by acemarke december 2016.


ReactJS Maps without external dependencies https://pigeon-maps.js.org/
maps  mapping  Web  library  frameworks 
7 weeks ago by mwishek
ReactJS Maps without external dependencies https://mariusandra.github.io/pigeon-…
javascript  library  maps  react  github 
9 weeks ago by iwarshak
ReactJS Maps without external dependencies
javascript  maps  js 
9 weeks ago by sampenrose
ReactJS Maps without external dependencies. Contribute to mariusandra/pigeon-maps development by creating an account on GitHub.
maps  react 
10 weeks ago by HusseinMorsy
ReactJS Maps without external dependencies
javascript  library  maps  react 
10 weeks ago by segfault
ReactJS Maps without external dependencies.
github  javascript  library  maps  react 
10 weeks ago by mcky
via dfjs’s Activity
opensource 
10 weeks ago by darren
ReactJS Maps without external dependencies
library  javascript  maps  react  js  cool  performance 
10 weeks ago by wjy
ReactJS Maps without external dependencies. Contribute to mariusandra/pigeon-maps development by creating an account on GitHub.
github  javascript  library  maps  react  development  map  js  programming 
10 weeks ago by alexmc
ReactJS Maps without external dependencies. Contribute to mariusandra/pigeon-maps development by creating an account on GitHub.
javascript  maps  development 
10 weeks ago by knokio
ReactJS Maps without external dependencies https://mariusandra.github.io/pigeon-…
mapping  maps  react  openstreetmap 
10 weeks ago by euler
ReactJS Maps without external dependencies. Contribute to mariusandra/pigeon-maps development by creating an account on GitHub.
maps  google  mapbox  pigeon  perf  react 
10 weeks ago by jimthedev
Github repo
Name: pigeon-maps
Tagline: ReactJS Maps without external dependencies
Homepage: https://mariusandra.github.io/pigeon-maps/
Languages:
JavaScript = 34318 bytes

# Pigeon Maps - ReactJS maps without external dependencies

[![npm version](https://img.shields.io/npm/v/pigeon-maps.svg)](https://www.npmjs.com/package/pigeon-maps)

![Demonstration](https://github.com/mariusandra/pigeon-maps/blob/master/video.gif?raw=true)

Demo: https://mariusandra.github.io/pigeon-maps/ (using maps from Mapbox, Wikimedia and OSM)

## What is it?

![Pigeon](https://github.com/mariusandra/pigeon-maps/blob/master/pigeon.jpg?raw=true)

Are you tired of waiting 3 seconds to parse 200kb of Google Maps JavaScript just to display a few tiles and a marker? 140kb of minified Leaflet too much?

Welcome to the club!

This project aims to provide a performance-first React-centric extendable map engine.

We're currently at:
- ~20KB minified
- ~5KB gzipped

Implemented:

- Show tiles
- Arbitrary overlays (markers, etc)
- Move the map by dragging
- Move the map by touch on mobile
- Zooming with the scroll wheel
- Zooming by touch
- Fractional zooming (e.g. to level 12.2)
- Zoom without flickering (keep old tiles until new ones load)
- Smooth animated zooming
- Slide when dragging and letting go
- Event handling (clicks, etc)
- Double click and double tap zooming

Missing:
- Double tap and then swipe touch zooming

## Install

One of:

```
# with yarn
yarn add pigeon-maps

# still on npm
npm install --save pigeon-maps
```

## Code

[Demo](https://mariusandra.github.io/pigeon-maps/)
[(source)](https://github.com/mariusandra/pigeon-maps/tree/master/demo/demo.js)

```js
import Map from 'pigeon-maps'
import Marker from 'pigeon-marker'
import Overlay from 'pigeon-overlay'

const map = (
<Map center={[50.879, 4.6997]} zoom={12} width={600} height={400}>
<Marker anchor={[50.874, 4.6947]} payload={1} onClick={({ event, anchor, payload }) => {}} />

<Overlay anchor={[50.879, 4.6997]} offset={[120, 79]}>
<img src='pigeon.jpg' width={240} height={158} alt='' />
</Overlay>
</Map>
)
```

## Inferno support

Pigeon Maps works very will with [Inferno](https://infernojs.org/). Just use these import paths:

```js
import Map from 'pigeon-maps/inferno'
import Marker from 'pigeon-marker/inferno'
import Overlay from 'pigeon-overlay/inferno'
```

[Here's the same demo running in Inferno](https://mariusandra.github.io/pigeon-maps/inferno/)

## Plugins

[pigeon-overlay](https://github.com/mariusandra/pigeon-overlay) ([demo](https://mariusandra.github.io/pigeon-overlay/)) - an anchored overlay

[pigeon-marker](https://github.com/mariusandra/pigeon-marker) ([demo](https://mariusandra.github.io/pigeon-marker/)) - a simple marker component

If you're interested in making a new plugin, check out the code of [pigeon-marker](https://github.com/mariusandra/pigeon-marker/blob/master/src/index.js) as a starting point. Feel free to clone the repo and rename every...
github  programming  github-starred-to-pinboard  crypto 
february 2018 by brianyang
dreikanter starred mariusandra/pigeon-maps
from:ifttt  github 
october 2017 by e30chris
dreikanter starred mariusandra/pigeon-maps
from:ifttt  github 
october 2017 by nicferrier
ReactJS Maps without external dependencies
development  github  maps  react  openstreetmap 
february 2017 by semanticdreamer
ReactJS Maps without external dependencies
react  javascript  maps  development 
january 2017 by gerhard
mariusandra/pigeon-maps
from twitter
january 2017 by wschenk
pigeon-maps - ReactJS Maps without external dependencies
development  github  library  googlemaps  programming  maps  react  javascript 
december 2016 by tranqy
matthewmueller starred mariusandra/pigeon-maps
github  development 
december 2016 by mattmueller
pigeon-maps - ReactJS Maps without external dependencies
javascript  maps  react  library 
december 2016 by braposo