Markers with ZoomableGlobe

[maalej]

Hello & Thank you for this library. When I display markers on ZoomableGlobe, they don't disappear while rotating the globe.

[zimrick]

Hi @maalej , Are you working off of the globe example? If you build a globe from scratch yourself using <ZoomableGlobe />, make sure to specify the hidden styles for the <Marker /> components.

...
<Marker
    key={...}
    marker={...}
    style={{
        hidden: { display: "none" },
    }}>
    <circle cx={0} cy={0} r={10} />
</Marker>
...

Let me know if this solves your problem.

[maalej]

@zimrick Thank you very much for your response. Your solution does resolve my problem. Thank you. However is it possible to project the markers with the orthographic projection to avoid this strange display:

[zimrick]

Is this the behaviour you are looking for?

If you want that you will have to render out the circles using d3-geo and a second <Geographies /> component.

import { geoCircle } from "d3-geo"

const circles = [
  geoCircle().center([3.4,6.5]).radius(10)(),
  geoCircle().center([100.5,13.7]).radius(5)(),
  geoCircle().center([-99.1,19.4]).radius(3)(),
]

// ...

render() {
  return (
    <ComposableMap projection="orthographic">
      <ZoomableGlobe sensitivity={0.5}>
        <Graticule globe style={{ strokeWidth: 0.5, strokeDasharray: [0,0] }} />
        <Geographies geography="/static/world-110m.json" disableOptimization>
          {(geos, proj) =>
            geos.map((geo, i) =>
              <Geography
                key={geo.properties.ISO_A3 + i}
                geography={geo}
                projection={proj}
                style={{
                  default: { fill: "#DDD" },
                  hover: { fill: "#DDD" },
                  pressed: { fill: "#DDD" },
                }}
              />
          )}
        </Geographies>
        <Geographies geography={circles} disableOptimization>
          {(geos, proj) =>
            geos.map((geo, i) =>
              <Geography
                key={i}
                geography={geo}
                projection={proj}
                style={{
                  default: { fill: "#FF5722", stroke: "#FFF" },
                  hover: { fill: "#FF5722", stroke: "#FFF" },
                }}
              />
          )}
        </Geographies>
      </ZoomableGlobe>
    </ComposableMap>
  )
}

Hope this helps.

[3h50]

@zimrick Where did you get the json for that world map? Exactly what I am looking for, the one in the example has a lot of polygon data I'd like to dump for speed.

EDIT: Got it, just deleted all of the countries. A custom map maker would be awesome for his but would need to know what correlates first.

[zimrick]

Note (in case it's relevant) you can use this tool: https://mapshaper.org/

You can simplify any map quite easily there and then export it back as topojson for use with react-simple-maps. I describe the process in more detail here: https://hackernoon.com/how-to-convert-and-prepare-topojson-files-for-interactive-mapping-with-d3-499cf0ced5f

[blaisedev]

Is this the behaviour you are looking for?

If you want that you will have to render out the circles using d3-geo and a second <Geographies /> component.

import { geoCircle } from "d3-geo"

const circles = [
  geoCircle().center([3.4,6.5]).radius(10)(),
  geoCircle().center([100.5,13.7]).radius(5)(),
  geoCircle().center([-99.1,19.4]).radius(3)(),
]

// ...

render() {
  return (
    <ComposableMap projection="orthographic">
      <ZoomableGlobe sensitivity={0.5}>
        <Graticule globe style={{ strokeWidth: 0.5, strokeDasharray: [0,0] }} />
        <Geographies geography="/static/world-110m.json" disableOptimization>
          {(geos, proj) =>
            geos.map((geo, i) =>
              <Geography
                key={geo.properties.ISO_A3 + i}
                geography={geo}
                projection={proj}
                style={{
                  default: { fill: "#DDD" },
                  hover: { fill: "#DDD" },
                  pressed: { fill: "#DDD" },
                }}
              />
          )}
        </Geographies>
        <Geographies geography={circles} disableOptimization>
          {(geos, proj) =>
            geos.map((geo, i) =>
              <Geography
                key={i}
                geography={geo}
                projection={proj}
                style={{
                  default: { fill: "#FF5722", stroke: "#FFF" },
                  hover: { fill: "#FF5722", stroke: "#FFF" },
                }}
              />
          )}
        </Geographies>
      </ZoomableGlobe>
    </ComposableMap>
  )
}

Hope this helps.

Hi, is this functionality possible in the new version with ZoomableGroup?

[zimrick]

Not at the moment. The goal is to implement a proper globe with pinch zoom, but that will require a bit more time.

[cabello]

Hello 👋

Is zoomable globe component still available? I can't find it while searching the repository. I also can't find the commit that removed it, hence I am asking about it.

Thank you 🙏

[deepsea]

Hello 👋

Is zoomable globe component still available? I can't find it while searching the repository. I also can't find the commit that removed it, hence I am asking about it.

Thank you 🙏

I reverted to version "react-simple-maps": "0.11.1" and it is available there

[nunof-castro]

Hey 🙌

There's any solution to hide the markers on version 3.0.0?