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>
)
}
}
