react-map-gl without API key using osm tiles

Question

Is it possible?

This tells me it is, but dont know why it defines and API key.

but I cannot get it to work with react-map-gl StaticMap class. The property I can see from that class is just mapStyle which would take a standard Mapbox vector tiles path/name. Does it take an object? My code does not give me an error or show the tiles I request.

    <DeckGL>
        <StaticMap
            mapStyle= {{
                "version": 7,
                "sources": {
                  "simple-tiles": {
                    "type": "raster",
                    "tiles":["http://a.tile.openstreetmap.org/{z}/{x}/{y}.png", "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png"],
                    "tileSize": 256
                  },
                  "power": {
                  "type": "vector",
                  "tiles": ["http://gpstrails.info/ex/leaflet/power/osm/{z}/{x}/{y}.json"]
                }
                },
                "layers": [{
                  "id": "simple-tiles",
                  "type": "raster",
                  "source": "simple-tiles",
                  "minzoom": 0,
                  "maxzoom": 22
                },
                {
                "id": "road",
                "source": "power",
                "source-layer": "power",
                "type": "line",
                "layout": {
                  "line-join": "round",
                  "line-cap": "round",
                },
                "paint": {
                  "line-color": "red",
                  "line-width": 4,
                }
              }]
              }}/>
    </DeckGL>

Thank you

Edit: from the correct answer, and to keep things in SO, this is the json living on the S3:

{
  "version": 8,
  "name": "OSM",
  "metadata": {

  },
  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "https://free.tilehosting.com/data/v3.json?key={key}"
    },
    "osm": {
      "type": "raster",
      "tiles": [
        "http://tile.openstreetmap.org/{z}/{x}/{y}.png"
      ],
      "minzoom": 0,
      "maxzoom": 14
    },
    "91y5159eg": {
      "type": "vector",
      "url": "http://localhost:3000/tilejson.json"
    }
  },
  "sprite": "https://openmaptiles.github.io/klokantech-basic-gl-style/sprite",
  "glyphs": "https://free.tilehosting.com/fonts/{fontstack}/{range}.pbf?key=undefined",
  "layers": [
    {
      "id": "osm",
      "type": "raster",
      "source": "osm"
    }
  ],
  "id": "klokantech-basic"
}

Answer 1

The trick is in the style that's used. A style is a JSON object, whose specification you can read more about here. You can generate custom styles using tools such as Maputnik, a visual editor that generates style-compliant files for use in MapboxGL maps. Once you have an appropriate style generated, you can use it in React Map GL.

Here's what the basic component would look like, as altered from the example in the Github repo:

<ReactMapGL
        mapStyle="https://s3.amazonaws.com/cdn.brianbancroft.io/assets/osmstyle.json"
        {...this.state.viewport}
        onViewportChange={viewport => this.setState({ viewport })}
      />

Note that this is just an abstract example. The tile loads from OSM here are a bit too slow to be useful in production. But it should illustrate how to make maps without relying on the services side of Mapbox.