how to add polygons and polyline in react native map,react native maps draw polygon,react native map polyline,react native maps polyline animation,react native maps polyline not showing,react native maps polyline decode,react-native-maps polyline.md,react native maps polyline example,react native maps draw polygon,react native maps draw polyline,react native map polyline example,polyline google maps react native,mapview.polyline react native,react native maps polyline,react native maps polyline,react native maps polygon example,react native maps polyline example,react native maps polygon,react native map polyline,react native maps draw route,react-native-maps draw route

How to add polygons and polyline in react native map

How to add polygons and polyline in react native map

In this tutorial, I am going to show you how you can add the polyline and polygon in react native app application.
import the react-native map package with Polyline and polygon:-

import MapView, { Marker, AnimatedRegion,PROVIDER_GOOGLE,Polyline,polygon } from "react-native-maps";

Please check the below complete code

					<MapView 
		            
		            ref={(ref) => { this.map = ref }}
		            initialRegion={{
		              latitude: this.state.maplatitude,
		              longitude: this.state.maplongitude,
		              latitudeDelta: 0.000001,
		              longitudeDelta: this.state.LONGITUDE_DELTA,
		            }}
		            mapPadding={{
		                        top: 20,
		                        right: 20,
		                        bottom: 20,
		                        left: 20
		                    }}

		            loadingEnabled={false}
		            userLocationPriority={'high'}
		            followsUserLocation={true}
		            showsUserLocation={true}
		            showsMyLocationButton={true}
		            showsTraffic={false}
		            zoomEnabled={true}
		            zoomTapEnabled={true}
		            zoomControlEnabled={true}
		            rotateEnabled={true}
		            scrollEnabled={true}
		            toolbarEnabled={true}
		            showsCompass={false}
		            userInterfaceStyle={'dark'}

		          style={{
		            marginBottom: this.state.bottomMargin,
		            ...StyleSheet.absoluteFillObject,
		          }}

		          mapType={Platform.OS == "android" ? "standard" : "standard"}
		          onLayout = { (some) => {

		          }}
		         onMapReady={() => this.setState({ bottomMargin: 1 })}
		            >

		            <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="#d66100" // 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}
        />

         <Polygon
        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="green" // 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'
        ]}
        fillColor="rgba(0, 200, 0, 0.5)" 
        strokeWidth={3}
        
    />

		      </MapView>
Post Created 50

Leave a Reply

Related Posts

Begin typing your search above and press enter to search. Press ESC to cancel.

Back To Top