mariusandra / pigeon-maps

ReactJS Maps without external dependencies

Pigeon Maps - ReactJS maps without external dependencies

Demo: https://pigeon-maps.js.org/ (using maps from MapTiler, OSM and Stamen)

What is it?

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:

• 
• 

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
• Option to block dragging with one finger and mouse wheel scrolling without holding meta key
• Enable/disable touch and mouse events as needed - you could make a 100% static server rendered react map
• 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!

Yeah, but why "pigeon"??

Pigeons are experts in magnetoreception. Good pigeons can find their way home from anywhere.

Magnets were essential in making the first maps. With a good map you can find your way home from anywhere.

Thus, pigeon.

Source: https://en.wikipedia.org/wiki/Homing_pigeon

pigeon-maps's Issues

[Feature] Full control over blocking click, drag and zoom

Right now you can add classes to markers no prevent clicking and dragging over them but this insufficient for my use case.
I have two cases where I need to set globally if the map should be clickable, draggable and zoomable.
The first one is when the map has an overlay over it, something like a modal or popup.
The second use case is displaying static but dynamic-generated maps.

@mariusandra would you mind adding these 3 props to the API? I'll come up with a PR for this ASAP if so.

I'm thinking about using something like

<Map
  blockClick={true}
  blockDrag={true}
  blockZoom={true}
/>

Why do the demo markers point to Belgian cities?

Just curious

Polylines / Polygons / Circles [was: New features]

Is there any plan to implement features like circles, polylines and polygons? In other issues I saw you mentioned that you might look into it at some point.

We at Traccar project are looking into re-writing our web app using React and it would be awesome to have a native React map library, but we actually need some more advanced functionality.

Marker

How to change icon marker? and how to show tooltip if marker onClick?

Map doesn't seam to load when passing in variables

I am trying to plot the point of the ISS on the map.
The data I am getting back from that API is a string which I am converting into a number.
the map loads but with a grey screen and with the marker at the top left corner if i replace the vars with the numbers it works?

From what I can see in React looing in the console the map props centre is correct with the numbers but the map state centre is null

I have tried variations of this
const { latitude,longitude } = this.props.iss_position let lat = Number(latitude); let lon = Number(longitude) const map = ( <Map center={[lat, lon]} defaultZoom={12} width={600} height={400}> {/* <Marker anchor={[50.879, 4.6997]} payload={1} onClick={this.handleMarkerClick} /> */} </Map> )

thanks

Use local map image?

It's possible to use a regular jpg/png as the provider?
I need to show maps for each floor of a building.(No tiles needed)
Thanks

Mapbox too expensive

Today this component exploded on HN. While I slightly anticipated the popularity and changed the base map from Mapbox Streets to Wikimedia, the Mapbox tiles have still gotten way more views than I could have expected:

Thus I have to disable the Mapbox tiles for now. If you still want to see what they look like, clone the project, edit the boolean in demo.js and run npm start.

Thanks for understanding!

PS. If you know anyone in Mapbox, ask them to offer free credit so I could keep their tiles online.
PS2. Wikimedia, sorry if this is bringing you too much traffic and thank you for everything! Please contact me if there is an issue. The HN surge should die off eventually though.

layers=T

this is not an issue, may be a new ask. map loads local language in places like thailand, china and russia. Openstreetmap provides feature to give both local language and english language.
https://www.openstreetmap.org/#map=3/-12.90/109.78&layers=T

if this option can be passed as a prop to the map, it would be helpful.

SSR-mismatch for map-images when client has high DPR

First of all, thanks for this awesome map!

We've run into a small problem: When server-side rendering a map, the server doesn't know about the client's device-pixel-ratio, so it just renders with the default map images.

When that server-rendered map is then hydrated on a client with a higher device-pixel-ratio however, pigeon-maps will choose a different version of the images, leading a react warning like this:

index.js:1 Warning: Prop `src` did not match. Server: "https://maps.wikimedia.org/osm-intl/15/17180/10548.png" Client: "https://maps.wikimedia.org/osm-intl/15/17180/[email protected]"

Any ideas on how to best solve this problem?

Wrapping/Repeating when zoomed out far

I checked but couldn't find a way to do this. It would be neat if you could enable wrapping on the edges for when the map is zoomed out quite far (zoom level 1 or 2) so the edges aren't just a grey abyss.

But also, would like to say awesome work on this library, it's amazing!

Blurry map in Chrome

Map is blurry in Chrome as it uses fractional value in transform: translate(...) as sub-pixel transofmation. Rounding could probably help.

FF:

Chrome:

Map title bearing

