Configuring source, source-layer and filter propertites

Hi there,

I can’t tell from the examples / documentation if your component supports a tileSet configured like this using the Mapbox GL JS library directly:

map.addLayer({
        "id": "my-id",
        "type": "fill",
        "source": "myMapboxHostedTileSetSource",
        "source-layer": "victoriaAustralia",
        "layout": {},
        "paint": {
            "fill-color": "#81D8D0",
            "fill-opacity": 0.5
        },
         "filter": ["==", "sub_region", "Gippsland"]

});

I’m specifically asking about setting the source, source-layer and filter properties. If this is possible could you provide an example and/or clarify in the documentation.

Thanks Charlie

[charliedotau]

Hi @alex3165. Thanks. Very much appreciated.

I would say that I’ll test it tonight, but I’m a bit stuck. I don’t quite get how I define my source. E.g the equivalent of this:

map.addSource('myMapboxHostedTileSetSource', {
    type: 'vector',
    url: 'mapbox://charlie.4fsn42ds'
});

The bit that most matters here is the URL. And I don’t see where / how I define that with your library. Could you show me an example. Thanks kindly

[alex3165]

Ok well i would suggest you to have multiple geojson files for every sub-regions of Victoria, I have just added the possibility to update the style property of the map, i would do something like this :

// subregions.json

[
  {
    // Geojson for region 1
  },
  {
    // Geojson for region 2
  }
  //...
]


// all-shapes.js

import Subregions from "./subregions.json";

...

onChangeSubRegion(index) {
  this.state({ subregion: index });
}

render() {
  return (
    <ReactMapboxGl
      style={Subregions[this.state.subregion]}
      accessToken={accessToken}
      center={this.state.center}
      containerStyle={containerStyle}>
      ...
    </ReactMapboxGl>
  );
}

React-mapbox-gl API of the layer functionality is more adapted for creating layers and sources that require user interactions.