Created
December 17, 2020 22:06
-
-
Save ddarren/2f2989bf9035308d88cd15d81f8a6d9d to your computer and use it in GitHub Desktop.
Patch that preserves stroke width, stroke color, fill color, and marker color properties in geojson for react-native-maps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| diff --git a/node_modules/react-native-maps/lib/components/Geojson.js b/node_modules/react-native-maps/lib/components/Geojson.js | |
| index e72b56b..ddb69e2 100644 | |
| --- a/node_modules/react-native-maps/lib/components/Geojson.js | |
| +++ b/node_modules/react-native-maps/lib/components/Geojson.js | |
| @@ -93,17 +93,69 @@ const makeCoordinates = feature => { | |
| } | |
| }; | |
| +const doesOverlayContainProperty = (overlay, property) => { | |
| + // Geojson may have 0 for the opacity when intention is to not specify the | |
| + // opacity. Therefore, we evaluate the truthiness of the propery where 0 | |
| + // would return false. | |
| + return ( | |
| + overlay.feature && | |
| + overlay.feature.properties && | |
| + overlay.feature.properties[property] | |
| + ); | |
| +}; | |
| + | |
| +const getRgbaFromHex = (hex, alpha = 1) => { | |
| + const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16)); | |
| + return `rgba(${r},${g},${b},${alpha})`; | |
| +}; | |
| + | |
| +const getColor = (props, overlay, colorType, overrideColorProp) => { | |
| + if (props.hasOwnProperty(overrideColorProp)) { | |
| + return props[overrideColorProp]; | |
| + } | |
| + if (doesOverlayContainProperty(overlay, colorType)) { | |
| + let color = overlay.feature.properties[colorType]; | |
| + const opacityProperty = colorType + "-opacity"; | |
| + if ( | |
| + doesOverlayContainProperty(overlay, opacityProperty) && | |
| + color[0] === "#" | |
| + ) { | |
| + color = getRgbaFromHex( | |
| + color, | |
| + overlay.feature.properties[opacityProperty], | |
| + ); | |
| + } | |
| + return color; | |
| + } | |
| + return null; | |
| +}; | |
| + | |
| +const getStrokeWidth = (props, overlay) => { | |
| + if (props.hasOwnProperty("strokeWidth")) { | |
| + return props["strokeWidth"]; | |
| + } | |
| + if (doesOverlayContainProperty(overlay, "stroke-width")) { | |
| + return overlay.feature.properties["stroke-width"]; | |
| + } | |
| + return null; | |
| +} | |
| + | |
| const Geojson = props => { | |
| const overlays = makeOverlays(props.geojson.features); | |
| + | |
| return ( | |
| <React.Fragment> | |
| {overlays.map((overlay, index) => { | |
| + const fillColor = getColor(props, overlay, "fill", "fillColor"); | |
| + const strokeColor = getColor(props, overlay, "stroke", "strokeColor"); | |
| + const markerColor = getColor(props, overlay, "marker-color", "color"); | |
| + const strokeWidth = getStrokeWidth(props, overlay); | |
| if (overlay.type === 'point') { | |
| return ( | |
| <MapView.Marker | |
| key={index} | |
| coordinate={overlay.coordinates} | |
| - pinColor={props.color} | |
| + pinColor={markerColor} | |
| /> | |
| ); | |
| } | |
| @@ -113,9 +165,9 @@ const Geojson = props => { | |
| key={index} | |
| coordinates={overlay.coordinates} | |
| holes={overlay.holes} | |
| - strokeColor={props.strokeColor} | |
| - fillColor={props.fillColor} | |
| - strokeWidth={props.strokeWidth} | |
| + strokeColor={strokeColor} | |
| + fillColor={fillColor} | |
| + strokeWidth={strokeWidth} | |
| /> | |
| ); | |
| } | |
| @@ -124,8 +176,8 @@ const Geojson = props => { | |
| <MapView.Polyline | |
| key={index} | |
| coordinates={overlay.coordinates} | |
| - strokeColor={props.strokeColor} | |
| - strokeWidth={props.strokeWidth} | |
| + strokeColor={strokeColor} | |
| + strokeWidth={strokeWidth} | |
| /> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment