Search code examples
reactjsdeck.glreact-map-gl

Specific geojson URL is not working within my react app using deck.gl and nebula.gl


Im trying to display a polygon for every country in the world, this locations are within the countries URL but this doesnt get me the polygon in which i want, is uses it as a string. Though within the example the data cannot be fetched but you can access the site itself. https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-forked-08hvs?file=/app.js

  const countries = 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson';

    console.log(countries)

    const layerGeo = new EditableGeoJsonLayer({
        id: 'geojson-layer',
        data: countries,
        mode: ViewMode,
        onClick: d => console.log(d)
    })


<DeckGL
  initialViewState={viewState}
  controller={true}
  layers={layerGeo}
  getTooltip={getTooltip}
  views={new MapView({repeat: true})}
>
 <StaticMap
  mapStyle='mapbox://styles/mapbox/streets-v11'
  mapboxApiAccessToken={MAPBOX_TOKEN}
 />
</DeckGL>

How can I get this data from the URL without copying the file and storing it myself.


Solution

  • Instead of trying to get the URL to work, instead I downloaded the file and imported into the app itself, therefore removing this issue.