react-native-web-maps
react-native-web-maps copied to clipboard
Polyline not working in web but works on android and ios.
Does anyone know if MapView.Polyline
works ?? I have tired to google around quite a bit but didn't find any useful resource that worked.
Here is my code
import React, { useEffect, useState } from 'react';
import { FontAwesome } from '@expo/vector-icons';
import DashboardLayout from '../../../layouts/DashboardLayout';
//@ts-ignore
import MapView, { PROVIDER_GOOGLE } from 'react-native-web-maps';
import { Button, HStack, VStack, Text, Icon, Input } from 'native-base';
const API_KEY = "YOUR_KEY_HERE";
export default function Map() {
const [mapLoaded, setMapLoaded] = useState(false);
useEffect(() => {
// Check if map script is already present in DOM
if (!document.body.dataset.mapLoaded) {
const mapScript = document.createElement('script');
mapScript.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}`;
mapScript.onload = () => {
// set dataset property on body to indicate map script has been loaded.
document.body.dataset.mapLoaded = 'true';
setMapLoaded(true);
};
document.head.appendChild(mapScript);
}
}, []);
return (
<>
{mapLoaded ? (
<DashboardLayout title="Add Address">
<MapView
provider={PROVIDER_GOOGLE}
region={{
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
latitude: 33.81609,
longitude: -117.92252,
}}
>
<MapView.Marker
draggable
coordinate={{
latitude: 33.81609,
longitude: -117.92252,
}}
/>
<MapView.Polyline
coordinates={[
{
latitude: 33.81609,
longitude: -117.92252,
},
{
latitude: 33.81579,
longitude: -117.92275,
},
{
latitude: 33.83441,
longitude: -117.93617,
},
{
latitude: 33.83513,
longitude: -117.93932,
},
{
latitude: 33.83544,
longitude: -117.94033,
},
{
latitude: 33.83583,
longitude: -117.94126,
},
{
latitude: 33.84046,
longitude: -117.94985,
},
]}
strokeWidth={4}
/>
</MapView>
<VStack
pt={4}
px={{ base: 4 }}
_light={{ bg: 'white' }}
_dark={{ bg: 'coolGray.800' }}
>
<HStack
py={3}
px={{ base: 4 }}
bg="primary.100"
alignItems="center"
>
<Icon
as={FontAwesome}
name="map-marker"
_light={{ color: 'primary.900' }}
_dark={{ color: 'primary.700' }}
/>
<Text
fontSize="md"
_light={{ color: 'coolGray.400' }}
_dark={{ color: 'coolGray.50' }}
>
Thornridge Cir. Syracuse, Connecticut
</Text>
</HStack>
<Text
color="black"
fontSize="sm"
mt={{ base: 4 }}
fontWeight="medium"
>
Building Name / House No.
</Text>
<Input
py={3}
fontSize="md"
mt={{ base: 4 }}
placeholder="2118"
fontWeight="semibold"
borderColor="coolGray.400"
/>
<Text
fontSize="sm"
color="black"
mt={{ base: 4 }}
fontWeight="medium"
>
Address Label
</Text>
<HStack space={{ base: 1 }} justifyContent="space-between" mt={3}>
<Button
width="30%"
height={12}
variant="outline"
borderColor="primary.900"
_text={{ color: 'primary.900' }}
onPress={() => console.log('hello')}
>
Home
</Button>
<Button
width="30%"
variant="outline"
borderColor="coolGray.400"
_text={{ color: 'coolGray.400' }}
onPress={() => console.log('hello')}
>
Office
</Button>
<Button
width="30%"
variant="outline"
borderColor="coolGray.400"
_text={{ color: 'coolGray.400' }}
onPress={() => console.log('hello')}
>
Other
</Button>
</HStack>
<Button
py="3"
mt={{ base: 5 }}
bg="primary.900"
variant="outline"
onPress={() => console.log('hello')}
_text={{ color: 'white', fontSize: 'sm' }}
>
SAVE ADDRESS
</Button>
</VStack>
</DashboardLayout>
) : (
'Loading ...'
)}
</>
);
}
MapView.Marker
is working fine for me but no luck with Polyline
. I am not sure if I am doing something wrong or it's just not supported, can someone please help me with this.
If it works, can someone guide me to a working example or something ??
@Minishlink @kasajei @VinceBT @coorde
Hey guys, can someone help me with this ?