Preventing blue path rectangle in react-simple-maps

Viewed 967

So I'm using react-simple-maps to make a world map, but the default behavior when I click the map is a blue rectangle around that country. I tried to use preventDefault() on an onClick, but that didn't work to get rid of it. Does anyone have any ideas on how to fix this?

Here's my code. Thanks for the help!

import React, { Component } from "react"
import {
  ComposableMap,
  ZoomableGlobe,
  Geographies,
  Geography
} from "react-simple-maps"
import { Motion, spring } from "react-motion"

const mapStyles = {
  width: "90%",
  height: "auto"
}

class Map extends Component { 
  constructor(props) {
    super(props)

    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(geography, evt) {
    evt.preventDefault()
}
  render() {
    return (
        <div>
    <Motion
      defaultStyle={{
        x: this.props.center[0],
        y: this.props.center[1]
      }}
      style={{
        x: spring(this.props.center[0]),
        y: spring(this.props.center[1])
      }}
    >
      {({ x, y }) => (
        <ComposableMap
          width={500}
          height={500}
          projection="orthographic"
          projectionConfig={{ scale: 120 }}
          style={mapStyles}
        >
          <ZoomableGlobe center={[x, y]}>
            <circle
              cx={250}
              cy={250}
              r={120}
              fill="transparent"
              stroke="#CFD8DC"
            />

            <Geographies
              disableOptimization
              geography="https://gist.githubusercontent.com/GordyD/49654901b07cb764c34f/raw/27eff6687f677c984a11f25977adaa4b9332a2a9/countries-and-states.json"
            >
              {(geos, proj) =>
                geos.map((geo, i) => (
                  <Geography
                    key={geo.id + i}
                    geography={geo}
                    projection={proj}
                    style={{
                      default: { fill: "#CFD8DC" }
                    }}
                    onClick={this.handleClick}
                  />
                ))
              }
            </Geographies>
          </ZoomableGlobe>
        </ComposableMap>
      )}
    </Motion>
  </div>
      )
  }
}

export default Map

2 Answers

Setting the following style on a Geography component removes the bounding rectangle on all interactions:

style={{
    default: {
        outline: 'none'
    },
    hover: {
        outline: 'none'
    },
    pressed: {
        outline: 'none'
    }
}}

Try adding a CSS rule to the elements that you are clicking:

outline: none;

Note that this outline is not always a bad thing because it helps with keyboard navigation

Related