diff --git a/README.md b/README.md index cf1ec529c..346352b49 100644 --- a/README.md +++ b/README.md @@ -66,12 +66,12 @@ diverged, it has become necessary to separate the projects into specific wrapper ### Modules -- [OfflineManager](/docs/modules/offlineManager.md) -- [SnapshotManager](/docs/modules/snapshotManager.md) +- [OfflineManager](/docs/modules/OfflineManager.md) +- [SnapshotManager](/docs/modules/SnapshotManager.md) ### Misc -- [MapLibreGL](/docs/guides/MapLibreGL.md) +- [MLRNModule](/docs/guides/MLRNModule) - [Custom HTTP Headers](/docs/guides/CustomHTTPHeaders.md) - [Logger](/docs/guides/Logger.md) diff --git a/__tests__/components/BackgroundLayer.test.js b/__tests__/components/BackgroundLayer.test.js index fcaa06619..15a15bf94 100644 --- a/__tests__/components/BackgroundLayer.test.js +++ b/__tests__/components/BackgroundLayer.test.js @@ -1,7 +1,7 @@ import { render } from "@testing-library/react-native"; import React from "react"; -import BackgroundLayer from "../../src/components/BackgroundLayer"; +import { BackgroundLayer } from "../../src"; describe("BackgroundLayer", () => { test("renders correctly with default props", () => { diff --git a/__tests__/components/Callout.test.js b/__tests__/components/Callout.test.js index 9f27809dc..bbefd8bb6 100644 --- a/__tests__/components/Callout.test.js +++ b/__tests__/components/Callout.test.js @@ -2,7 +2,7 @@ import { render } from "@testing-library/react-native"; import React from "react"; import { View } from "react-native"; -import Callout from "../../src/components/Callout"; +import { Callout } from "../../src"; describe("Callout", () => { test("renders with custom title", () => { diff --git a/__tests__/components/Camera.test.tsx b/__tests__/components/Camera.test.tsx index 81df8726d..5537caaab 100644 --- a/__tests__/components/Camera.test.tsx +++ b/__tests__/components/Camera.test.tsx @@ -1,7 +1,8 @@ import { render } from "@testing-library/react-native"; -import React from "react"; +import { createRef } from "react"; -import Camera, { +import { + Camera, type CameraBounds, type CameraProps, type CameraRef, @@ -13,7 +14,7 @@ import Camera, { } from "../../src/components/Camera"; import { type NativeRef } from "../../src/hooks/useNativeRef"; -const mockCameraNativeRef = React.createRef>(); +const mockCameraNativeRef = createRef>(); jest.mock("../../src/hooks/useNativeRef", () => ({ useNativeRef: () => { return mockCameraNativeRef; @@ -21,7 +22,7 @@ jest.mock("../../src/hooks/useNativeRef", () => ({ })); function renderCamera(props: CameraProps = {}) { - const cameraRef = React.createRef(); + const cameraRef = createRef(); const result = render(); diff --git a/__tests__/components/CircleLayer.test.js b/__tests__/components/CircleLayer.test.js index f350ef3c9..aa9105fe9 100644 --- a/__tests__/components/CircleLayer.test.js +++ b/__tests__/components/CircleLayer.test.js @@ -1,7 +1,7 @@ import { render } from "@testing-library/react-native"; import React from "react"; -import CircleLayer from "../../src/components/CircleLayer"; +import { CircleLayer } from "../../src"; describe("CircleLayer", () => { test("renders correctly with default props", () => { diff --git a/__tests__/components/HeatmapLayer.test.js b/__tests__/components/HeatmapLayer.test.js index a30e7ac4d..97965c101 100644 --- a/__tests__/components/HeatmapLayer.test.js +++ b/__tests__/components/HeatmapLayer.test.js @@ -1,7 +1,7 @@ import { render } from "@testing-library/react-native"; import React from "react"; -import HeatmapLayer from "../../src/components/HeatmapLayer"; +import { HeatmapLayer } from "../../src"; describe("HeatmapLayer", () => { test("renders correctly with default props", () => { diff --git a/__tests__/components/Light.test.js b/__tests__/components/Light.test.js index 9111c6e74..53d01dc15 100644 --- a/__tests__/components/Light.test.js +++ b/__tests__/components/Light.test.js @@ -1,7 +1,7 @@ import { render } from "@testing-library/react-native"; import React from "react"; -import Light from "../../src/components/Light"; +import { Light } from "../../src"; describe("Light", () => { test("renders correctly", () => { diff --git a/__tests__/components/MapView.test.js b/__tests__/components/MapView.test.js index 3e9b972dc..b88503682 100644 --- a/__tests__/components/MapView.test.js +++ b/__tests__/components/MapView.test.js @@ -1,7 +1,7 @@ import { render } from "@testing-library/react-native"; import * as React from "react"; -import MapView from "../../src/components/MapView"; +import { MapView } from "../../src"; describe("MapView", () => { test("renders with testID", () => { diff --git a/__tests__/components/SymbolLayer.test.js b/__tests__/components/SymbolLayer.test.js index 56e1c743c..10bc9744e 100644 --- a/__tests__/components/SymbolLayer.test.js +++ b/__tests__/components/SymbolLayer.test.js @@ -1,7 +1,8 @@ import { render } from "@testing-library/react-native"; import React from "react"; -import SymbolLayer, { +import { + SymbolLayer, NATIVE_MODULE_NAME, } from "../../src/components/SymbolLayer"; diff --git a/__tests__/components/UserLocation.test.js b/__tests__/components/UserLocation.test.js index 413f4a1e5..a9c6331f5 100644 --- a/__tests__/components/UserLocation.test.js +++ b/__tests__/components/UserLocation.test.js @@ -1,10 +1,12 @@ import { render, fireEvent, waitFor } from "@testing-library/react-native"; -import React from "react"; +import React, { createRef } from "react"; -import CircleLayer from "../../src/components/CircleLayer"; -import ShapeSource from "../../src/components/ShapeSource"; -import UserLocation from "../../src/components/UserLocation"; -import locationManager from "../../src/modules/location/locationManager"; +import { + CircleLayer, + ShapeSource, + UserLocation, + LocationManager, +} from "../../src"; const position = { coords: { @@ -20,7 +22,7 @@ const position = { }; function renderUserLocation(props = {}) { - const userLocationRef = React.createRef(); + const userLocationRef = createRef(); const { rerender, unmount } = render( , ); @@ -34,14 +36,14 @@ function renderUserLocation(props = {}) { describe("UserLocation", () => { describe("render", () => { - jest.spyOn(locationManager, "start").mockImplementation(jest.fn()); + jest.spyOn(LocationManager, "start").mockImplementation(jest.fn()); jest - .spyOn(locationManager, "getLastKnownLocation") + .spyOn(LocationManager, "getLastKnownLocation") .mockImplementation(() => position); - jest.spyOn(locationManager, "addListener"); + jest.spyOn(LocationManager, "addListener"); - jest.spyOn(locationManager, "removeListener"); + jest.spyOn(LocationManager, "removeListener"); beforeEach(() => { jest.clearAllMocks(); @@ -102,7 +104,7 @@ describe("UserLocation", () => { render(); - locationManager.onUpdate({ + LocationManager.onUpdate({ coords: { accuracy: 9.977999687194824, altitude: 44.64373779296875, @@ -136,21 +138,21 @@ describe("UserLocation", () => { test("correctly unmounts", async () => { const { unmount } = renderUserLocation(); - expect(locationManager.addListener).toHaveBeenCalledTimes(1); - expect(locationManager.removeListener).not.toHaveBeenCalled(); + expect(LocationManager.addListener).toHaveBeenCalledTimes(1); + expect(LocationManager.removeListener).not.toHaveBeenCalled(); unmount(); - expect(locationManager.removeListener).toHaveBeenCalledTimes(1); + expect(LocationManager.removeListener).toHaveBeenCalledTimes(1); }); }); describe("methods", () => { beforeEach(() => { - jest.spyOn(locationManager, "start").mockImplementation(jest.fn()); - jest.spyOn(locationManager, "stop").mockImplementation(jest.fn()); + jest.spyOn(LocationManager, "start").mockImplementation(jest.fn()); + jest.spyOn(LocationManager, "stop").mockImplementation(jest.fn()); jest - .spyOn(locationManager, "getLastKnownLocation") + .spyOn(LocationManager, "getLastKnownLocation") .mockImplementation(() => position); }); @@ -160,7 +162,7 @@ describe("UserLocation", () => { test("initial state is as expected", () => { renderUserLocation(); - expect(locationManager.start).toHaveBeenCalledTimes(1); + expect(LocationManager.start).toHaveBeenCalledTimes(1); }); // TODO: replace object { running: boolean } argument with simple boolean @@ -171,8 +173,8 @@ describe("UserLocation", () => { await userLocationRef.current.setLocationManager({ running: true }); - expect(locationManager.start).toHaveBeenCalledTimes(1); - expect(locationManager.getLastKnownLocation).toHaveBeenCalledTimes(1); + expect(LocationManager.start).toHaveBeenCalledTimes(1); + expect(LocationManager.getLastKnownLocation).toHaveBeenCalledTimes(1); expect(onUpdate).toHaveBeenCalledWith({ coords: { accuracy: 9.977999687194824, @@ -186,7 +188,7 @@ describe("UserLocation", () => { timestamp: 1573730357879, }); - expect(locationManager.stop).not.toHaveBeenCalled(); + expect(LocationManager.stop).not.toHaveBeenCalled(); }); test('called with "running" false', async () => { @@ -198,9 +200,9 @@ describe("UserLocation", () => { await userLocationRef.current.setLocationManager({ running: false }); // only once from start - expect(locationManager.start).toHaveBeenCalledTimes(1); + expect(LocationManager.start).toHaveBeenCalledTimes(1); // stop should not be called - expect(locationManager.stop).not.toHaveBeenCalled(); + expect(LocationManager.stop).not.toHaveBeenCalled(); }); }); diff --git a/__tests__/exports.ts b/__tests__/exports.ts index 2edaf945f..3b94266e9 100644 --- a/__tests__/exports.ts +++ b/__tests__/exports.ts @@ -1,8 +1,8 @@ -import MapLibreGL from "../src"; +import * as MapLibreRN from "../src"; describe("Package Exports", () => { it("should contain all expected components and utils", () => { - const actualKeys = Object.keys(MapLibreGL); + const actualKeys = Object.keys(MapLibreRN); const expectedKeys = [ // Components @@ -16,11 +16,11 @@ describe("Package Exports", () => { "UserLocation", // modules - "offlineManager", + "OfflineManager", "OfflineCreatePackOptions", "OfflinePack", - "snapshotManager", - "locationManager", + "SnapshotManager", + "LocationManager", // layers "FillLayer", diff --git a/__tests__/modules/location/locationManager.test.js b/__tests__/modules/location/LocationManager.test.js similarity index 57% rename from __tests__/modules/location/locationManager.test.js rename to __tests__/modules/location/LocationManager.test.js index 214bf654d..ec98133f4 100644 --- a/__tests__/modules/location/locationManager.test.js +++ b/__tests__/modules/location/LocationManager.test.js @@ -1,10 +1,11 @@ import { NativeModules } from "react-native"; -import LocationManager, { +import { + LocationManager, LocationModuleEventEmitter, -} from "../../../src/modules/location/locationManager"; +} from "../../../src/modules/location/LocationManager"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; const MLRNLocationModule = NativeModules.MLRNLocationModule; const location = { @@ -20,12 +21,11 @@ const location = { }; describe("LocationManager", () => { - const locationManager = LocationManager; describe("constructor", () => { - test("initializes locationManager correctly", () => { - expect(locationManager._listeners).toStrictEqual([]); - expect(locationManager._lastKnownLocation).toStrictEqual(null); - expect(locationManager._isListening).toStrictEqual(false); + test("initializes LocationManager correctly", () => { + expect(LocationManager._listeners).toStrictEqual([]); + expect(LocationManager._lastKnownLocation).toStrictEqual(null); + expect(LocationManager._isListening).toStrictEqual(false); }); }); @@ -35,63 +35,63 @@ describe("LocationManager", () => { }); describe("#getLastKnownLocation", () => { - test("gets last known location from native locationManager if non available", async () => { + test("gets last known location from native LocationManager if non available", async () => { jest .spyOn(MLRNLocationModule, "getLastKnownLocation") .mockImplementation(() => location); - const lastKnownLocation = await locationManager.getLastKnownLocation(); + const lastKnownLocation = await LocationManager.getLastKnownLocation(); expect(lastKnownLocation).toStrictEqual(location); - expect(locationManager._lastKnownLocation).toStrictEqual(location); + expect(LocationManager._lastKnownLocation).toStrictEqual(location); expect(MLRNLocationModule.getLastKnownLocation).toHaveBeenCalledTimes( 1, ); - locationManager._lastKnownLocation = null; + LocationManager._lastKnownLocation = null; }); test("returns cached location if available", async () => { - locationManager._lastKnownLocation = location; + LocationManager._lastKnownLocation = location; - await locationManager.getLastKnownLocation(); + await LocationManager.getLastKnownLocation(); - expect(locationManager._lastKnownLocation).toStrictEqual(location); + expect(LocationManager._lastKnownLocation).toStrictEqual(location); expect(MLRNLocationModule.getLastKnownLocation).not.toHaveBeenCalled(); // reset - locationManager._lastKnownLocation = null; + LocationManager._lastKnownLocation = null; }); }); describe("#addListener", () => { const myListener = jest.fn(); - MapLibreRN.LocationCallbackName = { Update: "MapboxUserLocationUpdate" }; + MLRNModule.LocationCallbackName = { Update: "MapboxUserLocationUpdate" }; afterEach(() => { - locationManager._listeners = []; + LocationManager._listeners = []; }); test("adds the listener", () => { - expect(locationManager._listeners).toStrictEqual([]); - locationManager.addListener(myListener); - expect(locationManager._listeners).toStrictEqual([myListener]); + expect(LocationManager._listeners).toStrictEqual([]); + LocationManager.addListener(myListener); + expect(LocationManager._listeners).toStrictEqual([myListener]); }); test("does not re-add same listener", () => { - locationManager.addListener(myListener); - expect(locationManager._listeners).toStrictEqual([myListener]); - locationManager.addListener(myListener); - expect(locationManager._listeners).toStrictEqual([myListener]); + LocationManager.addListener(myListener); + expect(LocationManager._listeners).toStrictEqual([myListener]); + LocationManager.addListener(myListener); + expect(LocationManager._listeners).toStrictEqual([myListener]); expect(myListener).not.toHaveBeenCalled(); }); test('calls listener with "lastKnownLocation"', () => { - locationManager._lastKnownLocation = location; + LocationManager._lastKnownLocation = location; - locationManager.addListener(myListener); - expect(locationManager._listeners).toStrictEqual([myListener]); + LocationManager.addListener(myListener); + expect(LocationManager._listeners).toStrictEqual([myListener]); expect(myListener).toHaveBeenCalledWith(location); expect(myListener).toHaveBeenCalledTimes(1); }); @@ -105,23 +105,23 @@ describe("LocationManager", () => { const listenerA = jest.fn(() => "listenerA"); const listenerB = () => "listenerB"; - locationManager.addListener(listenerA); - expect(locationManager._listeners).toStrictEqual([listenerA]); + LocationManager.addListener(listenerA); + expect(LocationManager._listeners).toStrictEqual([listenerA]); expect(MLRNLocationModule.stop).not.toHaveBeenCalled(); - locationManager.addListener(listenerB); - expect(locationManager._listeners).toStrictEqual([ + LocationManager.addListener(listenerB); + expect(LocationManager._listeners).toStrictEqual([ listenerA, listenerB, ]); expect(MLRNLocationModule.stop).not.toHaveBeenCalled(); - locationManager.removeListener(listenerB); - expect(locationManager._listeners).toStrictEqual([listenerA]); + LocationManager.removeListener(listenerB); + expect(LocationManager._listeners).toStrictEqual([listenerA]); expect(MLRNLocationModule.stop).not.toHaveBeenCalled(); - locationManager.removeListener(listenerA); - expect(locationManager._listeners).toStrictEqual([]); + LocationManager.removeListener(listenerA); + expect(LocationManager._listeners).toStrictEqual([]); expect(MLRNLocationModule.stop).toHaveBeenCalledTimes(1); }); }); @@ -132,16 +132,16 @@ describe("LocationManager", () => { const listenerA = jest.fn(() => "listenerA"); const listenerB = () => "listenerB"; - locationManager.addListener(listenerA); - expect(locationManager._listeners).toStrictEqual([listenerA]); - locationManager.addListener(listenerB); - expect(locationManager._listeners).toStrictEqual([ + LocationManager.addListener(listenerA); + expect(LocationManager._listeners).toStrictEqual([listenerA]); + LocationManager.addListener(listenerB); + expect(LocationManager._listeners).toStrictEqual([ listenerA, listenerB, ]); - locationManager.removeAllListeners(); - expect(locationManager._listeners).toStrictEqual([]); + LocationManager.removeAllListeners(); + expect(LocationManager._listeners).toStrictEqual([]); }); }); @@ -150,29 +150,29 @@ describe("LocationManager", () => { jest.spyOn(LocationModuleEventEmitter, "addListener"); afterEach(() => { - locationManager._isListening = false; + LocationManager._isListening = false; }); test("starts native location manager and adds event emitter listener", () => { - MapLibreRN.LocationCallbackName = { + MLRNModule.LocationCallbackName = { Update: "MapboxUserLocationUpdate", }; - expect(locationManager._isListening).toStrictEqual(false); + expect(LocationManager._isListening).toStrictEqual(false); - locationManager.start(); + LocationManager.start(); expect(MLRNLocationModule.start).toHaveBeenCalledTimes(1); expect(LocationModuleEventEmitter.addListener).toHaveBeenCalledWith( - MapLibreRN.LocationCallbackName.Update, - locationManager.onUpdate, + MLRNModule.LocationCallbackName.Update, + LocationManager.onUpdate, ); - expect(locationManager._isListening).toStrictEqual(true); + expect(LocationManager._isListening).toStrictEqual(true); }); test('passes "displacement"', () => { - locationManager.start(5); // displacement 5meters + LocationManager.start(5); // displacement 5meters expect(MLRNLocationModule.start).toHaveBeenCalledTimes(1); expect(MLRNLocationModule.start).toHaveBeenCalledWith(5); @@ -180,11 +180,11 @@ describe("LocationManager", () => { test("does not start when already listening", () => { // we're already listening - locationManager._isListening = true; + LocationManager._isListening = true; - expect(locationManager._isListening).toStrictEqual(true); + expect(LocationManager._isListening).toStrictEqual(true); - locationManager.start(); + LocationManager.start(); expect(MLRNLocationModule.start).not.toHaveBeenCalled(); expect(LocationModuleEventEmitter.addListener).not.toHaveBeenCalled(); @@ -194,70 +194,70 @@ describe("LocationManager", () => { describe("#stop", () => { test("stops native location manager", () => { // set listening to true - locationManager._isListening = true; + LocationManager._isListening = true; // native location manager has no #stop exposed in tests? MLRNLocationModule.stop = jest.fn(); - MapLibreRN.LocationCallbackName = { + MLRNModule.LocationCallbackName = { Update: "MapboxUserLocationUpdate", }; - expect(locationManager._isListening).toStrictEqual(true); + expect(LocationManager._isListening).toStrictEqual(true); - locationManager.stop(); + LocationManager.stop(); expect(MLRNLocationModule.stop).toHaveBeenCalledTimes(1); - expect(locationManager.subscription.remove).toHaveBeenCalled(); + expect(LocationManager.subscription.remove).toHaveBeenCalled(); - expect(locationManager._isListening).toStrictEqual(false); + expect(LocationManager._isListening).toStrictEqual(false); }); test("only removes event emitter listener when listening", () => { // set listening to true - locationManager._isListening = false; + LocationManager._isListening = false; // native location manager has no #stop exposed in tests? MLRNLocationModule.stop = jest.fn(); - MapLibreRN.LocationCallbackName = { + MLRNModule.LocationCallbackName = { Update: "MapboxUserLocationUpdate", }; - expect(locationManager._isListening).toStrictEqual(false); + expect(LocationManager._isListening).toStrictEqual(false); - locationManager.stop(); + LocationManager.stop(); expect(MLRNLocationModule.stop).toHaveBeenCalledTimes(1); - expect(locationManager.subscription.remove).not.toHaveBeenCalled(); + expect(LocationManager.subscription.remove).not.toHaveBeenCalled(); }); }); describe("#setMinDisplacement", () => { test('calls native "setMinDisplacement"', () => { MLRNLocationModule.setMinDisplacement = jest.fn(); - locationManager.setMinDisplacement(5); + LocationManager.setMinDisplacement(5); expect(MLRNLocationModule.setMinDisplacement).toHaveBeenCalledWith(5); }); }); describe("#onUpdate", () => { beforeEach(() => { - locationManager._lastKnownLocation = null; + LocationManager._lastKnownLocation = null; }); test('sets "_lastKnownLocation"', () => { - locationManager.onUpdate(location); + LocationManager.onUpdate(location); - expect(locationManager._lastKnownLocation).toStrictEqual(location); + expect(LocationManager._lastKnownLocation).toStrictEqual(location); }); test("calls listeners with location", () => { const listeners = [jest.fn(), jest.fn(), jest.fn()]; listeners.forEach((listener) => { - locationManager.addListener(listener); + LocationManager.addListener(listener); }); - locationManager.onUpdate(location); + LocationManager.onUpdate(location); listeners.forEach((listener) => { expect(listener).toHaveBeenCalledTimes(1); diff --git a/__tests__/modules/offline/OfflineCreatePackOptions.test.js b/__tests__/modules/offline/OfflineCreatePackOptions.test.js index f0c01f6d5..1182dc68c 100644 --- a/__tests__/modules/offline/OfflineCreatePackOptions.test.js +++ b/__tests__/modules/offline/OfflineCreatePackOptions.test.js @@ -1,6 +1,6 @@ import { featureCollection, point } from "@turf/helpers"; -import OfflineCreatePackOptions from "../../../src/modules/offline/OfflineCreatePackOptions"; +import { OfflineCreatePackOptions } from "../../../src/modules/offline/OfflineCreatePackOptions"; describe("OfflineCreatePackOptions", () => { const options = { diff --git a/__tests__/modules/offline/offlineManager.test.js b/__tests__/modules/offline/OfflineManager.test.js similarity index 58% rename from __tests__/modules/offline/offlineManager.test.js rename to __tests__/modules/offline/OfflineManager.test.js index 3ad605801..6f1bae2cd 100644 --- a/__tests__/modules/offline/offlineManager.test.js +++ b/__tests__/modules/offline/OfflineManager.test.js @@ -1,9 +1,9 @@ import { NativeModules, Platform } from "react-native"; -import MapLibreGL from "../../../src"; -import { OfflineModuleEventEmitter } from "../../../src/modules/offline/offlineManager"; +import { OfflineManager, OfflinePackDownloadState } from "../../../src"; +import { OfflineModuleEventEmitter } from "../../../src/modules/offline/OfflineManager"; -describe("offlineManager", () => { +describe("OfflineManager", () => { const packOptions = { name: "test", styleURL: "https://demotiles.maplibre.org/style.json", @@ -19,7 +19,7 @@ describe("offlineManager", () => { type: "offlinestatus", payload: { name: packOptions.name, - state: MapLibreGL.OfflinePackDownloadState.Active, + state: OfflinePackDownloadState.Active, progress: 50.0, }, }; @@ -28,7 +28,7 @@ describe("offlineManager", () => { type: "offlinestatus", payload: { name: packOptions.name, - state: MapLibreGL.OfflinePackDownloadState.Complete, + state: OfflinePackDownloadState.Complete, progress: 100.0, }, }; @@ -42,30 +42,30 @@ describe("offlineManager", () => { }; afterEach(async () => { - const packs = await MapLibreGL.offlineManager.getPacks(); + const packs = await OfflineManager.getPacks(); for (const pack of packs) { - await MapLibreGL.offlineManager.deletePack(pack.name); + await OfflineManager.deletePack(pack.name); } jest.clearAllMocks(); }); it("should create pack", async () => { - let offlinePack = await MapLibreGL.offlineManager.getPack(packOptions.name); + let offlinePack = await OfflineManager.getPack(packOptions.name); expect(offlinePack).toBeFalsy(); - await MapLibreGL.offlineManager.createPack(packOptions); - offlinePack = await MapLibreGL.offlineManager.getPack(packOptions.name); + await OfflineManager.createPack(packOptions); + offlinePack = await OfflineManager.getPack(packOptions.name); expect(offlinePack).toBeTruthy(); }); it("should delete pack", async () => { - await MapLibreGL.offlineManager.createPack(packOptions); - let offlinePack = await MapLibreGL.offlineManager.getPack(packOptions.name); + await OfflineManager.createPack(packOptions); + let offlinePack = await OfflineManager.getPack(packOptions.name); expect(offlinePack).toBeTruthy(); - await MapLibreGL.offlineManager.deletePack(packOptions.name); - offlinePack = await MapLibreGL.offlineManager.getPack(packOptions.name); + await OfflineManager.deletePack(packOptions.name); + offlinePack = await OfflineManager.getPack(packOptions.name); expect(offlinePack).toBeFalsy(); }); @@ -75,7 +75,7 @@ describe("offlineManager", () => { NativeModules.MLRNOfflineModule, "setTileCountLimit", ); - MapLibreGL.offlineManager.setTileCountLimit(expectedLimit); + OfflineManager.setTileCountLimit(expectedLimit); expect(spy).toHaveBeenCalledWith(expectedLimit); spy.mockRestore(); }); @@ -86,7 +86,7 @@ describe("offlineManager", () => { NativeModules.MLRNOfflineModule, "setProgressEventThrottle", ); - MapLibreGL.offlineManager.setProgressEventThrottle(expectedThrottleValue); + OfflineManager.setProgressEventThrottle(expectedThrottleValue); expect(spy).toHaveBeenCalledWith(expectedThrottleValue); spy.mockRestore(); }); @@ -95,18 +95,18 @@ describe("offlineManager", () => { it("should subscribe to native events", async () => { const spy = jest.spyOn(OfflineModuleEventEmitter, "addListener"); const noop = () => {}; - await MapLibreGL.offlineManager.createPack(packOptions, noop, noop); + await OfflineManager.createPack(packOptions, noop, noop); expect(spy).toHaveBeenCalledTimes(2); spy.mockClear(); }); it("should call progress listener", async () => { const listener = jest.fn(); - await MapLibreGL.offlineManager.createPack(packOptions, listener); - const expectedOfflinePack = await MapLibreGL.offlineManager.getPack( + await OfflineManager.createPack(packOptions, listener); + const expectedOfflinePack = await OfflineManager.getPack( packOptions.name, ); - MapLibreGL.offlineManager._onProgress(mockOnProgressEvent); + OfflineManager._onProgress(mockOnProgressEvent); expect(listener).toHaveBeenCalledWith( expectedOfflinePack, mockOnProgressEvent.payload, @@ -115,11 +115,11 @@ describe("offlineManager", () => { it("should call error listener", async () => { const listener = jest.fn(); - await MapLibreGL.offlineManager.createPack(packOptions, null, listener); - const expectedOfflinePack = await MapLibreGL.offlineManager.getPack( + await OfflineManager.createPack(packOptions, null, listener); + const expectedOfflinePack = await OfflineManager.getPack( packOptions.name, ); - MapLibreGL.offlineManager._onError(mockErrorEvent); + OfflineManager._onError(mockErrorEvent); expect(listener).toHaveBeenCalledWith( expectedOfflinePack, mockErrorEvent.payload, @@ -128,66 +128,56 @@ describe("offlineManager", () => { it("should not call listeners after unsubscribe", async () => { const listener = jest.fn(); - await MapLibreGL.offlineManager.createPack( - packOptions, - listener, - listener, - ); - MapLibreGL.offlineManager.unsubscribe(packOptions.name); - MapLibreGL.offlineManager._onProgress(mockOnProgressEvent); - MapLibreGL.offlineManager._onError(mockErrorEvent); + await OfflineManager.createPack(packOptions, listener, listener); + OfflineManager.unsubscribe(packOptions.name); + OfflineManager._onProgress(mockOnProgressEvent); + OfflineManager._onError(mockErrorEvent); expect(listener).not.toHaveBeenCalled(); }); it("should unsubscribe from native events", async () => { const noop = () => {}; - await MapLibreGL.offlineManager.createPack(packOptions, noop, noop); - MapLibreGL.offlineManager.unsubscribe(packOptions.name); + await OfflineManager.createPack(packOptions, noop, noop); + OfflineManager.unsubscribe(packOptions.name); - expect( - MapLibreGL.offlineManager.subscriptionProgress.remove, - ).toHaveBeenCalledTimes(1); - expect( - MapLibreGL.offlineManager.subscriptionError.remove, - ).toHaveBeenCalledTimes(1); + expect(OfflineManager.subscriptionProgress.remove).toHaveBeenCalledTimes( + 1, + ); + expect(OfflineManager.subscriptionError.remove).toHaveBeenCalledTimes(1); }); it("should unsubscribe event listeners once a pack download has completed", async () => { const listener = jest.fn(); - await MapLibreGL.offlineManager.createPack( - packOptions, - listener, - listener, - ); + await OfflineManager.createPack(packOptions, listener, listener); expect( - MapLibreGL.offlineManager._hasListeners( + OfflineManager._hasListeners( packOptions.name, - MapLibreGL.offlineManager._progressListeners, + OfflineManager._progressListeners, ), ).toBeTruthy(); expect( - MapLibreGL.offlineManager._hasListeners( + OfflineManager._hasListeners( packOptions.name, - MapLibreGL.offlineManager._errorListeners, + OfflineManager._errorListeners, ), ).toBeTruthy(); - MapLibreGL.offlineManager._onProgress(mockOnProgressCompleteEvent); + OfflineManager._onProgress(mockOnProgressCompleteEvent); expect( - MapLibreGL.offlineManager._hasListeners( + OfflineManager._hasListeners( packOptions.name, - MapLibreGL.offlineManager._progressListeners, + OfflineManager._progressListeners, ), ).toBeFalsy(); expect( - MapLibreGL.offlineManager._hasListeners( + OfflineManager._hasListeners( packOptions.name, - MapLibreGL.offlineManager._errorListeners, + OfflineManager._errorListeners, ), ).toBeFalsy(); }); @@ -205,8 +195,8 @@ describe("offlineManager", () => { const name = `test-${Date.now()}`; const noop = () => {}; const options = { ...packOptions, name }; - await MapLibreGL.offlineManager.createPack(options); - await MapLibreGL.offlineManager.subscribe(name, noop, noop); + await OfflineManager.createPack(options); + await OfflineManager.subscribe(name, noop, noop); expect(spy).toHaveBeenCalled(); spy.mockRestore(); @@ -221,7 +211,7 @@ describe("offlineManager", () => { const name = `test-${Date.now()}`; const noop = () => {}; const options = { ...packOptions, name }; - await MapLibreGL.offlineManager.createPack(options, noop, noop); + await OfflineManager.createPack(options, noop, noop); expect(spy).not.toHaveBeenCalled(); spy.mockRestore(); @@ -240,8 +230,8 @@ describe("offlineManager", () => { const name = `test-${Date.now()}`; const noop = () => {}; const options = { ...packOptions, name }; - await MapLibreGL.offlineManager.createPack(options); - await MapLibreGL.offlineManager.subscribe(name, noop, noop); + await OfflineManager.createPack(options); + await OfflineManager.subscribe(name, noop, noop); expect(spy).not.toHaveBeenCalled(); spy.mockRestore(); diff --git a/__tests__/modules/offline/OfflinePack.test.js b/__tests__/modules/offline/OfflinePack.test.js index 98e2845c8..f9f81f039 100644 --- a/__tests__/modules/offline/OfflinePack.test.js +++ b/__tests__/modules/offline/OfflinePack.test.js @@ -1,6 +1,6 @@ import { NativeModules } from "react-native"; -import OfflinePack from "../../../src/modules/offline/OfflinePack"; +import { OfflinePack } from "../../../src"; describe("OfflinePack", () => { const fakeNativePack = { diff --git a/__tests__/modules/snapshot/snapshotManager.test.js b/__tests__/modules/snapshot/SnapshotManager.test.js similarity index 50% rename from __tests__/modules/snapshot/snapshotManager.test.js rename to __tests__/modules/snapshot/SnapshotManager.test.js index 076db9794..1a4201f83 100644 --- a/__tests__/modules/snapshot/snapshotManager.test.js +++ b/__tests__/modules/snapshot/SnapshotManager.test.js @@ -1,9 +1,9 @@ -import MapLibreGL from "../../../src"; +import { SnapshotManager } from "../../../src"; -describe("snapshotManager", () => { +describe("SnapshotManager", () => { it("should resolve uri", async () => { const options = { centerCoordinate: [1, 2] }; - const uri = await MapLibreGL.snapshotManager.takeSnap(options); + const uri = await SnapshotManager.takeSnap(options); expect(uri).toEqual("file://test.png"); }); }); diff --git a/__tests__/modules/snapshot/SnapshotOptions.test.js b/__tests__/modules/snapshot/SnapshotOptions.test.js index 08451081d..a6f106b5e 100644 --- a/__tests__/modules/snapshot/SnapshotOptions.test.js +++ b/__tests__/modules/snapshot/SnapshotOptions.test.js @@ -1,7 +1,7 @@ import { featureCollection, point } from "@turf/helpers"; import { NativeModules } from "react-native"; -import SnapshotOptions from "../../../src/modules/snapshot/SnapshotOptions"; +import { SnapshotOptions } from "../../../src/modules/snapshot/SnapshotOptions"; describe("SnapshotOptions", () => { it("should throw error if no centerCoordinate or bounds are provided", () => { diff --git a/__tests__/utils/BridgeValue.test.js b/__tests__/utils/BridgeValue.test.js index 99e3516b4..81a7179e6 100644 --- a/__tests__/utils/BridgeValue.test.js +++ b/__tests__/utils/BridgeValue.test.js @@ -1,4 +1,4 @@ -import BridgeValue from "../../src/utils/BridgeValue"; +import { BridgeValue } from "../../src/utils/BridgeValue"; describe("BridgeValue", () => { it("should convert to array of numbers", () => { diff --git a/__tests__/utils/animated/AnimatedCoordinatesArray.test.js b/__tests__/utils/animated/AnimatedCoordinatesArray.test.js index fd48f6836..6d825da09 100644 --- a/__tests__/utils/animated/AnimatedCoordinatesArray.test.js +++ b/__tests__/utils/animated/AnimatedCoordinatesArray.test.js @@ -3,9 +3,9 @@ import React from "react"; import { Animated, Easing } from "react-native"; import TestRenderer from "react-test-renderer"; -import ShapeSource from "../../../src/components/ShapeSource"; -import AnimatedCoordinatesArray from "../../../src/utils/animated/AnimatedCoordinatesArray"; -import AnimatedShape from "../../../src/utils/animated/AnimatedShape"; +import { ShapeSource } from "../../../src"; +import { AnimatedCoordinatesArray } from "../../../src/utils/animated/AnimatedCoordinatesArray"; +import { AnimatedShape } from "../../../src/utils/animated/AnimatedShape"; let clock = null; let oldNodeEnv = null; diff --git a/__tests__/utils/filterUtils.test.js b/__tests__/utils/filterUtils.test.js index 91f02c131..07be5a5b9 100644 --- a/__tests__/utils/filterUtils.test.js +++ b/__tests__/utils/filterUtils.test.js @@ -1,4 +1,4 @@ -import BridgeValue from "../../src/utils/BridgeValue"; +import { BridgeValue } from "../../src/utils/BridgeValue"; import { getFilter } from "../../src/utils/filterUtils"; const FilterItem = BridgeValue; diff --git a/android/build.gradle b/android/build.gradle index 41abb73fe..461039b45 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -99,7 +99,7 @@ dependencies { implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version" // MapLibre SDK - implementation "org.maplibre.gl:android-sdk:11.5.0" + implementation "org.maplibre.gl:android-sdk:11.7.0" implementation "org.maplibre.gl:android-sdk-turf:6.0.1" // Dependencies diff --git a/docs/components/Annotation.md b/docs/components/Annotation.md index 6709a2e11..9052336d7 100644 --- a/docs/components/Annotation.md +++ b/docs/components/Annotation.md @@ -1,6 +1,6 @@ -# `` +# `` ## Props @@ -10,7 +10,7 @@ | animated | `boolean` | `false` | `false` | FIX ME NO DESCRIPTION | | animationDuration | `number` | `1000` | `false` | FIX ME NO DESCRIPTION | | coordinates | `Array` | `none` | `false` | FIX ME NO DESCRIPTION | -| children | `ReactElement \| ReactElement[]` | `none` | `false` | FIX ME NO DESCRIPTION | +| children | `ReactNode` | `none` | `false` | FIX ME NO DESCRIPTION | | style | `object` | `none` | `false` | FIX ME NO DESCRIPTION | | icon | `string \| number \| object` | `none` | `false` | FIX ME NO DESCRIPTION | | animationEasingFunction | `FIX ME UNKNOWN TYPE` | `Easing.linear` | `false` | FIX ME NO DESCRIPTION | diff --git a/docs/components/BackgroundLayer.md b/docs/components/BackgroundLayer.md index 125505713..1dbe4f523 100644 --- a/docs/components/BackgroundLayer.md +++ b/docs/components/BackgroundLayer.md @@ -1,13 +1,13 @@ -# `` +# `` ## Props | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | | style | `BackgroundLayerStyle` | `none` | `false` | Customizable style attributes | -| sourceID | `FIX ME UNKNOWN TYPE` | `MapLibreRN.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | +| sourceID | `FIX ME UNKNOWN TYPE` | `MLRNModule.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | ## Styles diff --git a/docs/components/Callout.md b/docs/components/Callout.md index b4f95963d..624ae3e50 100644 --- a/docs/components/Callout.md +++ b/docs/components/Callout.md @@ -1,6 +1,6 @@ -# `` +# `` Callout that displays information about a selected annotation near the annotation. ## Props diff --git a/docs/components/Camera.md b/docs/components/Camera.md index c83b76630..132f3b108 100644 --- a/docs/components/Camera.md +++ b/docs/components/Camera.md @@ -1,6 +1,6 @@ -# `` +# `` ## Props @@ -19,7 +19,7 @@ | maxZoomLevel | `number` | `none` | `false` | Maximum zoom level of the map | | maxBounds | `CameraBounds` | `none` | `false` | Restrict map panning so that the center is within these bounds | | followUserLocation | `boolean` | `none` | `false` | Should the map orientation follow the user's. | -| followUserMode | `UserTrackingMode` | `none` | `false` | The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `MapLibreGL.UserTrackingMode` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](/packages/examples/src/examples/Camera/SetUserTrackingMode.js) | +| followUserMode | `UserTrackingMode` | `none` | `false` | The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `UserTrackingMode` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](/packages/examples/src/examples/Camera/SetUserTrackingMode.js) | | followZoomLevel | `number` | `none` | `false` | The zoomLevel on map while followUserLocation is set to `true` | | followPitch | `number` | `none` | `false` | The pitch on map while followUserLocation is set to `true` | | followHeading | `number` | `none` | `false` | The heading on map while followUserLocation is set to `true` | diff --git a/docs/components/CircleLayer.md b/docs/components/CircleLayer.md index c9e90fdea..c556d78a8 100644 --- a/docs/components/CircleLayer.md +++ b/docs/components/CircleLayer.md @@ -1,13 +1,13 @@ -# `` +# `` CircleLayer is a style layer that renders one or more filled circles on the map. ## Props | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | | style | `CircleLayerStyle` | `none` | `false` | Customizable style attributes | -| sourceID | `FIX ME UNKNOWN TYPE` | `MapLibreRN.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | +| sourceID | `FIX ME UNKNOWN TYPE` | `MLRNModule.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | ## Styles diff --git a/docs/components/FillExtrusionLayer.md b/docs/components/FillExtrusionLayer.md index f5ef3dc1f..cd88f08e1 100644 --- a/docs/components/FillExtrusionLayer.md +++ b/docs/components/FillExtrusionLayer.md @@ -1,13 +1,13 @@ -# `` +# `` FillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map. ## Props | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | | style | `FillExtrusionLayerStyle` | `none` | `false` | Customizable style attributes | -| sourceID | `FIX ME UNKNOWN TYPE` | `MapLibreRN.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | +| sourceID | `FIX ME UNKNOWN TYPE` | `MLRNModule.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | ## Styles diff --git a/docs/components/FillLayer.md b/docs/components/FillLayer.md index ee990dc72..9aff3da5a 100644 --- a/docs/components/FillLayer.md +++ b/docs/components/FillLayer.md @@ -1,13 +1,13 @@ -# `` +# `` FillLayer is a style layer that renders one or more filled (and optionally stroked) polygons on the map. ## Props | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | | style | `FillLayerStyle` | `none` | `false` | Customizable style attributes | -| sourceID | `FIX ME UNKNOWN TYPE` | `MapLibreRN.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | +| sourceID | `FIX ME UNKNOWN TYPE` | `MLRNModule.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | ## Styles diff --git a/docs/components/HeadingIndicator.md b/docs/components/HeadingIndicator.md index 96e9e6bdc..b1242ee64 100644 --- a/docs/components/HeadingIndicator.md +++ b/docs/components/HeadingIndicator.md @@ -1,6 +1,6 @@ -# `` +# `` ## Props diff --git a/docs/components/HeatmapLayer.md b/docs/components/HeatmapLayer.md index 307472972..cb333fd9b 100644 --- a/docs/components/HeatmapLayer.md +++ b/docs/components/HeatmapLayer.md @@ -1,13 +1,13 @@ -# `` +# `` HeatmapLayer is a style layer that renders one or more filled circles on the map. ## Props | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | | style | `HeatmapLayerStyle` | `none` | `false` | Customizable style attributes | -| sourceID | `FIX ME UNKNOWN TYPE` | `MapLibreRN.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | +| sourceID | `FIX ME UNKNOWN TYPE` | `MLRNModule.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | ## Styles diff --git a/docs/components/ImageSource.md b/docs/components/ImageSource.md index cb32c6232..bd39669a7 100644 --- a/docs/components/ImageSource.md +++ b/docs/components/ImageSource.md @@ -1,6 +1,6 @@ -# `` +# `` ImageSource is a content source that is used for a georeferenced raster image to be shown on the map.
The georeferenced image scales and rotates as the user zooms and rotates the map ## Props @@ -9,6 +9,6 @@ ImageSource is a content source that is used for a georeferenced raster image to | id | `string` | `none` | `true` | A string that uniquely identifies the source. | | url | `number \| string` | `none` | `false` | An HTTP(S) URL, absolute file URL, or local file URL to the source image.
Gifs are currently not supported. | | coordinates | `tuple` | `none` | `false` | The top left, top right, bottom right, and bottom left coordinates for the image. | -| children | `ReactElement \| ReactElement[]` | `none` | `false` | FIX ME NO DESCRIPTION | +| children | `ReactNode` | `none` | `false` | FIX ME NO DESCRIPTION | diff --git a/docs/components/Images.md b/docs/components/Images.md index 8bcf3d1c3..532c7e9d8 100644 --- a/docs/components/Images.md +++ b/docs/components/Images.md @@ -1,6 +1,6 @@ -# `` +# `` Images defines the images used in Symbol etc layers ## Props @@ -10,6 +10,6 @@ Images defines the images used in Symbol etc layers |   [object Object] | `union` | `none` | `true` | FIX ME NO DESCRIPTION | | nativeAssetImages | `Array` | `none` | `false` | If you have an asset under Image.xcassets on iOS and the drawables directory on android
you can specify an array of string names with assets as the key `['pin']`. | | id | `string` | `none` | `false` | FIX ME NO DESCRIPTION | -| children | `ReactElement` | `none` | `false` | FIX ME NO DESCRIPTION | +| children | `ReactNode` | `none` | `false` | FIX ME NO DESCRIPTION | diff --git a/docs/components/Light.md b/docs/components/Light.md index d17997119..cc8ffe302 100644 --- a/docs/components/Light.md +++ b/docs/components/Light.md @@ -1,6 +1,6 @@ -# `` +# `` Light represents the light source for extruded geometries ## Props diff --git a/docs/components/LineLayer.md b/docs/components/LineLayer.md index 55dd18304..6fb004f3f 100644 --- a/docs/components/LineLayer.md +++ b/docs/components/LineLayer.md @@ -1,13 +1,13 @@ -# `` +# `` LineLayer is a style layer that renders one or more stroked polylines on the map. ## Props | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | | style | `LineLayerStyle` | `none` | `false` | Customizable style attributes | -| sourceID | `FIX ME UNKNOWN TYPE` | `MapLibreRN.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | +| sourceID | `FIX ME UNKNOWN TYPE` | `MLRNModule.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | ## Styles diff --git a/docs/components/MapView.md b/docs/components/MapView.md index e7284c617..227357562 100644 --- a/docs/components/MapView.md +++ b/docs/components/MapView.md @@ -1,6 +1,6 @@ -# `` +# `` MapView backed by MapLibre Native ## Props @@ -8,7 +8,7 @@ MapView backed by MapLibre Native | ---- | :--: | :-----: | :------: | :----------: | | contentInset | `number[] \| number` | `none` | `false` | The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport. | | style | `ViewProps["style"]` | `none` | `false` | Style for wrapping React Native View | -| mapStyle | `string \| object` | `none` | `false` | Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `MapLibreRN.StyleURL.Default` | +| mapStyle | `string \| object` | `none` | `false` | Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `StyleURL.Default` | | preferredFramesPerSecond | `number` | `none` | `false` | iOS: The preferred frame rate at which the map view is rendered.
The default value for this property is MLNMapViewPreferredFramesPerSecondDefault,
which will adaptively set the preferred frame rate based on the capability of
the user’s device to maintain a smooth experience. This property can be set to arbitrary integer values.

Android: The maximum frame rate at which the map view is rendered, but it can't excess the ability of device hardware.
This property can be set to arbitrary integer values. | | localizeLabels | `boolean` | `false` | `false` | Automatically change the language of the map labels to the system’s preferred language,
this is not something that can be toggled on/off | | zoomEnabled | `boolean` | `none` | `false` | Enable/Disable zoom on the map | diff --git a/docs/components/MarkerView.md b/docs/components/MarkerView.md index da9a4a963..440c459cc 100644 --- a/docs/components/MarkerView.md +++ b/docs/components/MarkerView.md @@ -1,6 +1,6 @@ -# `` +# `` MarkerView allows you to place a interactive react native marker to the map.

If you have static view consider using PointAnnotation or SymbolLayer they'll offer much better performance
.
This is based on [MakerView plugin](https://docs.mapbox.com/android/plugins/overview/markerview/) on Android
and PointAnnotation on iOS. ## Props @@ -12,6 +12,6 @@ MarkerView allows you to place a interactive react native marker to the map.
-# `` +# `` ## Props diff --git a/docs/components/PointAnnotation.md b/docs/components/PointAnnotation.md index b396e4dfa..85a34361e 100644 --- a/docs/components/PointAnnotation.md +++ b/docs/components/PointAnnotation.md @@ -1,6 +1,6 @@ -# `` +# `` PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.

Consider using ShapeSource and SymbolLayer instead, if you have many points and you have static images,
they'll offer much better performance

.
If you need interctive views please use MarkerView,
as with PointAnnotation on Android child views are rendered onto a bitmap for better performance. ## Props @@ -15,7 +15,7 @@ PointAnnotation represents a one-dimensional shape located at a single geographi | anchor | `shape` | `{ x: 0.5, y: 0.5 }` | `false` | Specifies the anchor being set on a particular point of the annotation.
The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
Note this is only for custom annotations not the default pin view.
Defaults to the center of the view. | |   x | `number` | `none` | `true` | See anchor | |   y | `number` | `none` | `true` | See anchor | -| children | `React.ReactElement \| [React.ReactElement, React.ReactElement]` | `none` | `true` | Expects one child, and an optional callout can be added as well | +| children | `ReactElement \| [ReactElement, ReactElement]` | `none` | `true` | Expects one child, and an optional callout can be added as well | | style | `ViewProps["style"]` | `none` | `false` | FIX ME NO DESCRIPTION | ## Methods diff --git a/docs/components/RasterLayer.md b/docs/components/RasterLayer.md index 1ff8a4f10..a072a6245 100644 --- a/docs/components/RasterLayer.md +++ b/docs/components/RasterLayer.md @@ -1,13 +1,13 @@ -# `` +# `` ## Props | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | | style | `RasterLayerStyle` | `none` | `false` | Customizable style attributes | -| sourceID | `FIX ME UNKNOWN TYPE` | `MapLibreRN.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | +| sourceID | `FIX ME UNKNOWN TYPE` | `MLRNModule.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | ## Styles diff --git a/docs/components/RasterSource.md b/docs/components/RasterSource.md index becefedbd..67d261519 100644 --- a/docs/components/RasterSource.md +++ b/docs/components/RasterSource.md @@ -1,12 +1,12 @@ -# `` +# `` RasterSource is a map content source that supplies raster image tiles to be shown on the map.
The location of and metadata about the tiles are defined either by an option dictionary
or by an external file that conforms to the TileJSON specification. ## Props | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | -| id | `string` | `MapLibreRN.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. | +| id | `string` | `MLRNModule.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. | | url | `string` | `none` | `false` | A URL to a TileJSON configuration file describing the source’s contents and other metadata. | | tileUrlTemplates | `Array` | `none` | `false` | An array of tile URL templates. If multiple endpoints are specified, clients may use any combination of endpoints.
Example: https://example.com/raster-tiles/{z}/{x}/{y}.png | | minZoomLevel | `number` | `none` | `false` | An unsigned integer that specifies the minimum zoom level at which to display tiles from the source.
The value should be between 0 and 22, inclusive, and less than
maxZoomLevel, if specified. The default value for this option is 0. | @@ -14,6 +14,6 @@ RasterSource is a map content source that supplies raster image tiles to be show | tileSize | `number` | `none` | `false` | Size of the map tiles.
Mapbox urls default to 256, all others default to 512. | | tms | `boolean` | `none` | `false` | Influences the y direction of the tile coordinates. (tms inverts y axis) | | attribution | `string` | `none` | `false` | An HTML or literal text string defining the buttons to be displayed in an action sheet when the
source is part of a map view’s style and the map view’s attribution button is pressed. | -| children | `React.ReactElement \| React.ReactElement[]` | `none` | `false` | FIX ME NO DESCRIPTION | +| children | `ReactNode` | `none` | `false` | FIX ME NO DESCRIPTION | diff --git a/docs/components/ShapeSource.md b/docs/components/ShapeSource.md index 112b43f2c..5ce9691e5 100644 --- a/docs/components/ShapeSource.md +++ b/docs/components/ShapeSource.md @@ -1,12 +1,12 @@ -# `` +# `` ShapeSource is a map content source that supplies vector shapes to be shown on the map.
The shape may be a url or a GeoJSON object ## Props | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | -| id | `string` | `MapLibreRN.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. | +| id | `string` | `MLRNModule.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. | | url | `string` | `none` | `false` | An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle. | | shape | `GeoJSON.GeometryCollection \| GeoJSON.Feature \| GeoJSON.FeatureCollection \| GeoJSON.Geometry` | `none` | `false` | The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature colllection. | | cluster | `boolean` | `none` | `false` | Enables clustering on the source for point shapes. | @@ -22,7 +22,7 @@ ShapeSource is a map content source that supplies vector shapes to be shown on t | hitbox | `shape` | `none` | `false` | Overrides the default touch hitbox(44x44 pixels) for the source layers | |   width | `number` | `none` | `true` | `width` of hitbox | |   height | `number` | `none` | `true` | `height` of hitbox | -| children | `ReactElement \| ReactElement[]` | `none` | `false` | FIX ME NO DESCRIPTION | +| children | `ReactNode` | `none` | `false` | FIX ME NO DESCRIPTION | ## Methods ### `features([filter])` diff --git a/docs/components/SymbolLayer.md b/docs/components/SymbolLayer.md index 673037285..bfa54ab79 100644 --- a/docs/components/SymbolLayer.md +++ b/docs/components/SymbolLayer.md @@ -1,13 +1,13 @@ -# `` +# `` SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map. ## Props | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | | style | `SymbolLayerStyle` | `none` | `false` | Customizable style attributes | -| sourceID | `FIX ME UNKNOWN TYPE` | `MapLibreRN.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | +| sourceID | `FIX ME UNKNOWN TYPE` | `MLRNModule.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION | ## Styles diff --git a/docs/components/UserLocation.md b/docs/components/UserLocation.md index 7ff852e21..3831e92bb 100644 --- a/docs/components/UserLocation.md +++ b/docs/components/UserLocation.md @@ -1,6 +1,6 @@ -# `` +# `` ## Props @@ -13,7 +13,7 @@ | showsUserHeadingIndicator | `boolean` | `false` | `false` | Show or hide small arrow which indicates direction the device is pointing relative to north. | | minDisplacement | `number` | `0` | `false` | Minimum amount of movement before GPS location is updated in meters | | androidPreferredFramesPerSecond | `number` | `none` | `false` | Android only. Set max FPS at which location animators can output updates. Use this setting to limit animation rate of the location puck on higher zoom levels to decrease the stress on the device's CPU which can directly improve battery life, without sacrificing UX.

@platform android | -| children | `ReactElement \| ReactElement[]` | `none` | `false` | Custom location icon of type mapbox-gl-native components

NOTE: Forking maintainer does not understand the above comment. | +| children | `ReactNode` | `none` | `false` | Custom location icon of type mapbox-gl-native components

NOTE: Forking maintainer does not understand the above comment. | ## Methods ### `setLocationManager({ @@ -22,7 +22,7 @@ running: boolean; })` -Whether to start or stop listening to the locationManager

Notice, that listening will start automatically when
either `onUpdate` or `visible` are set +Whether to start or stop listening to the LocationManager

Notice, that listening will start automatically when
either `onUpdate` or `visible` are set #### Arguments | Name | Type | Required | Description | @@ -36,7 +36,7 @@ Whether to start or stop listening to the locationManager

Notice, that ### `needsLocationManagerRunning()` -If locationManager should be running +If LocationManager should be running diff --git a/docs/components/VectorSource.md b/docs/components/VectorSource.md index 09a854654..7fc5fdc8e 100644 --- a/docs/components/VectorSource.md +++ b/docs/components/VectorSource.md @@ -1,12 +1,12 @@ -# `` +# `` VectorSource is a map content source that supplies tiled vector data in Mapbox Vector Tile format to be shown on the map.
The location of and metadata about the tiles are defined either by an option dictionary or by an external file that conforms to the TileJSON specification. ## Props | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | -| id | `string` | `MapLibreRN.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. | +| id | `string` | `MLRNModule.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. | | url | `string` | `none` | `false` | A URL to a TileJSON configuration file describing the source’s contents and other metadata. | | tileUrlTemplates | `Array` | `none` | `false` | An array of tile URL templates. If multiple endpoints are specified, clients may use any combination of endpoints.
Example: https://example.com/vector-tiles/{z}/{x}/{y}.pbf | | minZoomLevel | `number` | `none` | `false` | An unsigned integer that specifies the minimum zoom level at which to display tiles from the source.
The value should be between 0 and 22, inclusive, and less than
maxZoomLevel, if specified. The default value for this option is 0. | @@ -17,7 +17,7 @@ VectorSource is a map content source that supplies tiled vector data in Mapbox V | hitbox | `shape` | `none` | `false` | Overrides the default touch hitbox(44x44 pixels) for the source layers | |   width | `number` | `none` | `true` | `width` of hitbox | |   height | `number` | `none` | `true` | `height` of hitbox | -| children | `React.ReactElement \| React.ReactElement[]` | `none` | `false` | FIX ME NO DESCRIPTION | +| children | `ReactNode` | `none` | `false` | FIX ME NO DESCRIPTION | ## Methods ### `features([layerIDs], [filter])` diff --git a/docs/docs.json b/docs/docs.json index 6d929e9a9..21f346e12 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -55,7 +55,7 @@ { "name": "children", "required": false, - "type": "ReactElement \\| ReactElement[]", + "type": "ReactNode", "default": "none", "description": "FIX ME NO DESCRIPTION" }, @@ -101,7 +101,7 @@ "name": "sourceID", "required": false, "type": "FIX ME UNKNOWN TYPE", - "default": "MapLibreRN.StyleSource.DefaultSourceID", + "default": "MLRNModule.StyleSource.DefaultSourceID", "description": "FIX ME NO DESCRIPTION" } ], @@ -513,7 +513,7 @@ "required": false, "type": "UserTrackingMode", "default": "none", - "description": "The mode used to track the user location on the map. One of; \"normal\", \"compass\", \"course\". Each mode string is also available as a member on the `MapLibreGL.UserTrackingMode` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](/packages/examples/src/examples/Camera/SetUserTrackingMode.js)" + "description": "The mode used to track the user location on the map. One of; \"normal\", \"compass\", \"course\". Each mode string is also available as a member on the `UserTrackingMode` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](/packages/examples/src/examples/Camera/SetUserTrackingMode.js)" }, { "name": "followZoomLevel", @@ -570,7 +570,7 @@ "name": "sourceID", "required": false, "type": "FIX ME UNKNOWN TYPE", - "default": "MapLibreRN.StyleSource.DefaultSourceID", + "default": "MLRNModule.StyleSource.DefaultSourceID", "description": "FIX ME NO DESCRIPTION" } ], @@ -874,7 +874,7 @@ "name": "sourceID", "required": false, "type": "FIX ME UNKNOWN TYPE", - "default": "MapLibreRN.StyleSource.DefaultSourceID", + "default": "MLRNModule.StyleSource.DefaultSourceID", "description": "FIX ME NO DESCRIPTION" } ], @@ -1089,7 +1089,7 @@ "name": "sourceID", "required": false, "type": "FIX ME UNKNOWN TYPE", - "default": "MapLibreRN.StyleSource.DefaultSourceID", + "default": "MLRNModule.StyleSource.DefaultSourceID", "description": "FIX ME NO DESCRIPTION" } ], @@ -1317,7 +1317,7 @@ "name": "sourceID", "required": false, "type": "FIX ME UNKNOWN TYPE", - "default": "MapLibreRN.StyleSource.DefaultSourceID", + "default": "MLRNModule.StyleSource.DefaultSourceID", "description": "FIX ME NO DESCRIPTION" } ], @@ -1494,7 +1494,7 @@ { "name": "children", "required": false, - "type": "ReactElement \\| ReactElement[]", + "type": "ReactNode", "default": "none", "description": "FIX ME NO DESCRIPTION" } @@ -1548,7 +1548,7 @@ { "name": "children", "required": false, - "type": "ReactElement", + "type": "ReactNode", "default": "none", "description": "FIX ME NO DESCRIPTION" } @@ -1682,7 +1682,7 @@ "name": "sourceID", "required": false, "type": "FIX ME UNKNOWN TYPE", - "default": "MapLibreRN.StyleSource.DefaultSourceID", + "default": "MLRNModule.StyleSource.DefaultSourceID", "description": "FIX ME NO DESCRIPTION" } ], @@ -2409,7 +2409,7 @@ "required": false, "type": "string \\| object", "default": "none", - "description": "Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `MapLibreRN.StyleURL.Default`" + "description": "Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `StyleURL.Default`" }, { "name": "preferredFramesPerSecond", @@ -2609,7 +2609,7 @@ { "name": "children", "required": true, - "type": "ReactReactElement", + "type": "ReactElement", "default": "none", "description": "Expects one child - can be container with multiple elements" } @@ -2741,7 +2741,7 @@ { "name": "children", "required": true, - "type": "React.ReactElement \\| [React.ReactElement, React.ReactElement]", + "type": "ReactElement \\| [ReactElement, ReactElement]", "default": "none", "description": "Expects one child, and an optional callout can be added as well" }, @@ -2773,7 +2773,7 @@ "name": "sourceID", "required": false, "type": "FIX ME UNKNOWN TYPE", - "default": "MapLibreRN.StyleSource.DefaultSourceID", + "default": "MLRNModule.StyleSource.DefaultSourceID", "description": "FIX ME NO DESCRIPTION" } ], @@ -2972,7 +2972,7 @@ "name": "id", "required": false, "type": "string", - "default": "MapLibreRN.StyleSource.DefaultSourceID", + "default": "MLRNModule.StyleSource.DefaultSourceID", "description": "A string that uniquely identifies the source." }, { @@ -3027,7 +3027,7 @@ { "name": "children", "required": false, - "type": "React.ReactElement \\| React.ReactElement[]", + "type": "ReactNode", "default": "none", "description": "FIX ME NO DESCRIPTION" } @@ -3212,7 +3212,7 @@ "name": "id", "required": false, "type": "string", - "default": "MapLibreRN.StyleSource.DefaultSourceID", + "default": "MLRNModule.StyleSource.DefaultSourceID", "description": "A string that uniquely identifies the source." }, { @@ -3336,7 +3336,7 @@ { "name": "children", "required": false, - "type": "ReactElement \\| ReactElement[]", + "type": "ReactNode", "default": "none", "description": "FIX ME NO DESCRIPTION" } @@ -3364,7 +3364,7 @@ "name": "sourceID", "required": false, "type": "FIX ME UNKNOWN TYPE", - "default": "MapLibreRN.StyleSource.DefaultSourceID", + "default": "MLRNModule.StyleSource.DefaultSourceID", "description": "FIX ME NO DESCRIPTION" } ], @@ -4725,7 +4725,7 @@ "methods": [ { "name": "setLocationManager", - "docblock": "Whether to start or stop listening to the locationManager\n\nNotice, that listening will start automatically when\neither `onUpdate` or `visible` are set\n\n@async\n@param {Object} running - Object with key `running` and `boolean` value\n@return {Promise}", + "docblock": "Whether to start or stop listening to the LocationManager\n\nNotice, that listening will start automatically when\neither `onUpdate` or `visible` are set\n\n@async\n@param {Object} running - Object with key `running` and `boolean` value\n@return {Promise}", "modifiers": [ "async" ], @@ -4749,12 +4749,12 @@ "raw": "Promise" } }, - "description": "Whether to start or stop listening to the locationManager\n\nNotice, that listening will start automatically when\neither `onUpdate` or `visible` are set", + "description": "Whether to start or stop listening to the LocationManager\n\nNotice, that listening will start automatically when\neither `onUpdate` or `visible` are set", "examples": [] }, { "name": "needsLocationManagerRunning", - "docblock": "If locationManager should be running\n\n@return {boolean}", + "docblock": "If LocationManager should be running\n\n@return {boolean}", "modifiers": [], "params": [], "returns": { @@ -4762,7 +4762,7 @@ "name": "boolean" } }, - "description": "If locationManager should be running", + "description": "If LocationManager should be running", "examples": [] } ], @@ -4819,7 +4819,7 @@ { "name": "children", "required": false, - "type": "ReactElement \\| ReactElement[]", + "type": "ReactNode", "default": "none", "description": "Custom location icon of type mapbox-gl-native components\n\nNOTE: Forking maintainer does not understand the above comment." } @@ -4897,7 +4897,7 @@ "name": "id", "required": false, "type": "string", - "default": "MapLibreRN.StyleSource.DefaultSourceID", + "default": "MLRNModule.StyleSource.DefaultSourceID", "description": "A string that uniquely identifies the source." }, { @@ -4980,7 +4980,7 @@ { "name": "children", "required": false, - "type": "React.ReactElement \\| React.ReactElement[]", + "type": "ReactNode", "default": "none", "description": "FIX ME NO DESCRIPTION" } @@ -4995,8 +4995,8 @@ "coordinates": { "name": "coordinates", "type": "module", - "filePath": "src/modules/location/locationManager.ts", - "description": "Coorinates sent by locationManager", + "filePath": "src/modules/location/LocationManager.ts", + "description": "Coorinates sent by LocationManager", "props": [], "styles": [], "methods": [] @@ -5004,8 +5004,8 @@ "location": { "name": "location", "type": "module", - "filePath": "src/modules/location/locationManager.ts", - "description": "Location sent by locationManager", + "filePath": "src/modules/location/LocationManager.ts", + "description": "Location sent by LocationManager", "props": [], "styles": [], "methods": [] @@ -5013,7 +5013,7 @@ "offlineManager": { "name": "offlineManager", "type": "module", - "filePath": "src/modules/offline/offlineManager.ts", + "filePath": "src/modules/offline/OfflineManager.ts", "description": "OfflineManager implements a singleton (shared object) that manages offline packs.\nAll of this class’s instance methods are asynchronous, reflecting the fact that offline resources are stored in a database.\nThe shared object maintains a canonical collection of offline packs.", "props": [], "styles": [], @@ -5048,7 +5048,7 @@ } ], "examples": [ - "const progressListener = (offlineRegion, status) => console.log(offlineRegion, status);\nconst errorListener = (offlineRegion, err) => console.log(offlineRegion, err);\n\nawait MapLibreGL.offlineManager.createPack({\n name: 'offlinePack',\n styleURL: 'https://demotiles.maplibre.org/tiles/tiles.json',\n minZoom: 14,\n maxZoom: 20,\n bounds: [[neLng, neLat], [swLng, swLat]]\n}, progressListener, errorListener)" + "const progressListener = (offlineRegion, status) => console.log(offlineRegion, status);\nconst errorListener = (offlineRegion, err) => console.log(offlineRegion, err);\n\nawait OfflineManager.createPack({\n name: 'offlinePack',\n styleURL: 'https://demotiles.maplibre.org/tiles/tiles.json',\n minZoom: 14,\n maxZoom: 20,\n bounds: [[neLng, neLat], [swLng, swLat]]\n}, progressListener, errorListener)" ], "returns": { "description": "", @@ -5071,7 +5071,7 @@ } ], "examples": [ - "await MapLibreGL.offlineManager.invalidatePack('packName')" + "await OfflineManager.invalidatePack('packName')" ], "returns": { "description": "", @@ -5094,7 +5094,7 @@ } ], "examples": [ - "await MapLibreGL.offlineManager.deletePack('packName')" + "await OfflineManager.deletePack('packName')" ], "returns": { "description": "", @@ -5108,7 +5108,7 @@ "description": "Forces a revalidation of the tiles in the ambient cache and downloads a fresh version of the tiles from the tile server.\nThis is the recommend method for clearing the cache.\nThis is the most efficient method because tiles in the ambient cache are re-downloaded to remove outdated data from a device.\nIt does not erase resources from the ambient cache or delete the database, which can be computationally expensive operations that may carry unintended side effects.", "params": [], "examples": [ - "await MapLibreGL.offlineManager.invalidateAmbientCache();" + "await OfflineManager.invalidateAmbientCache();" ], "returns": { "description": "", @@ -5122,7 +5122,7 @@ "description": "Erases resources from the ambient cache.\nThis method clears the cache and decreases the amount of space that map resources take up on the device.", "params": [], "examples": [ - "await MapLibreGL.offlineManager.clearAmbientCache();" + "await OfflineManager.clearAmbientCache();" ], "returns": { "description": "", @@ -5145,7 +5145,7 @@ } ], "examples": [ - "await MapLibreGL.offlineManager.setMaximumAmbientCacheSize(5000000);" + "await OfflineManager.setMaximumAmbientCacheSize(5000000);" ], "returns": { "description": "", @@ -5159,7 +5159,7 @@ "description": "Deletes the existing database, which includes both the ambient cache and offline packs, then reinitializes it.", "params": [], "examples": [ - "await MapLibreGL.offlineManager.resetDatabase();" + "await OfflineManager.resetDatabase();" ], "returns": { "description": "", @@ -5173,7 +5173,7 @@ "description": "Retrieves all the current offline packs that are stored in the database.", "params": [], "examples": [ - "const offlinePacks = await MapLibreGL.offlineManager.getPacks();" + "const offlinePacks = await OfflineManager.getPacks();" ], "returns": { "description": "", @@ -5196,7 +5196,7 @@ } ], "examples": [ - "const offlinePack = await MapLibreGL.offlineManager.getPack();" + "const offlinePack = await OfflineManager.getPack();" ], "returns": { "description": "", @@ -5219,7 +5219,7 @@ } ], "examples": [ - "await MapLibreGL.offlineManager.mergeOfflineRegions(path);" + "await OfflineManager.mergeOfflineRegions(path);" ], "returns": { "description": "", @@ -5242,7 +5242,7 @@ } ], "examples": [ - "MapLibreGL.offlineManager.setTileCountLimit(1000);" + "OfflineManager.setTileCountLimit(1000);" ], "returns": { "description": "", @@ -5265,7 +5265,7 @@ } ], "examples": [ - "MapLibreGL.offlineManager.setProgressEventThrottle(500);" + "OfflineManager.setProgressEventThrottle(500);" ], "returns": { "description": "", @@ -5304,7 +5304,7 @@ } ], "examples": [ - "const progressListener = (offlinePack, status) => console.log(offlinePack, status)\nconst errorListener = (offlinePack, err) => console.log(offlinePack, err)\nMapLibreGL.offlineManager.subscribe('packName', progressListener, errorListener)" + "const progressListener = (offlinePack, status) => console.log(offlinePack, status)\nconst errorListener = (offlinePack, err) => console.log(offlinePack, err)\nOfflineManager.subscribe('packName', progressListener, errorListener)" ], "returns": { "description": "", @@ -5327,7 +5327,7 @@ } ], "examples": [ - "MapLibreGL.offlineManager.unsubscribe('packName')" + "OfflineManager.unsubscribe('packName')" ], "returns": { "description": "", @@ -5341,8 +5341,8 @@ "snapshotManager": { "name": "snapshotManager", "type": "module", - "filePath": "src/modules/snapshot/snapshotManager.ts", - "description": "The snapshotManager generates static raster images of the map.\nEach snapshot image depicts a portion of a map defined by an SnapshotOptions object you provide.\nThe snapshotter generates the snapshot asynchronous.", + "filePath": "src/modules/snapshot/SnapshotManager.ts", + "description": "The SnapshotManager generates static raster images of the map.\nEach snapshot image depicts a portion of a map defined by an SnapshotOptions object you provide.\nThe snapshotter generates the snapshot asynchronous.", "props": [], "styles": [], "methods": [ @@ -5360,7 +5360,7 @@ } ], "examples": [ - "// creates a temp file png of base map\nconst uri = await MapLibreGL.snapshotManager.takeSnap({\n centerCoordinate: [-74.126410, 40.797968],\n width: width,\n height: height,\n zoomLevel: 12,\n pitch: 30,\n heading: 20,\n styleURL: MapLibreGL.StyleURL.Default,\n writeToDisk: true, // Create a temporary file\n});\n\n// creates base64 png of base map without logo\nconst uri = await MapLibreGL.snapshotManager.takeSnap({\n centerCoordinate: [-74.126410, 40.797968],\n width: width,\n height: height,\n zoomLevel: 12,\n pitch: 30,\n heading: 20,\n styleURL: MapLibreGL.StyleURL.Default,\n withLogo: false, // Disable Mapbox logo (Android only)\n});\n\n// creates snapshot with bounds\nconst uri = await MapLibreGL.snapshotManager.takeSnap({\n bounds: [[-74.126410, 40.797968], [-74.143727, 40.772177]],\n width: width,\n height: height,\n styleURL: MapLibreGL.StyleURL.Default,\n});" + "// creates a temp file png of base map\nconst uri = await SnapshotManager.takeSnap({\n centerCoordinate: [-74.126410, 40.797968],\n width: width,\n height: height,\n zoomLevel: 12,\n pitch: 30,\n heading: 20,\n styleURL: StyleURL.Default,\n writeToDisk: true, // Create a temporary file\n});\n\n// creates base64 png of base map without logo\nconst uri = await SnapshotManager.takeSnap({\n centerCoordinate: [-74.126410, 40.797968],\n width: width,\n height: height,\n zoomLevel: 12,\n pitch: 30,\n heading: 20,\n styleURL: StyleURL.Default,\n withLogo: false, // Disable Mapbox logo (Android only)\n});\n\n// creates snapshot with bounds\nconst uri = await SnapshotManager.takeSnap({\n bounds: [[-74.126410, 40.797968], [-74.143727, 40.772177]],\n width: width,\n height: height,\n styleURL: StyleURL.Default,\n});" ], "returns": { "description": "", diff --git a/docs/guides/CustomHTTPHeaders.md b/docs/guides/CustomHTTPHeaders.md index d3c419b1b..11953ca09 100644 --- a/docs/guides/CustomHTTPHeaders.md +++ b/docs/guides/CustomHTTPHeaders.md @@ -54,25 +54,25 @@ You can add and remove headers at runtime. ### Adding a Header ```javascript -MapLibreGL.addCustomHeader("Authorization", "{auth header}"); +addCustomHeader("Authorization", "{auth header}"); ``` ### Removing a Header ```javascript -MapLibreGL.removeCustomHeader("Authorization"); +removeCustomHeader("Authorization"); ``` ### Working Example ```javascript -export default function App() { +function App() { useEffect(() => { - MapLibreGL.addCustomHeader("Authorization", "{auth header}"); + addCustomHeader("Authorization", "{auth header}"); }, []); - MapLibreGL.addCustomHeader("X-Some-Header", "my-value"); + addCustomHeader("X-Some-Header", "my-value"); - return ; + return ; } ``` diff --git a/docs/guides/MapLibreGL.md b/docs/guides/MLRNModule.md similarity index 99% rename from docs/guides/MapLibreGL.md rename to docs/guides/MLRNModule.md index f93e5b097..1c0ac0148 100644 --- a/docs/guides/MapLibreGL.md +++ b/docs/guides/MLRNModule.md @@ -1,4 +1,4 @@ -# MapLibreGL +# MLRNModule ## Methods diff --git a/docs/guides/migrations/v10.md b/docs/guides/migrations/v10.md index 459af1340..7320bb22f 100644 --- a/docs/guides/migrations/v10.md +++ b/docs/guides/migrations/v10.md @@ -1,5 +1,31 @@ # Migrating to v10 +## Default Export removed + +The library no longer has a default export. Choose between named imports or namespace import. + +### Named Imports + +```diff +- import MapLibreGL from "@maplibre/maplibre-react-native"; ++ import { MapView } from "@maplibre/maplibre-react-native"; + +- ++ +``` + +### Namespace Import + +```diff +- import MapLibreGL from "@maplibre/maplibre-react-native"; ++ import * as MapLibreRN from "@maplibre/maplibre-react-native"; + +- ++ +``` + +Any namespace can be chosen, but using `MapLibreGL` is not recommended anymore due to risk of confusion. + ## Changes to `Camera` Component ### Default `animationMode` is now `CameraMode.None` diff --git a/docs/guides/setup/Android.md b/docs/guides/setup/Android.md index 3369c2e7d..54bca129e 100644 --- a/docs/guides/setup/Android.md +++ b/docs/guides/setup/Android.md @@ -10,7 +10,7 @@ you have to have a line like this in your code before using the library. You can put this near the top of your `App.js` for convenience. ```javascript -MapLibreGL.setAccessToken(null); +setAccessToken(null); ``` ## Setting connection status @@ -26,7 +26,5 @@ Manually sets the connectivity state of the app, bypassing any checks to the and `null` for the normal `ConnectivityManager` behavior. ```js -import MapLibreGL from "@maplibre/maplibre-react-native"; - -MapLibreGL.setConnected(true); +setConnected(true); ``` diff --git a/docs/guides/setup/GettingStarted.md b/docs/guides/setup/GettingStarted.md index 9835338f8..01c48d0f9 100644 --- a/docs/guides/setup/GettingStarted.md +++ b/docs/guides/setup/GettingStarted.md @@ -55,14 +55,14 @@ Here is an example minimal `App.tsx`: ```tsx import React from "react"; -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { MapView, setAccessToken } from "@maplibre/maplibre-react-native"; // Will be null for most users (only Mapbox authenticates this way). // Required on Android. See Android installation notes. -MapLibreGL.setAccessToken(null); +setAccessToken(null); -export default function App() { - return ; +function App() { + return ; } ``` diff --git a/docs/guides/setup/iOS.md b/docs/guides/setup/iOS.md index a08f573c9..06510b432 100644 --- a/docs/guides/setup/iOS.md +++ b/docs/guides/setup/iOS.md @@ -12,7 +12,7 @@ Add the following to your `ios/Podfile`: end ``` -Running `pod install` will add version `6.5.4` of the MapLibre SDK. +Running `pod install` will add version `6.9.0` of the MapLibre SDK. ```sh # Go to the ios directory @@ -33,7 +33,7 @@ until this is fixed upstream. iOS devs can open the workspace in Xcode and run f ## Installing a specific version -The current default MapLibre version is `6.5.4`. +The current default MapLibre version is `6.9.0`. If you want to install a different version, you can override as follows in your `Podfile`: @@ -42,7 +42,7 @@ $MLRN_SPM_Spec = { url: "https://github.com/maplibre/maplibre-gl-native-distribution", requirement: { kind: "upToNextMajorVersion", - minimumVersion: "6.5.4" + minimumVersion: "6.9.0" }, product_name: "MapLibre" } diff --git a/docs/modules/coordinates.md b/docs/modules/coordinates.md index d51df86c8..322bb36a0 100644 --- a/docs/modules/coordinates.md +++ b/docs/modules/coordinates.md @@ -1,7 +1,7 @@ - -# `` -Coorinates sent by locationManager + +# `` +Coorinates sent by LocationManager diff --git a/docs/modules/location.md b/docs/modules/location.md index 17f690303..ee0b7b247 100644 --- a/docs/modules/location.md +++ b/docs/modules/location.md @@ -1,7 +1,7 @@ - -# `` -Location sent by locationManager + +# `` +Location sent by LocationManager diff --git a/docs/modules/offlineManager.md b/docs/modules/offlineManager.md index 4eeac181e..b91076af3 100644 --- a/docs/modules/offlineManager.md +++ b/docs/modules/offlineManager.md @@ -1,6 +1,6 @@ - -# `` + +# `` OfflineManager implements a singleton (shared object) that manages offline packs.
All of this class’s instance methods are asynchronous, reflecting the fact that offline resources are stored in a database.
The shared object maintains a canonical collection of offline packs. @@ -22,7 +22,7 @@ Creates and registers an offline pack that downloads the resources needed to use const progressListener = (offlineRegion, status) => console.log(offlineRegion, status); const errorListener = (offlineRegion, err) => console.log(offlineRegion, err); -await MapLibreGL.offlineManager.createPack({ +await OfflineManager.createPack({ name: 'offlinePack', styleURL: 'https://demotiles.maplibre.org/tiles/tiles.json', minZoom: 14, @@ -44,7 +44,7 @@ Invalidates the specified offline pack. This method checks that the tiles in the ```javascript -await MapLibreGL.offlineManager.invalidatePack('packName') +await OfflineManager.invalidatePack('packName') ``` @@ -60,7 +60,7 @@ Unregisters the given offline pack and allows resources that are no longer requi ```javascript -await MapLibreGL.offlineManager.deletePack('packName') +await OfflineManager.deletePack('packName') ``` @@ -72,7 +72,7 @@ Forces a revalidation of the tiles in the ambient cache and downloads a fresh ve ```javascript -await MapLibreGL.offlineManager.invalidateAmbientCache(); +await OfflineManager.invalidateAmbientCache(); ``` @@ -84,7 +84,7 @@ Erases resources from the ambient cache.
This method clears the cache and de ```javascript -await MapLibreGL.offlineManager.clearAmbientCache(); +await OfflineManager.clearAmbientCache(); ``` @@ -100,7 +100,7 @@ Sets the maximum size of the ambient cache in bytes. Disables the ambient cache ```javascript -await MapLibreGL.offlineManager.setMaximumAmbientCacheSize(5000000); +await OfflineManager.setMaximumAmbientCacheSize(5000000); ``` @@ -112,7 +112,7 @@ Deletes the existing database, which includes both the ambient cache and offline ```javascript -await MapLibreGL.offlineManager.resetDatabase(); +await OfflineManager.resetDatabase(); ``` @@ -124,7 +124,7 @@ Retrieves all the current offline packs that are stored in the database. ```javascript -const offlinePacks = await MapLibreGL.offlineManager.getPacks(); +const offlinePacks = await OfflineManager.getPacks(); ``` @@ -140,7 +140,7 @@ Retrieves an offline pack that is stored in the database by name. ```javascript -const offlinePack = await MapLibreGL.offlineManager.getPack(); +const offlinePack = await OfflineManager.getPack(); ``` @@ -156,7 +156,7 @@ Sideloads offline db ```javascript -await MapLibreGL.offlineManager.mergeOfflineRegions(path); +await OfflineManager.mergeOfflineRegions(path); ``` @@ -172,7 +172,7 @@ Sets the maximum number of tiles that may be downloaded and stored on the curren ```javascript -MapLibreGL.offlineManager.setTileCountLimit(1000); +OfflineManager.setTileCountLimit(1000); ``` @@ -188,7 +188,7 @@ Sets the period at which download status events will be sent over the React Nati ```javascript -MapLibreGL.offlineManager.setProgressEventThrottle(500); +OfflineManager.setProgressEventThrottle(500); ``` @@ -208,7 +208,7 @@ Subscribe to download status/error events for the requested offline pack.
No ```javascript const progressListener = (offlinePack, status) => console.log(offlinePack, status) const errorListener = (offlinePack, err) => console.log(offlinePack, err) -MapLibreGL.offlineManager.subscribe('packName', progressListener, errorListener) +OfflineManager.subscribe('packName', progressListener, errorListener) ``` @@ -224,7 +224,7 @@ Unsubscribes any listeners associated with the offline pack.
It's a good ide ```javascript -MapLibreGL.offlineManager.unsubscribe('packName') +OfflineManager.unsubscribe('packName') ``` diff --git a/docs/modules/snapshotManager.md b/docs/modules/snapshotManager.md index caf7541ef..b20f5770c 100644 --- a/docs/modules/snapshotManager.md +++ b/docs/modules/snapshotManager.md @@ -1,7 +1,7 @@ - -# `` -The snapshotManager generates static raster images of the map.
Each snapshot image depicts a portion of a map defined by an SnapshotOptions object you provide.
The snapshotter generates the snapshot asynchronous. + +# `` +The SnapshotManager generates static raster images of the map.
Each snapshot image depicts a portion of a map defined by an SnapshotOptions object you provide.
The snapshotter generates the snapshot asynchronous. ## Methods @@ -18,35 +18,35 @@ Takes a snapshot of the base map using the provided Snapshot options. NOTE pitch ```javascript // creates a temp file png of base map -const uri = await MapLibreGL.snapshotManager.takeSnap({ +const uri = await SnapshotManager.takeSnap({ centerCoordinate: [-74.126410, 40.797968], width: width, height: height, zoomLevel: 12, pitch: 30, heading: 20, - styleURL: MapLibreGL.StyleURL.Default, + styleURL: StyleURL.Default, writeToDisk: true, // Create a temporary file }); // creates base64 png of base map without logo -const uri = await MapLibreGL.snapshotManager.takeSnap({ +const uri = await SnapshotManager.takeSnap({ centerCoordinate: [-74.126410, 40.797968], width: width, height: height, zoomLevel: 12, pitch: 30, heading: 20, - styleURL: MapLibreGL.StyleURL.Default, + styleURL: StyleURL.Default, withLogo: false, // Disable Mapbox logo (Android only) }); // creates snapshot with bounds -const uri = await MapLibreGL.snapshotManager.takeSnap({ +const uri = await SnapshotManager.takeSnap({ bounds: [[-74.126410, 40.797968], [-74.143727, 40.772177]], width: width, height: height, - styleURL: MapLibreGL.StyleURL.Default, + styleURL: StyleURL.Default, }); ``` diff --git a/jest.config.ts b/jest.config.ts index c3597ca64..0155a8eae 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -1,4 +1,4 @@ -import type { Config } from "jest"; +import { type Config } from "jest"; const config: Config = { preset: "@testing-library/react-native", diff --git a/maplibre-react-native.podspec b/maplibre-react-native.podspec index f3466147f..d7ccac7c7 100644 --- a/maplibre-react-native.podspec +++ b/maplibre-react-native.podspec @@ -28,7 +28,7 @@ def $MLRN.post_install(installer) url: "https://github.com/maplibre/maplibre-gl-native-distribution", requirement: { kind: "exactVersion", - version: "6.5.4" + version: "6.9.0" }, product_name: "MapLibre" } diff --git a/packages/examples/index.js b/packages/examples/index.js index 9e65133d0..8d09384e4 100644 --- a/packages/examples/index.js +++ b/packages/examples/index.js @@ -1,3 +1 @@ -import { App } from "./src/App"; - -export default App; +export { App } from "./src/App"; diff --git a/packages/examples/src/App.tsx b/packages/examples/src/App.tsx index cc00a481a..18272a426 100755 --- a/packages/examples/src/App.tsx +++ b/packages/examples/src/App.tsx @@ -1,10 +1,13 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + requestAndroidLocationPermissions, + setAccessToken, +} from "@maplibre/maplibre-react-native"; import { useEffect, useState } from "react"; import { LogBox, Platform, StyleSheet, Text, View } from "react-native"; import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context"; import "react-native-gesture-handler"; -import { default as Home } from "./Examples"; +import { Home } from "./Examples"; import { sheet } from "./styles/sheet"; LogBox.ignoreLogs([ @@ -21,7 +24,7 @@ const styles = StyleSheet.create({ const IS_ANDROID = Platform.OS === "android"; -MapLibreGL.setAccessToken(null); +setAccessToken(null); export function App() { const [isFetchingAndroidPermission, setIsFetchingAndroidPermission] = @@ -32,7 +35,7 @@ export function App() { useEffect(() => { (async () => { if (IS_ANDROID) { - const isGranted = await MapLibreGL.requestAndroidLocationPermissions(); + const isGranted = await requestAndroidLocationPermissions(); setIsAndroidPermissionGranted(isGranted); setIsFetchingAndroidPermission(false); diff --git a/packages/examples/src/Examples.tsx b/packages/examples/src/Examples.tsx index 1a02835a8..69594fcee 100644 --- a/packages/examples/src/Examples.tsx +++ b/packages/examples/src/Examples.tsx @@ -267,7 +267,7 @@ function buildNavigationScreens(example: any, Stack: any) { ); } -function Home() { +export function Home() { const Stack = createStackNavigator(); return ( @@ -289,5 +289,3 @@ function Home() { ); } - -export default Home; diff --git a/packages/examples/src/components/Bubble.tsx b/packages/examples/src/components/Bubble.tsx index 7867be09e..023963ef6 100755 --- a/packages/examples/src/components/Bubble.tsx +++ b/packages/examples/src/components/Bubble.tsx @@ -29,7 +29,7 @@ interface BubbleProps { onPress?: (event: GestureResponderEvent) => void; } -export default function Bubble({ children, style, onPress }: BubbleProps) { +export function Bubble({ children, style, onPress }: BubbleProps) { return ( {onPress ? ( diff --git a/packages/examples/src/components/MapSafeAreaView.tsx b/packages/examples/src/components/MapSafeAreaView.tsx index 7ccda1b98..09002c73f 100755 --- a/packages/examples/src/components/MapSafeAreaView.tsx +++ b/packages/examples/src/components/MapSafeAreaView.tsx @@ -7,7 +7,7 @@ interface PageProps { children: ReactNode; } -export default function MapSafeAreaView({ children }: PageProps) { +export function MapSafeAreaView({ children }: PageProps) { return ( {children} diff --git a/packages/examples/src/components/PulseCircleLayer.tsx b/packages/examples/src/components/PulseCircleLayer.tsx index e336c9c97..9328f44af 100755 --- a/packages/examples/src/components/PulseCircleLayer.tsx +++ b/packages/examples/src/components/PulseCircleLayer.tsx @@ -1,4 +1,5 @@ -import MapLibreGL, { +import { + Animated as MLRNAnimated, type CircleLayerStyle, } from "@maplibre/maplibre-react-native"; import { useEffect, useRef } from "react"; @@ -92,8 +93,8 @@ function PulseCircleLayer({ } return ( - - + - - - + ); } -export default Animated.createAnimatedComponent(PulseCircleLayer); +const AnimatedPulseCircleLayer = + Animated.createAnimatedComponent(PulseCircleLayer); + +export { AnimatedPulseCircleLayer as PulseCircleLayer }; diff --git a/packages/examples/src/components/TabBarView.tsx b/packages/examples/src/components/TabBarView.tsx index 00280ef71..ae62b2adf 100755 --- a/packages/examples/src/components/TabBarView.tsx +++ b/packages/examples/src/components/TabBarView.tsx @@ -1,7 +1,7 @@ import { type ReactNode, useState } from "react"; import { ButtonGroup } from "./ButtonGroup"; -import MapSafeAreaView from "./MapSafeAreaView"; +import { MapSafeAreaView } from "./MapSafeAreaView"; interface TabBarViewProps { children: ReactNode; @@ -11,7 +11,7 @@ interface TabBarViewProps { defaultValue?: number; } -function TabBarView({ +export function TabBarView({ children, scrollable = false, options, @@ -35,4 +35,3 @@ function TabBarView({ ); } -export default TabBarView; diff --git a/packages/examples/src/examples/Animations/AnimateCircleAlongLine.tsx b/packages/examples/src/examples/Animations/AnimateCircleAlongLine.tsx index dffafe551..a1c433f9c 100755 --- a/packages/examples/src/examples/Animations/AnimateCircleAlongLine.tsx +++ b/packages/examples/src/examples/Animations/AnimateCircleAlongLine.tsx @@ -1,11 +1,16 @@ -import MapLibreGL, { +import { + Animated, + Camera, + LineLayer, type LineLayerStyle, + MapView, + ShapeSource, } from "@maplibre/maplibre-react-native"; import { useEffect, useState } from "react"; -import PulseCircleLayer from "../../components/PulseCircleLayer"; +import { PulseCircleLayer } from "../../components/PulseCircleLayer"; import { sheet } from "../../styles/sheet"; -import RouteSimulator from "../../utils/RouteSimulator"; +import { RouteSimulator } from "../../utils/RouteSimulator"; const ROUTE_FEATURE: GeoJSON.Feature = { type: "Feature", @@ -38,7 +43,7 @@ const layerStyles: { }, }; -export default function AnimateCircleAlongLine() { +export function AnimateCircleAlongLine() { const [currentPoint, setCurrentPoint] = useState< GeoJSON.Feature @@ -86,20 +91,20 @@ export default function AnimateCircleAlongLine() { }; return ( - + {/* @ts-ignore */} - - + ); }; return ( - - + - - - + + + {currentPoint && } {renderProgressLine()} - +
); } diff --git a/packages/examples/src/examples/Animations/AnimatedLine.js b/packages/examples/src/examples/Animations/AnimatedLine.js index 7c773755a..a20642c98 100755 --- a/packages/examples/src/examples/Animations/AnimatedLine.js +++ b/packages/examples/src/examples/Animations/AnimatedLine.js @@ -2,10 +2,10 @@ import { Animated, Camera, MapView } from "@maplibre/maplibre-react-native"; import along from "@turf/along"; import { lineString, point } from "@turf/helpers"; import length from "@turf/length"; -import React from "react"; +import React, { Component } from "react"; import { Button, Easing } from "react-native"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; import { sheet } from "../../styles/sheet"; const blon = -73.99155; @@ -37,7 +37,7 @@ const styles = { }, }; -class AnimatedLine extends React.Component { +export class AnimatedLine extends Component { constructor(props) { super(props); @@ -272,5 +272,3 @@ class AnimatedLine extends React.Component { ); } } - -export default AnimatedLine; diff --git a/packages/examples/src/examples/Annotations/CustomCallout.tsx b/packages/examples/src/examples/Annotations/CustomCallout.tsx index 4523ec757..cd7bcda6f 100644 --- a/packages/examples/src/examples/Annotations/CustomCallout.tsx +++ b/packages/examples/src/examples/Annotations/CustomCallout.tsx @@ -1,4 +1,9 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + MapView, + MarkerView, + ShapeSource, + SymbolLayer, +} from "@maplibre/maplibre-react-native"; import { useState } from "react"; import { Text, View } from "react-native"; @@ -6,13 +11,13 @@ import maplibreIcon from "../../assets/images/maplibre.png"; import { FEATURE_COLLECTION } from "../../constants/GEOMETRIES"; import { sheet } from "../../styles/sheet"; -export default function CustomCallout() { +export function CustomCallout() { const [selectedFeature, setSelectedFeature] = useState>(); return ( - - + { @@ -23,7 +28,7 @@ export default function CustomCallout() { setSelectedFeature(feature); }} > - - +
{selectedFeature && ( - {selectedFeature?.properties?.name} - +
)} -
+ ); } diff --git a/packages/examples/src/examples/Annotations/Heatmap.tsx b/packages/examples/src/examples/Annotations/Heatmap.tsx index 8ea6e13ed..c237a82bd 100644 --- a/packages/examples/src/examples/Annotations/Heatmap.tsx +++ b/packages/examples/src/examples/Annotations/Heatmap.tsx @@ -1,15 +1,19 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + HeatmapLayer, + MapView, + ShapeSource, +} from "@maplibre/maplibre-react-native"; import { sheet } from "../../styles/sheet"; -export default function Heatmap() { +export function Heatmap() { return ( - - + - - - + + ); } diff --git a/packages/examples/src/examples/Annotations/MarkerView.tsx b/packages/examples/src/examples/Annotations/MarkerView.tsx index 2c19989df..e4ba5f0ad 100644 --- a/packages/examples/src/examples/Annotations/MarkerView.tsx +++ b/packages/examples/src/examples/Annotations/MarkerView.tsx @@ -1,4 +1,9 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + Camera, + MapView, + MarkerView, + PointAnnotation, +} from "@maplibre/maplibre-react-native"; import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; import { sheet } from "../../styles/sheet"; @@ -43,18 +48,20 @@ const COORDINATES = [ [-73.99155, 40.73681], ] as [GeoJSON.Position, GeoJSON.Position]; -export default function MarkerView() { +function MarkerViewExample() { return ( - - + + - + - + - + - - + + ); } + +export { MarkerViewExample as MarkerView }; diff --git a/packages/examples/src/examples/Annotations/PointAnnotationAnchors.js b/packages/examples/src/examples/Annotations/PointAnnotationAnchors.js index f2a6197ac..5e65ed143 100644 --- a/packages/examples/src/examples/Annotations/PointAnnotationAnchors.js +++ b/packages/examples/src/examples/Annotations/PointAnnotationAnchors.js @@ -1,4 +1,8 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + Camera, + MapView, + PointAnnotation, +} from "@maplibre/maplibre-react-native"; import React from "react"; import { StyleSheet, Text, View } from "react-native"; @@ -69,12 +73,12 @@ const styles = StyleSheet.create({ }, }); -const PointAnnotationAnchors = () => { +export function PointAnnotationAnchors() { return ( - - + + {corners.map((p, i) => ( - { x={p.anchor.x.toPrecision(2)}, y={p.anchor.y.toPrecision(2)} - + ))} {sides.map((p, i) => { let { x, y } = p.anchor; @@ -96,7 +100,7 @@ const PointAnnotationAnchors = () => { y = 0; } return ( - { x={p.anchor.x.toPrecision(2)}, y={p.anchor.y.toPrecision(2)} - + ); })} - + ); -}; - -export default PointAnnotationAnchors; +} diff --git a/packages/examples/src/examples/Annotations/ShowPointAnnotation.tsx b/packages/examples/src/examples/Annotations/ShowPointAnnotation.tsx index ebd76380a..2c34c32b6 100755 --- a/packages/examples/src/examples/Annotations/ShowPointAnnotation.tsx +++ b/packages/examples/src/examples/Annotations/ShowPointAnnotation.tsx @@ -1,4 +1,12 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + Callout, + Camera, + FillLayer, + MapView, + PointAnnotation, + type PointAnnotationRef, + ShapeSource, +} from "@maplibre/maplibre-react-native"; import { type ReactNode, useRef, useState } from "react"; import { Image, @@ -9,7 +17,7 @@ import { View, } from "react-native"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; import { sheet } from "../../styles/sheet"; const ANNOTATION_SIZE = 40; @@ -39,10 +47,10 @@ const AnnotationWithRemoteImage = ({ coordinate, title, }: AnnotationWithRemoteImageProps) => { - const pointAnnotation = useRef(null); + const pointAnnotation = useRef(null); return ( - - - + + ); }; -const ShowPointAnnotation = () => { +export function ShowPointAnnotation() { const [coordinates, setCoordinates] = useState([[-73.99155, 40.73581]]); const [layerRendering, setLayerRendering] = useState<"below" | "above">( "below", @@ -101,15 +109,15 @@ const ShowPointAnnotation = () => { } else { items.push( null, - - - , + + , ); } }); @@ -119,7 +127,7 @@ const ShowPointAnnotation = () => { return ( <> - { setCoordinates((prevState) => [ ...prevState, @@ -128,13 +136,13 @@ const ShowPointAnnotation = () => { }} style={sheet.matchParent} > - {renderAnnotations()} - { type: "Polygon", }} > - { fillOutlineColor: "red", }} /> - - + + @@ -183,6 +191,4 @@ const ShowPointAnnotation = () => { ); -}; - -export default ShowPointAnnotation; +} diff --git a/packages/examples/src/examples/BugReport.tsx b/packages/examples/src/examples/BugReport.tsx index fdedeffdc..6708317fa 100644 --- a/packages/examples/src/examples/BugReport.tsx +++ b/packages/examples/src/examples/BugReport.tsx @@ -2,7 +2,7 @@ import { MapView } from "@maplibre/maplibre-react-native"; import { sheet } from "../styles/sheet"; -export default function BugReport() { +export function BugReport() { return ( {/* Reproduce your Bug here! */} diff --git a/packages/examples/src/examples/CacheManagement.js b/packages/examples/src/examples/CacheManagement.js index 0d2aa3412..35bbe1fe3 100755 --- a/packages/examples/src/examples/CacheManagement.js +++ b/packages/examples/src/examples/CacheManagement.js @@ -1,5 +1,5 @@ -import MapLibreGL, { MapView } from "@maplibre/maplibre-react-native"; -import React from "react"; +import { MapView, OfflineManager } from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; import { Alert, StyleSheet, @@ -44,29 +44,29 @@ const styles = StyleSheet.create({ }, }); -class CacheManagement extends React.Component { +export class CacheManagement extends Component { state = { cacheSize: "", }; invalidateAmbientCache = async () => { - await MapLibreGL.offlineManager.invalidateAmbientCache(); + await OfflineManager.invalidateAmbientCache(); Alert.alert("Ambient cache successfully invalidated"); }; resetDatabase = async () => { - await MapLibreGL.offlineManager.resetDatabase(); + await OfflineManager.resetDatabase(); Alert.alert("Database successfully reset"); }; clearAmbientCache = async () => { - await MapLibreGL.offlineManager.clearAmbientCache(); + await OfflineManager.clearAmbientCache(); Alert.alert("Ambient cache successfully cleared"); }; setMaximumAmbientCacheSize = async () => { const newMaxSize = parseInt(this.state.cacheSize, 10); - await MapLibreGL.offlineManager.setMaximumAmbientCacheSize(newMaxSize); + await OfflineManager.setMaximumAmbientCacheSize(newMaxSize); Alert.alert(`Max cache size successfully set to ${newMaxSize} bytes`); }; @@ -135,5 +135,3 @@ class CacheManagement extends React.Component { ); } } - -export default CacheManagement; diff --git a/packages/examples/src/examples/Camera/CompassView.js b/packages/examples/src/examples/Camera/CompassView.js index 25fb58608..4b20bd10b 100644 --- a/packages/examples/src/examples/Camera/CompassView.js +++ b/packages/examples/src/examples/Camera/CompassView.js @@ -3,7 +3,7 @@ import React from "react"; import { sheet } from "../../styles/sheet"; -function CompassView() { +export function CompassView() { return ( ); } - -export default CompassView; diff --git a/packages/examples/src/examples/Camera/Fit.js b/packages/examples/src/examples/Camera/Fit.js index 40fb58ea7..4393ead25 100755 --- a/packages/examples/src/examples/Camera/Fit.js +++ b/packages/examples/src/examples/Camera/Fit.js @@ -1,6 +1,6 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { Camera, MapView, StyleURL } from "@maplibre/maplibre-react-native"; import { isEqual } from "lodash"; -import React from "react"; +import React, { Component } from "react"; import { ScrollView, Text, TouchableOpacity, View } from "react-native"; import { @@ -24,7 +24,7 @@ const paddingZero = buildPadding(); const paddingTop = buildPadding([200, 40, 40, 40]); const paddingBottom = buildPadding([40, 40, 200, 40]); -class Fit extends React.Component { +export class Fit extends Component { constructor(props) { super(props); @@ -186,18 +186,12 @@ class Fit extends React.Component { return ( <> - - (this.camera = ref)} - {...this.cameraProps()} - /> + + (this.camera = ref)} {...this.cameraProps()} /> - + - - + - - + + ); } } - -export default FlyTo; diff --git a/packages/examples/src/examples/Camera/GetCenter.js b/packages/examples/src/examples/Camera/GetCenter.js index 7fc77f582..31464e8be 100755 --- a/packages/examples/src/examples/Camera/GetCenter.js +++ b/packages/examples/src/examples/Camera/GetCenter.js @@ -1,14 +1,14 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; +import { Camera, MapView } from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; import { Text } from "react-native"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; const styles = { mapView: { flex: 1 }, }; -class GetCenter extends React.Component { +export class GetCenter extends Component { constructor(props) { super(props); @@ -39,17 +39,14 @@ class GetCenter extends React.Component { render() { return ( <> - (this._map = c)} onPress={this.onPress} style={styles.mapView} > - - + + Center @@ -60,5 +57,3 @@ class GetCenter extends React.Component { ); } } - -export default GetCenter; diff --git a/packages/examples/src/examples/Camera/GetZoom.tsx b/packages/examples/src/examples/Camera/GetZoom.tsx index 763045cd4..29ad0eb6e 100755 --- a/packages/examples/src/examples/Camera/GetZoom.tsx +++ b/packages/examples/src/examples/Camera/GetZoom.tsx @@ -1,17 +1,17 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { MapView, type MapViewRef } from "@maplibre/maplibre-react-native"; import { useRef, useState } from "react"; import { Text } from "react-native"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; import { sheet } from "../../styles/sheet"; -export default function GetZoom() { +export function GetZoom() { const [zoom, setZoom] = useState(); - const mapViewRef = useRef(null); + const mapViewRef = useRef(null); return ( <> - { setZoom(await mapViewRef.current?.getZoom()); diff --git a/packages/examples/src/examples/Camera/RestrictMapBounds.tsx b/packages/examples/src/examples/Camera/RestrictMapBounds.tsx index 59fa02e57..817364815 100644 --- a/packages/examples/src/examples/Camera/RestrictMapBounds.tsx +++ b/packages/examples/src/examples/Camera/RestrictMapBounds.tsx @@ -1,4 +1,9 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + Camera, + FillLayer, + MapView, + ShapeSource, +} from "@maplibre/maplibre-react-native"; import bboxPolygon from "@turf/bbox-polygon"; import { EU_BOUNDS } from "../../constants/GEOMETRIES"; @@ -12,12 +17,12 @@ const POLYGON = bboxPolygon([ EU_BOUNDS.ne[1], ]); -export default function RestrictMapBounds() { +export function RestrictMapBounds() { return ( - - - - + + + - - + + ); } diff --git a/packages/examples/src/examples/Camera/SetHeading.js b/packages/examples/src/examples/Camera/SetHeading.js index 3a4bcb9b1..43a26e8fb 100755 --- a/packages/examples/src/examples/Camera/SetHeading.js +++ b/packages/examples/src/examples/Camera/SetHeading.js @@ -1,10 +1,15 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; +import { + Camera, + LocationManager, + MapView, + UserLocation, +} from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; -import TabBarView from "../../components/TabBarView"; +import { TabBarView } from "../../components/TabBarView"; import { sheet } from "../../styles/sheet"; -class SetHeading extends React.Component { +export class SetHeading extends Component { constructor(props) { super(props); @@ -25,7 +30,7 @@ class SetHeading extends React.Component { } componentDidMount() { - MapLibreGL.locationManager.start(); + LocationManager.start(); } componentDidUpdate() { @@ -35,7 +40,7 @@ class SetHeading extends React.Component { } componentWillUnmount() { - MapLibreGL.locationManager.stop(); + LocationManager.stop(); } onHeadingChange(index, heading) { @@ -49,16 +54,11 @@ class SetHeading extends React.Component { options={this._bearingOptions} onOptionPress={this.onHeadingChange} > - (this.map = ref)} - style={sheet.matchParent} - > - - - + (this.map = ref)} style={sheet.matchParent}> + + + ); } } - -export default SetHeading; diff --git a/packages/examples/src/examples/Camera/SetPitch.js b/packages/examples/src/examples/Camera/SetPitch.js index 44c363d89..867fcb0ab 100755 --- a/packages/examples/src/examples/Camera/SetPitch.js +++ b/packages/examples/src/examples/Camera/SetPitch.js @@ -1,10 +1,15 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; - -import TabBarView from "../../components/TabBarView"; +import { + Camera, + LocationManager, + MapView, + UserLocation, +} from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; + +import { TabBarView } from "../../components/TabBarView"; import { sheet } from "../../styles/sheet"; -class SetPitch extends React.Component { +export class SetPitch extends Component { constructor(props) { super(props); @@ -24,11 +29,11 @@ class SetPitch extends React.Component { } componentDidMount() { - MapLibreGL.locationManager.start(); + LocationManager.start(); } componentWillUnmount() { - MapLibreGL.locationManager.stop(); + LocationManager.stop(); } onUpdatePitch(index, pitch) { @@ -42,13 +47,11 @@ class SetPitch extends React.Component { options={this._pitchOptions} onOptionPress={this.onUpdatePitch} > - - - - + + + + ); } } - -export default SetPitch; diff --git a/packages/examples/src/examples/Camera/TakeSnapshot.js b/packages/examples/src/examples/Camera/TakeSnapshot.js index 90e710882..6fb3142c3 100755 --- a/packages/examples/src/examples/Camera/TakeSnapshot.js +++ b/packages/examples/src/examples/Camera/TakeSnapshot.js @@ -1,5 +1,5 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; +import { SnapshotManager, StyleURL } from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; import { ActivityIndicator, Dimensions, @@ -20,7 +20,7 @@ const styles = StyleSheet.create({ spinnerContainer: { alignItems: "center", flex: 1, justifyContent: "center" }, }); -class TakeSnapshot extends React.Component { +export class TakeSnapshot extends Component { constructor(props) { super(props); @@ -36,14 +36,14 @@ class TakeSnapshot extends React.Component { async takeSnapshot() { const { width, height } = Dimensions.get("window"); - const uri = await MapLibreGL.snapshotManager.takeSnap({ + const uri = await SnapshotManager.takeSnap({ centerCoordinate: [-74.12641, 40.797968], width, height, zoomLevel: 3, pitch: 30, heading: 20, - styleURL: MapLibreGL.StyleURL.Default, + styleURL: StyleURL.Default, writeToDisk: true, }); @@ -71,5 +71,3 @@ class TakeSnapshot extends React.Component { } } } - -export default TakeSnapshot; diff --git a/packages/examples/src/examples/Camera/TakeSnapshotWithMap.js b/packages/examples/src/examples/Camera/TakeSnapshotWithMap.js index 9486c35b9..d31ec5f14 100755 --- a/packages/examples/src/examples/Camera/TakeSnapshotWithMap.js +++ b/packages/examples/src/examples/Camera/TakeSnapshotWithMap.js @@ -1,5 +1,5 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; +import { Camera, MapView } from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native"; import { colors } from "../../styles/colors"; @@ -20,7 +20,7 @@ const styles = StyleSheet.create({ mapContainer: { flex: 1 }, }); -class TakeSnapshotWithMap extends React.Component { +export class TakeSnapshotWithMap extends Component { constructor(props) { super(props); @@ -38,16 +38,13 @@ class TakeSnapshotWithMap extends React.Component { return ( <> - (this.map = ref)} - style={styles.map} - > - (this.map = ref)} style={styles.map}> + - + {this.state.uri ? ( @@ -69,5 +66,3 @@ class TakeSnapshotWithMap extends React.Component { ); } } - -export default TakeSnapshotWithMap; diff --git a/packages/examples/src/examples/Camera/YoYo.tsx b/packages/examples/src/examples/Camera/YoYo.tsx index 2c150169c..fefb2b172 100755 --- a/packages/examples/src/examples/Camera/YoYo.tsx +++ b/packages/examples/src/examples/Camera/YoYo.tsx @@ -1,9 +1,9 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { Camera, MapView } from "@maplibre/maplibre-react-native"; import { useEffect, useState } from "react"; import { sheet } from "../../styles/sheet"; -export default function YoYo() { +export function YoYo() { const [zoomLevel, setZoomLevel] = useState(2); useEffect(() => { @@ -25,12 +25,12 @@ export default function YoYo() { }, []); return ( - - + - + ); } diff --git a/packages/examples/src/examples/FillRasterLayer/CustomVectorSource.tsx b/packages/examples/src/examples/FillRasterLayer/CustomVectorSource.tsx index ab8e70b2f..b47f10e09 100755 --- a/packages/examples/src/examples/FillRasterLayer/CustomVectorSource.tsx +++ b/packages/examples/src/examples/FillRasterLayer/CustomVectorSource.tsx @@ -1,18 +1,22 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + FillLayer, + MapView, + VectorSource, +} from "@maplibre/maplibre-react-native"; import { useRef, useState } from "react"; import { Text } from "react-native"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; import { sheet } from "../../styles/sheet"; -export default function CustomVectorSource() { +export function CustomVectorSource() { const vectorSourceRef = useRef(); const [featuresCount, setFeaturesCount] = useState(); return ( <> - - + - - - + + { const features = await vectorSourceRef.current?.features?.([ diff --git a/packages/examples/src/examples/FillRasterLayer/GeoJSONSource.tsx b/packages/examples/src/examples/FillRasterLayer/GeoJSONSource.tsx index 353b4157b..dec7f3727 100755 --- a/packages/examples/src/examples/FillRasterLayer/GeoJSONSource.tsx +++ b/packages/examples/src/examples/FillRasterLayer/GeoJSONSource.tsx @@ -1,30 +1,33 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import type { FeatureCollection } from "geojson"; +import { + BackgroundLayer, + Camera, + FillLayer, + MapView, + ShapeSource, +} from "@maplibre/maplibre-react-native"; +import { type FeatureCollection } from "geojson"; import smileyFeatureCollection from "../../assets/geojson/smiley.json"; import gridPattern from "../../assets/images/maplibre.png"; import { sheet } from "../../styles/sheet"; -export default function GeoJSONSource() { +export function GeoJSONSource() { return ( - - + + - - - - - + + ); } diff --git a/packages/examples/src/examples/FillRasterLayer/ImageOverlay.tsx b/packages/examples/src/examples/FillRasterLayer/ImageOverlay.tsx index 1223ba218..2efb1349a 100755 --- a/packages/examples/src/examples/FillRasterLayer/ImageOverlay.tsx +++ b/packages/examples/src/examples/FillRasterLayer/ImageOverlay.tsx @@ -1,4 +1,9 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + Camera, + ImageSource, + MapView, + RasterLayer, +} from "@maplibre/maplibre-react-native"; import { useEffect, useState } from "react"; import radar0 from "../../assets/images/radar0.png"; @@ -25,7 +30,7 @@ const COORDINATES: [ [-80.425, 37.936], // bottom left ]; -export default function ImageOverlay() { +export function ImageOverlay() { const [index, setIndex] = useState(0); useEffect(() => { @@ -48,16 +53,16 @@ export default function ImageOverlay() { }, []); return ( - - + + - - - - + +
+ ); } diff --git a/packages/examples/src/examples/FillRasterLayer/IndoorBuilding.tsx b/packages/examples/src/examples/FillRasterLayer/IndoorBuilding.tsx index 94bf269a0..be689d7eb 100755 --- a/packages/examples/src/examples/FillRasterLayer/IndoorBuilding.tsx +++ b/packages/examples/src/examples/FillRasterLayer/IndoorBuilding.tsx @@ -1,10 +1,15 @@ -import MapLibreGL, { +import { + Camera, + FillExtrusionLayer, type FillExtrusionLayerStyle, + Light, + MapView, + ShapeSource, } from "@maplibre/maplibre-react-native"; import { useState } from "react"; import indoor3DFeatureCollection from "../../assets/geojson/indoor-3d.json"; -import TabBarView from "../../components/TabBarView"; +import { TabBarView } from "../../components/TabBarView"; import { sheet } from "../../styles/sheet"; const OPTIONS = [-180, -90, 0, 90, 180]; @@ -19,7 +24,7 @@ const layerStyles: { building: FillExtrusionLayerStyle } = { }, }; -export default function IndoorBuilding() { +export function IndoorBuilding() { const [value, setValue] = useState(-90); return ( @@ -31,26 +36,23 @@ export default function IndoorBuilding() { }))} onOptionPress={(_index, data) => setValue(data)} > - - + - + - - - - + + + ); } diff --git a/packages/examples/src/examples/FillRasterLayer/OpenStreetMapRasterTiles.tsx b/packages/examples/src/examples/FillRasterLayer/OpenStreetMapRasterTiles.tsx index 4fcca422d..0f546e753 100755 --- a/packages/examples/src/examples/FillRasterLayer/OpenStreetMapRasterTiles.tsx +++ b/packages/examples/src/examples/FillRasterLayer/OpenStreetMapRasterTiles.tsx @@ -1,14 +1,18 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + MapView, + RasterLayer, + RasterSource, +} from "@maplibre/maplibre-react-native"; import { useState } from "react"; -import TabBarView from "../../components/TabBarView"; +import { TabBarView } from "../../components/TabBarView"; import { OSM_RASTER_STYLE } from "../../constants/OSM_RASTER_STYLE"; import { sheet } from "../../styles/sheet"; const OPTIONS = [0, 0.25, 0.5, 0.75, 1]; const DEFAULT_OPTION = 4; -export default function OpenStreetMapRasterTiles() { +export function OpenStreetMapRasterTiles() { const [value, setValue] = useState(OPTIONS[DEFAULT_OPTION]); return ( @@ -20,18 +24,15 @@ export default function OpenStreetMapRasterTiles() { }))} onOptionPress={(_index, data) => setValue(data)} > - - + - - - + + + ); } diff --git a/packages/examples/src/examples/FillRasterLayer/QueryAtPoint.js b/packages/examples/src/examples/FillRasterLayer/QueryAtPoint.js index d3826c184..32ab24c33 100755 --- a/packages/examples/src/examples/FillRasterLayer/QueryAtPoint.js +++ b/packages/examples/src/examples/FillRasterLayer/QueryAtPoint.js @@ -1,9 +1,15 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; +import { + Camera, + FillLayer, + MapView, + ShapeSource, + StyleURL, +} from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; import { Text } from "react-native"; import newYorkCityDistrictsFeatureCollection from "../../assets/geojson/new-york-city-districts.json"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; import { sheet } from "../../styles/sheet"; const styles = { @@ -20,7 +26,7 @@ const styles = { }, }; -class QueryAtPoint extends React.Component { +export class QueryAtPoint extends Component { constructor(props) { super(props); this.state = this.emptyState; @@ -54,36 +60,27 @@ class QueryAtPoint extends React.Component { render() { return ( <> - (this._map = c)} onPress={this.onPress} style={sheet.matchParent} - styleURL={MapLibreGL.StyleURL.Default} + styleURL={StyleURL.Default} > - + - - - + + + {this.state.selectedGeoJSON ? ( - - + - + ) : null} - + Press on a feature to highlight it. @@ -92,5 +89,3 @@ class QueryAtPoint extends React.Component { ); } } - -export default QueryAtPoint; diff --git a/packages/examples/src/examples/FillRasterLayer/QueryWithRect.js b/packages/examples/src/examples/FillRasterLayer/QueryWithRect.js index 202454845..75141abbb 100755 --- a/packages/examples/src/examples/FillRasterLayer/QueryWithRect.js +++ b/packages/examples/src/examples/FillRasterLayer/QueryWithRect.js @@ -1,9 +1,15 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; +import { + Camera, + FillLayer, + MapView, + ShapeSource, + StyleURL, +} from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; import { Text } from "react-native"; import newYorkCityDistrictsFeatureCollection from "../../assets/geojson/new-york-city-districts.json"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; import { sheet } from "../../styles/sheet"; const styles = { @@ -21,7 +27,7 @@ const styles = { bubbleText: { textAlign: "center" }, }; -class QueryWithRect extends React.Component { +export class QueryWithRect extends Component { constructor(props) { super(props); @@ -75,36 +81,27 @@ class QueryWithRect extends React.Component { render() { return ( <> - (this._map = c)} onPress={this.onPress} style={sheet.matchParent} - styleURL={MapLibreGL.StyleURL.Default} + styleURL={StyleURL.Default} > - + - - - + + + {this.state.selectedGeoJSON ? ( - - + - + ) : null} - + {this.message} @@ -113,5 +110,3 @@ class QueryWithRect extends React.Component { ); } } - -export default QueryWithRect; diff --git a/packages/examples/src/examples/LineLayer/GradientLine.js b/packages/examples/src/examples/LineLayer/GradientLine.js index d35a58109..db0522ce7 100644 --- a/packages/examples/src/examples/LineLayer/GradientLine.js +++ b/packages/examples/src/examples/LineLayer/GradientLine.js @@ -1,5 +1,10 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; +import { + Camera, + LineLayer, + MapView, + ShapeSource, +} from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; import { sheet } from "../../styles/sheet"; @@ -29,15 +34,12 @@ const styles = { }, }; -class GradientLine extends React.Component { +export class GradientLine extends Component { render() { return ( - - - + + - - - + + + ); } } - -export default GradientLine; diff --git a/packages/examples/src/examples/Map/ChangeLayerColor.js b/packages/examples/src/examples/Map/ChangeLayerColor.js index 8417cb9bc..6d30b0f5f 100644 --- a/packages/examples/src/examples/Map/ChangeLayerColor.js +++ b/packages/examples/src/examples/Map/ChangeLayerColor.js @@ -1,8 +1,12 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; +import { + BackgroundLayer, + Camera, + MapView, +} from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; import { Text } from "react-native"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; const defaultCamera = { centerCoordinate: [12.338, 45.4385], @@ -13,7 +17,7 @@ const styles = { mapView: { flex: 1 }, }; -class ChangeLayerColor extends React.Component { +export class ChangeLayerColor extends Component { state = { backgroundColor: "", }; @@ -27,19 +31,16 @@ class ChangeLayerColor extends React.Component { const { backgroundColor } = this.state; return ( <> - (this._map = c)} onPress={this.onPress} style={styles.mapView} > - + {!!backgroundColor && ( - + )} - + Paint Water @@ -47,5 +48,3 @@ class ChangeLayerColor extends React.Component { ); } } - -export default ChangeLayerColor; diff --git a/packages/examples/src/examples/Map/CreateOfflineRegion.tsx b/packages/examples/src/examples/Map/CreateOfflineRegion.tsx index 8214f71ad..0e5214515 100755 --- a/packages/examples/src/examples/Map/CreateOfflineRegion.tsx +++ b/packages/examples/src/examples/Map/CreateOfflineRegion.tsx @@ -1,6 +1,10 @@ import geoViewport from "@mapbox/geo-viewport"; -import MapLibreGL, { +import { + Camera, + MapView, + OfflineManager, OfflinePack, + OfflinePackDownloadState, type OfflinePackError, type OfflinePackStatus, } from "@maplibre/maplibre-react-native"; @@ -14,7 +18,7 @@ import { View, } from "react-native"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; import { AMERICANA_VECTOR_STYLE } from "../../constants/AMERICANA_VECTOR_STYLE"; import { sheet } from "../../styles/sheet"; @@ -50,24 +54,24 @@ const styles = StyleSheet.create({ }, }); -type OfflinePackDownloadState = - (typeof MapLibreGL.OfflinePackDownloadState)[keyof typeof MapLibreGL.OfflinePackDownloadState]; +type CustomOfflinePackDownloadState = + (typeof OfflinePackDownloadState)[keyof typeof OfflinePackDownloadState]; -function getRegionDownloadState(downloadState: OfflinePackDownloadState) { +function getRegionDownloadState(downloadState: CustomOfflinePackDownloadState) { switch (downloadState) { - case MapLibreGL.OfflinePackDownloadState.Active: + case OfflinePackDownloadState.Active: return "Active"; - case MapLibreGL.OfflinePackDownloadState.Complete: + case OfflinePackDownloadState.Complete: return "Complete"; - case MapLibreGL.OfflinePackDownloadState.Inactive: + case OfflinePackDownloadState.Inactive: return "Inactive"; default: return "UNKNOWN"; } } -export default function CreateOfflineRegion() { +export function CreateOfflineRegion() { const [offlineRegionStatus, setOfflineRegionStatus] = useState(null); const [offlinePack, setOfflinePack] = useState(null); @@ -75,7 +79,7 @@ export default function CreateOfflineRegion() { useEffect(() => { return () => { - MapLibreGL.offlineManager.unsubscribe(PACK_NAME); + OfflineManager.unsubscribe(PACK_NAME); }; }, []); @@ -112,16 +116,12 @@ export default function CreateOfflineRegion() { }; // start download - MapLibreGL.offlineManager.createPack( - options, - onDownloadProgress, - onDownloadError, - ); + OfflineManager.createPack(options, onDownloadProgress, onDownloadError); } async function onDidFinishLoadingStyle() { try { - const pack = await MapLibreGL.offlineManager.getPack(PACK_NAME); + const pack = await OfflineManager.getPack(PACK_NAME); if (!pack) { return; @@ -157,7 +157,7 @@ export default function CreateOfflineRegion() { return; } - await MapLibreGL.offlineManager.deletePack(PACK_NAME); + await OfflineManager.deletePack(PACK_NAME); setOfflinePack(null); setOfflineRegionStatus(null); @@ -179,18 +179,18 @@ export default function CreateOfflineRegion() { return ( <> - - - + {!isLoading && ( diff --git a/packages/examples/src/examples/Map/LocalStyleJSON.tsx b/packages/examples/src/examples/Map/LocalStyleJSON.tsx index ab75bc8bd..91144d624 100644 --- a/packages/examples/src/examples/Map/LocalStyleJSON.tsx +++ b/packages/examples/src/examples/Map/LocalStyleJSON.tsx @@ -4,10 +4,10 @@ import { Text } from "react-native"; import MapLibreDemoTilesBlue from "../../assets/styles/maplibre-demo-tiles-blue.json"; import MapLibreDemoTilesWhite from "../../assets/styles/maplibre-demo-tiles-white.json"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; import { sheet } from "../../styles/sheet"; -export default function LocalStyleJSON() { +export function LocalStyleJSON() { const [color, setColor] = useState<"blue" | "white">("blue"); return ( diff --git a/packages/examples/src/examples/Map/PointInMapView.js b/packages/examples/src/examples/Map/PointInMapView.js index 381ff9914..a897dcd89 100755 --- a/packages/examples/src/examples/Map/PointInMapView.js +++ b/packages/examples/src/examples/Map/PointInMapView.js @@ -1,14 +1,14 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; +import { Camera, MapView } from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; import { Text } from "react-native"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; const styles = { mapView: { flex: 1 }, }; -class PointInMapView extends React.Component { +export class PointInMapView extends Component { constructor(props) { super(props); @@ -38,21 +38,16 @@ class PointInMapView extends React.Component { render() { return ( <> - (this._map = c)} onPress={this.onPress} style={styles.mapView} > - - + + {this.renderPointInView()} ); } } - -export default PointInMapView; diff --git a/packages/examples/src/examples/Map/SetTintColor.tsx b/packages/examples/src/examples/Map/SetTintColor.tsx index 86b2b13e2..6de8f88d3 100644 --- a/packages/examples/src/examples/Map/SetTintColor.tsx +++ b/packages/examples/src/examples/Map/SetTintColor.tsx @@ -1,7 +1,12 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + Camera, + MapView, + UserLocation, + UserTrackingMode, +} from "@maplibre/maplibre-react-native"; import { useState } from "react"; -import TabBarView from "../../components/TabBarView"; +import { TabBarView } from "../../components/TabBarView"; import { sheet } from "../../styles/sheet"; const OPTIONS = ["red", "yellow", "green"].map((data) => ({ @@ -9,7 +14,7 @@ const OPTIONS = ["red", "yellow", "green"].map((data) => ({ data, })); -export default function SetTintColor() { +export function SetTintColor() { const [tintColor, setTintColor] = useState(OPTIONS[0]!.data); return ( @@ -19,18 +24,15 @@ export default function SetTintColor() { setTintColor(data); }} > - - + - - + + ); } diff --git a/packages/examples/src/examples/Map/ShowAndHideLayer.js b/packages/examples/src/examples/Map/ShowAndHideLayer.js index f3f3e5933..4509b7624 100644 --- a/packages/examples/src/examples/Map/ShowAndHideLayer.js +++ b/packages/examples/src/examples/Map/ShowAndHideLayer.js @@ -1,8 +1,8 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; +import { Camera, FillLayer, MapView } from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; import { Text } from "react-native"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; const defaultCamera = { centerCoordinate: [-77.036532, 38.897318], @@ -13,7 +13,7 @@ const styles = { mapView: { flex: 1 }, }; -class ShowAndHideLayer extends React.Component { +export class ShowAndHideLayer extends Component { state = { show: true, }; @@ -28,14 +28,14 @@ class ShowAndHideLayer extends React.Component { const visibility = this.state.show ? "visible" : "none"; return ( <> - (this._map = c)} onPress={this.onPress} style={styles.mapView} > - - - + + + {this.state.show ? "Hide Country Labels" : "Show Country Labels"} @@ -45,5 +45,3 @@ class ShowAndHideLayer extends React.Component { ); } } - -export default ShowAndHideLayer; diff --git a/packages/examples/src/examples/Map/ShowClick.js b/packages/examples/src/examples/Map/ShowClick.js index 52e56d8a9..b0261172d 100755 --- a/packages/examples/src/examples/Map/ShowClick.js +++ b/packages/examples/src/examples/Map/ShowClick.js @@ -1,11 +1,11 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; +import { MapView } from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; import { Text } from "react-native"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; import { sheet } from "../../styles/sheet"; -class ShowClick extends React.Component { +export class ShowClick extends Component { constructor(props) { super(props); @@ -59,11 +59,9 @@ class ShowClick extends React.Component { render() { return ( <> - + {this.renderLastClicked()} ); } } - -export default ShowClick; diff --git a/packages/examples/src/examples/Map/ShowMap.tsx b/packages/examples/src/examples/Map/ShowMap.tsx index b6b9d4ff6..1a314d1f3 100755 --- a/packages/examples/src/examples/Map/ShowMap.tsx +++ b/packages/examples/src/examples/Map/ShowMap.tsx @@ -1,7 +1,7 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { MapView } from "@maplibre/maplibre-react-native"; import { sheet } from "../../styles/sheet"; -export default function ShowMap() { - return ; +export function ShowMap() { + return ; } diff --git a/packages/examples/src/examples/Map/ShowRegionDidChange.js b/packages/examples/src/examples/Map/ShowRegionDidChange.js index c268286b5..02baf7015 100644 --- a/packages/examples/src/examples/Map/ShowRegionDidChange.js +++ b/packages/examples/src/examples/Map/ShowRegionDidChange.js @@ -1,9 +1,9 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; +import { Camera, MapView } from "@maplibre/maplibre-react-native"; +import React, { Component } from "react"; import { Text } from "react-native"; -import Bubble from "../../components/Bubble"; -import TabBarView from "../../components/TabBarView"; +import { Bubble } from "../../components/Bubble"; +import { TabBarView } from "../../components/TabBarView"; import { EU_BOUNDS, EU_CENTER_COORDINATES } from "../../constants/GEOMETRIES"; import { sheet } from "../../styles/sheet"; @@ -18,7 +18,7 @@ const isValidCoordinate = (geometry) => { return geometry.coordinates[0] !== 0 && geometry.coordinates[1] !== 0; }; -class ShowRegionDidChange extends React.Component { +export class ShowRegionDidChange extends Component { constructor(props) { super(props); @@ -128,19 +128,17 @@ class ShowRegionDidChange extends React.Component { options={this._tabOptions} onOptionPress={this.onOptionPress} > - (this.map = c)} style={sheet.matchParent} onRegionWillChange={this.onRegionWillChange} onRegionIsChanging={this.onRegionIsChanging} onRegionDidChange={this.onRegionDidChange} > - - + + {this.renderRegionChange()} ); } } - -export default ShowRegionDidChange; diff --git a/packages/examples/src/examples/Map/SourceLayerVisibility.tsx b/packages/examples/src/examples/Map/SourceLayerVisibility.tsx index 30b78d471..a92f4208b 100755 --- a/packages/examples/src/examples/Map/SourceLayerVisibility.tsx +++ b/packages/examples/src/examples/Map/SourceLayerVisibility.tsx @@ -1,17 +1,17 @@ -import MapLibreGL, { type MapViewRef } from "@maplibre/maplibre-react-native"; +import { MapView, type MapViewRef } from "@maplibre/maplibre-react-native"; import { useRef, useState } from "react"; import { Text } from "react-native"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; import { sheet } from "../../styles/sheet"; -export default function SourceLayerVisibility() { +export function SourceLayerVisibility() { const mapViewRef = useRef(null); const [visible, setVisible] = useState(true); return ( <> - + { mapViewRef.current?.setSourceVisibility( diff --git a/packages/examples/src/examples/Map/TwoMapViews.tsx b/packages/examples/src/examples/Map/TwoMapViews.tsx index a319e5894..6cb096a18 100755 --- a/packages/examples/src/examples/Map/TwoMapViews.tsx +++ b/packages/examples/src/examples/Map/TwoMapViews.tsx @@ -1,5 +1,9 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import type { FeatureCollection } from "geojson"; +import { + FillLayer, + MapView, + ShapeSource, +} from "@maplibre/maplibre-react-native"; +import { type FeatureCollection } from "geojson"; import smileyFeatureCollection from "../../assets/geojson/smiley.json"; import { sheet } from "../../styles/sheet"; @@ -17,20 +21,20 @@ const layerStyles = { }, }; -export default function TwoMapViews() { +export function TwoMapViews() { return ( <> {[layerStyles.smileyFaceDark, layerStyles.smileyFaceLight].map( (style) => { return ( - - + - - - + + + ); }, )} diff --git a/packages/examples/src/examples/SymbolCircleLayer/CustomIcon.js b/packages/examples/src/examples/SymbolCircleLayer/CustomIcon.js index 8bcf40ebf..e8aadf38c 100755 --- a/packages/examples/src/examples/SymbolCircleLayer/CustomIcon.js +++ b/packages/examples/src/examples/SymbolCircleLayer/CustomIcon.js @@ -1,10 +1,14 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + MapView, + ShapeSource, + SymbolLayer, +} from "@maplibre/maplibre-react-native"; import { feature, featureCollection } from "@turf/helpers"; -import React from "react"; +import React, { Component } from "react"; import { Text } from "react-native"; import maplibreIcon from "../../assets/images/maplibre.png"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; import { sheet } from "../../styles/sheet"; const styles = { @@ -14,7 +18,7 @@ const styles = { }, }; -class CustomIcon extends React.Component { +export class CustomIcon extends Component { constructor(props) { super(props); @@ -50,23 +54,20 @@ class CustomIcon extends React.Component { render() { return ( <> - (this._map = c)} onPress={this.onPress} style={sheet.matchParent} > - - - - + + + Tap to add an icon @@ -75,5 +76,3 @@ class CustomIcon extends React.Component { ); } } - -export default CustomIcon; diff --git a/packages/examples/src/examples/SymbolCircleLayer/DataDrivenCircleColors.js b/packages/examples/src/examples/SymbolCircleLayer/DataDrivenCircleColors.js index b8ed769d3..fb00c6cb4 100755 --- a/packages/examples/src/examples/SymbolCircleLayer/DataDrivenCircleColors.js +++ b/packages/examples/src/examples/SymbolCircleLayer/DataDrivenCircleColors.js @@ -1,5 +1,11 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; -import React from "react"; +import { + CircleLayer, + Camera, + MapView, + StyleURL, + VectorSource, +} from "@maplibre/maplibre-react-native"; +import React, { memo } from "react"; import { sheet } from "../../styles/sheet"; @@ -33,25 +39,23 @@ const styles = { function DataDrivenCircleColors() { return ( - - + - - + - - + + ); } -export default React.memo(DataDrivenCircleColors); +const MemoDataDrivenCircleColors = memo(DataDrivenCircleColors); +export { MemoDataDrivenCircleColors as DataDrivenCircleColors }; diff --git a/packages/examples/src/examples/SymbolCircleLayer/Earthquakes.tsx b/packages/examples/src/examples/SymbolCircleLayer/Earthquakes.tsx index aa1da9342..6663b0fe6 100755 --- a/packages/examples/src/examples/SymbolCircleLayer/Earthquakes.tsx +++ b/packages/examples/src/examples/SymbolCircleLayer/Earthquakes.tsx @@ -1,6 +1,10 @@ -import MapLibreGL, { +import { + CircleLayer, type CircleLayerStyle, + MapView, + ShapeSource, type ShapeSourceRef, + SymbolLayer, type SymbolLayerStyle, } from "@maplibre/maplibre-react-native"; import moment from "moment"; @@ -117,7 +121,7 @@ const mag3 = ["all", [">=", ["get", "mag"], 3], ["<", ["get", "mag"], 4]]; const mag4 = ["all", [">=", ["get", "mag"], 4], ["<", ["get", "mag"], 5]]; const mag5 = [">=", ["get", "mag"], 5]; -export default function Earthquakes() { +export function Earthquakes() { const shapeSource = useRef(null); const [cluster, setCluster] = useState(); @@ -180,8 +184,8 @@ export default function Earthquakes() { <> - - + - - - - - + + ); diff --git a/packages/examples/src/examples/SymbolCircleLayer/ShapeSourceIcon.tsx b/packages/examples/src/examples/SymbolCircleLayer/ShapeSourceIcon.tsx index f942d3481..cce802490 100755 --- a/packages/examples/src/examples/SymbolCircleLayer/ShapeSourceIcon.tsx +++ b/packages/examples/src/examples/SymbolCircleLayer/ShapeSourceIcon.tsx @@ -1,18 +1,23 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + Images, + MapView, + ShapeSource, + SymbolLayer, +} from "@maplibre/maplibre-react-native"; import { useState } from "react"; import maplibreIcon from "../../assets/images/maplibre.png"; import { FEATURE_COLLECTION } from "../../constants/GEOMETRIES"; import { sheet } from "../../styles/sheet"; -export default function ShapeSourceIcon() { +export function ShapeSourceIcon() { const [images, setImages] = useState({ [FEATURE_COLLECTION.features[0]!.properties.name]: maplibreIcon, }); return ( - - + setImages((prevState) => ({ @@ -21,14 +26,14 @@ export default function ShapeSourceIcon() { })) } /> - - + - - + + ); } diff --git a/packages/examples/src/examples/UserLocation/FollowUserLocationAlignment.tsx b/packages/examples/src/examples/UserLocation/FollowUserLocationAlignment.tsx index 6faab15eb..de4f13a37 100755 --- a/packages/examples/src/examples/UserLocation/FollowUserLocationAlignment.tsx +++ b/packages/examples/src/examples/UserLocation/FollowUserLocationAlignment.tsx @@ -1,7 +1,7 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { Camera, MapView, UserLocation } from "@maplibre/maplibre-react-native"; import { useState } from "react"; -import TabBarView from "../../components/TabBarView"; +import { TabBarView } from "../../components/TabBarView"; import { sheet } from "../../styles/sheet"; enum Alignment { @@ -15,7 +15,7 @@ const INSETS: Record = { [Alignment.Bottom]: [300, 0, 0, 0], }; -export default function FollowUserLocationAlignment() { +export function FollowUserLocationAlignment() { const [alignment, setAlignment] = useState(Alignment.Center); return ( @@ -29,13 +29,10 @@ export default function FollowUserLocationAlignment() { setAlignment(data); }} > - - - - + + + + ); } diff --git a/packages/examples/src/examples/UserLocation/FollowUserLocationRenderMode.tsx b/packages/examples/src/examples/UserLocation/FollowUserLocationRenderMode.tsx index 389cb81cf..31fa7e727 100755 --- a/packages/examples/src/examples/UserLocation/FollowUserLocationRenderMode.tsx +++ b/packages/examples/src/examples/UserLocation/FollowUserLocationRenderMode.tsx @@ -1,4 +1,8 @@ -import MapLibreGL, { +import { + Camera, + CircleLayer, + MapView, + UserLocation, UserLocationRenderMode, UserTrackingMode, } from "@maplibre/maplibre-react-native"; @@ -6,7 +10,7 @@ import { type ReactNode, useState } from "react"; import { Button, Platform, Text, View } from "react-native"; import { ButtonGroup } from "../../components/ButtonGroup"; -import MapSafeAreaView from "../../components/MapSafeAreaView"; +import { MapSafeAreaView } from "../../components/MapSafeAreaView"; import { OSM_RASTER_STYLE } from "../../constants/OSM_RASTER_STYLE"; import { sheet } from "../../styles/sheet"; @@ -42,7 +46,7 @@ const ANDROID_RENDER_MODES: ("normal" | "compass" | "gps")[] = [ "gps", ]; -export default function FollowUserLocationRenderMode() { +export function FollowUserLocationRenderMode() { const [renderMode, setRenderMode] = useState( ExampleRenderMode.Normal, ); @@ -96,8 +100,8 @@ export default function FollowUserLocationRenderMode() { )} - - + - {renderMode === ExampleRenderMode.CustomChildren ? [ - , - , ] : undefined} - - + + ({ label: data + " FPS", data })); -export default function SetAndroidPreferredFramesPerSecond() { +export function SetAndroidPreferredFramesPerSecond() { const [androidPreferredFramesPerSecond, setAndroidPreferredFramesPerSecond] = useState(OPTIONS[0]?.data); useEffect(() => { - MapLibreGL.locationManager.start(); + LocationManager.start(); return () => { - MapLibreGL.locationManager.stop(); + LocationManager.stop(); }; }, []); @@ -25,15 +30,15 @@ export default function SetAndroidPreferredFramesPerSecond() { setAndroidPreferredFramesPerSecond(data); }} > - - + + - - + ); } diff --git a/packages/examples/src/examples/UserLocation/UserLocationDisplacement.tsx b/packages/examples/src/examples/UserLocation/UserLocationDisplacement.tsx index 3f4d9f504..fd00d3fc9 100644 --- a/packages/examples/src/examples/UserLocation/UserLocationDisplacement.tsx +++ b/packages/examples/src/examples/UserLocation/UserLocationDisplacement.tsx @@ -1,19 +1,25 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + Camera, + LocationManager, + MapView, + UserLocation, + UserTrackingMode, +} from "@maplibre/maplibre-react-native"; import { useEffect, useState } from "react"; -import TabBarView from "../../components/TabBarView"; +import { TabBarView } from "../../components/TabBarView"; import { sheet } from "../../styles/sheet"; const OPTIONS = [0, 5, 10].map((data) => ({ label: data + " Meter", data })); -export default function UserLocationDisplacement() { +export function UserLocationDisplacement() { const [minDisplacement, setMinDisplacement] = useState(OPTIONS[0]!.data); useEffect(() => { - MapLibreGL.locationManager.start(); + LocationManager.start(); return () => { - MapLibreGL.locationManager.stop(); + LocationManager.stop(); }; }, []); @@ -24,15 +30,15 @@ export default function UserLocationDisplacement() { setMinDisplacement(data); }} > - - + - - + + ); } diff --git a/packages/examples/src/examples/UserLocation/UserLocationUpdate.tsx b/packages/examples/src/examples/UserLocation/UserLocationUpdate.tsx index f9fe33b24..f352fb88a 100755 --- a/packages/examples/src/examples/UserLocation/UserLocationUpdate.tsx +++ b/packages/examples/src/examples/UserLocation/UserLocationUpdate.tsx @@ -1,21 +1,24 @@ -import MapLibreGL from "@maplibre/maplibre-react-native"; +import { + Camera, + type Location, + MapView, + UserLocation, +} from "@maplibre/maplibre-react-native"; import { useState } from "react"; import { Text } from "react-native"; -import Bubble from "../../components/Bubble"; +import { Bubble } from "../../components/Bubble"; import { sheet } from "../../styles/sheet"; -export default function UserLocationUpdate() { - const [location, setLocation] = useState(); +export function UserLocationUpdate() { + const [location, setLocation] = useState(); return ( <> - - setLocation(newLocation)} - /> - - + + setLocation(newLocation)} /> + + {location && ( diff --git a/packages/examples/src/examples/index.ts b/packages/examples/src/examples/index.ts index bf11827db..50f79a0df 100644 --- a/packages/examples/src/examples/index.ts +++ b/packages/examples/src/examples/index.ts @@ -1,58 +1,58 @@ // @ts-nocheck // ANIMATIONS -export { default as AnimatedLine } from "./Animations/AnimatedLine"; -export { default as AnimateCircleAlongLine } from "./Animations/AnimateCircleAlongLine"; +export { AnimatedLine } from "./Animations/AnimatedLine"; +export { AnimateCircleAlongLine } from "./Animations/AnimateCircleAlongLine"; // ANNOTATIONS -export { default as CustomCallout } from "./Annotations/CustomCallout"; -export { default as Heatmap } from "./Annotations/Heatmap"; -export { default as MarkerView } from "./Annotations/MarkerView"; -export { default as ShowPointAnnotation } from "./Annotations/ShowPointAnnotation"; -export { default as PointAnnotationAnchors } from "./Annotations/PointAnnotationAnchors"; +export { CustomCallout } from "./Annotations/CustomCallout"; +export { Heatmap } from "./Annotations/Heatmap"; +export { MarkerView } from "./Annotations/MarkerView"; +export { ShowPointAnnotation } from "./Annotations/ShowPointAnnotation"; +export { PointAnnotationAnchors } from "./Annotations/PointAnnotationAnchors"; // CAMERA -export { default as CompassView } from "./Camera/CompassView"; -export { default as Fit } from "./Camera/Fit"; -export { default as FlyTo } from "./Camera/FlyTo"; -export { default as GetCenter } from "./Camera/GetCenter"; -export { default as GetZoom } from "./Camera/GetZoom"; -export { default as RestrictMapBounds } from "./Camera/RestrictMapBounds"; -export { default as SetHeading } from "./Camera/SetHeading"; -export { default as SetPitch } from "./Camera/SetPitch"; -export { default as TakeSnapshot } from "./Camera/TakeSnapshot"; -export { default as TakeSnapshotWithMap } from "./Camera/TakeSnapshotWithMap"; -export { default as YoYo } from "./Camera/YoYo"; +export { CompassView } from "./Camera/CompassView"; +export { Fit } from "./Camera/Fit"; +export { FlyTo } from "./Camera/FlyTo"; +export { GetCenter } from "./Camera/GetCenter"; +export { GetZoom } from "./Camera/GetZoom"; +export { RestrictMapBounds } from "./Camera/RestrictMapBounds"; +export { SetHeading } from "./Camera/SetHeading"; +export { SetPitch } from "./Camera/SetPitch"; +export { TakeSnapshot } from "./Camera/TakeSnapshot"; +export { TakeSnapshotWithMap } from "./Camera/TakeSnapshotWithMap"; +export { YoYo } from "./Camera/YoYo"; // FILLRASTERLAYER -export { default as CustomVectorSource } from "./FillRasterLayer/CustomVectorSource"; -export { default as GeoJSONSource } from "./FillRasterLayer/GeoJSONSource"; -export { default as ImageOverlay } from "./FillRasterLayer/ImageOverlay"; -export { default as IndoorBuilding } from "./FillRasterLayer/IndoorBuilding"; -export { default as QueryAtPoint } from "./FillRasterLayer/QueryAtPoint"; -export { default as QueryWithRect } from "./FillRasterLayer/QueryWithRect"; -export { default as OpenStreetMapRasterTiles } from "./FillRasterLayer/OpenStreetMapRasterTiles"; +export { CustomVectorSource } from "./FillRasterLayer/CustomVectorSource"; +export { GeoJSONSource } from "./FillRasterLayer/GeoJSONSource"; +export { ImageOverlay } from "./FillRasterLayer/ImageOverlay"; +export { IndoorBuilding } from "./FillRasterLayer/IndoorBuilding"; +export { QueryAtPoint } from "./FillRasterLayer/QueryAtPoint"; +export { QueryWithRect } from "./FillRasterLayer/QueryWithRect"; +export { OpenStreetMapRasterTiles } from "./FillRasterLayer/OpenStreetMapRasterTiles"; // LINE LAYER -export { default as GradientLine } from "./LineLayer/GradientLine"; +export { GradientLine } from "./LineLayer/GradientLine"; // MAP -export { default as ChangeLayerColor } from "./Map/ChangeLayerColor"; -export { default as CreateOfflineRegion } from "./Map/CreateOfflineRegion"; -export { default as PointInMapView } from "./Map/PointInMapView"; -export { default as ShowAndHideLayer } from "./Map/ShowAndHideLayer"; -export { default as ShowClick } from "./Map/ShowClick"; -export { default as ShowMap } from "./Map/ShowMap"; -export { default as LocalStyleJSON } from "./Map/LocalStyleJSON"; -export { default as ShowRegionDidChange } from "./Map/ShowRegionDidChange"; -export { default as SourceLayerVisibility } from "./Map/SourceLayerVisibility"; -export { default as TwoMapViews } from "./Map/TwoMapViews"; -export { default as SetTintColor } from "./Map/SetTintColor"; +export { ChangeLayerColor } from "./Map/ChangeLayerColor"; +export { CreateOfflineRegion } from "./Map/CreateOfflineRegion"; +export { PointInMapView } from "./Map/PointInMapView"; +export { ShowAndHideLayer } from "./Map/ShowAndHideLayer"; +export { ShowClick } from "./Map/ShowClick"; +export { ShowMap } from "./Map/ShowMap"; +export { LocalStyleJSON } from "./Map/LocalStyleJSON"; +export { ShowRegionDidChange } from "./Map/ShowRegionDidChange"; +export { SourceLayerVisibility } from "./Map/SourceLayerVisibility"; +export { TwoMapViews } from "./Map/TwoMapViews"; +export { SetTintColor } from "./Map/SetTintColor"; // SYMBOLCIRCLELAYER -export { default as CustomIcon } from "./SymbolCircleLayer/CustomIcon"; -export { default as DataDrivenCircleColors } from "./SymbolCircleLayer/DataDrivenCircleColors"; -export { default as Earthquakes } from "./SymbolCircleLayer/Earthquakes"; -export { default as ShapeSourceIcon } from "./SymbolCircleLayer/ShapeSourceIcon"; +export { CustomIcon } from "./SymbolCircleLayer/CustomIcon"; +export { DataDrivenCircleColors } from "./SymbolCircleLayer/DataDrivenCircleColors"; +export { Earthquakes } from "./SymbolCircleLayer/Earthquakes"; +export { ShapeSourceIcon } from "./SymbolCircleLayer/ShapeSourceIcon"; // USERLOCATION -export { default as FollowUserLocationRenderMode } from "./UserLocation/FollowUserLocationRenderMode"; -export { default as FollowUserLocationAlignment } from "./UserLocation/FollowUserLocationAlignment"; -export { default as SetAndroidPreferredFramesPerSecond } from "./UserLocation/SetAndroidPreferredFramesPerSecond"; -export { default as UserLocationDisplacement } from "./UserLocation/UserLocationDisplacement"; -export { default as UserLocationUpdate } from "./UserLocation/UserLocationUpdate"; +export { FollowUserLocationRenderMode } from "./UserLocation/FollowUserLocationRenderMode"; +export { FollowUserLocationAlignment } from "./UserLocation/FollowUserLocationAlignment"; +export { SetAndroidPreferredFramesPerSecond } from "./UserLocation/SetAndroidPreferredFramesPerSecond"; +export { UserLocationDisplacement } from "./UserLocation/UserLocationDisplacement"; +export { UserLocationUpdate } from "./UserLocation/UserLocationUpdate"; // MISC -export { default as BugReport } from "./BugReport"; -export { default as CacheManagement } from "./CacheManagement"; +export { BugReport } from "./BugReport"; +export { CacheManagement } from "./CacheManagement"; diff --git a/packages/examples/src/utils/RouteSimulator.ts b/packages/examples/src/utils/RouteSimulator.ts index 33c6e5aef..e1e885068 100755 --- a/packages/examples/src/utils/RouteSimulator.ts +++ b/packages/examples/src/utils/RouteSimulator.ts @@ -61,7 +61,7 @@ class Polyline { } } -class RouteSimulator { +export class RouteSimulator { private readonly polyline: Polyline; private previousDistance: number; private currentDistance: number; @@ -151,5 +151,3 @@ class RouteSimulator { this.listener?.(pointFeature); } } - -export default RouteSimulator; diff --git a/packages/expo-app/index.js b/packages/expo-app/index.js index d2030392b..a88d16f24 100644 --- a/packages/expo-app/index.js +++ b/packages/expo-app/index.js @@ -1,4 +1,4 @@ -import App from "@maplibre-react-native/examples"; +import { App } from "@maplibre-react-native/examples"; import { registerRootComponent } from "expo"; registerRootComponent(App); diff --git a/packages/react-native-app/e2e/show-map.yml b/packages/react-native-app/e2e/show-map.yml index 1a810e91e..74df9acee 100644 --- a/packages/react-native-app/e2e/show-map.yml +++ b/packages/react-native-app/e2e/show-map.yml @@ -10,7 +10,7 @@ appId: org.maplibre.reactnative.example platform: Android commands: - tapOn: "Attribution icon. Activate to show attribution dialog." - - assertVisible: "MapLibre Maps SDK for Android" + - assertVisible: "MapLibre Android" - runFlow: when: diff --git a/packages/react-native-app/index.js b/packages/react-native-app/index.js index 47bf771d3..0268d26ba 100644 --- a/packages/react-native-app/index.js +++ b/packages/react-native-app/index.js @@ -1,4 +1,4 @@ -import App from "@maplibre-react-native/examples"; +import { App } from "@maplibre-react-native/examples"; import { AppRegistry } from "react-native"; import { name as appName } from "./app.json"; diff --git a/packages/react-native-app/ios/MapLibreReactNativeExample.xcodeproj/project.pbxproj b/packages/react-native-app/ios/MapLibreReactNativeExample.xcodeproj/project.pbxproj index 391442e79..542524186 100644 --- a/packages/react-native-app/ios/MapLibreReactNativeExample.xcodeproj/project.pbxproj +++ b/packages/react-native-app/ios/MapLibreReactNativeExample.xcodeproj/project.pbxproj @@ -140,10 +140,6 @@ attributes = { LastUpgradeCheck = 1210; TargetAttributes = { - 00E356ED1AD99517003FC87E = { - CreatedOnToolsVersion = 6.2; - TestTargetID = 13B07F861A680F5B00A75B9A; - }; 13B07F861A680F5B00A75B9A = { LastSwiftMigration = 1120; }; @@ -506,7 +502,7 @@ repositoryURL = "https://github.com/maplibre/maplibre-gl-native-distribution"; requirement = { kind = exactVersion; - version = 6.5.4; + version = 6.9.0; }; }; /* End XCRemoteSwiftPackageReference section */ diff --git a/packages/react-native-app/ios/MapLibreReactNativeExample.xcworkspace/xcshareddata/swiftpm/Package.resolved b/packages/react-native-app/ios/MapLibreReactNativeExample.xcworkspace/xcshareddata/swiftpm/Package.resolved index 6b466cb47..2992eff4c 100644 --- a/packages/react-native-app/ios/MapLibreReactNativeExample.xcworkspace/xcshareddata/swiftpm/Package.resolved +++ b/packages/react-native-app/ios/MapLibreReactNativeExample.xcworkspace/xcshareddata/swiftpm/Package.resolved @@ -6,8 +6,8 @@ "kind" : "remoteSourceControl", "location" : "https://github.com/maplibre/maplibre-gl-native-distribution", "state" : { - "revision" : "abe762f1e19e03a4c6943d2aad92c219da384b29", - "version" : "6.5.4" + "revision" : "93cb32c95b48f62edb27c75792038849cdfdaa35", + "version" : "6.9.0" } } ], diff --git a/scripts/codegen.ts b/scripts/codegen.ts index 2c16cf88d..28cb3d23f 100644 --- a/scripts/codegen.ts +++ b/scripts/codegen.ts @@ -118,7 +118,13 @@ async function generate() { }, ); - return layoutProps.concat(paintProps); + const props = [...layoutProps, ...paintProps]; + + return props.filter((prop) => { + // TODO: Codegen adoptions for native style code + // https://github.com/maplibre/maplibre-react-native/issues/562 + return !["textVariableAnchorOffset"].includes(prop.name); + }); } function getSupportedLayers() { diff --git a/scripts/templates/MapLibreRNStyles.ts.ejs b/scripts/templates/MapLibreRNStyles.ts.ejs index c4cabeed8..d7bb7e3f8 100644 --- a/scripts/templates/MapLibreRNStyles.ts.ejs +++ b/scripts/templates/MapLibreRNStyles.ts.ejs @@ -14,7 +14,8 @@ export interface Transition { delay: number; } -export type FormattedString = string; /* TODO */ +<% /* TODO */ %> +export type FormattedString = string; export type ExpressionName = // Types diff --git a/scripts/templates/component.md.ejs b/scripts/templates/component.md.ejs index c3e6599cf..b2032f9dc 100644 --- a/scripts/templates/component.md.ejs +++ b/scripts/templates/component.md.ejs @@ -4,7 +4,7 @@ -%> -# ` />` +# `<<%- component.name %> />` <%- helpers.replaceNewLine(component.description) %> <%_ if (component.props && component.props.length) { _%> diff --git a/src/MLRNModule.ts b/src/MLRNModule.ts index b3aa1d283..473cfe1ae 100644 --- a/src/MLRNModule.ts +++ b/src/MLRNModule.ts @@ -22,7 +22,7 @@ interface IMLRNModule { }; StyleURL: { - Default: URL; + Default: string; }; setAccessToken(accessToken: string | null): Promise; diff --git a/src/MapLibreRN.ts b/src/MapLibreRN.ts deleted file mode 100644 index 424222148..000000000 --- a/src/MapLibreRN.ts +++ /dev/null @@ -1,69 +0,0 @@ -export * from "./MLRNModule"; -export { - default as Camera, - UserTrackingMode, - type CameraPadding, - type CameraAnimationMode, - type CameraBounds, - type CameraRef, -} from "./components/Camera"; -export { - default as MapView, - type MapViewRef, - type RegionPayload, -} from "./components/MapView"; -export { default as Light } from "./components/Light"; -export { default as PointAnnotation } from "./components/PointAnnotation"; -export type { PointAnnotationRef } from "./components/PointAnnotation"; -export { default as Annotation } from "./components/Annotation"; -export { default as Callout } from "./components/Callout"; -export { requestAndroidLocationPermissions } from "./requestAndroidLocationPermissions"; -export { - default as UserLocation, - UserLocationRenderMode, -} from "./components/UserLocation"; -export type { UserLocationRef } from "./components/UserLocation"; -export { default as VectorSource } from "./components/VectorSource"; -export { default as ShapeSource } from "./components/ShapeSource"; -export type { ShapeSourceRef } from "./components/ShapeSource"; -export { default as RasterSource } from "./components/RasterSource"; -export { default as ImageSource } from "./components/ImageSource"; -export { default as Images } from "./components/Images"; -export { default as FillLayer } from "./components/FillLayer"; -export { default as FillExtrusionLayer } from "./components/FillExtrusionLayer"; -export { default as HeatmapLayer } from "./components/HeatmapLayer"; -export { default as LineLayer } from "./components/LineLayer"; -export { default as CircleLayer } from "./components/CircleLayer"; -export { default as SymbolLayer } from "./components/SymbolLayer"; -export { default as RasterLayer } from "./components/RasterLayer"; -export { default as BackgroundLayer } from "./components/BackgroundLayer"; -export { default as MarkerView } from "./components/MarkerView"; - -export { - default as locationManager, - type Location, -} from "./modules/location/locationManager"; -export { default as offlineManager } from "./modules/offline/offlineManager"; -export type { OfflinePackError } from "./modules/offline/offlineManager"; -export type { OfflinePackStatus } from "./modules/offline/OfflinePack"; -export { default as OfflinePack } from "./modules/offline/OfflinePack"; -export { default as OfflineCreatePackOptions } from "./modules/offline/OfflineCreatePackOptions"; -export { default as snapshotManager } from "./modules/snapshot/snapshotManager"; -export type { SnapshotInputOptions } from "./modules/snapshot/SnapshotOptions"; - -export type { MapLibreRNEvent } from "./types/MapLibreRNEvent"; - -export { default as Animated } from "./utils/animated/Animated"; -export { default as Logger, type LogLevel } from "./utils/Logger"; -export type { - FillLayerStyle, - LineLayerStyle, - SymbolLayerStyle, - CircleLayerStyle, - HeatmapLayerStyle, - FillExtrusionLayerStyle, - RasterLayerStyle, - HillshadeLayerStyle, - BackgroundLayerStyle, - LightLayerStyle, -} from "./types/MapLibreRNStyles"; diff --git a/src/components/Annotation.tsx b/src/components/Annotation.tsx index 6b93fab76..5795b63fe 100644 --- a/src/components/Annotation.tsx +++ b/src/components/Annotation.tsx @@ -1,6 +1,6 @@ import { forwardRef, - type ReactElement, + type ReactNode, useCallback, useEffect, useImperativeHandle, @@ -8,11 +8,11 @@ import { } from "react"; import { Animated as RNAnimated, Easing } from "react-native"; -import SymbolLayer from "./SymbolLayer"; +import { SymbolLayer } from "./SymbolLayer"; import { type SymbolLayerStyle } from "../types/MapLibreRNStyles"; import { type OnPressEvent } from "../types/OnPressEvent"; import { AnimatedShapeSource } from "../utils/animated/Animated"; -import AnimatedMapPoint from "../utils/animated/AnimatedPoint"; +import { AnimatedPoint } from "../utils/animated/AnimatedPoint"; interface AnnotationProps { id: string; @@ -21,12 +21,12 @@ interface AnnotationProps { animationEasingFunction?(x: number): number; coordinates?: number[]; onPress?(event: OnPressEvent): void; - children?: ReactElement | ReactElement[]; + children?: ReactNode; style?: object; icon?: string | number | object; } -type Shape = AnimatedMapPoint | GeoJSON.Point; +type Shape = AnimatedPoint | GeoJSON.Point; function getShapeFromProps(props: Partial = {}): Shape { const lng = props.coordinates?.[0] || 0; @@ -34,14 +34,14 @@ function getShapeFromProps(props: Partial = {}): Shape { const point: GeoJSON.Point = { type: "Point", coordinates: [lng, lat] }; if (props.animated) { - return new AnimatedMapPoint(point); + return new AnimatedPoint(point); } return point; } -function isShapeAnimated(shape: Shape): shape is AnimatedMapPoint { - return shape instanceof AnimatedMapPoint; +function isShapeAnimated(shape: Shape): shape is AnimatedPoint { + return shape instanceof AnimatedPoint; } interface AnnotationRef { @@ -49,7 +49,7 @@ interface AnnotationRef { symbolStyle: SymbolLayerStyle | undefined; } -const Annotation = forwardRef( +export const Annotation = forwardRef( ( { animated = false, @@ -160,5 +160,3 @@ const Annotation = forwardRef( ); Annotation.displayName = "Annotation"; - -export default Annotation; diff --git a/src/components/BackgroundLayer.tsx b/src/components/BackgroundLayer.tsx index fc54d7570..4d1307b05 100644 --- a/src/components/BackgroundLayer.tsx +++ b/src/components/BackgroundLayer.tsx @@ -1,14 +1,14 @@ -import React from "react"; import { NativeModules, requireNativeComponent } from "react-native"; -import useAbstractLayer, { +import { + useAbstractLayer, type BaseLayerProps, type NativeBaseProps, } from "../hooks/useAbstractLayer"; import { type BaseProps } from "../types/BaseProps"; import { type BackgroundLayerStyle } from "../types/MapLibreRNStyles"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; export const NATIVE_MODULE_NAME = "MLRNBackgroundLayer"; @@ -26,8 +26,8 @@ interface NativeProps const MLRNBackgroundLayer = requireNativeComponent(NATIVE_MODULE_NAME); -const BackgroundLayer: React.FC = ({ - sourceID = MapLibreRN.StyleSource.DefaultSourceID, +export const BackgroundLayer = ({ + sourceID = MLRNModule.StyleSource.DefaultSourceID, ...props }: BackgroundLayerProps) => { const { baseProps, setNativeLayer } = useAbstractLayer< @@ -46,5 +46,3 @@ const BackgroundLayer: React.FC = ({ /> ); }; - -export default BackgroundLayer; diff --git a/src/components/Callout.tsx b/src/components/Callout.tsx index 07bcf2e31..cd8626f70 100644 --- a/src/components/Callout.tsx +++ b/src/components/Callout.tsx @@ -1,13 +1,13 @@ -import { Children, type ReactElement } from "react"; +import { Children } from "react"; import { - View, - Text, Animated, requireNativeComponent, + type StyleProp, StyleSheet, - type ViewStyle, + Text, + View, type ViewProps, - type StyleProp, + type ViewStyle, } from "react-native"; export const NATIVE_MODULE_NAME = "MLRNCallout"; @@ -82,7 +82,7 @@ interface NativeProps extends Omit { /** * Callout that displays information about a selected annotation near the annotation. */ -const Callout = (props: CalloutProps): ReactElement => { +export const Callout = (props: CalloutProps) => { const { title, style, @@ -104,7 +104,7 @@ const Callout = (props: CalloutProps): ReactElement => { const _hasChildren = Children.count(children) > 0; - const _renderDefaultCallout = (): ReactElement => { + const _renderDefaultCallout = () => { return ( @@ -117,7 +117,7 @@ const Callout = (props: CalloutProps): ReactElement => { ); }; - const _renderCustomCallout = (): ReactElement => { + const _renderCustomCallout = () => { return ( {children} @@ -137,5 +137,3 @@ const Callout = (props: CalloutProps): ReactElement => { }; const MLRNCallout = requireNativeComponent(NATIVE_MODULE_NAME); - -export default Callout; diff --git a/src/components/Camera.tsx b/src/components/Camera.tsx index 946c36a67..0521dce3e 100644 --- a/src/components/Camera.tsx +++ b/src/components/Camera.tsx @@ -6,7 +6,7 @@ import { CameraModes } from "../MLRNModule"; import { useNativeRef } from "../hooks/useNativeRef"; import { type BaseProps } from "../types/BaseProps"; import { CameraMode } from "../types/CameraMode"; -import type { MapLibreRNEvent } from "../types/MapLibreRNEvent"; +import { type MapLibreRNEvent } from "../types/MapLibreRNEvent"; import { makeNativeBounds } from "../utils/makeNativeBounds"; export const NATIVE_MODULE_NAME = "MLRNCamera"; @@ -211,7 +211,7 @@ export interface CameraProps extends BaseProps, CameraStop { followUserLocation?: boolean; /** - * The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `MapLibreGL.UserTrackingMode` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](/packages/examples/src/examples/Camera/SetUserTrackingMode.js) + * The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `UserTrackingMode` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](/packages/examples/src/examples/Camera/SetUserTrackingMode.js) */ followUserMode?: UserTrackingMode; @@ -244,7 +244,7 @@ export interface NativeCameraProps defaultStop?: NativeCameraStop; } -const Camera = memo( +export const Camera = memo( forwardRef( ( { @@ -488,5 +488,3 @@ const Camera = memo( const MLRNCamera = requireNativeComponent(NATIVE_MODULE_NAME); - -export default Camera; diff --git a/src/components/CircleLayer.tsx b/src/components/CircleLayer.tsx index 50b4253a2..c97340732 100644 --- a/src/components/CircleLayer.tsx +++ b/src/components/CircleLayer.tsx @@ -1,14 +1,14 @@ -import React from "react"; import { NativeModules, requireNativeComponent } from "react-native"; -import useAbstractLayer, { +import { + useAbstractLayer, type BaseLayerProps, type NativeBaseProps, } from "../hooks/useAbstractLayer"; import { type BaseProps } from "../types/BaseProps"; import { type CircleLayerStyle } from "../types/MapLibreRNStyles"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; export const NATIVE_MODULE_NAME = "MLRNCircleLayer"; @@ -28,8 +28,8 @@ const MLRNCircleLayer = requireNativeComponent(NATIVE_MODULE_NAME); /** * CircleLayer is a style layer that renders one or more filled circles on the map. */ -const CircleLayer: React.FC = ({ - sourceID = MapLibreRN.StyleSource.DefaultSourceID, +export const CircleLayer = ({ + sourceID = MLRNModule.StyleSource.DefaultSourceID, ...props }: CircleLayerProps) => { const { baseProps, setNativeLayer } = useAbstractLayer< @@ -48,5 +48,3 @@ const CircleLayer: React.FC = ({ /> ); }; - -export default CircleLayer; diff --git a/src/components/FillExtrusionLayer.tsx b/src/components/FillExtrusionLayer.tsx index 6ed0bc6a7..0bc262c48 100644 --- a/src/components/FillExtrusionLayer.tsx +++ b/src/components/FillExtrusionLayer.tsx @@ -1,14 +1,14 @@ -import React from "react"; import { NativeModules, requireNativeComponent } from "react-native"; -import useAbstractLayer, { +import { + useAbstractLayer, type BaseLayerProps, type NativeBaseProps, } from "../hooks/useAbstractLayer"; import { type BaseProps } from "../types/BaseProps"; import { type FillExtrusionLayerStyle } from "../types/MapLibreRNStyles"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; export const NATIVE_MODULE_NAME = "MLRNFillExtrusionLayer"; @@ -29,8 +29,8 @@ const MLRNFillExtrusionLayer = /** * FillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map. */ -const FillExtrusionLayer: React.FC = ({ - sourceID = MapLibreRN.StyleSource.DefaultSourceID, +export const FillExtrusionLayer = ({ + sourceID = MLRNModule.StyleSource.DefaultSourceID, ...props }: FillExtrusionLayerProps) => { const { baseProps, setNativeLayer } = useAbstractLayer< @@ -43,5 +43,3 @@ const FillExtrusionLayer: React.FC = ({ return ; }; - -export default FillExtrusionLayer; diff --git a/src/components/FillLayer.tsx b/src/components/FillLayer.tsx index aa5dd181f..596452283 100644 --- a/src/components/FillLayer.tsx +++ b/src/components/FillLayer.tsx @@ -1,14 +1,14 @@ -import React from "react"; import { NativeModules, requireNativeComponent } from "react-native"; -import useAbstractLayer, { +import { + useAbstractLayer, type BaseLayerProps, type NativeBaseProps, } from "../hooks/useAbstractLayer"; import { type BaseProps } from "../types/BaseProps"; import { type FillLayerStyle } from "../types/MapLibreRNStyles"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; export const NATIVE_MODULE_NAME = "MLRNFillLayer"; @@ -26,8 +26,8 @@ const MLRNFillLayer = requireNativeComponent(NATIVE_MODULE_NAME); /** * FillLayer is a style layer that renders one or more filled (and optionally stroked) polygons on the map. */ -const FillLayer: React.FC = ({ - sourceID = MapLibreRN.StyleSource.DefaultSourceID, +export const FillLayer = ({ + sourceID = MLRNModule.StyleSource.DefaultSourceID, ...props }: FillLayerProps) => { const { baseProps, setNativeLayer } = useAbstractLayer< @@ -40,5 +40,3 @@ const FillLayer: React.FC = ({ return ; }; - -export default FillLayer; diff --git a/src/components/HeadingIndicator.tsx b/src/components/HeadingIndicator.tsx index 0aa4b6ccb..336894090 100644 --- a/src/components/HeadingIndicator.tsx +++ b/src/components/HeadingIndicator.tsx @@ -1,6 +1,4 @@ -import { type ReactElement } from "react"; - -import SymbolLayer from "./SymbolLayer"; +import { SymbolLayer } from "./SymbolLayer"; import headingIcon from "../assets/heading.png"; import { type BaseProps } from "../types/BaseProps"; @@ -15,7 +13,7 @@ interface HeadingIndicatorProps extends BaseProps { heading?: number; } -const HeadingIndicator = ({ heading }: HeadingIndicatorProps): ReactElement => ( +export const HeadingIndicator = ({ heading }: HeadingIndicatorProps) => ( ( }} /> ); - -export default HeadingIndicator; diff --git a/src/components/HeatmapLayer.tsx b/src/components/HeatmapLayer.tsx index f4bd84bf3..6aa6e68e7 100644 --- a/src/components/HeatmapLayer.tsx +++ b/src/components/HeatmapLayer.tsx @@ -1,14 +1,14 @@ -import React from "react"; import { NativeModules, requireNativeComponent } from "react-native"; -import useAbstractLayer, { +import { type BaseLayerProps, type NativeBaseProps, + useAbstractLayer, } from "../hooks/useAbstractLayer"; import { type BaseProps } from "../types/BaseProps"; import { type HeatmapLayerStyle } from "../types/MapLibreRNStyles"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; export const NATIVE_MODULE_NAME = "MLRNHeatmapLayer"; @@ -28,8 +28,8 @@ const MLRNHeatmapLayer = /** * HeatmapLayer is a style layer that renders one or more filled circles on the map. */ -const HeatmapLayer: React.FC = ({ - sourceID = MapLibreRN.StyleSource.DefaultSourceID, +export const HeatmapLayer = ({ + sourceID = MLRNModule.StyleSource.DefaultSourceID, ...props }: HeatmapLayerProps) => { const { baseProps, setNativeLayer } = useAbstractLayer< @@ -42,5 +42,3 @@ const HeatmapLayer: React.FC = ({ return ; }; - -export default HeatmapLayer; diff --git a/src/components/ImageSource.tsx b/src/components/ImageSource.tsx index e593f4b6c..68f2a1621 100644 --- a/src/components/ImageSource.tsx +++ b/src/components/ImageSource.tsx @@ -1,7 +1,7 @@ -import { type ReactElement } from "react"; +import { type ReactNode } from "react"; import { requireNativeComponent } from "react-native"; -import useAbstractSource from "../hooks/useAbstractSource"; +import { useAbstractSource } from "../hooks/useAbstractSource"; import { type BaseProps } from "../types/BaseProps"; import { cloneReactChildrenWithProps, @@ -31,7 +31,7 @@ export interface ImageSourceProps extends BaseProps { GeoJSON.Position, ]; - children?: ReactElement | ReactElement[]; + children?: ReactNode; } type NativeProps = ImageSourceProps; @@ -42,7 +42,7 @@ const MLRNImageSource = requireNativeComponent(NATIVE_MODULE_NAME); * ImageSource is a content source that is used for a georeferenced raster image to be shown on the map. * The georeferenced image scales and rotates as the user zooms and rotates the map */ -const ImageSource: React.FC = (props: ImageSourceProps) => { +export const ImageSource = (props: ImageSourceProps) => { const { setNativeRef } = useAbstractSource(); const _getURL = (): string | undefined => { @@ -66,5 +66,3 @@ const ImageSource: React.FC = (props: ImageSourceProps) => { ); }; - -export default ImageSource; diff --git a/src/components/Images.tsx b/src/components/Images.tsx index d686145a6..f9458a8fe 100644 --- a/src/components/Images.tsx +++ b/src/components/Images.tsx @@ -1,10 +1,10 @@ -import { type ReactElement } from "react"; +import { type ReactNode } from "react"; import { - requireNativeComponent, Image, - type NativeSyntheticEvent, type ImageSourcePropType, type ImageURISource, + type NativeSyntheticEvent, + requireNativeComponent, } from "react-native"; import { type BaseProps } from "../types/BaseProps"; @@ -55,19 +55,19 @@ interface ImagesProps extends BaseProps { id?: string; - children?: ReactElement; + children?: ReactNode; } /** * Images defines the images used in Symbol etc layers */ -const Images = ({ +export const Images = ({ images, nativeAssetImages, onImageMissing, id, children, -}: ImagesProps): ReactElement => { +}: ImagesProps) => { const _getImages = (): { images?: { [key: string]: ImageEntry }; nativeImages?: ImageEntry[]; @@ -123,5 +123,3 @@ const Images = ({ }; const MLRNImages = requireNativeComponent(NATIVE_MODULE_NAME); - -export default Images; diff --git a/src/components/Light.tsx b/src/components/Light.tsx index a24f2cb8e..fb2fae491 100644 --- a/src/components/Light.tsx +++ b/src/components/Light.tsx @@ -1,7 +1,7 @@ -import React from "react"; import { requireNativeComponent } from "react-native"; -import useAbstractLayer, { +import { + useAbstractLayer, type BaseLayerProps, } from "../hooks/useAbstractLayer"; import { type BaseProps } from "../types/BaseProps"; @@ -26,7 +26,7 @@ const MLRNLight = requireNativeComponent(NATIVE_MODULE_NAME); /** * Light represents the light source for extruded geometries */ -const Light: React.FC = (props: LightProps) => { +export const Light = (props: LightProps) => { const { baseProps, setNativeLayer } = useAbstractLayer< LightProps, NativeProps @@ -36,5 +36,3 @@ const Light: React.FC = (props: LightProps) => { return ; }; - -export default Light; diff --git a/src/components/LineLayer.tsx b/src/components/LineLayer.tsx index 1b8daa71b..30caf8c2c 100644 --- a/src/components/LineLayer.tsx +++ b/src/components/LineLayer.tsx @@ -1,14 +1,14 @@ -import React from "react"; import { NativeModules, requireNativeComponent } from "react-native"; -import useAbstractLayer, { +import { + useAbstractLayer, type BaseLayerProps, type NativeBaseProps, } from "../hooks/useAbstractLayer"; import { type BaseProps } from "../types/BaseProps"; import { type LineLayerStyle } from "../types/MapLibreRNStyles"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; export const NATIVE_MODULE_NAME = "MLRNLineLayer"; @@ -27,8 +27,8 @@ const MLRNLineLayer = /** * LineLayer is a style layer that renders one or more stroked polylines on the map. */ -const LineLayer: React.FC = ({ - sourceID = MapLibreRN.StyleSource.DefaultSourceID, +export const LineLayer = ({ + sourceID = MLRNModule.StyleSource.DefaultSourceID, ...props }: LineLayerProps) => { const { baseProps, setNativeLayer } = useAbstractLayer< @@ -41,5 +41,3 @@ const LineLayer: React.FC = ({ return ; }; - -export default LineLayer; diff --git a/src/components/MapView.tsx b/src/components/MapView.tsx index 25868082e..8315c5216 100644 --- a/src/components/MapView.tsx +++ b/src/components/MapView.tsx @@ -22,17 +22,17 @@ import { type NativeSyntheticEvent, } from "react-native"; -import useNativeBridge from "../hooks/useNativeBridge"; -import useOnce from "../hooks/useOnce"; -import { type Location } from "../modules/location/locationManager"; +import { useNativeBridge } from "../hooks/useNativeBridge"; +import { useOnce } from "../hooks/useOnce"; +import { type Location } from "../modules/location/LocationManager"; import { type BaseProps } from "../types/BaseProps"; import { type FilterExpression } from "../types/MapLibreRNStyles"; import { isFunction, isAndroid } from "../utils"; -import Logger from "../utils/Logger"; +import { Logger } from "../utils/Logger"; import { getFilter } from "../utils/filterUtils"; -const MapLibreRN = NativeModules.MLRNModule; -if (MapLibreRN == null) { +const MLRNModule = NativeModules.MLRNModule; +if (MLRNModule == null) { console.error( "Native module of @maplibre/maplibre-react-native library was not registered properly, please consult the docs: https://github.com/maplibre/maplibre-react-native", ); @@ -67,7 +67,7 @@ interface MapViewProps extends BaseProps { */ style?: ViewProps["style"]; /** - * Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `MapLibreRN.StyleURL.Default` + * Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `StyleURL.Default` */ mapStyle?: string | object; /** @@ -278,7 +278,7 @@ export interface MapViewRef { /** * MapView backed by MapLibre Native */ -const MapView = memo( +export const MapView = memo( forwardRef( ( { @@ -433,46 +433,46 @@ const MapView = memo( const events = []; if (props.onRegionWillChange) { - events.push(MapLibreRN.EventTypes.RegionWillChange); + events.push(MLRNModule.EventTypes.RegionWillChange); } if (props.onRegionIsChanging) { - events.push(MapLibreRN.EventTypes.RegionIsChanging); + events.push(MLRNModule.EventTypes.RegionIsChanging); } if (props.onRegionDidChange) { - events.push(MapLibreRN.EventTypes.RegionDidChange); + events.push(MLRNModule.EventTypes.RegionDidChange); } if (props.onUserLocationUpdate) { - events.push(MapLibreRN.EventTypes.UserLocationUpdated); + events.push(MLRNModule.EventTypes.UserLocationUpdated); } if (props.onWillStartLoadingMap) { - events.push(MapLibreRN.EventTypes.WillStartLoadingMap); + events.push(MLRNModule.EventTypes.WillStartLoadingMap); } if (props.onDidFinishLoadingMap) { - events.push(MapLibreRN.EventTypes.DidFinishLoadingMap); + events.push(MLRNModule.EventTypes.DidFinishLoadingMap); } if (props.onDidFailLoadingMap) { - events.push(MapLibreRN.EventTypes.DidFailLoadingMap); + events.push(MLRNModule.EventTypes.DidFailLoadingMap); } if (props.onWillStartRenderingFrame) { - events.push(MapLibreRN.EventTypes.WillStartRenderingFrame); + events.push(MLRNModule.EventTypes.WillStartRenderingFrame); } if (props.onDidFinishRenderingFrame) { - events.push(MapLibreRN.EventTypes.DidFinishRenderingFrame); + events.push(MLRNModule.EventTypes.DidFinishRenderingFrame); } if (props.onDidFinishRenderingFrameFully) { - events.push(MapLibreRN.EventTypes.DidFinishRenderingFrameFully); + events.push(MLRNModule.EventTypes.DidFinishRenderingFrameFully); } if (props.onWillStartRenderingMap) { - events.push(MapLibreRN.EventTypes.WillStartRenderingMap); + events.push(MLRNModule.EventTypes.WillStartRenderingMap); } if (props.onDidFinishRenderingMap) { - events.push(MapLibreRN.EventTypes.DidFinishRenderingMap); + events.push(MLRNModule.EventTypes.DidFinishRenderingMap); } if (props.onDidFinishRenderingMapFully) { - events.push(MapLibreRN.EventTypes.DidFinishRenderingMapFully); + events.push(MLRNModule.EventTypes.DidFinishRenderingMapFully); } if (props.onDidFinishLoadingStyle) { - events.push(MapLibreRN.EventTypes.DidFinishLoadingStyle); + events.push(MLRNModule.EventTypes.DidFinishLoadingStyle); } _runNativeCommand( @@ -656,7 +656,7 @@ const MapView = memo( let propName: CallableProps | undefined; switch (type) { - case MapLibreRN.EventTypes.RegionWillChange: + case MLRNModule.EventTypes.RegionWillChange: if ( regionWillChangeDebounceTime && regionWillChangeDebounceTime > 0 @@ -670,10 +670,10 @@ const MapView = memo( propName = "onRegionWillChange"; } break; - case MapLibreRN.EventTypes.RegionIsChanging: + case MLRNModule.EventTypes.RegionIsChanging: propName = "onRegionIsChanging"; break; - case MapLibreRN.EventTypes.RegionDidChange: + case MLRNModule.EventTypes.RegionDidChange: if ( regionDidChangeDebounceTime && regionDidChangeDebounceTime > 0 @@ -687,37 +687,37 @@ const MapView = memo( propName = "onRegionDidChange"; } break; - case MapLibreRN.EventTypes.UserLocationUpdated: + case MLRNModule.EventTypes.UserLocationUpdated: propName = "onUserLocationUpdate"; break; - case MapLibreRN.EventTypes.WillStartLoadingMap: + case MLRNModule.EventTypes.WillStartLoadingMap: propName = "onWillStartLoadingMap"; break; - case MapLibreRN.EventTypes.DidFinishLoadingMap: + case MLRNModule.EventTypes.DidFinishLoadingMap: propName = "onDidFinishLoadingMap"; break; - case MapLibreRN.EventTypes.DidFailLoadingMap: + case MLRNModule.EventTypes.DidFailLoadingMap: propName = "onDidFailLoadingMap"; break; - case MapLibreRN.EventTypes.WillStartRenderingFrame: + case MLRNModule.EventTypes.WillStartRenderingFrame: propName = "onWillStartRenderingFrame"; break; - case MapLibreRN.EventTypes.DidFinishRenderingFrame: + case MLRNModule.EventTypes.DidFinishRenderingFrame: propName = "onDidFinishRenderingFrame"; break; - case MapLibreRN.EventTypes.DidFinishRenderingFrameFully: + case MLRNModule.EventTypes.DidFinishRenderingFrameFully: propName = "onDidFinishRenderingFrameFully"; break; - case MapLibreRN.EventTypes.WillStartRenderingMap: + case MLRNModule.EventTypes.WillStartRenderingMap: propName = "onWillStartRenderingMap"; break; - case MapLibreRN.EventTypes.DidFinishRenderingMap: + case MLRNModule.EventTypes.DidFinishRenderingMap: propName = "onDidFinishRenderingMap"; break; - case MapLibreRN.EventTypes.DidFinishRenderingMapFully: + case MLRNModule.EventTypes.DidFinishRenderingMapFully: propName = "onDidFinishRenderingMapFully"; break; - case MapLibreRN.EventTypes.DidFinishLoadingStyle: + case MLRNModule.EventTypes.DidFinishLoadingStyle: propName = "onDidFinishLoadingStyle"; break; default: @@ -852,4 +852,3 @@ if (isAndroid()) { ANDROID_TEXTURE_NATIVE_MODULE_NAME, ); } -export default MapView; diff --git a/src/components/MarkerView.tsx b/src/components/MarkerView.tsx index 58eba8a66..a6a7fea4b 100644 --- a/src/components/MarkerView.tsx +++ b/src/components/MarkerView.tsx @@ -2,7 +2,7 @@ import { point } from "@turf/helpers"; import { type ReactElement, useMemo } from "react"; import { Platform, requireNativeComponent, type ViewProps } from "react-native"; -import PointAnnotation from "./PointAnnotation"; +import { PointAnnotation } from "./PointAnnotation"; import { toJSONString } from "../utils"; export const NATIVE_MODULE_NAME = "MLRNMarkerView"; @@ -35,7 +35,7 @@ interface MarkerViewProps extends ViewProps { /** * Expects one child - can be container with multiple elements */ - children: React.ReactElement; + children: ReactElement; } interface NativeProps extends ViewProps { @@ -53,12 +53,12 @@ interface NativeProps extends ViewProps { * This is based on [MakerView plugin](https://docs.mapbox.com/android/plugins/overview/markerview/) on Android * and PointAnnotation on iOS. */ -const MarkerView = ({ +export const MarkerView = ({ anchor = { x: 0.5, y: 0.5 }, allowOverlap = false, isSelected = false, ...rest -}: MarkerViewProps): ReactElement => { +}: MarkerViewProps) => { const props = { anchor, allowOverlap, isSelected, ...rest }; const coordinate = props.coordinate ? toJSONString(point(props.coordinate)) @@ -84,5 +84,3 @@ const MarkerView = ({ let lastId = 0; const MLRNMarkerView = requireNativeComponent(NATIVE_MODULE_NAME); - -export default MarkerView; diff --git a/src/components/NativeUserLocation.tsx b/src/components/NativeUserLocation.tsx index e3bd46bf9..cdc9c42fc 100644 --- a/src/components/NativeUserLocation.tsx +++ b/src/components/NativeUserLocation.tsx @@ -1,4 +1,3 @@ -import { type ReactElement } from "react"; import { requireNativeComponent } from "react-native"; const NATIVE_MODULE_NAME = "MLRNNativeUserLocation"; @@ -26,10 +25,8 @@ interface NativeUserLocationProps { androidPreferredFramesPerSecond?: number; } -const NativeUserLocation = (props: NativeUserLocationProps): ReactElement => { +export const NativeUserLocation = (props: NativeUserLocationProps) => { return ; }; const MLRNNativeUserLocation = requireNativeComponent(NATIVE_MODULE_NAME); - -export default NativeUserLocation; diff --git a/src/components/PointAnnotation.tsx b/src/components/PointAnnotation.tsx index fbadb5eb7..26f547faa 100644 --- a/src/components/PointAnnotation.tsx +++ b/src/components/PointAnnotation.tsx @@ -14,7 +14,7 @@ import { requireNativeComponent, } from "react-native"; -import useNativeBridge, { type RNMLEvent } from "../hooks/useNativeBridge"; +import { useNativeBridge, type RNMLEvent } from "../hooks/useNativeBridge"; import { isFunction, toJSONString } from "../utils"; export const NATIVE_MODULE_NAME = "MLRNPointAnnotation"; @@ -102,7 +102,7 @@ export interface PointAnnotationProps { /** * Expects one child, and an optional callout can be added as well */ - children: React.ReactElement | [React.ReactElement, React.ReactElement]; + children: ReactElement | [ReactElement, ReactElement]; style?: ViewProps["style"]; } @@ -125,7 +125,10 @@ export interface PointAnnotationRef { * If you need interctive views please use MarkerView, * as with PointAnnotation on Android child views are rendered onto a bitmap for better performance. */ -const PointAnnotation = forwardRef( +export const PointAnnotation = forwardRef< + PointAnnotationRef, + PointAnnotationProps +>( ( { anchor = { x: 0.5, y: 0.5 }, @@ -133,7 +136,7 @@ const PointAnnotation = forwardRef( ...props }: PointAnnotationProps, ref, - ): ReactElement => { + ) => { useImperativeHandle( ref, (): PointAnnotationRef => ({ @@ -241,5 +244,3 @@ PointAnnotation.displayName = "PointAnnotation"; const MLRNPointAnnotation = requireNativeComponent(NATIVE_MODULE_NAME); - -export default PointAnnotation; diff --git a/src/components/RasterLayer.tsx b/src/components/RasterLayer.tsx index 2a0516f6b..2e7f63ae5 100644 --- a/src/components/RasterLayer.tsx +++ b/src/components/RasterLayer.tsx @@ -1,14 +1,14 @@ -import React from "react"; import { NativeModules, requireNativeComponent } from "react-native"; -import useAbstractLayer, { +import { + useAbstractLayer, type BaseLayerProps, type NativeBaseProps, } from "../hooks/useAbstractLayer"; import { type BaseProps } from "../types/BaseProps"; import { type RasterLayerStyle } from "../types/MapLibreRNStyles"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; export const NATIVE_MODULE_NAME = "MLRNRasterLayer"; @@ -25,8 +25,8 @@ interface NativeProps const MLRNRasterLayer = requireNativeComponent(NATIVE_MODULE_NAME); -const RasterLayer: React.FC = ({ - sourceID = MapLibreRN.StyleSource.DefaultSourceID, +export const RasterLayer = ({ + sourceID = MLRNModule.StyleSource.DefaultSourceID, ...props }: RasterLayerProps) => { const { baseProps, setNativeLayer } = useAbstractLayer< @@ -39,5 +39,3 @@ const RasterLayer: React.FC = ({ return ; }; - -export default RasterLayer; diff --git a/src/components/RasterSource.tsx b/src/components/RasterSource.tsx index c21087f6e..cc38c8684 100644 --- a/src/components/RasterSource.tsx +++ b/src/components/RasterSource.tsx @@ -1,12 +1,12 @@ -import React from "react"; +import { type ReactNode } from "react"; import { NativeModules, requireNativeComponent } from "react-native"; -import useAbstractSource from "../hooks/useAbstractSource"; -import useOnce from "../hooks/useOnce"; +import { useAbstractSource } from "../hooks/useAbstractSource"; +import { useOnce } from "../hooks/useOnce"; import { type BaseProps } from "../types/BaseProps"; import { cloneReactChildrenWithProps } from "../utils"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; export const NATIVE_MODULE_NAME = "MLRNRasterSource"; @@ -55,7 +55,7 @@ interface RasterSourceProps extends BaseProps { */ attribution?: string; - children?: React.ReactElement | React.ReactElement[]; + children?: ReactNode; } type NativeProps = RasterSourceProps; @@ -68,8 +68,8 @@ const MLRNRasterSource = * The location of and metadata about the tiles are defined either by an option dictionary * or by an external file that conforms to the TileJSON specification. */ -const RasterSource: React.FC = ({ - id = MapLibreRN.StyleSource.DefaultSourceID, +export const RasterSource = ({ + id = MLRNModule.StyleSource.DefaultSourceID, ...props }: RasterSourceProps) => { useOnce(() => { @@ -110,5 +110,3 @@ const RasterSource: React.FC = ({ ); }; - -export default RasterSource; diff --git a/src/components/ShapeSource.tsx b/src/components/ShapeSource.tsx index 656b1804f..7a58be794 100644 --- a/src/components/ShapeSource.tsx +++ b/src/components/ShapeSource.tsx @@ -1,8 +1,8 @@ import { Component, - type ReactElement, forwardRef, memo, + type ReactNode, useImperativeHandle, useRef, } from "react"; @@ -13,7 +13,7 @@ import { requireNativeComponent, } from "react-native"; -import useNativeBridge from "../hooks/useNativeBridge"; +import { useNativeBridge } from "../hooks/useNativeBridge"; import { type BaseProps } from "../types/BaseProps"; import { type ExpressionField, @@ -28,7 +28,7 @@ import { } from "../utils"; import { getFilter } from "../utils/filterUtils"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; export const NATIVE_MODULE_NAME = "MLRNShapeSource"; interface NativeProps { @@ -133,7 +133,7 @@ export interface ShapeSourceProps extends BaseProps { height: number; }; - children?: ReactElement | ReactElement[]; + children?: ReactNode; } export interface ShapeSourceRef { @@ -158,11 +158,11 @@ export interface ShapeSourceRef { * ShapeSource is a map content source that supplies vector shapes to be shown on the map. * The shape may be a url or a GeoJSON object */ -const ShapeSource = memo( +export const ShapeSource = memo( forwardRef( ( { - id: shapeId = MapLibreRN.StyleSource.DefaultSourceID, + id: shapeId = MLRNModule.StyleSource.DefaultSourceID, ...props }: ShapeSourceProps, ref, @@ -364,5 +364,3 @@ const ShapeSource = memo( ); const MLRNShapeSource = requireNativeComponent(NATIVE_MODULE_NAME); - -export default ShapeSource; diff --git a/src/components/SymbolLayer.tsx b/src/components/SymbolLayer.tsx index 18ee78526..55fb92198 100644 --- a/src/components/SymbolLayer.tsx +++ b/src/components/SymbolLayer.tsx @@ -1,13 +1,14 @@ import { NativeModules, requireNativeComponent } from "react-native"; -import useAbstractLayer, { +import { + useAbstractLayer, type BaseLayerProps, type NativeBaseProps, } from "../hooks/useAbstractLayer"; import { type BaseProps } from "../types/BaseProps"; import { type SymbolLayerStyle } from "../types/MapLibreRNStyles"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; export const NATIVE_MODULE_NAME = "MLRNSymbolLayer"; @@ -27,8 +28,8 @@ const MLRNSymbolLayer = requireNativeComponent(NATIVE_MODULE_NAME); /** * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map. */ -const SymbolLayer: React.FC = ({ - sourceID = MapLibreRN.StyleSource.DefaultSourceID, +export const SymbolLayer = ({ + sourceID = MLRNModule.StyleSource.DefaultSourceID, ...props }: SymbolLayerProps) => { const { baseProps, setNativeLayer } = useAbstractLayer< @@ -45,5 +46,3 @@ const SymbolLayer: React.FC = ({ return ; }; - -export default SymbolLayer; diff --git a/src/components/UserLocation.tsx b/src/components/UserLocation.tsx index 5df37befb..1573a81d1 100644 --- a/src/components/UserLocation.tsx +++ b/src/components/UserLocation.tsx @@ -1,20 +1,21 @@ import { forwardRef, memo, - type ReactElement, + type ReactNode, useEffect, useImperativeHandle, useRef, useState, } from "react"; -import Annotation from "./Annotation"; -import CircleLayer from "./CircleLayer"; -import HeadingIndicator from "./HeadingIndicator"; -import NativeUserLocation from "./NativeUserLocation"; -import locationManager, { +import { Annotation } from "./Annotation"; +import { CircleLayer } from "./CircleLayer"; +import { HeadingIndicator } from "./HeadingIndicator"; +import { NativeUserLocation } from "./NativeUserLocation"; +import { type Location, -} from "../modules/location/locationManager"; + LocationManager, +} from "../modules/location/LocationManager"; import { type CircleLayerStyle } from "../types/MapLibreRNStyles"; const mapboxBlue = "rgba(51, 181, 229, 100)"; @@ -41,7 +42,7 @@ const layerStyles: Record = { export const normalIcon = ( showsUserHeadingIndicator?: boolean, heading?: number, -): ReactElement[] => [ +) => [ void; } -const UserLocation = memo( +export const UserLocation = memo( forwardRef( ( { @@ -163,7 +164,7 @@ const UserLocation = memo( ref, (): UserLocationRef => ({ /** - * Whether to start or stop listening to the locationManager + * Whether to start or stop listening to the LocationManager * * Notice, that listening will start automatically when * either `onUpdate` or `visible` are set @@ -175,7 +176,7 @@ const UserLocation = memo( setLocationManager, /** * - * If locationManager should be running + * If LocationManager should be running * * @return {boolean} */ @@ -194,7 +195,7 @@ const UserLocation = memo( return; } - locationManager.setMinDisplacement(minDisplacement ?? 0); + LocationManager.setMinDisplacement(minDisplacement ?? 0); }); return (): void => { @@ -205,7 +206,7 @@ const UserLocation = memo( }, []); useEffect(() => { - locationManager.setMinDisplacement(minDisplacement ?? 0); + LocationManager.setMinDisplacement(minDisplacement ?? 0); }, [minDisplacement]); useEffect(() => { @@ -227,11 +228,11 @@ const UserLocation = memo( locationManagerRunning.current = running; if (running) { - locationManager.addListener(_onLocationUpdate); - const location = await locationManager.getLastKnownLocation(); + LocationManager.addListener(_onLocationUpdate); + const location = await LocationManager.getLastKnownLocation(); _onLocationUpdate(location); } else { - locationManager.removeListener(_onLocationUpdate); + LocationManager.removeListener(_onLocationUpdate); } } } @@ -303,5 +304,3 @@ const UserLocation = memo( }, ), ); - -export default UserLocation; diff --git a/src/components/VectorSource.tsx b/src/components/VectorSource.tsx index 9c196d890..844e9e08d 100644 --- a/src/components/VectorSource.tsx +++ b/src/components/VectorSource.tsx @@ -1,20 +1,20 @@ import { featureCollection } from "@turf/helpers"; -import { forwardRef, memo, useImperativeHandle } from "react"; +import { forwardRef, memo, type ReactNode, useImperativeHandle } from "react"; import { NativeModules, type NativeSyntheticEvent, requireNativeComponent, } from "react-native"; -import useAbstractSource from "../hooks/useAbstractSource"; -import useNativeBridge from "../hooks/useNativeBridge"; +import { useAbstractSource } from "../hooks/useAbstractSource"; +import { useNativeBridge } from "../hooks/useNativeBridge"; import { type BaseProps } from "../types/BaseProps"; import { type FilterExpression } from "../types/MapLibreRNStyles"; import { type OnPressEvent } from "../types/OnPressEvent"; import { cloneReactChildrenWithProps, isFunction, isAndroid } from "../utils"; import { getFilter } from "../utils/filterUtils"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; export const NATIVE_MODULE_NAME = "MLRNVectorSource"; @@ -77,7 +77,7 @@ interface VectorSourceProps extends BaseProps { height: number; }; - children?: React.ReactElement | React.ReactElement[]; + children?: ReactNode; } type NativeProps = VectorSourceProps; @@ -89,11 +89,11 @@ const MLRNVectorSource = * VectorSource is a map content source that supplies tiled vector data in Mapbox Vector Tile format to be shown on the map. * The location of and metadata about the tiles are defined either by an option dictionary or by an external file that conforms to the TileJSON specification. */ -const VectorSource = memo( +export const VectorSource = memo( forwardRef( ( { - id = MapLibreRN.StyleSource.DefaultSourceID, + id = MLRNModule.StyleSource.DefaultSourceID, ...props }: VectorSourceProps, ref, @@ -198,5 +198,3 @@ const VectorSource = memo( }, ), ); - -export default VectorSource; diff --git a/src/hooks/useAbstractLayer.ts b/src/hooks/useAbstractLayer.ts index a1079c837..34444290f 100644 --- a/src/hooks/useAbstractLayer.ts +++ b/src/hooks/useAbstractLayer.ts @@ -1,4 +1,4 @@ -import { useMemo, useRef } from "react"; +import { type Component, useMemo, useRef } from "react"; import { processColor, type NativeMethods } from "react-native"; import { type BaseProps } from "../types/BaseProps"; @@ -60,7 +60,7 @@ export interface NativeBaseProps { reactStyle?: { [key: string]: StyleValue }; } -export default function useAbstractLayer< +export function useAbstractLayer< Props extends BaseProps, NativeProps extends NativeBaseProps, >( @@ -68,13 +68,13 @@ export default function useAbstractLayer< ): { baseProps: Props & BaseLayerProps; setNativeLayer: ( - instance: (React.Component & Readonly) | null, + instance: (Component & Readonly) | null, ) => void; getStyleTypeFormatter: (styleType: string) => typeof processColor | undefined; setNativeProps: (nativeProps: { [key: string]: unknown }) => void; } { const nativeLayer = useRef< - (React.Component & Readonly) | null + (Component & Readonly) | null >(null); const baseProps = useMemo(() => { @@ -94,7 +94,7 @@ export default function useAbstractLayer< }, [props]); const setNativeLayer = ( - instance: (React.Component & Readonly) | null, + instance: (Component & Readonly) | null, ): void => { nativeLayer.current = instance; }; diff --git a/src/hooks/useAbstractSource.ts b/src/hooks/useAbstractSource.ts index 6def4303e..a51e942b0 100644 --- a/src/hooks/useAbstractSource.ts +++ b/src/hooks/useAbstractSource.ts @@ -1,21 +1,21 @@ -import { useRef } from "react"; +import { Component, useRef } from "react"; import { type NativeMethods } from "react-native"; -export default function useAbstractSource(): { +export function useAbstractSource(): { _nativeRef: - | (React.Component & Readonly) + | (Component & Readonly) | undefined; setNativeRef: ( - instance: React.Component & Readonly, + instance: Component & Readonly, ) => void; setNativeProps: (nativeProps: NativePropsType) => void; } { const _nativeRef = useRef< - (React.Component & Readonly) | undefined + (Component & Readonly) | undefined >(undefined); const setNativeRef = ( - instance: React.Component & Readonly, + instance: Component & Readonly, ): void => { _nativeRef.current = instance; }; diff --git a/src/hooks/useNativeBridge.ts b/src/hooks/useNativeBridge.ts index 445f6326a..48fedb948 100644 --- a/src/hooks/useNativeBridge.ts +++ b/src/hooks/useNativeBridge.ts @@ -1,4 +1,9 @@ -import { Component, type SyntheticEvent, useRef } from "react"; +import { + Component, + type MutableRefObject, + type SyntheticEvent, + useRef, +} from "react"; import { runNativeCommand, isAndroid, type NativeArg } from "../utils"; @@ -12,8 +17,8 @@ let callbackIncrement = 0; type UseNativeBridge = { _nativeModuleName: string; _onAndroidCallback: (e: SyntheticEvent) => void; - _callbackMap: React.MutableRefObject>; - _preRefMapMethodQueue: React.MutableRefObject; + _callbackMap: MutableRefObject>; + _preRefMapMethodQueue: MutableRefObject; _addAddAndroidCallback: ( id: string, resolve: (value: ReturnType) => void, @@ -30,7 +35,7 @@ type UseNativeBridge = { ) => Promise; }; -const useNativeBridge: (moduleName: string) => UseNativeBridge = ( +export const useNativeBridge: (moduleName: string) => UseNativeBridge = ( _nativeModuleName: string, ) => { const _callbackMap = useRef>(new Map()); @@ -121,5 +126,3 @@ const useNativeBridge: (moduleName: string) => UseNativeBridge = ( _runNativeCommand, }; }; - -export default useNativeBridge; diff --git a/src/hooks/useNativeRef.ts b/src/hooks/useNativeRef.ts index 587e12c64..7f35ae3b6 100644 --- a/src/hooks/useNativeRef.ts +++ b/src/hooks/useNativeRef.ts @@ -1,4 +1,4 @@ -import { Component, useRef } from "react"; +import { Component, type RefObject, useRef } from "react"; import { type NativeMethods } from "react-native"; export type NativeRef = Component & @@ -7,7 +7,7 @@ export type NativeRef = Component & /** * Separate module which allows to be mocked in tests. */ -export function useNativeRef(): React.RefObject< +export function useNativeRef(): RefObject< NativeRef > { return useRef>(null); diff --git a/src/hooks/useOnce.ts b/src/hooks/useOnce.ts index a15cb9550..83bdbd769 100644 --- a/src/hooks/useOnce.ts +++ b/src/hooks/useOnce.ts @@ -1,6 +1,8 @@ import { useRef } from "react"; -const useOnce: (callback: () => void) => void = (callback: () => void) => { +export const useOnce: (callback: () => void) => void = ( + callback: () => void, +) => { const once = useRef(false); if (!once.current) { @@ -8,5 +10,3 @@ const useOnce: (callback: () => void) => void = (callback: () => void) => { callback(); } }; - -export default useOnce; diff --git a/src/index.ts b/src/index.ts index 429fc66c7..3f490af87 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,69 @@ -import * as MapLibreRN from "./MapLibreRN"; -export * from "./MapLibreRN"; +export * from "./MLRNModule"; +export { + Camera, + UserTrackingMode, + type CameraPadding, + type CameraAnimationMode, + type CameraBounds, + type CameraRef, +} from "./components/Camera"; +export { + MapView, + type MapViewRef, + type RegionPayload, +} from "./components/MapView"; +export { Light } from "./components/Light"; +export { PointAnnotation } from "./components/PointAnnotation"; +export type { PointAnnotationRef } from "./components/PointAnnotation"; +export { Annotation } from "./components/Annotation"; +export { Callout } from "./components/Callout"; +export { requestAndroidLocationPermissions } from "./requestAndroidLocationPermissions"; +export { + UserLocation, + UserLocationRenderMode, +} from "./components/UserLocation"; +export type { UserLocationRef } from "./components/UserLocation"; +export { VectorSource } from "./components/VectorSource"; +export { ShapeSource } from "./components/ShapeSource"; +export type { ShapeSourceRef } from "./components/ShapeSource"; +export { RasterSource } from "./components/RasterSource"; +export { ImageSource } from "./components/ImageSource"; +export { Images } from "./components/Images"; +export { FillLayer } from "./components/FillLayer"; +export { FillExtrusionLayer } from "./components/FillExtrusionLayer"; +export { HeatmapLayer } from "./components/HeatmapLayer"; +export { LineLayer } from "./components/LineLayer"; +export { CircleLayer } from "./components/CircleLayer"; +export { SymbolLayer } from "./components/SymbolLayer"; +export { RasterLayer } from "./components/RasterLayer"; +export { BackgroundLayer } from "./components/BackgroundLayer"; +export { MarkerView } from "./components/MarkerView"; -export default MapLibreRN; +export { + LocationManager, + type Location, +} from "./modules/location/LocationManager"; +export { OfflineManager } from "./modules/offline/OfflineManager"; +export type { OfflinePackError } from "./modules/offline/OfflineManager"; +export type { OfflinePackStatus } from "./modules/offline/OfflinePack"; +export { OfflinePack } from "./modules/offline/OfflinePack"; +export { OfflineCreatePackOptions } from "./modules/offline/OfflineCreatePackOptions"; +export { SnapshotManager } from "./modules/snapshot/SnapshotManager"; +export type { SnapshotInputOptions } from "./modules/snapshot/SnapshotOptions"; + +export type { MapLibreRNEvent } from "./types/MapLibreRNEvent"; + +export { Animated } from "./utils/animated/Animated"; +export { Logger, type LogLevel } from "./utils/Logger"; +export type { + FillLayerStyle, + LineLayerStyle, + SymbolLayerStyle, + CircleLayerStyle, + HeatmapLayerStyle, + FillExtrusionLayerStyle, + RasterLayerStyle, + HillshadeLayerStyle, + BackgroundLayerStyle, + LightLayerStyle, +} from "./types/MapLibreRNStyles"; diff --git a/src/modules/location/locationManager.ts b/src/modules/location/LocationManager.ts similarity index 91% rename from src/modules/location/locationManager.ts rename to src/modules/location/LocationManager.ts index 60ec52f9f..cc95926f1 100644 --- a/src/modules/location/locationManager.ts +++ b/src/modules/location/LocationManager.ts @@ -4,7 +4,7 @@ import { type EmitterSubscription, } from "react-native"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; const MLRNLocationModule = NativeModules.MLRNLocationModule; export const LocationModuleEventEmitter = new NativeEventEmitter( @@ -12,7 +12,7 @@ export const LocationModuleEventEmitter = new NativeEventEmitter( ); /** - * Location sent by locationManager + * Location sent by LocationManager */ export interface Location { coords: Coordinates; @@ -20,7 +20,7 @@ export interface Location { } /** - * Coorinates sent by locationManager + * Coorinates sent by LocationManager */ interface Coordinates { /** @@ -88,7 +88,7 @@ class LocationManager { try { lastKnownLocation = await MLRNLocationModule.getLastKnownLocation(); } catch (error) { - console.log("locationManager Error: ", error); + console.log("LocationManager Error: ", error); } if (!this._lastKnownLocation && lastKnownLocation) { @@ -129,7 +129,7 @@ class LocationManager { MLRNLocationModule.start(displacement); this.subscription = LocationModuleEventEmitter.addListener( - MapLibreRN.LocationCallbackName.Update, + MLRNModule.LocationCallbackName.Update, this.onUpdate, ); @@ -158,4 +158,5 @@ class LocationManager { } } -export default new LocationManager(); +const locationManager = new LocationManager(); +export { locationManager as LocationManager }; diff --git a/src/modules/offline/OfflineCreatePackOptions.ts b/src/modules/offline/OfflineCreatePackOptions.ts index ad2fdae1d..5585126f7 100644 --- a/src/modules/offline/OfflineCreatePackOptions.ts +++ b/src/modules/offline/OfflineCreatePackOptions.ts @@ -9,7 +9,7 @@ export interface OfflineCreatePackInputOptions { metadata?: Record; } -class OfflineCreatePackOptions { +export class OfflineCreatePackOptions { name: string; styleURL: string; bounds: string; @@ -51,5 +51,3 @@ class OfflineCreatePackOptions { }); } } - -export default OfflineCreatePackOptions; diff --git a/src/modules/offline/offlineManager.ts b/src/modules/offline/OfflineManager.ts similarity index 90% rename from src/modules/offline/offlineManager.ts rename to src/modules/offline/OfflineManager.ts index ad3723a92..f58bef5fe 100644 --- a/src/modules/offline/offlineManager.ts +++ b/src/modules/offline/OfflineManager.ts @@ -4,13 +4,14 @@ import { type EventSubscription, } from "react-native"; -import OfflineCreatePackOptions, { +import { + OfflineCreatePackOptions, type OfflineCreatePackInputOptions, } from "./OfflineCreatePackOptions"; -import OfflinePack, { type OfflinePackStatus } from "./OfflinePack"; +import { OfflinePack, type OfflinePackStatus } from "./OfflinePack"; import { isUndefined, isFunction, isAndroid } from "../../utils"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; const MLRNOfflineModule = NativeModules.MLRNOfflineModule; export const OfflineModuleEventEmitter = new NativeEventEmitter( MLRNOfflineModule, @@ -67,7 +68,7 @@ class OfflineManager { * const progressListener = (offlineRegion, status) => console.log(offlineRegion, status); * const errorListener = (offlineRegion, err) => console.log(offlineRegion, err); * - * await MapLibreGL.offlineManager.createPack({ + * await OfflineManager.createPack({ * name: 'offlinePack', * styleURL: 'https://demotiles.maplibre.org/tiles/tiles.json', * minZoom: 14, @@ -106,7 +107,7 @@ class OfflineManager { * This is more efficient than deleting the offline pack and downloading it again. If the data stored locally matches that on the server, new data will not be downloaded. * * @example - * await MapLibreGL.offlineManager.invalidatePack('packName') + * await OfflineManager.invalidatePack('packName') * * @param {String} name Name of the offline pack. * @return {void} @@ -128,7 +129,7 @@ class OfflineManager { * Unregisters the given offline pack and allows resources that are no longer required by any remaining packs to be potentially freed. * * @example - * await MapLibreGL.offlineManager.deletePack('packName') + * await OfflineManager.deletePack('packName') * * @param {String} name Name of the offline pack. * @return {void} @@ -154,7 +155,7 @@ class OfflineManager { * It does not erase resources from the ambient cache or delete the database, which can be computationally expensive operations that may carry unintended side effects. * * @example - * await MapLibreGL.offlineManager.invalidateAmbientCache(); + * await OfflineManager.invalidateAmbientCache(); * * @return {void} */ @@ -168,7 +169,7 @@ class OfflineManager { * This method clears the cache and decreases the amount of space that map resources take up on the device. * * @example - * await MapLibreGL.offlineManager.clearAmbientCache(); + * await OfflineManager.clearAmbientCache(); * * @return {void} */ @@ -182,7 +183,7 @@ class OfflineManager { * This method may be computationally expensive because it will erase resources from the ambient cache if its size is decreased. * * @example - * await MapLibreGL.offlineManager.setMaximumAmbientCacheSize(5000000); + * await OfflineManager.setMaximumAmbientCacheSize(5000000); * * @param {Number} size Size of ambient cache. * @return {void} @@ -196,7 +197,7 @@ class OfflineManager { * Deletes the existing database, which includes both the ambient cache and offline packs, then reinitializes it. * * @example - * await MapLibreGL.offlineManager.resetDatabase(); + * await OfflineManager.resetDatabase(); * * @return {void} */ @@ -209,7 +210,7 @@ class OfflineManager { * Retrieves all the current offline packs that are stored in the database. * * @example - * const offlinePacks = await MapLibreGL.offlineManager.getPacks(); + * const offlinePacks = await OfflineManager.getPacks(); * * @return {Array} */ @@ -225,7 +226,7 @@ class OfflineManager { * Retrieves an offline pack that is stored in the database by name. * * @example - * const offlinePack = await MapLibreGL.offlineManager.getPack(); + * const offlinePack = await OfflineManager.getPack(); * * @param {String} name Name of the offline pack. * @return {OfflinePack} @@ -239,7 +240,7 @@ class OfflineManager { * Sideloads offline db * * @example - * await MapLibreGL.offlineManager.mergeOfflineRegions(path); + * await OfflineManager.mergeOfflineRegions(path); * * @param {String} path Path to offline tile db on file system. * @return {void} @@ -254,7 +255,7 @@ class OfflineManager { * Consult the Terms of Service for your map tile host before changing this value. * * @example - * MapLibreGL.offlineManager.setTileCountLimit(1000); + * OfflineManager.setTileCountLimit(1000); * * @param {Number} limit Map tile limit count. * @return {void} @@ -268,7 +269,7 @@ class OfflineManager { * The default is 500ms. * * @example - * MapLibreGL.offlineManager.setProgressEventThrottle(500); + * OfflineManager.setProgressEventThrottle(500); * * @param {Number} throttleValue event throttle value in ms. * @return {void} @@ -284,7 +285,7 @@ class OfflineManager { * @example * const progressListener = (offlinePack, status) => console.log(offlinePack, status) * const errorListener = (offlinePack, err) => console.log(offlinePack, err) - * MapLibreGL.offlineManager.subscribe('packName', progressListener, errorListener) + * OfflineManager.subscribe('packName', progressListener, errorListener) * * @param {string} packName Name of the offline pack. * @param {ProgressListener} progressListener Callback that listens for status events while downloading the offline resource. @@ -300,7 +301,7 @@ class OfflineManager { if (isFunction(progressListener)) { if (totalProgressListeners === 0) { this.subscriptionProgress = OfflineModuleEventEmitter.addListener( - MapLibreRN.OfflineCallbackName.Progress, + MLRNModule.OfflineCallbackName.Progress, this._onProgress, ); } @@ -311,7 +312,7 @@ class OfflineManager { if (isFunction(errorListener)) { if (totalErrorListeners === 0) { this.subscriptionError = OfflineModuleEventEmitter.addListener( - MapLibreRN.OfflineCallbackName.Error, + MLRNModule.OfflineCallbackName.Error, this._onError, ); } @@ -335,7 +336,7 @@ class OfflineManager { * It's a good idea to call this on componentWillUnmount. * * @example - * MapLibreGL.offlineManager.unsubscribe('packName') + * OfflineManager.unsubscribe('packName') * * @param {String} packName Name of the offline pack. * @return {void} @@ -390,7 +391,7 @@ class OfflineManager { } // cleanup listeners now that they are no longer needed - if (state === MapLibreRN.OfflinePackDownloadState.Complete) { + if (state === MLRNModule.OfflinePackDownloadState.Complete) { this.unsubscribe(name); } } @@ -421,4 +422,4 @@ class OfflineManager { } const offlineManager = new OfflineManager(); -export default offlineManager; +export { offlineManager as OfflineManager }; diff --git a/src/modules/offline/OfflinePack.ts b/src/modules/offline/OfflinePack.ts index 6503e883f..9357dbf7f 100644 --- a/src/modules/offline/OfflinePack.ts +++ b/src/modules/offline/OfflinePack.ts @@ -1,6 +1,6 @@ import { NativeModules } from "react-native"; -import OfflineCreatePackOptions from "./OfflineCreatePackOptions"; +import { OfflineCreatePackOptions } from "./OfflineCreatePackOptions"; const MLRNOfflineModule = NativeModules.MLRNOfflineModule; @@ -15,7 +15,7 @@ export type OfflinePackStatus = { requiredResourceCount: number; }; -class OfflinePack { +export class OfflinePack { private pack: OfflineCreatePackOptions; private _metadata: Record | null; @@ -52,5 +52,3 @@ class OfflinePack { return MLRNOfflineModule.pausePackDownload(this.name); } } - -export default OfflinePack; diff --git a/src/modules/snapshot/snapshotManager.ts b/src/modules/snapshot/SnapshotManager.ts similarity index 76% rename from src/modules/snapshot/snapshotManager.ts rename to src/modules/snapshot/SnapshotManager.ts index d005ff7cb..ed1f31d12 100644 --- a/src/modules/snapshot/snapshotManager.ts +++ b/src/modules/snapshot/SnapshotManager.ts @@ -1,11 +1,11 @@ import { NativeModules } from "react-native"; -import SnapshotOptions, { type SnapshotInputOptions } from "./SnapshotOptions"; +import { SnapshotOptions, type SnapshotInputOptions } from "./SnapshotOptions"; const MLRNSnapshotModule = NativeModules.MLRNSnapshotModule; /** - * The snapshotManager generates static raster images of the map. + * The SnapshotManager generates static raster images of the map. * Each snapshot image depicts a portion of a map defined by an SnapshotOptions object you provide. * The snapshotter generates the snapshot asynchronous. */ @@ -16,35 +16,35 @@ class SnapshotManager { * @example * * // creates a temp file png of base map - * const uri = await MapLibreGL.snapshotManager.takeSnap({ + * const uri = await SnapshotManager.takeSnap({ * centerCoordinate: [-74.126410, 40.797968], * width: width, * height: height, * zoomLevel: 12, * pitch: 30, * heading: 20, - * styleURL: MapLibreGL.StyleURL.Default, + * styleURL: StyleURL.Default, * writeToDisk: true, // Create a temporary file * }); * * // creates base64 png of base map without logo - * const uri = await MapLibreGL.snapshotManager.takeSnap({ + * const uri = await SnapshotManager.takeSnap({ * centerCoordinate: [-74.126410, 40.797968], * width: width, * height: height, * zoomLevel: 12, * pitch: 30, * heading: 20, - * styleURL: MapLibreGL.StyleURL.Default, + * styleURL: StyleURL.Default, * withLogo: false, // Disable Mapbox logo (Android only) * }); * * // creates snapshot with bounds - * const uri = await MapLibreGL.snapshotManager.takeSnap({ + * const uri = await SnapshotManager.takeSnap({ * bounds: [[-74.126410, 40.797968], [-74.143727, 40.772177]], * width: width, * height: height, - * styleURL: MapLibreGL.StyleURL.Default, + * styleURL: StyleURL.Default, * }); * * @param {SnapshotOptions} options Snapshot options for create a static image of the base map @@ -59,4 +59,4 @@ class SnapshotManager { } const snapshotManager = new SnapshotManager(); -export default snapshotManager; +export { snapshotManager as SnapshotManager }; diff --git a/src/modules/snapshot/SnapshotOptions.ts b/src/modules/snapshot/SnapshotOptions.ts index c1f76c824..63bfb40b3 100644 --- a/src/modules/snapshot/SnapshotOptions.ts +++ b/src/modules/snapshot/SnapshotOptions.ts @@ -3,7 +3,7 @@ import { NativeModules } from "react-native"; import { toJSONString } from "../../utils"; -const MapLibreRN = NativeModules.MLRNModule; +const MLRNModule = NativeModules.MLRNModule; export interface SnapshotInputOptions { centerCoordinate?: GeoJSON.Position; @@ -50,7 +50,7 @@ export class SnapshotOptions { ); } - this.styleURL = options.styleURL || MapLibreRN.StyleURL.Default; + this.styleURL = options.styleURL || MLRNModule.StyleURL.Default; this.heading = options.heading || 0.0; this.pitch = options.pitch || 0.0; this.zoomLevel = options.zoomLevel || 16.0; @@ -99,5 +99,3 @@ export class SnapshotOptions { return toJSONString(featureCollection(features)); } } - -export default SnapshotOptions; diff --git a/src/types/MapLibreRNStyles.ts b/src/types/MapLibreRNStyles.ts index f088c04d1..81a168f58 100644 --- a/src/types/MapLibreRNStyles.ts +++ b/src/types/MapLibreRNStyles.ts @@ -10,7 +10,7 @@ export interface Transition { delay: number; } -export type FormattedString = string; /* TODO */ +export type FormattedString = string; export type ExpressionName = // Types diff --git a/src/utils/BridgeValue.ts b/src/utils/BridgeValue.ts index 0d6ba5be1..6d51c4f47 100644 --- a/src/utils/BridgeValue.ts +++ b/src/utils/BridgeValue.ts @@ -16,7 +16,7 @@ export type StyleValueJSON = type StyleValueTypes = "boolean" | "number" | "string" | "hashmap" | "array"; -export default class BridgeValue { +export class BridgeValue { rawValue: RawValueType; constructor(rawValue: RawValueType) { diff --git a/src/utils/Logger.ts b/src/utils/Logger.ts index ea840996f..7a751d248 100644 --- a/src/utils/Logger.ts +++ b/src/utils/Logger.ts @@ -14,7 +14,7 @@ interface Log { type LogCallback = (log: Log) => boolean; -class Logger { +export class Logger { static instance: Logger | null = null; static sharedInstance(): Logger { @@ -129,5 +129,3 @@ class Logger { } } } - -export default Logger; diff --git a/src/utils/StyleValue.ts b/src/utils/StyleValue.ts index efa6a0353..cf9af59f7 100644 --- a/src/utils/StyleValue.ts +++ b/src/utils/StyleValue.ts @@ -1,6 +1,7 @@ import { Image, processColor } from "react-native"; -import BridgeValue, { +import { + BridgeValue, type RawValueType, type StyleValueJSON, } from "./BridgeValue"; diff --git a/src/utils/animated/AbstractAnimatedCoordinates.ts b/src/utils/animated/AbstractAnimatedCoordinates.ts index f4758e696..692abe171 100644 --- a/src/utils/animated/AbstractAnimatedCoordinates.ts +++ b/src/utils/animated/AbstractAnimatedCoordinates.ts @@ -17,7 +17,9 @@ const defaultConfig = { useNativeDriver: false, }; -abstract class AbstractAnimatedCoordinates extends AnimatedWithChildren { +export abstract class AbstractAnimatedCoordinates< + State, +> extends AnimatedWithChildren { constructor(coords: AnimatedCoordinates[]) { super(); @@ -130,5 +132,3 @@ abstract class AbstractAnimatedCoordinates extends AnimatedWithChildren { ); } } - -export default AbstractAnimatedCoordinates; diff --git a/src/utils/animated/Animated.ts b/src/utils/animated/Animated.ts index 0a684e193..93406d631 100644 --- a/src/utils/animated/Animated.ts +++ b/src/utils/animated/Animated.ts @@ -1,24 +1,29 @@ -import React from "react"; +import { + type ForwardRefExoticComponent, + type MemoExoticComponent, + type RefAttributes, +} from "react"; import { Animated as RNAnimated } from "react-native"; -import AnimatedCoordinatesArray from "./AnimatedCoordinatesArray"; -import AnimatedExtractCoordinateFromArray from "./AnimatedExtractCoordinateFromArray"; -import AnimatedRouteCoordinatesArray from "./AnimatedRouteCoordinatesArray"; -import AnimatedShape from "./AnimatedShape"; -import BackgroundLayer from "../../components/BackgroundLayer"; -import CircleLayer from "../../components/CircleLayer"; -import FillExtrusionLayer from "../../components/FillExtrusionLayer"; -import FillLayer from "../../components/FillLayer"; -import ImageSource from "../../components/ImageSource"; -import LineLayer from "../../components/LineLayer"; -import RasterLayer from "../../components/RasterLayer"; -import ShapeSource, { +import { AnimatedCoordinatesArray } from "./AnimatedCoordinatesArray"; +import { AnimatedExtractCoordinateFromArray } from "./AnimatedExtractCoordinateFromArray"; +import { AnimatedRouteCoordinatesArray } from "./AnimatedRouteCoordinatesArray"; +import { AnimatedShape } from "./AnimatedShape"; +import { BackgroundLayer } from "../../components/BackgroundLayer"; +import { CircleLayer } from "../../components/CircleLayer"; +import { FillExtrusionLayer } from "../../components/FillExtrusionLayer"; +import { FillLayer } from "../../components/FillLayer"; +import { ImageSource } from "../../components/ImageSource"; +import { LineLayer } from "../../components/LineLayer"; +import { RasterLayer } from "../../components/RasterLayer"; +import { + ShapeSource, type ShapeSourceProps, type ShapeSourceRef, } from "../../components/ShapeSource"; -import SymbolLayer from "../../components/SymbolLayer"; +import { SymbolLayer } from "../../components/SymbolLayer"; -const Animated = { +export const Animated = { // sources ShapeSource: RNAnimated.createAnimatedComponent(ShapeSource), ImageSource: RNAnimated.createAnimatedComponent(ImageSource), @@ -39,15 +44,14 @@ const Animated = { ExtractCoordinateFromArray: AnimatedExtractCoordinateFromArray, }; -type ShapeSourcePropsWithRef = ShapeSourceProps & - React.RefAttributes; +type ShapeSourcePropsWithRef = ShapeSourceProps & RefAttributes; type BaseShapeSourceComponent = - React.ForwardRefExoticComponent; + ForwardRefExoticComponent; type AnimatedShapeSourceType = RNAnimated.AnimatedComponent & - React.MemoExoticComponent; + MemoExoticComponent; /** * Manual typing is required for AnimatedShapeSource because the @@ -57,5 +61,3 @@ type AnimatedShapeSourceType = export const AnimatedShapeSource = RNAnimated.createAnimatedComponent( ShapeSource, ) as AnimatedShapeSourceType; - -export default Animated; diff --git a/src/utils/animated/AnimatedCoordinatesArray.ts b/src/utils/animated/AnimatedCoordinatesArray.ts index c622ee026..c5cdff6c1 100644 --- a/src/utils/animated/AnimatedCoordinatesArray.ts +++ b/src/utils/animated/AnimatedCoordinatesArray.ts @@ -1,4 +1,5 @@ -import AbstractAnimatedCoordinates, { +import { + AbstractAnimatedCoordinates, type AnimatedCoordinates, } from "./AbstractAnimatedCoordinates"; @@ -7,7 +8,7 @@ interface CoordinatesState { targetCoords: AnimatedCoordinates[]; } -class AnimatedCoordinatesArray extends AbstractAnimatedCoordinates { +export class AnimatedCoordinatesArray extends AbstractAnimatedCoordinates { /** * Subclasses can override to calculate initial state * @@ -109,5 +110,3 @@ class AnimatedCoordinatesArray extends AbstractAnimatedCoordinates { +export class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoordinates { /** * Calculate initial state * diff --git a/src/utils/animated/AnimatedShape.ts b/src/utils/animated/AnimatedShape.ts index 133d36a64..3820d5409 100644 --- a/src/utils/animated/AnimatedShape.ts +++ b/src/utils/animated/AnimatedShape.ts @@ -2,9 +2,9 @@ import { Animated } from "react-native"; -import AnimatedCoordinatesArray from "./AnimatedCoordinatesArray"; -import AnimatedExtractCoordinateFromArray from "./AnimatedExtractCoordinateFromArray"; -import AnimatedRouteCoordinatesArray from "./AnimatedRouteCoordinatesArray"; +import { AnimatedCoordinatesArray } from "./AnimatedCoordinatesArray"; +import { AnimatedExtractCoordinateFromArray } from "./AnimatedExtractCoordinateFromArray"; +import { AnimatedRouteCoordinatesArray } from "./AnimatedRouteCoordinatesArray"; // see // https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedWithChildren.js @@ -34,7 +34,7 @@ type Shape = * @example * */ -class AnimatedShape extends AnimatedWithChildren { +export class AnimatedShape extends AnimatedWithChildren { // equivalent of AnimatedStyle for shapes // https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedStyle.js @@ -89,5 +89,3 @@ class AnimatedShape extends AnimatedWithChildren { super.__detach(); } } - -export default AnimatedShape;