Tooltip integration with react-tooltip

Hi!

I finally decided to switch to your awesome library but found a little problem: I use some state to toggle a class active to some countries which applies the same color as the hover fill but when you hover over a sidebar of continents, each country belonging to that continent should highlight, my state is working correctly, but the map does not re-render, any ideas?

Thanks in advance!

[zimrick]

RE: 1 Yes, panning is enabled by default. You can easily disable that on the <ZoomableGroup /> component using the disablePanning prop. https://github.com/zcreativelabs/react-simple-maps#ZoomableGroup-component

RE: 2 By default any projection will be displayed with a split Russia. This is a common problem. You can use the projectionConfig prop on the <ComposableMap /> component to change the rotation of the projection ([-10,0,0] should do the trick). https://github.com/zcreativelabs/react-simple-maps#ComposableMap-component

RE: 3 I will have a look at react-tooltip. Will post another example once I figure this out.

Hehe, I can see how this can get frustrating after a while 😉

[zimrick]

If you are interested in custom html content for each tooltip, wsdm-tooltip does a pretty good job, and it’s lean. Here’s how it would work with react-simple-maps. Note that the html inside the tooltip is regular html, rather than jsx.

import React, { Component } from "react"
import tooltip from "wsdm-tooltip"

import {
  ComposableMap,
  ZoomableGroup,
  Geographies,
  Geography,
} from "react-simple-maps"

class Map extends Component {
  constructor() {
    super()
    this.handleMouseMove = this.handleMouseMove.bind(this)
    this.handleMouseLeave = this.handleMouseLeave.bind(this)
  }
  componentDidMount() {
    this.tip = tooltip()
    this.tip.create()
  }
  handleMouseMove(geography, evt) {
    this.tip.show(`
      <div class="tooltip-inner">
        ${geography.id}
      </div>
    `)
    this.tip.position({ pageX: evt.pageX, pageY: evt.pageY })
  }
  handleMouseLeave() {
    this.tip.hide()
  }
  render() {
    return (
      <div>
        <ComposableMap width={980} height={500}>
          <ZoomableGroup>
            <Geographies geographyUrl="/static/world-50m.json">
              {(geographies, projection) =>
                geographies.map((geography, i) =>
                  <Geography
                    key={i}
                    geography={geography}
                    projection={projection}
                    onMouseMove={this.handleMouseMove}
                    onMouseLeave={this.handleMouseLeave}
                    style={{
                      default: { fill: "#EEE", outline: "none" },
                      hover: { fill: "#DDD", outline: "none" },
                      pressed: { fill: "#AAA", outline: "none" },
                    }}
                  />
              )}
            </Geographies>
            <Graticule />
          </ZoomableGroup>
        </ComposableMap>
      </div>
    )
  }
}

For the css, you can work with something like this:

.wsdm-tooltip {
  display: none;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 3px;
  pointer-events: none;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
.wsdm-tooltip:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 100%;
  left: 50%;
  margin-left: -0.5rem;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.5rem solid rgba(255, 255, 255, 0.95);
}

Hope this is useful.