The space at around of map issue
sunshinelancer828 opened this issue · comments
Hi, there. how are you today.
import React, {useCallback, useEffect, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {
ZoomableMap,
Geographies,
Geography,
Marker,
Markers,
} from 'react-native-simple-maps';
import {Path} from 'react-native-svg';
const geoFile = require('./json/world-50m.json');
const MAP_WIDTH = 500;
const MAP_HEIGHT = 280;
const PortMapCard = ({portsData, selectedPort, setSelectedPort}) => {
const [markers, setMarkers] = useState([]);
const projectionConfig = {
yOffset: 50,
precision: 0.01,
scale: 100,
rotation: [0, 0, 0],
};
const handleClick = useCallback(marker => {
setSelectedPort({id: marker.portID, name: marker.portName});
}, []);
const renderGeographies = (geographies, projection) => {
const style = {
fill: '#95d5f2',
stroke: '#fff',
strokeWidth: 0.3,
fillRule: 'evenodd',
};
return geographies.map((geography, index) => (
<Geography
key={index}
geography={geography}
projection={projection}
style={{
default: style,
pressed: style,
}}
/>
));
};
const renderMarker = (marker, i) => {
return (
<Marker
key={i}
marker={marker}
style={{
default: {
opacity: selectedPort?.id === marker.portID ? 1 : 0.6,
},
pressed: {
opacity: 0.8,
},
}}
onLongPress={() => handleClick(marker)}>
);
};
useEffect(() => {
const markersData = portsData.reduce((markerData, port) => {
return [
...markerData,
{
coordinates: [port.lon, port.lat],
portName: port.name,
portID: port.id,
},
];
}, []);
setMarkers(markersData);
}, [portsData]);
return (
<ZoomableMap
initialZoom={1}
width={MAP_WIDTH}
height={MAP_HEIGHT}
projectionConfig={projectionConfig}
canvasStyle={{backgroundColor: 'transparent'}}
viewStyle={{backgroundColor: 'transparent'}}>
{(geographies, projection) =>
renderGeographies(geographies, projection)
}
{markers.map(renderMarker)}
);
};
const styles = StyleSheet.create({
container: {
width: '100%',
height: 300,
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
overflow: 'hidden',
zIndex: -100,
backgroundColor: '#bbefff2e',
},
});
export default PortMapCard;
I developed simple map by using this modul.
all are great.
but I am not sure, why there is some space around of map.
when I push this map, it can move any where.
but I don't want it. it should be not moved.