Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

pigeon-maps

Package Overview
Dependencies
Maintainers
1
Versions
86
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

pigeon-maps - npm Package Compare versions

Comparing version 0.19.4 to 0.19.5

4

CHANGELOG.md

@@ -10,2 +10,6 @@ # Change Log

## 0.19.5 - 2021-03-20
### Changes
- Draggable: Set the cursor to `grab` and`grabbing` by default
## 0.19.4 - 2021-03-20

@@ -12,0 +16,0 @@ ### Changes

7

lib/index.cjs.js

@@ -1735,5 +1735,8 @@ 'use strict';

var deltaX = _state.deltaX,
deltaY = _state.deltaY;
deltaY = _state.deltaY,
isDragging = _state.isDragging;
return /*#__PURE__*/React__default.createElement("div", {
style: _objectSpread2(_objectSpread2({}, style || {}), {}, {
style: _objectSpread2(_objectSpread2({
cursor: isDragging ? 'grabbing' : 'grab'
}, style || {}), {}, {
position: 'absolute',

@@ -1740,0 +1743,0 @@ transform: "translate(" + (left + deltaX) + "px, " + (top + deltaY) + "px)"

@@ -1728,5 +1728,8 @@ import React, { Component, useState, useRef, useEffect } from 'react';

var deltaX = _state.deltaX,
deltaY = _state.deltaY;
deltaY = _state.deltaY,
isDragging = _state.isDragging;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread2(_objectSpread2({}, style || {}), {}, {
style: _objectSpread2(_objectSpread2({
cursor: isDragging ? 'grabbing' : 'grab'
}, style || {}), {}, {
position: 'absolute',

@@ -1733,0 +1736,0 @@ transform: "translate(" + (left + deltaX) + "px, " + (top + deltaY) + "px)"

{
"name": "pigeon-maps",
"version": "0.19.4",
"version": "0.19.5",
"description": "ReactJS maps without external dependencies",

@@ -5,0 +5,0 @@ "author": "Marius Andra",

@@ -7,10 +7,6 @@ # Pigeon Maps - ReactJS maps without external dependencies

![Demonstration](https://pigeon-maps.js.org/assets/video.gif?raw=true)
Demo: https://pigeon-maps.js.org/ (using maps from MapTiler, OSM and Stamen)
Demo: https://pigeon-maps.js.org/ (using maps from OSM and Stamen)
## What is it?
![Pigeon](https://pigeon-maps.js.org/assets/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?

@@ -22,4 +18,2 @@

It was originally created to reduce page load speed for the search results on [Apprentus](https://www.apprentus.com/), a marketplace for private lessons.
We're currently at:

@@ -46,282 +40,17 @@ - [![minified](https://badgen.net/bundlephobia/min/pigeon-maps)](https://bundlephobia.com/result?p=pigeon-maps)

- Support for 100% width/height containers
- Markers
- Overlays
- Draggable Overlays
- Zoom Controls
Missing:
- Double tap and then swipe touch zooming
- Many other components
## Install
[Read the docs here!](https://pigeon-maps.js.org/docs/installation)
```
# using yarn
yarn add pigeon-maps
## Yeah, but why "pigeon"??
# using npm
npm install --save pigeon-maps
```
## Code
[Demo](https://pigeon-maps.js.org/)
```js
import { Map, Marker, Overlay } from 'pigeon-maps'
const map = (
<Map defaultCenter={[50.879, 4.6997]} defaultZoom={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>
)
```
## Choose a tile provider
**Note:** If you're getting **429 errors**, it's time to upgrade pigeon maps and choose a new tile layer provider. Versions before `0.15.0` use a default tile provider that no longer works.
Pigeon Maps defaults to loading map tiles from [OpenStreetMap.org](https://www.openstreetmap.org/). While free (thanks to volunteers and donations), these OSM tiles aren't the best looking visually.
Usually you want to specify a custom map tile provider. There are [many](https://wiki.openstreetmap.org/wiki/Commercial_OSM_Software_and_Services) commercial tile servers to choose from
and you can even [set up your own](https://openmaptiles.org/).
One nice option is [MapTiler](https://www.maptiler.com/cloud/). Their maps look good and their free plan provides up to 100k tile loads per month.
You will need to sign up for an account and pass your API key and map id to the following provider
```jsx
const MAPTILER_ACCESS_TOKEN = ''
const MAP_ID = ''
function mapTilerProvider (x, y, z, dpr) {
return `https://api.maptiler.com/maps/${MAP_ID}/256/${z}/${x}/${y}${dpr >= 2 ? '@2x' : ''}.png?key=${MAPTILER_ACCESS_TOKEN}`
}
render(
<Map
provider={mapTilerProvider}
dprs={[1, 2]} // add this to support hidpi/retina (2x) maps if your provider supports them
...
/>
)
```
Adapt this example for other providers you might want to use.
## Plugins
[pigeon-draggable](https://mariusandra.github.io/pigeon-draggable/) ([demo](https://mariusandra.github.io/pigeon-draggable/)) - a draggable overlay
Note: The `Overlay` and `Marker` components were previously packaged as separate plugins
[pigeon-overlay](https://github.com/mariusandra/pigeon-overlay) & [pigeon-marker](https://github.com/mariusandra/pigeon-marker). You should use the built in components instead!
## API
### `<Map />`
```js
import { Map } from 'pigeon-maps'
export function MyMap() {
const [center, setCenter] = useState([50.879, 4.6997])
const [zoom, setZoom] = useState(11)
return (
<Map
width={600}
height={400}
center={center}
zoom={zoom}
onBoundsChanged={({ center, zoom }) => { setCenter(center); setZoom(zoom) }}>
...
</Map>
)
}
```
**provider** - Function that returns a [TMS URL](https://wiki.openstreetmap.org/wiki/TMS): `(x, y, z, dpr) => url`. The argument `dpr` will be a value from the `dprs` array (see below) or `undefined` when requesting the default tile.
**center** - Coordinates of the map center in the format `[lat, lng]`. Use if the component is controlled, e.g. you'll be listening to `onBoundsChanged` and passing a new `center` when the bounds change.
**defaultCenter** - Initial coordinates of the map center in the format `[lat, lng]`. Use if the component is uncontrolled.
**zoom** - Current zoom level, e.g. `12`, use for controlled components and update when `onBoundsChanged` give you a new value.
**defaultZoom** - The initial zoom for uncontrolled components.
**width** - Width of the component in pixels. Defaults to `100%` of the parent div if not set.
**height** - Height of the component in pixels. Defaults to `100%` of the parent div if not set.
**defaultWidth** - If you don't specify a `width`, we wait until the component is mounted and measure the container before rendering tiles, markers and other objects. Setting `defaultWidth` assumes a width and renders everything before mounting. If the actual width of the component differs, it will just be re-rendered. Use this for example to render tiles on server rendering, when `width` is not set.
**defaultHeight** - Similar as `defaultWidth`, but for the `height`.
**dprs** - An array of `devicePixelRatio`s that your tile provider supports. Defaults to `[]`. Pass an array like `[1, 2]` and the numbers here will be sent to `provider` as the 4th argument. The responses will be combined into an `<img srcset>` attribute, which modern browsers use to select tiles with [the right resolution](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Same_size_different_resolutions).
**animate** - Animations enabled, `true`.
**animateMaxScreens** - If an updated `center` prop is more than `animateMaxScreens` screens away, we will directly switch to it, otherwise smoothly animate to it. Defaults to `5`
**zoomSnap** - Snap to discrete zoom increments (14, 15, 16, etc) when scrolling with the mouse or pinching with touch events, Defaults to `true`.
**minZoom** - The lowest zoom level possible. Defaults to `1`
**maxZoom** - The highest zoom level possible. Defaults to `18`
**attribution** - What to show as an [attribution](https://www.openstreetmap.org/copyright). React node or `false` to hide.
**attributionPrefix** - Prefix before attribution. React node or `false` to hide.
**onClick** - When map is clicked `function ({ event, latLng, pixel })``
**onBoundsChanged** - When the bounds change, `function ({ center, zoom, bounds, initial })`. Use this for a controlled component, then set `center` and `zoom` when it's called. This callback also gets called on the initial mount (when the first bounds become known). In this case the prop `initial` will be set to `true`. It will be `false` on all subsequent calls.
**onAnimationStart** - Called when the map starts moving
**onAnimationStop** - Called when the map stops moving
**mouseEvents** - Can the user interact with the map with the mouse? Defaults to `true`.
**touchEvents** - Can the user interact with the map by touching it? Defaults to `true`.
**metaWheelZoom** - Zooming with the mouse wheel only works when you hold down the `cmd` or `ctrl` keys. Defaults to `false`.
**metaWheelZoomWarning** - Warning text to show if scrolling on a map with `metaWheelZoom` enabled, but without the meta key. Defaults to `Use META+wheel to zoom!`, where `META` is automatically replaced with either "⌘" or "⊞", depending on Mac vs non-Mac. Set to `null` to disable.
**twoFingerDrag** - Moving the map requires touching with two fingers. Defaults to `false`.
**twoFingerDragWarning** - Warning to show when `twoFingerDrag` and you try to move the map with one finger. Defaults to `Use two fingers to move the map`. Set to `null` to disable.
**warningZIndex** - The `z-index` value for the meta warning. Defaults to `100`
**boxClassname** - The classname for the tiles div, allowing you to style it with a filter css property without impacting the overlays.
### `<Overlay />`
Anchor random react components to the map
```js
import { Map, Overlay } from 'pigeon-maps'
export function MyMap() {
return (
<Map defaultCenter={[50.879, 4.6997]} defaultZoom={12} width={600} height={400}>
<Overlay anchor={[50.879, 4.6997]} offset={[120, 79]}>
<img src='pigeon.jpg' width={240} height={158} alt='' />
</Overlay>
</Map>
)
}
```
**anchor** - At which coordinates `[lat, lng]` to anchor the overlay with the map.
**offset** - Offset in pixels relative to the anchor.
### `<Marker />`
Position a marker.
```js
import { Map, Marker } from 'pigeon-maps'
export function MyMap() {
return (
<Map
width={600}
height={400}
defaultCenter={[50.879, 4.6997]}
defaultZoom={12}
>
<Marker
anchor={[50.874, 4.6947]}
color='black'
payload={1}
onClick={({ event, anchor, payload }) => {
console.log('Clicked marker nr: ', payload)
}}
/>
</Map>
)
}
```
**anchor** - At which coordinates `[lat, lng]` to anchor the marker with the map.
**width** and **height** - Size of the marker. Any of the two can be omitted.
**payload** - Random payload that will be returned on events.
**hover** - Should we show the "hover" state of the marker? Default: `undefined`
Events
**onClick** - `({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void`
**onContextMenu** - `({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void`
**onMouseOver** `({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void`
**onMouseOut** `({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void`
### `<ZoomControl />`
Add `+` and `-` zoom buttons.
```js
import { Map, ZoomControl } from 'pigeon-maps'
export function MyMap() {
return (
<Map
width={600}
height={400}
defaultCenter={[50.879, 4.6997]}
defaultZoom={12}
>
{/* <Marker />, ... */}
<ZoomControl />
</Map>
)
}
```
**style** - Add extra style attributes to the container div. For example: `{ right: 10, top: 10, zIndex: 100 }` to change its position.
**buttonStyle** - Override the style of the buttons themselves. For example: `{ background: 'black', color: 'white' }` to invert its colors.
### Custom Elements
`<Map />` takes random React components as its children. The children may have these special props:
**anchor** - At which coordinates `[lat, lng]` to anchor the overlay with the map.
**offset** - Offset in pixels relative to the anchor.
The children get passed these additional props:
**left** - Pixels from the left of the map, calculated from `anchor` and `offset`
**top** - Pixels from the top of the map, calculated from `anchor` and `offset`
**mapState** - An object `{ center, zoom, bounds, width, height }` that gets updated at every animation frame.
**mapProps** - The props passed to the `Map` itself. Used for example to get `maxZoom` in `<ZoomControl />`.
**latLngToPixel** - A helper `function (latLng: Point, center?: Point, zoom?: number)` that returns the position in pixels `[x, y]` for any `[lat, lng]`. The last 2 arguments are optional.
**pixelToLatLng** - A helper `function (pixel: Point, center?: Point, zoom?: number)` that converts any pixel coordinates `[x, y]` to `[lat, lng]`. The last 2 arguments are optional.
**setCenterZoom** - A helper `function (center: Point | null, zoom?: number)` to control the map's position.
Use these two functions to create beautiful widgets.
Add the class `pigeon-drag-block` to disable dragging on the overlay. Add the class `pigeon-click-block` to disable map background clicks on the element.
## Yeah, but why pigeon??
Pigeons are experts in [magnetoreception](https://en.wikipedia.org/wiki/magnetoreception). Good pigeons can find their way home from anywhere.

@@ -334,5 +63,1 @@

Source: https://en.wikipedia.org/wiki/Homing_pigeon
---
Pigeon image by [Robert Claypool](https://www.flickr.com/photos/35106989@N08/7934833110/in/photolist-d6b6rq-9Mukwr-7ZmKb4-fGmwjr-j88Kou-8rMH5s-fhVDED-bMKvR8-o1g6uD-6ymdPD-fXtb7c-pfRt2D-dAChga-cJnQWu-f8EZou-9kcduE-oGhwp5-fGD6YW-dSLETS-anJCUh-98SLJQ-7bkuhT-4uSjrb-bfg6HB-qs9sHM-4gYYBL-q4GXdw-a4gKa9-iWxwyC-4HwW6X-auscdw-9mxYrg-9s659U-X7Nvz-dqcKc2-nE1XAU-qbXkKQ-4RpEww-cwxt6A-5HMS77-mGNr2K-aGjzm4-6AUdCU-9qyyvt-ceov6E-5APWsT-9mB1Hw-emfCwt-bFSixV-4dn3Cs)

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc