Skip to content

Commit

Permalink
chore: update Fit example for map style
Browse files Browse the repository at this point in the history
  • Loading branch information
@KiwiKilian
KiwiKilian committed Oct 21, 2024
1 parent 6c99a95 commit c10bf5f
Showing 1 changed file with 90 additions and 86 deletions.
176 changes: 90 additions & 86 deletions packages/examples/src/examples/Camera/Fit.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import {View, Text} from 'react-native';
import {isEqual} from 'lodash';
import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
import MapLibreGL from '@maplibre/maplibre-react-native';
import React from "react";
import { View, Text } from "react-native";
import { isEqual } from "lodash";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
import MapLibreGL from "@maplibre/maplibre-react-native";

import sheet from '../../styles/sheet';
import Page from '../common/Page';
import sheet from "../../styles/sheet";
import Page from "../common/Page";

const buildPadding = ([top, right, bottom, left] = [0, 0, 0, 0]) => {
return {
Expand All @@ -16,23 +16,23 @@ const buildPadding = ([top, right, bottom, left] = [0, 0, 0, 0]) => {
};
};

const houseBounds = {
ne: [-74.135379, 40.795909],
sw: [-74.135449, 40.795578],
const usBounds = {
ne: [-60, 60],
sw: [-140, 20],
};

const townBounds = {
ne: [-74.12641, 40.797968],
sw: [-74.143727, 40.772177],
const euBounds = {
ne: [40, 70],
sw: [-20, 30],
};

const houseCenter = [
(houseBounds.ne[0] + houseBounds.sw[0]) / 2,
(houseBounds.ne[1] + houseBounds.sw[1]) / 2,
const usCenter = [
(usBounds.ne[0] + usBounds.sw[0]) / 2,
(usBounds.ne[1] + usBounds.sw[1]) / 2,
];
const townCenter = [
(townBounds.ne[0] + townBounds.sw[0]) / 2,
(townBounds.ne[1] + townBounds.sw[1]) / 2,
const euCenter = [
(euBounds.ne[0] + euBounds.sw[0]) / 2,
(euBounds.ne[1] + euBounds.sw[1]) / 2,
];

const paddingZero = buildPadding();
Expand All @@ -44,22 +44,21 @@ class Fit extends React.Component {
super(props);

this.state = {
locationType: 'houseCenter', // houseCenter | houseBounds | townCenter | townBounds
zoomLevel: 16, // number
locationType: "usCenter", // usCenter | usBounds | euCenter | euBounds
zoomLevel: 4, // number
followUserLocation: false,
padding: paddingZero,
animationDuration: 500,

// For updating the UI in this example.
cachedFlyTo: undefined, // house | town
cachedFlyTo: undefined, // us | eu
cachedZoomLevel: undefined, // number
};

this.camera = null;
}

componentDidUpdate(prevProps, prevState) {
const changed = stateKey => {
const changed = (stateKey) => {
// Checking if final state is `undefined` prevents another round of zeroing out in
// second `componentDidUpdate` call.
return (
Expand All @@ -68,7 +67,7 @@ class Fit extends React.Component {
);
};

if (changed('followUserLocation') && this.state.followUserLocation) {
if (changed("followUserLocation") && this.state.followUserLocation) {
this.setState({
locationType: undefined,
zoomLevel: undefined,
Expand All @@ -78,12 +77,12 @@ class Fit extends React.Component {
return;
}

if (changed('locationType') || changed('zoomLevel') || changed('padding')) {
if (changed("locationType") || changed("zoomLevel") || changed("padding")) {
this.setState({
cachedFlyTo: undefined,
cachedZoomLevel: undefined,
});
} else if (changed('cachedFlyTo') || changed('cachedZoomLevel')) {
} else if (changed("cachedFlyTo") || changed("cachedZoomLevel")) {
this.setState({
locationType: undefined,
zoomLevel: undefined,
Expand All @@ -94,27 +93,29 @@ class Fit extends React.Component {

renderSection = (title, buttons, fade = false) => {
return (
<View style={{paddingBottom: 5, opacity: fade ? 0.5 : 1}}>
<View style={{ paddingBottom: 5, opacity: fade ? 0.5 : 1 }}>
<Text>{title}</Text>
<ScrollView
horizontal={true}
style={{
flex: 0,
flexDirection: 'row',
width: '100%',
flexDirection: "row",
width: "100%",
paddingVertical: 10,
}}>
{buttons.map(button => (
}}
>
{buttons.map((button) => (
<TouchableOpacity
key={button.title}
style={{
flex: 0,
padding: 5,
marginRight: 5,
backgroundColor: button.selected ? 'coral' : '#d8d8d8',
backgroundColor: button.selected ? "coral" : "#d8d8d8",
borderRadius: 5,
}}
onPress={button.onPress}>
onPress={button.onPress}
>
<Text>{button.title}</Text>
</TouchableOpacity>
))}
Expand All @@ -138,17 +139,18 @@ class Fit extends React.Component {
zoomLevel: undefined,
followUserLocation,
padding,
animationDuration,
animationDuration: 500,
animationMode: "easeTo",
};

if (locationType === 'houseCenter') {
p.centerCoordinate = houseCenter;
} else if (locationType === 'houseBounds') {
p.bounds = houseBounds;
} else if (locationType === 'townCenter') {
p.centerCoordinate = townCenter;
} else if (locationType === 'townBounds') {
p.bounds = townBounds;
if (locationType === "usCenter") {
p.centerCoordinate = usCenter;
} else if (locationType === "usBounds") {
p.bounds = usBounds;
} else if (locationType === "euCenter") {
p.centerCoordinate = euCenter;
} else if (locationType === "euBounds") {
p.bounds = euBounds;
}

if (zoomLevel !== undefined) {
Expand All @@ -168,37 +170,37 @@ class Fit extends React.Component {
cachedZoomLevel,
} = this.state;

const centerIsSet = locationType?.toLowerCase().includes('center');
const centerIsSet = locationType?.toLowerCase().includes("center");

const locationTypeButtons = [
['House (center)', 'houseCenter'],
['House (bounds)', 'houseBounds'],
['Town (center)', 'townCenter'],
['Town (bounds)', 'townBounds'],
['undef', undefined],
].map(o => {
["US (center)", "usCenter"],
["US (bounds)", "usBounds"],
["EU (center)", "euCenter"],
["EU (bounds)", "euBounds"],
["undef", undefined],
].map((o) => {
return {
title: `${o[0]}`,
selected: locationType === o[1],
onPress: () => this.setState({locationType: o[1]}),
onPress: () => this.setState({ locationType: o[1] }),
};
});

const zoomConfigButtons = [14, 15, 16, 17, 18, 19, 20, undefined].map(n => {
const zoomConfigButtons = [2, 4, 8, 12, 16, 20, undefined].map((n) => {
return {
title: n ? `${n}` : 'undef',
title: n ? `${n}` : "undef",
selected: zoomLevel === n,
onPress: () => this.setState({zoomLevel: n}),
onPress: () => this.setState({ zoomLevel: n }),
};
});

const zoomToButtons = [14, 15, 16, 17, 18, 19, 20].map(n => {
const zoomToButtons = [14, 15, 16, 17, 18, 19, 20].map((n) => {
return {
title: `${n}`,
selected: cachedZoomLevel === n,
onPress: () => {
this.camera.zoomTo(n, 1000);
this.setState({cachedZoomLevel: n});
this.setState({ cachedZoomLevel: n });
},
};
});
Expand All @@ -207,81 +209,83 @@ class Fit extends React.Component {
<Page>
<MapLibreGL.MapView
styleURL={MapLibreGL.StyleURL.Default}
style={sheet.matchParent}>
style={sheet.matchParent}
>
<MapLibreGL.Camera
ref={ref => (this.camera = ref)}
ref={(ref) => (this.camera = ref)}
{...this.cameraProps()}
/>
<View style={{flex: 1, ...padding}}>
<View style={{flex: 1, borderColor: 'white', borderWidth: 4}} />
<View style={{ flex: 1, ...padding }}>
<View style={{ flex: 1, borderColor: "white", borderWidth: 4 }} />
</View>
</MapLibreGL.MapView>

<ScrollView
style={{
flex: 0,
width: '100%',
width: "100%",
maxHeight: 350,
backgroundColor: 'white',
backgroundColor: "white",
}}
contentContainerStyle={{
padding: 10,
paddingBottom: 20,
}}>
{this.renderSection('Location type', locationTypeButtons)}
}}
>
{this.renderSection("Region", locationTypeButtons)}

{this.renderSection(
'Zoom' +
(centerIsSet ? '' : ' (only used if center coordinate is set)'),
"Zoom" +
(centerIsSet ? "" : " (only used if center coordinate is set)"),
zoomConfigButtons,
!centerIsSet,
)}

{this.renderSection('Follow user location', [
{this.renderSection("Follow user location", [
{
title: followUserLocation ? 'Enabled' : 'Disabled',
title: followUserLocation ? "Enabled" : "Disabled",
selected: followUserLocation,
onPress: () =>
this.setState({followUserLocation: !followUserLocation}),
this.setState({ followUserLocation: !followUserLocation }),
},
])}

{this.renderSection('Fly to (imperative)', [
{this.renderSection("Fly to (imperative)", [
{
title: 'House',
selected: cachedFlyTo === 'house',
title: "US",
selected: cachedFlyTo === "us",
onPress: () => {
this.camera.flyTo(houseCenter);
this.setState({cachedFlyTo: 'house'});
this.camera.flyTo(usCenter);
this.setState({ cachedFlyTo: "us" });
},
},
{
title: 'Town',
selected: cachedFlyTo === 'town',
title: "EU",
selected: cachedFlyTo === "eu",
onPress: () => {
this.camera.flyTo(townCenter);
this.setState({cachedFlyTo: 'town'});
this.camera.flyTo(euCenter);
this.setState({ cachedFlyTo: "eu" });
},
},
])}

{this.renderSection('Zoom to (imperative)', zoomToButtons)}
{this.renderSection("Zoom to (imperative)", zoomToButtons)}

{this.renderSection('Padding', [
{this.renderSection("Padding", [
{
title: 'None',
title: "None",
selected: isEqual(padding, paddingZero),
onPress: () => this.setState({padding: paddingZero}),
onPress: () => this.setState({ padding: paddingZero }),
},
{
title: 'Top',
title: "Top",
selected: isEqual(padding, paddingTop),
onPress: () => this.setState({padding: paddingTop}),
onPress: () => this.setState({ padding: paddingTop }),
},
{
title: 'Bottom',
title: "Bottom",
selected: isEqual(padding, paddingBottom),
onPress: () => this.setState({padding: paddingBottom}),
onPress: () => this.setState({ padding: paddingBottom }),
},
])}
</ScrollView>
Expand Down

0 comments on commit c10bf5f

Please sign in to comment.