I am trying to create an application that makes use of and interactive globe map. The map should be able to zoom to specific countries and rotate according, styled as required etc. Terrain and road features are unneccessary. I have made a suitable implementation of this for browsers here using d3 and geoJson. This is the perfect implementation for me. I've tried react-native-maps but it does quite give the customizability I require. I have also used d3 and geoJson on react native like so
import React, { useState } from 'react';
import { View, Dimensions } from 'react-native';
import world from "./world"
import Svg, { G, Path } from "react-native-svg";
import { geoOrthographic, geoPath } from "d3";
export default function App() {
const [ rotation, setRotation ] = useState([0,0,0])
const [ previousTouch, setPreviousTouch ] = useState([0,0])
var projection = geoOrthographic().fitSize([Dimensions.get("screen").width,Dimensions.get("screen").width], world).rotate(rotation)
var path = geoPath().projection(projection)
const onDrag = (event) => {
setRotation([-((Dimensions.get('screen').width/2) - event.nativeEvent.pageX)*.1+rotation[0], ((Dimensions.get('screen').width/2) - event.nativeEvent.pageY)*.1+rotation[1], rotation[2]])
setRotation([(event.nativeEvent.pageX-previousTouch[0])*.1+rotation[0], -(event.nativeEvent.pageY-previousTouch[1])*.1+rotation[1], rotation[2]])
setPreviousTouch([event.nativeEvent.pageX,event.nativeEvent.pageY])
}
return (
<View style={styles.container}>
<Svg height="100%" width='100%' onTouchEnd={onDrag} onTouchStart={(event) => {
setPreviousTouch([event.nativeEvent.pageX,event.nativeEvent.pageY])
}}>
<G>
{world.features.map((feature, index) => {
return (<Path d={path(feature)} key={index} stroke="black" fill="grey"></Path>)
})}
</G>
</Svg>
</View>
);
}
But its performance during rotation isnt as good as i'd like it. Is there any possible solution for this?