Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add gradient/multi-color polyline support for iOS (MapKit) #1911

Merged

Conversation

IjzerenHein
Copy link
Contributor

Hi guys, it's Christmas so it's time for presents 🎁
This PR adds support for gradient/multi-color Polylines for iOS/MapKit.

It adds a prop called strokeColors to <Polyline> which should be an array of colors, and which should have the same length as the coordinates prop. If two colors are different, it will then draw a gradient between those two coordinates. In order to create "smoother" gradients, you can also create "holes" in the color-array, be specifying #00000000. This will then draw a path using a linear gradient between the coordinates for which a color was defined.

MapExplorer
Arion

Example:

<MapView>
	<MapView.Polyline
		coordinates={[
			{ latitude: 37.8025259, longitude: -122.4351431 },
			{ latitude: 37.7896386, longitude: -122.421646 },
			{ latitude: 37.7665248, longitude: -122.4161628 },
			{ latitude: 37.7734153, longitude: -122.4577787 },
			{ latitude: 37.7948605, longitude: -122.4596065 },
			{ latitude: 37.8025259, longitude: -122.4351431 }
		])
		strokeColor="#000" // fallback for when `strokeColors` is not supported by the map-provider
		strokeColors={[
			'#7F0000',
			'#00000000', // no color, creates a "long" gradient between the previous and next coordinate
			'#B24112',
			'#E5845C',
			'#238C23',
			'#7F0000'
		]}
		strokeWidth={6}
	/>
</MapView>

I've updated the docs and the MapExplorer as well.

Hopefully I can Android support for it too soon.

cheers,
Hein

This was referenced Dec 21, 2017
@alvelig
Copy link
Contributor

alvelig commented Dec 21, 2017

LGTM. As far as I can see there is not any drawback in replacing MKPolygonRenderer with MKOverlayPathRenderer, is it?

Great present BTW :) With all the bells and whistles!

@IjzerenHein
Copy link
Contributor Author

That’s right. And to be on the safe side, I enabled the new polyline renderer only when ‘strokeLines’ is used for now.

- (void) addPoint:(CGPoint)point color:(UIColor*)color;
@property UIColor *color;
@property CGMutablePathRef path;
@property UIColor *color2;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we find a better name for color2 ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. You're right, it would have been better to name these startColor and endColor, because this is exactly what they are. I'll make the changes.

@IjzerenHein
Copy link
Contributor Author

Please wait a bit with merging this, I'm seeing an occasional rendering issue with certain zoom scales

@IjzerenHein
Copy link
Contributor Author

Alright, rendering issues seem resolved now 👍

Copy link
Collaborator

@rborn rborn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
@alvelig @christopherdro 🐽

if all ok should we push to npm ? Thanks

@alvelig
Copy link
Contributor

alvelig commented Dec 22, 2017

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants