fix(v11,ios): implement filter and sourceId for v11 layers

[mfazekas]

In V11 sourceLayer source and filter properties moved from base Layer to applicable Layer subclasses. So setOptions no longer applies those settings:

maps/ios/RNMBX/RNMBXLayer.swift

Lines 294 to 314 in f5bdc04

	#if !RNMBX_11
	if let sourceLayerID = sourceLayerID {
	layer.sourceLayer = sourceLayerID
	}
	if let sourceID = sourceID {
	if !(existingLayer && sourceID == DEFAULT_SOURCE_ID) && hasSource() {
	layer.source = sourceID
	}
	}
	if let filter = filter, filter.count > 0 {
	do {
	let data = try JSONSerialization.data(withJSONObject: filter, options: .prettyPrinted)
	let decodedExpression = try JSONDecoder().decode(Expression.self, from: data)
	layer.filter = decodedExpression
	} catch {
	Logger.log(level: .error, message: "parsing filters failed for layer \(optional: id): \(error.localizedDescription)")
	}
	}
	#endif

See https://github.com/mapbox/mapbox-maps-ios/blob/main/CHANGELOG.md

Remove source, sourceLayer, filter properties from the Layer protocol requirement.

Used the following component to test:

import React from 'react';
import {
  MapView,
  ShapeSource,
  CircleLayer,
  Camera,
  Models,
  ModelLayer,
} from '@rnmapbox/maps';

const styles = {
  mapView: { flex: 1 },
  circleLayer: {
    circleRadiusTransition: { duration: 5000, delay: 0 },
    circleColor: '#ff0000',
  },
};

const features = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      id: 'a-feature',
      properties: {
        icon: 'example',
        text: 'example-icon-and-label',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00597, 40.71427],
      },
    },
    {
      type: 'Feature',
      id: 'b-feature',
      properties: {
        text: 'just-label',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.001097, 40.71527],
      },
    },
    {
      type: 'Feature',
      id: 'c-feature',
      properties: {
        shown: 'visible',
        icon: 'example',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00697, 40.72427],
      },
    },
  ],
};

const modelLayerStyle = {
  modelId: 'car',
  modelScale: [50, 50, 50],
};

const models = {
  car: require('../../assets/sportcar.glb'),
};

class SimpleModelLayer extends React.Component {
  state = {
    radius: 20,
  };

  render() {
    const circleLayerStyle = {
      ...styles.circleLayer,
      ...{ circleRadius: this.state.radius },
    };

    return (
      <>
        <MapView style={styles.mapView}>
          <Camera
            defaultSettings={{
              centerCoordinate: [-74.00597, 40.71427],
              zoomLevel: 14,
            }}
          />
          <Models models={models} />
          <ShapeSource id={'shape-source-id-0'} shape={features}>
            <CircleLayer
              id={'circle-layer'}
              filter={['==', ['get', 'shown'], 'visible']}
              style={circleLayerStyle}
              slot={'bottom'}
            />
            <ModelLayer
              id="model-layer-id"
              style={modelLayerStyle}
              filter={['==', ['get', 'shown'], 'visible']}
            />
          </ShapeSource>
        </MapView>
      </>
    );
  }
}

export default SimpleModelLayer;