Load markers on map by bounds instead of all
This commit is contained in:
parent
f3213ae588
commit
37ad9d5a2f
1 changed files with 41 additions and 24 deletions
|
@ -1,4 +1,4 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
import { Image, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, View, Dimensions } from 'react-native';
|
import { Image, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, View, Dimensions } from 'react-native';
|
||||||
import Mapbox, { Callout, Camera, MapView, PointAnnotation } from "@rnmapbox/maps";
|
import Mapbox, { Callout, Camera, MapView, PointAnnotation } from "@rnmapbox/maps";
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
|
@ -19,8 +19,10 @@ export default function MapScreen() {
|
||||||
const isFocused = useIsFocused();
|
const isFocused = useIsFocused();
|
||||||
const session = useSelector( (state: any) => state.data.session );
|
const session = useSelector( (state: any) => state.data.session );
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
const mapRef = useRef<MapView>( null );
|
||||||
|
|
||||||
const [ types, setTypes ] = useState<any>( [] );
|
const [ types, setTypes ] = useState<any>( [] );
|
||||||
|
const [ typesSet, setTypesSet ] = useState( false );
|
||||||
const [ coordinates, setCoordinates ] = useState<any>( [] );
|
const [ coordinates, setCoordinates ] = useState<any>( [] );
|
||||||
const [ markers, setMarkers ] = useState<any>( [] );
|
const [ markers, setMarkers ] = useState<any>( [] );
|
||||||
|
|
||||||
|
@ -29,14 +31,24 @@ export default function MapScreen() {
|
||||||
setCoordinates( [ session.coordinates.longitude, session.coordinates.latitude ] );
|
setCoordinates( [ session.coordinates.longitude, session.coordinates.latitude ] );
|
||||||
}, [ session, isFocused ] );
|
}, [ session, isFocused ] );
|
||||||
|
|
||||||
// Load markers and types
|
// Setup mapbox
|
||||||
useEffect( () => {
|
useEffect( () => {
|
||||||
Mapbox.setTelemetryEnabled( false );
|
Mapbox.setTelemetryEnabled( false );
|
||||||
|
}, [] );
|
||||||
|
|
||||||
Request.get( 'locations' ).then( (response) => {
|
// Load markers and types
|
||||||
|
const loadMarkers = () => {
|
||||||
|
mapRef.current?.getVisibleBounds().then( (bounds) => {
|
||||||
|
Request
|
||||||
|
.post( 'locations', {
|
||||||
|
topLeft: bounds[ 0 ],
|
||||||
|
bottomRight: bounds[ 1 ],
|
||||||
|
} )
|
||||||
|
.then( (response) => {
|
||||||
const { locations, types } = response;
|
const { locations, types } = response;
|
||||||
|
|
||||||
// Set types
|
// Set types
|
||||||
|
if (!typesSet) {
|
||||||
const typesList: any[] = [];
|
const typesList: any[] = [];
|
||||||
types.forEach( (type: any) => {
|
types.forEach( (type: any) => {
|
||||||
typesList.push( {
|
typesList.push( {
|
||||||
|
@ -47,11 +59,14 @@ export default function MapScreen() {
|
||||||
} );
|
} );
|
||||||
} )
|
} )
|
||||||
setTypes( typesList );
|
setTypes( typesList );
|
||||||
|
setTypesSet( true );
|
||||||
|
}
|
||||||
|
|
||||||
// Set markers
|
// Set markers
|
||||||
setMarkers( locations );
|
setMarkers( locations );
|
||||||
} )
|
} )
|
||||||
}, [] );
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
// Enable/disable type
|
// Enable/disable type
|
||||||
const toggleSwitch = (index: any) => {
|
const toggleSwitch = (index: any) => {
|
||||||
|
@ -96,10 +111,12 @@ export default function MapScreen() {
|
||||||
|
|
||||||
<ThemedView style={styles.mapContainer}>
|
<ThemedView style={styles.mapContainer}>
|
||||||
<MapView
|
<MapView
|
||||||
|
ref={mapRef}
|
||||||
style={styles.map}
|
style={styles.map}
|
||||||
logoEnabled={false}
|
logoEnabled={false}
|
||||||
scaleBarEnabled={false}
|
scaleBarEnabled={false}
|
||||||
attributionEnabled={false}
|
attributionEnabled={false}
|
||||||
|
onMapIdle={loadMarkers}
|
||||||
>
|
>
|
||||||
<Camera
|
<Camera
|
||||||
centerCoordinate={coordinates.length == 2 ? coordinates : undefined}
|
centerCoordinate={coordinates.length == 2 ? coordinates : undefined}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue