Skip to content

Commit

Permalink
feat(app): improve point selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@agjini
agjini committed Oct 17, 2024
1 parent 1621a8a commit c5cef8e
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 44 deletions.
73 changes: 44 additions & 29 deletions app/src/components/map/layers/RallyingPointsDisplayLayer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import { RallyingPoint, Ref } from "@liane/common";
import React from "react";
import { AppColors, AppColorPalettes } from "@/theme/colors";
import { AppColors } from "@/theme/colors";
import MapLibreGL from "@maplibre/maplibre-react-native";
import { Feature, Point } from "geojson";
import { useAppMapViewController } from "@/components/map/AppMapView";
import { RNAppEnv } from "@/api/env";

export const RallyingPointsDisplayLayer = ({ onSelect }: { onSelect?: (rp: RallyingPoint) => void; selected?: Ref<RallyingPoint> | undefined }) => {
export type RallyingPointsDisplayLayerProps = { onSelect?: (rp: RallyingPoint) => void; selected?: Ref<RallyingPoint> | undefined };

export const RallyingPointsDisplayLayer = ({ selected, onSelect }: RallyingPointsDisplayLayerProps) => {
const controller = useAppMapViewController();

return (
<MapLibreGL.VectorSource
id={"all_rallying_points"}
Expand All @@ -24,35 +27,39 @@ export const RallyingPointsDisplayLayer = ({ onSelect }: { onSelect?: (rp: Rally
if (points.length === 1) {
const p = points[0];

//@ts-ignore
onSelect({ ...p!.properties!, location: { lat: p.geometry.coordinates[1], lng: p.geometry.coordinates[0] } });
} else if (points.length > 0) {
const zoom = await controller.getZoom()!;

let newZoom;
if (zoom < 10.5) {
newZoom = 12.1; //rp ? 12.1 : zoom + 1.5;
} else if (zoom < 12) {
newZoom = 12.1;
} else {
newZoom = zoom + 1;
if (!p.properties?.point_count) {
//@ts-ignore
onSelect({ ...p.properties, location: { lat: p.geometry.coordinates[1], lng: p.geometry.coordinates[0] } });
await controller.setCenter(center);
return;
}
await controller.setCenter(center, newZoom);
}

const zoom = await controller.getZoom()!;

let newZoom;
if (zoom < 10.5) {
newZoom = 12.1; //rp ? 12.1 : zoom + 1.5;
} else if (zoom < 12) {
newZoom = 12.1;
} else {
newZoom = zoom + 1;
}
await controller.setCenter(center, newZoom);
}
: undefined
}>
<MapLibreGL.SymbolLayer
id="rp_symbols"
sourceLayerID={"rallying_point_display"}
minZoomLevel={10.5}
filter={["!", ["has", "point_count"]]}
style={{
textFont: ["Open Sans Regular", "Noto Sans Regular"],
textSize: 12,
textColor: AppColors.black,
textSize: 14,
textColor: ["case", ["==", ["get", "id"], selected ?? "XXXXXXXXX"], AppColors.primaryColor, AppColors.black],
textHaloColor: AppColors.white,
textHaloWidth: 1.5,
textField: ["step", ["zoom"], "", 12, ["get", "label"]],
textHaloWidth: 1,
textField: ["get", "label"],
textAllowOverlap: false,
iconAllowOverlap: true,
textAnchor: "bottom",
Expand All @@ -66,17 +73,25 @@ export const RallyingPointsDisplayLayer = ({ onSelect }: { onSelect?: (rp: Rally
iconSize: ["step", ["zoom"], 0.32, 12, 0.4]
}}
/>
<MapLibreGL.CircleLayer
id="rp_symbols_small"

<MapLibreGL.SymbolLayer
id="rp_clusters"
sourceLayerID={"rallying_point_display"}
minZoomLevel={5}
maxZoomLevel={10.5}
filter={["has", "point_count"]}
style={{
circleColor: AppColorPalettes.pink[500],
circleRadius: 4,
circleStrokeColor: AppColors.white,
circleStrokeWidth: 1,
visibility: "visible"
textFont: ["Open Sans Regular", "Noto Sans Regular"],
textSize: 18,
textColor: AppColors.white,
textHaloWidth: 0.2,
textField: ["get", "point_count"],
textAllowOverlap: false,
iconAllowOverlap: true,
textMaxWidth: 5.4,
textOptional: true,
visibility: "visible",
iconImage: "deposit_cluster",
iconAnchor: "center",
iconSize: ["step", ["zoom"], 0.5, 12, 0.4]
}}
/>
</MapLibreGL.VectorSource>
Expand Down
19 changes: 4 additions & 15 deletions app/src/screens/publish/SelectOnMapView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,14 @@ import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import { RallyingPoint } from "@liane/common";
import { useAppBackController } from "@/components/AppBackContextProvider";
import { AppColorPalettes, AppColors, defaultTextColor } from "@/theme/colors";
import { AppColors, defaultTextColor } from "@/theme/colors";
import { AppStyles } from "@/theme/styles";
import { Column, Row } from "@/components/base/AppLayout";
import AppMapView from "@/components/map/AppMapView";
import LocationPin from "@/assets/location_pin.svg";
import { RallyingPointItem } from "@/screens/ItinerarySearchForm";
import { AppRoundedButton } from "@/components/base/AppRoundedButton";
import { RallyingPointsDisplayLayer } from "@/components/map/layers/RallyingPointsDisplayLayer";
import { WayPointDisplay } from "@/components/map/markers/WayPointDisplay";
import Animated, { ZoomIn, ZoomOut } from "react-native-reanimated";
import { PageHeader } from "@/components/context/Navigation";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { AppPressableIcon } from "@/components/base/AppPressable";
Expand All @@ -29,21 +27,13 @@ export const SelectOnMapView = ({ onSelect, title }: SelectOnMapViewProps) => {
return (
<View style={styles.container}>
<AppMapView>
{<RallyingPointsDisplayLayer selected={selectedRP?.id} onSelect={setSelectedRP} />}
{selectedRP && (
<Animated.View entering={ZoomIn} exiting={ZoomOut}>
<WayPointDisplay rallyingPoint={selectedRP} type={"from"} size={24} offsetY={-24} />
</Animated.View>
)}
<RallyingPointsDisplayLayer selected={selectedRP?.id} onSelect={setSelectedRP} />
</AppMapView>
<View style={[styles.headerContainer, AppStyles.shadow]}>
<PageHeader title={title} goBack={goBack} />
</View>
{selectedRP && (
<Column style={[styles.footerContainer, AppStyles.shadow, { paddingBottom: bottom }]} spacing={8}>
<Row style={{ position: "relative", left: -16, padding: 8 }}>
<AppPressableIcon name={"close"} onPress={() => setSelectedRP(undefined)} />
</Row>
<Column style={[styles.footerContainer, AppStyles.shadow, { paddingTop: 32, paddingBottom: 32 + bottom }]} spacing={8}>
<Row
style={{
alignItems: "center",
Expand All @@ -52,8 +42,6 @@ export const SelectOnMapView = ({ onSelect, title }: SelectOnMapViewProps) => {
paddingVertical: 8,
paddingHorizontal: 4,
borderRadius: 16,
borderColor: AppColorPalettes.gray[200],
borderWidth: 1,
position: "relative",
top: -4
}}
Expand All @@ -63,6 +51,7 @@ export const SelectOnMapView = ({ onSelect, title }: SelectOnMapViewProps) => {
<RallyingPointItem item={selectedRP} labelSize={18} showIcon={false} detailed={true} />
</View>
<View style={{ width: 24, flexShrink: 100 }} />
<AppPressableIcon name={"close"} onPress={() => setSelectedRP(undefined)} />
</Row>
<Row spacing={8}>
<AppRoundedButton flex={2} backgroundColor={AppColors.primaryColor} text={"Choisir ce point"} onPress={() => onSelect(selectedRP)} />
Expand Down

0 comments on commit c5cef8e

Please sign in to comment.