Would it be possible to support setting a bearing?

https://www.mapbox.com/mapbox-gl-js/example/set-perspective/
https://www.mapbox.com/help/define-bearing/

Bug with "zoom around mouse"

When the map is fully zoomed out, like this:

... and I move the mouse to the top of Greenland, and start scrolling to zoom in, the map behaves in a funny way. After zooming all the way in, the cursor is no longer above Greenland, but below it.

Center is not updated when dragging the mouse(Overlays)

Hi, I have a pretty simple layout like this.

<Map center={center} zoom={zoom} width={600} height={400} provider={this.provider}>
  <MyOverlay data={data} />
</Map>

From MyOverlay, I'm able to get the map state just fine, but there's a slight problem that center is only updated after the drag animation ends. The effect is that my overlay snaps around when I drag the mouse. I confirmed that center is not being updated during the animation by printing the values.

I'm not sure if this expected behavior, but I'm guessing that this is bug since the zoom value is set correctly during the animation frames. Please let me know if you need more info.

how to get coordinate offset from center in pixel ?

I have a UI where user pick location with a crosshair at center of the map area, however there would be floating menu at the top, like toogle map app, so I need to shift that crosshair down from center with css, in pixels. How to get the coordinate of that shifted crosshair?

Clustering

Hello and great work!

What I'm missing in order to integrate into my app is clustering of markers. Are there any thoughts about how to implement this? I didn't dig into the code in depth yet but I would gladly give it a shot if you also think this is a viable feature. Any idea where I could begin to implement this?

Min map area

Hi, I'd like to say thanks for sharing this plugin and ask if you know some way to restrict the position when the map is min zoom.. here is a example:

thank you so much

Feature request: read-only/disabled map

When a user has picked a certain location we just want to show him the information on the map in his profile. This map should be not movable/clickable/zoomable. It can be unlocked when an edit button is clicked.

Right now we wrap/override the handlers for mouse and touch and wheel events and disable them if we have a readonly flag in our wrapping component. It works but is ugly because it overrides internal methods of pigeon map.

Therefore I request the feature to add an optional prop readonly or disabled which, if set, will just make the component show whatever coordinate is provided with whatever zoom level is set but disables any mouse/touch and wheel methods.

Zoom level to show most of the map, based on the component's bounding box

Hello,

The title pretty much says it all, but in summary, I'd like to determine the best zoom level based on the map's container's bounding box. Ideally the algorithm would pick the best compromise between zooming and not showing "empty space".

So far I have the following algorithm, which for some reason doesn't produce any interesting result (it seems to zoom randomly o_O). Any pointer would be greatly appreciated :-) Thanks !

const SW = [-85, -180];
const NE = [85, 180];

fitToViewport() {
    const rect = this._container.getBoundingClientRect();

    const [minX, maxY] = this._map.latLngToPixel(SW);
    const [maxX, minY] = this._map.latLngToPixel(NE);


    const totalWidth = maxX - minX;
    const totalHeight = maxY - minY;

    const zoomToShowX = rect.width / totalWidth;
    const zoomToShowY = rect.height / totalHeight;

    console.log(this._map._lastZoom, zoomToShowX);

    this._map.setCenterZoomTarget(
      (this._map as any).pixelToLatLng(totalWidth / 2, totalHeight / 2),
      this._map._lastZoom *  Math.min(zoomToShowX, zoomToShowY)
    );
  }

Rotation

Feature request: I'd love to be able to specify a rotation.

I've looked into building a PR for this, but it is quite complex. I think changing only adding rotation to the tile transform and adjusting pixelToLatLng & latLngToPixel wouldn't work, because there is also stuff like interactions and bounds that need to be updated. I might work on this myself, but if you have any ideas, please tell :)

Mapbox term of service

At first wanna say wow!!! It's how google map must work.

BTW what about tiles services, looks like the nice looking tiles from MapBox is prohibited to use:

Here https://www.mapbox.com/tos/#[TMAmYmaa]

