search

nitaliano / react-native-mapbox-gl

A Mapbox GL react native module for creating custom maps
Other
2.16k stars 697 forks source link

Line Layer not loading style from custom style #1570

Closed yaduc closed 5 years ago

yaduc commented 5 years ago

I have a custom vector tile style defined like the following

{ "id": "line", "type": "line", "source": "lineSource", "source-layer": "linegeojson", "layout": { "line-cap": "round", "line-join": "round", "visibility": "visible" }, "paint": { "line-color": ["get", "color"], "line-width": { "base": 1.2, "stops": [ [ 8.5, 1 ], [ 9, 4 ], [ 20, 9 ] ] }, "line-opacity": 1 } },

when I load a Line Layer, the styles are not loaded. The line is rendered in black color, the line width or any other properties are not loaded.

/MapboxGL.VectorSource> can someone please help me out. @nitaliano
kristfal commented 5 years ago

Your style uses expressions, which this repo doesn't support yet.

You'll need to use the "old" way of filters and data driven values for this lib. We already got an issue open for supporting expressions, and hopefully its not that far away. You can monitor the progress with https://github.com/nitaliano/react-native-mapbox-gl/pull/1377. Closing.

yaduc commented 5 years ago

Your style uses expressions, which this repo doesn't support yet.

You'll need to use the "old" way of filters and data driven values for this lib. We already got an issue open for supporting expressions, and hopefully its not that far away. You can monitor the progress with #1377. Closing.

Hi, Thank you. I have found a workaround for it. const layer = this.props.layers.filter(item => item.id == "line"); /*this.props.layers is the Style JSON URL .*/ let lineLayer = null; let styles = {}; if (layer.length > 0) { lineLayer = layer[0]; } if (lineLayer) { styles = MapboxGL.StyleSheet.create({ line: { lineWidth: MapboxGL.StyleSheet.source( lineLayer.paint["line-width"].stops ), lineColor: MapboxGL.StyleSheet.identity( lineLayer.paint["line-color"][1] ), lineCap: lineasLayer.layout["line-cap"], lineJoin: lineasLayer.layout["line-join"] } }); }