Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Problem on Bubbles map with latitude and longitude coordinates

See original GitHub issue

Hey folks, i am trying to plot a few countries on a Bubble map, i am using latitude and longitude to mark each country, but they are all plotted wrong, for instance i am using the US with 38 and -97, but the plotted bubble is not in the right place.

Follow my render method used on my page:

render() {
  const map = {
    center: [0, 20],
    zoom: 1,
  };

  const countries = [{
    name: 'United States',
    latitude_and_longitude: [38, -97],
    total_workers: 10,
  }];

  return (
    <ComposableMap
      projectionConfig={{ scale: 205 }}
      style={{
        width: "100%",
        height: "1024px",
      }}
      >
      <ZoomableGroup center={map.center} zoom={map.zoom}>
        <Geographies geography="/world.json">
          {(geographies, projection) =>
            geographies.map((geography, i) =>
              geography.id !== "ATA" && (
                <Geography
                  key={i}
                  geography={geography}
                  projection={projection}
                />
          ))}
        </Geographies>
        <Markers>
          {
            countries.map((country) => {
              return (
                country.latitude_and_longitude &&
                <Marker
                  key={country.id}
                  marker={{
                    name: country.name,
                    coordinates: country.latitude_and_longitude,
                    population: country.total_workers
                  }}>
                  <circle
                    cx={0}
                    cy={0}
                    r={country.total_workers}
                    fill="rgba(100, 189, 99, 0.8)"
                    stroke="#607D8B"
                    strokeWidth="2"
                    style={{cursor: 'pointer !important'}}
                  />
                </Marker>
              )
            })
          }
        </Markers>
      </ZoomableGroup>
    </ComposableMap>
  );
}