Change the center of the map

Hi,

I am trying to shift the center of the map a little bit up to make some space for overlay UI, so I used yOffset for that but I get pretty weird results, i.e misplaced markers etc…

I pretty much follow the following example: https://www.react-simple-maps.io/with-react-motion

This is my projection configuration:

projectionConfig = {
  yOffset: -150 / this.state.zoom
}

[pronebird]

I solved the problem by adjusting the center.

const offset = [0, 150];
const zoomCenter= projection.invert([
  projection(center)[0] + offset[0] / zoom,
  projection(center)[1] + offset[1] / zoom
]);

[zimrick]

Yeah, center is a geo coordinate that sets the focus of the map. It would achieve a similar result, i.e. moving your map up or down, depending on the coordinate that the map focuses on by default.

I am having trouble recreating the problem with yOffset and the misplaced markers. I tried this and it works. Am I missing something?

class OffsetMap extends Component {
  render() {
    return (
      <div>
        <ComposableMap
          projectionConfig={{
            yOffset: 50,
          }}
          style={{
            border: "1px solid #DDD",
          }}
          >
          <ZoomableGroup zoom={1}>
            <Graticule />
            <Geographies geographyUrl="/static/world-50m.json">
              {(geographies, projection) =>
                geographies.map((geography, i) =>
                  <Geography
                    key={i}
                    geography={geography}
                    projection={projection}
                    style={{ default: { fill: "#DDD" } }}
                  />
              )}
            </Geographies>
            <Markers>
              <Marker marker={{ coordinates: [8.5417,47.3769] }}>
                <circle cx={0} cy={0} r={5} />
              </Marker>
              <Marker marker={{ coordinates: [103.8198,1.3521] }}>
                <circle cx={0} cy={0} r={5} />
              </Marker>
              <Marker marker={{ coordinates: [151.2093,-33.8688] }}>
                <circle cx={0} cy={0} r={5} />
              </Marker>
              <Marker marker={{ coordinates: [-122.4194,37.7749] }}>
                <circle cx={0} cy={0} r={5} />
              </Marker>
              <Marker marker={{ coordinates: [-58.3816,-34.6037] }}>
                <circle cx={0} cy={0} r={5} />
              </Marker>
            </Markers>
          </ZoomableGroup>
        </ComposableMap>
      </div>
    )
  }
}

It gives me a map that looks like this:

Note that if you added your own markers and they are misplaced, it may be that the order of longitude and latitude is reversed. I know this is an issue when working with coordinates from google and d3-geo. Google uses [lat,long] and d3-geo uses [long,lat]. React-simple-maps uses the d3-geo order. If this is the case, you would be getting very strange results, but if you are using the motion example with the markers that are included there, this shouldn’t be a problem…