You must access and use map tiles, static map images, style files, glyphs, and sprites hosted by Mapbox (collectively "Map Assets”) only through our APIs.

Other choices like OSM tiles looks really bad.

So is any plan at mapbox exists to allow their tiles usage?

big repo / tree

Currently this repository is 19MB in size.

TypeScript support

Hi, thanks for this great lib ! Definitely considering using it, is there any support planned for TypeScript ?

Prevent window scrolling when scrolling within the map

This occurs on chrome/android when panning over the map, the window also scrolls.

A feature to automatically fit the map's bounds to center and display all markers

First of all, great implementation, just removed a redundant google maps component and this pigeon is blazing fast !

I was wondering if there is an ability to automatically fit all the markers and center the map such that user could see all markers on a map with appropriate zoom level ?

Does not seem to work with inferno

I have tried to add pigeon maps to an inferno project created with npx create-inferno-app (inferno version 5.6.1), and getting the following error.

_inherits
node_modules/pigeon-maps/lib/inferno/index.js:63
  60 | 
  61 | function _inherits(subClass, superClass) {
  62 |   if (typeof superClass !== "function" && superClass !== null) {
> 63 |     throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  64 |   }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
  65 | }
  66 | 
View compiled```

Mobile - Map.onClick event not fire

TileLayers

Hi, first of all i want to say thank's for your work.
Having a full react map api is so nice

Would be nice to split the TileLayer functionality from Map so we could use different layers on top of each other.

Skip unloaded tiles when zooming out

When zooming out, pigeon-maps remembers what tiles were visible for 4 zoom levels besides the visible one.

Then when all the tiles for the new zoom level fully load, the old tiles are discarded and removed from DOM.

This works okayish, but can get sluggish if we zoom out really fast, as then all the old tiles for the previous 4 zoom levels will also be loaded, resulting in a funny pixelating effect.

Instead of the current behaviour, we should only keep visible the tiles from other zoom levels that were fully loaded. This means if you zoom out from 14 to 10, only the few tiles that managed to load in zoom levels 11 to 13 will be shown, not all of them.

Could you please upgrade to React 16.8+ add TS typings if possible?

Could you please upgrade to React 16.8+ add TS typings if possible?

Use [of pigeon-marker] with Webpack seems to assume image loaders

When attempting to bundle an app using Webpack, it will fail with an error such as this:

Uncaught Error: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

This is because of the use of image imports such as import pin from './img/pin.png'. If the consumer app doesn't have a loader for this installed, it appears that loading the pigeon-marker bundle fails.

This implies that the bundle lib/react/infact.js is not self-contained — it relies on a runtime whose require() implements image loading. I don't know enough about Webpack to say whether this is intentional, but it seems suspect to me. Surely the bundle on your end should be self-contained, and shouldn't rely on which loaders have been installed in the app that uses it. Whatever Webpack spits out on your end should already be embedding the images.

This plugin is perfect!

I just wanted to say I spent several hours trying to get a different library to work with nextjs, fruitlessly. This plugin was simple to install and it just worked, exactly the way I wanted it to.

Thank you so much!

Clustering support

Hi there!

Is clustering functionality coming to pigeon-maps?

Inferno support (was: Which maps to use by default)

Currently the default maps are from Wikimedia. I'm not sure if we can use them. Must be investigated.

Debounce syncToProps so that onBoundsChange gets debounced

This is quite simple to implement but I'd like to discuss the strategy.
Should we let the user set if he wants denouncing or not or should to user tell the time in ms to debounce (setting to 0 would turn debounce off)

@mariusandra, what's your opinion?

Can I highlight some area or use polygon on map

Can I highlight some area or use polygon on map

defaultCenter and defaultZoom props

i've been having issues using pigeon-maps and redux.
What happens is that I must listen to onBoundsChanged but I'm not controlling the component.
So, whenever the map changes this function will create a redux action which will cause the map to re-render and then componentWillReceiveProps is called and it think that I'm controlling the component and it will check the difference between the zoom and center I'd set up and the one on the state.
What do you think about this api? defaultCenter and defaultZoom are used to bootstrap the app no longer checked.
Also, I'd like to know the bounds when I mount the component. What do you think about it?
I'll try to submit a pull request on the defaultCenter and defaultZoom and later I'll think about what shoud be done with the initial mounting.
Or we should call the onBoundsChange callback to call on first mounting.
Later on I'll tell my results.

Mobile marker won't call onClick

If the users clicks on a marker on mobile the onClick event will not be fired if present on the marker.
This happens because the handler for onTouchEnd prevents the default behavior of the interaction.
If we check to see if the touch started and ended at about the same place we can tell it's a click and not a drag and stop preventing the default behavior and dragging the map.

Can this be used in React Native app?

Hi - this library is simply perfect. And I will be using it for a Web display.

I was wondering if it can be used with React Native for super fast (but simple) displays inside apps? Could you please direct me towards any relevant information?

Prevent controlled component from jagging

Right now if you have a controlled map and if updates without it being the map fault while animating (perhaps a marker has updated) then the map will go through componentWillReceiveProps and will force the map to go to the last given center and zoom, ignoring the user intention and jagging.
I have come up with a fix but it's quite ugly. I'd like help to refactor and then send a PR. (help pls)
That's the code to be added here:

      if (!nextProps.center && !nextProps.zoom) {
        // if the user isn't controlling neither zoom nor center we don't have to update.
        return;
      }
      //controllling zoom but zoom didn't change
      if (
        nextProps.zoom === this.props.zoom && !nextProps.center
      ) {
        return;
      }
      //controlling center but center didn't change
      if ( 
        nextProps.center &&
        nextProps.center[0] === this.props.center[0] &&
        nextProps.center[1] === this.props.center[1] && !nextProps.zoom
      ) {
        return;
      }
      //controlling both and neither changed
      if (
        nextProps.center &&
        nextProps.center[0] === this.props.center[0] &&
        nextProps.center[1] === this.props.center[1] &&
        nextProps.zoom === this.props.zoom
      ) {
        return;
      }

Also, @mariusandra, can this change brake another part of pigeon-maps? I have been testing this 'fix' for about 10 minutes and it works perfectly.
If someone needs examples of after and before(and what's the issue that happened that I'm talking about) this I can provide.

Thanks for your time.

Controlled map allows moving and zooming

Hi there,

I am trying to control the map center and zoom myself, so I can limit it to a given boundary.

<Map center={myCenter} zoom={myZoom} onBoundsChanged={()=>{}}></Map>

The map renders with the provided center and zoom level, but then allows free moving and zooming.

Is this a bug or am I misunderstanding the docs? What would be the proper way to (re)set the center and zoom after a bounds change attempt?

Thanks!

Geojson overlay

Love this project. @mariusandra
was actually experimenting writing something like it, but you've gotten way further. 🥇
is there's plan to support geojson overlay?

componentWillReceiveProps has been renamed, and is not recommended for use.

Hello, I'm currently using your lovely project for my personal web page.
I've faced the following warning:

react-dom.development.js:12029

 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Map
printWarning @ react-dom.development.js:12029

For future preservation of the app, I'd suggest simply using the componendDidUpdate function as described in the documentation; given that your componentWillReceive props only really requires it's props.

https://reactjs.org/docs/react-component.html#com

componentDidUpdate

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

I propose the following quick and easy change:

Old componentWillReceiveProps

    componentWillReceiveProps (nextProps) {
    if (nextProps.mouseEvents !== this.props.mouseEvents) {
      nextProps.mouseEvents ? this.bindMouseEvents() : this.unbindMouseEvents()
    }

    if (nextProps.touchEvents !== this.props.touchEvents) {
      nextProps.touchEvents ? this.bindTouchEvents() : this.unbindTouchEvents()
    }

    if (nextProps.width && nextProps.width !== this.props.width) {
      this.setState({ width: nextProps.width })
    }

    if (nextProps.height && nextProps.height !== this.props.height) {
      this.setState({ height: nextProps.height })
    }

    if (!nextProps.center && !nextProps.zoom) {
      // if the user isn't controlling neither zoom nor center we don't have to update.
      return
    }
    if (
      (
        !nextProps.center ||
        (
          nextProps.center[0] === this.props.center[0] &&
          nextProps.center[1] === this.props.center[1]
        )
      ) &&
      nextProps.zoom === this.props.zoom
    ) {
      // if the user is controlling either zoom or center but nothing changed
      // we don't have to update aswell
      return
    }

    const currentCenter = this._isAnimating ? this._centerTarget : this.state.center
    const currentZoom = this._isAnimating ? this._zoomTarget : this.state.zoom

    const nextCenter = nextProps.center || currentCenter // prevent the rare null errors
    const nextZoom = nextProps.zoom || currentZoom

    if (Math.abs(nextZoom - currentZoom) > 0.001 ||
        Math.abs(nextCenter[0] - currentCenter[0]) > 0.0001 ||
        Math.abs(nextCenter[1] - currentCenter[1]) > 0.0001) {
      this.setCenterZoomTarget(nextCenter, nextZoom, true)
    }
  }

New componentWillUpdate componentDidUpdate

 // Literally just change all the occurences of this.props to prevProps
// and nextProps to this.props
  componentDidUpdate(prevProps) {
    

    if (this.props.mouseEvents !== prevProps.mouseEvents) {
      this.props.mouseEvents ? this.bindMouseEvents() : this.unbindMouseEvents()
    }

    if (this.props.touchEvents !== prevProps.touchEvents) {
      this.props.touchEvents ? this.bindTouchEvents() : this.unbindTouchEvents()
    }

    if (this.props.width && this.props.width !== prevProps.width) {
      this.setState({ width: this.props.width })
    }

    if (this.props.height && this.props.height !== prevProps.height) {
      this.setState({ height: this.props.height })
    }

    if (!this.props.center && !this.props.zoom) {
      // if the user isn't controlling neither zoom nor center we don't have to update.
      return
    }
    if (
      (
        !this.props.center ||
        (
          this.props.center[0] === prevProps.center[0] &&
          this.props.center[1] === prevProps.center[1]
        )
      ) &&
      this.props.zoom === prevProps.zoom
    ) {
      // if the user is controlling either zoom or center but nothing changed
      // we don't have to update aswell
      return
    }

    const currentCenter = this._isAnimating ? this._centerTarget : this.state.center
    const currentZoom = this._isAnimating ? this._zoomTarget : this.state.zoom

    const nextCenter = this.props.center || currentCenter // prevent the rare null errors
    const nextZoom = this.props.zoom || currentZoom

    if (Math.abs(nextZoom - currentZoom) > 0.001 ||
        Math.abs(nextCenter[0] - currentCenter[0]) > 0.0001 ||
        Math.abs(nextCenter[1] - currentCenter[1]) > 0.0001) {
      this.setCenterZoomTarget(nextCenter, nextZoom, true)
    }

  }

Edit: Wrote componentWillUpdate instead of DidUpdate, whoops!

How can I dynamically search locations and insert bookmarks on the map?

Hello, I am trying to find a way to search location without going to the OpenStreetMap website ... I have a list of hundreds of place and would like to dynamically display. Do you have any idea how to do this? Thanks again

[Bug] Safari and iOS devices not render if both width and height 100% (not pass both width and height)

as mentioned in #4 , after inspect in safari, items with hasSize condition inside of the div was not rendered.

  render () {
    const { touchEvents, twoFingerDrag } = this.props
    const { width, height } = this.state

    const containerStyle = {
      width: this.props.width ? width : '100%',
      height: this.props.height ? height : '100%',
      position: 'relative',
      display: 'inline-block',
      overflow: 'hidden',
      background: '#dddddd',
      touchAction: touchEvents ? (twoFingerDrag ? 'pan-x pan-y' : 'none') : 'auto'
    }

    const hasSize = !!(width && height)

    return (
      <div style={containerStyle} ref={this.setRef} onWheel={this.handleWheel}>
        {hasSize && this.renderTiles()}
        {hasSize && this.renderOverlays()}
        {hasSize && this.renderAttribution()}
        {hasSize && this.renderWarning()}
      </div>
    )
  }

PS. The component that met the problem look like this

const C = (props) => (
  <React.Fragment>
    <Map center={props.center} zoom={15} onBoundsChanged={store.change} />
    <Crosshair>
      <Image src='http://www.stickpng.com/assets/images/58889219bc2fc2ef3a1860aa.png' height={30} />
    </Crosshair>
    <Crosshair>
      <Select onClick={props.cb(store.data)}>{store.data.address}</Select>
    </Crosshair>
  </React.Fragment>
)

Support width="100%" and height="100%" out of the box

Currently the map needs width={number} and height={number} props to work.

To make it 100% width, you need to wrap it with a component that measures and passes the width and the height... and also responds to onresize and other events.

It should be easier than that.

If width="100%" is passed, it should then be possible to pass a default width/height for server side rendering.

Mousewheel zoom doesn't work when both height and width are supplied as props

Version 0.12.1, Firefox 66.0.3, Windows 10

If I know the fixed height and width I want the component to be (because it's contained in a resizable box), and I pass those as the height and width props, then the mousewheel listener is never bound, due to the following lines:

pigeon-maps/src/index.js

Lines 171 to 179 in e70a0fe

	if (!this.props.width || !this.props.height) {
	// A height:100% container div often results in height=0 being returned on mount.
	// So ask again once everything is painted.
	if (!this.updateWidthHeight()) {
	requestAnimationFrame(this.updateWidthHeight)
	}
	this.bindResizeEvent()
	this.bindWheelEvent()
	}

I can get around it by not providing the width, but then the map size doesn't update when I resize the container.

without yarn dependency

without yarn dependency

Limit max and min of zoom without controlling it with state

Asking for a feature, I want to limit the zoom bounds without controlling the state with onBoundsChanged . Maybe an attribute like maxZoom or minZoom.

Mapping thousands of markers

Is it possible/performant to display thousands of markers? I know with react-map-gl that it is not, I have not done a lot of mapping applications and my understanding is that the use of GEOJson is best for displaying thousands of points.

It was unclear to me what the state of Pigeon is with regards of displaying thousands of points.