Map isn't visible on mobile if map source is not an actual json file.

[itiievskyi]

Hi,

I try to create flexible maps that would display a lot of different variants depending on passed data and applied filters. For that purpose, I created a simple Flask app. I inject required data into basic topojson file (50m_simplified.json from your repo) and then return it as json response.

The problem is that map is displayed perfectly on my desktop devices, but still invisible on mobile (Android). This is the code of my React component:

const MapChart = () => {
  const [content, setTooltipContent] = useState("");
  const [showGrid, setShowGrid] = useState(false);

  return (
    <Grid style={{ padding: 20 }}>
      <ComposableMap data-tip="" projectionConfig={{ scale: 145 }}>
        <ZoomableGroup zoom={1}>
          {showGrid && (
            <>
              <Sphere
                fill="white"
                id="sphere"
                stroke="#E4E5E6"
                strokeWidth={0.5}
              />
              <Graticule stroke="#E4E5E6" strokeWidth={0.25} />
            </>
          )}
          <Geographies geography="http://127.0.0.1:5000/population/countries">
            {({ geographies }) => {
              return geographies.map(geo => {
                const { name, current_population } = geo.properties;
                return (
                  <Geography
                    key={geo.rsmKey}
                    geography={geo}
                    onMouseEnter={() => {
                      setTooltipContent(
                        `${name} — ${rounded(current_population)}`
                      );
                    }}
                    fill={
                      current_population
                        ? colorScale(current_population)
                        : "#eee"
                    }
                    onMouseLeave={() => {
                      setTooltipContent("");
                    }}
                    style={{
                      default: {
                        outline: "none",
                        stroke: "#666",
                        strokeWidth: "0.1"
                      },
                      hover: {
                        fill: "#F53",
                        outline: "none",
                        stroke: "#666",
                        strokeWidth: "0.1"
                      },
                      pressed: {
                        fill: "#E42",
                        outline: "none",
                        stroke: "#666",
                        strokeWidth: "0.1"
                      }
                    }}
                  />
                );
              });
            }}
          </Geographies>
        </ZoomableGroup>
      </ComposableMap>
      <ReactTooltip>{content}</ReactTooltip>
      <Switch
        checked={showGrid}
        onChange={() => setShowGrid(!showGrid)}
        name="gridSwitch"
      />
    </Grid>
  );
};

I also tried to get response inside useEffect and set the object to useState:

const MapChart = () => {
  const [content, setTooltipContent] = useState("");
  const [geoUrl, setGeoUrl] = useState("");
  const [showGrid, setShowGrid] = useState(false);

  useEffect(() => {
    (async function loadMap() {
      const response = await axios.get(
        "http://127.0.0.1:5000/population/countries"
      );
      setGeoUrl(response.data);
    })();
  }, [setGeoUrl]);

  return (
    <Grid style={{ padding: 20 }}>
      <ComposableMap data-tip="" projectionConfig={{ scale: 145 }}>
        <ZoomableGroup zoom={1}>
          {showGrid && (
            <>
              <Sphere
                fill="white"
                id="sphere"
                stroke="#E4E5E6"
                strokeWidth={0.5}
              />
              <Graticule stroke="#E4E5E6" strokeWidth={0.25} />
            </>
          )}
          <Geographies geography={geoUrl}>
         ...

The result was the same. It fails on mobile: continents are invisible, but switch element and map grid work just as they should.

But if I save the data somewhere and pass a link, all is working fine.

Do you guys have any ideas about that issue?