@maplibre/maplibre-react-native 8.6.0-beta.2 → 9.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/CONTRIBUTING.md +1 -1
- package/README.md +1 -3
- package/android/install.md +3 -3
- package/android/rctmgl/build.gradle +1 -1
- package/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/RCTMGLStyleFactory.java +33 -0
- package/app.plugin.js +1 -1
- package/docs/Annotation.md +1 -1
- package/docs/Annotations.md +3 -8
- package/docs/BackgroundLayer.md +2 -2
- package/docs/Callout.md +1 -1
- package/docs/Camera.md +2 -2
- package/docs/CircleLayer.md +31 -14
- package/docs/CustomHttpHeaders.md +9 -9
- package/docs/FillExtrusionLayer.md +2 -2
- package/docs/FillLayer.md +27 -10
- package/docs/GettingStarted.md +4 -6
- package/docs/HeadingIndicator.md +1 -1
- package/docs/HeatmapLayer.md +2 -2
- package/docs/ImageSource.md +1 -1
- package/docs/Images.md +1 -1
- package/docs/Light.md +1 -1
- package/docs/LineLayer.md +31 -14
- package/docs/{MapboxGL.md → MapLibreGL.md} +5 -5
- package/docs/MapView.md +5 -5
- package/docs/MarkerView.md +1 -1
- package/docs/NativeUserLocation.md +1 -1
- package/docs/OfflineManager.md +16 -16
- package/docs/PointAnnotation.md +1 -1
- package/docs/RasterLayer.md +2 -2
- package/docs/RasterSource.md +2 -2
- package/docs/ShapeSource.md +2 -2
- package/docs/Style.md +3 -3
- package/docs/StyleSheet.md +93 -72
- package/docs/SymbolLayer.md +17 -13
- package/docs/UserLocation.md +2 -2
- package/docs/VectorSource.md +2 -2
- package/docs/docs.json +102 -46
- package/docs/snapshotManager.md +7 -7
- package/index.d.ts +8 -7
- package/ios/RCTMGL/RCTMGLStyle.h +3 -0
- package/ios/RCTMGL/RCTMGLStyle.m +23 -2
- package/ios/RCTMGL/index.d.ts +24 -5
- package/ios/install.md +3 -3
- package/javascript/components/BackgroundLayer.js +2 -2
- package/javascript/components/Camera.js +6 -6
- package/javascript/components/CircleLayer.js +2 -2
- package/javascript/components/FillExtrusionLayer.js +2 -2
- package/javascript/components/FillLayer.js +2 -2
- package/javascript/components/HeatmapLayer.js +2 -2
- package/javascript/components/LineLayer.js +2 -2
- package/javascript/components/MapView.js +38 -41
- package/javascript/components/RasterLayer.js +2 -2
- package/javascript/components/RasterSource.js +2 -2
- package/javascript/components/ShapeSource.js +2 -2
- package/javascript/components/Style.js +3 -3
- package/javascript/components/SymbolLayer.js +2 -2
- package/javascript/components/UserLocation.js +2 -0
- package/javascript/components/VectorSource.js +2 -2
- package/javascript/index.js +38 -42
- package/javascript/modules/location/locationManager.js +8 -8
- package/javascript/modules/offline/OfflinePack.js +4 -4
- package/javascript/modules/offline/offlineManager.js +34 -34
- package/javascript/modules/snapshot/SnapshotOptions.js +2 -2
- package/javascript/modules/snapshot/snapshotManager.js +8 -8
- package/javascript/utils/styleMap.js +37 -6
- package/maplibre-react-native.podspec +1 -1
- package/package.json +5 -5
- package/plugin/build/{withMapbox.d.ts → withMapLibre.d.ts} +1 -1
- package/plugin/build/{withMapbox.js → withMapLibre.js} +7 -7
- package/scripts/download-style-spec.sh +2 -2
- package/scripts/templates/component.md.ejs +1 -1
- package/scripts/templates/styleMap.js.ejs +1 -1
- package/style-spec/v8.json +266 -43
package/docs/snapshotManager.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<!-- This file was autogenerated from snapshotManager.js do not modify -->
|
|
2
|
-
## <
|
|
2
|
+
## <MapLibreGL.snapshotManager />
|
|
3
3
|
### The snapshotManager generates static raster images of the map.<br/>Each snapshot image depicts a portion of a map defined by an SnapshotOptions object you provide.<br/>The snapshotter generates the snapshot asynchronous.
|
|
4
4
|
|
|
5
5
|
|
|
@@ -17,35 +17,35 @@ Takes a snapshot of the base map using the provided Snapshot options. NOTE pitch
|
|
|
17
17
|
|
|
18
18
|
```javascript
|
|
19
19
|
// creates a temp file png of base map
|
|
20
|
-
const uri = await
|
|
20
|
+
const uri = await MapLibreGL.snapshotManager.takeSnap({
|
|
21
21
|
centerCoordinate: [-74.126410, 40.797968],
|
|
22
22
|
width: width,
|
|
23
23
|
height: height,
|
|
24
24
|
zoomLevel: 12,
|
|
25
25
|
pitch: 30,
|
|
26
26
|
heading: 20,
|
|
27
|
-
styleURL:
|
|
27
|
+
styleURL: MapLibreGL.StyleURL.Dark,
|
|
28
28
|
writeToDisk: true, // Create a temporary file
|
|
29
29
|
});
|
|
30
30
|
|
|
31
31
|
// creates base64 png of base map without logo
|
|
32
|
-
const uri = await
|
|
32
|
+
const uri = await MapLibreGL.snapshotManager.takeSnap({
|
|
33
33
|
centerCoordinate: [-74.126410, 40.797968],
|
|
34
34
|
width: width,
|
|
35
35
|
height: height,
|
|
36
36
|
zoomLevel: 12,
|
|
37
37
|
pitch: 30,
|
|
38
38
|
heading: 20,
|
|
39
|
-
styleURL:
|
|
39
|
+
styleURL: MapLibreGL.StyleURL.Dark,
|
|
40
40
|
withLogo: false, // Disable Mapbox logo (Android only)
|
|
41
41
|
});
|
|
42
42
|
|
|
43
43
|
// creates snapshot with bounds
|
|
44
|
-
const uri = await
|
|
44
|
+
const uri = await MapLibreGL.snapshotManager.takeSnap({
|
|
45
45
|
bounds: [[-74.126410, 40.797968], [-74.143727, 40.772177]],
|
|
46
46
|
width: width,
|
|
47
47
|
height: height,
|
|
48
|
-
styleURL:
|
|
48
|
+
styleURL: MapLibreGL.StyleURL.Dark,
|
|
49
49
|
});
|
|
50
50
|
```
|
|
51
51
|
|
package/index.d.ts
CHANGED
|
@@ -88,7 +88,7 @@ type NamedStyles<T> = {
|
|
|
88
88
|
| BackgroundLayerStyle;
|
|
89
89
|
};
|
|
90
90
|
|
|
91
|
-
export type
|
|
91
|
+
export type MapLibreGLEvent<
|
|
92
92
|
T extends string,
|
|
93
93
|
P = GeoJSON.Feature,
|
|
94
94
|
V = Element
|
|
@@ -106,7 +106,7 @@ export type OnPressEvent = {
|
|
|
106
106
|
}
|
|
107
107
|
};
|
|
108
108
|
|
|
109
|
-
declare namespace
|
|
109
|
+
declare namespace MapLibreGL {
|
|
110
110
|
function removeCustomHeader(headerName: string): void;
|
|
111
111
|
function addCustomHeader(headerName: string, headerValue: string): void;
|
|
112
112
|
function setAccessToken(accessToken: string | null): void;
|
|
@@ -416,6 +416,7 @@ declare namespace MapboxGL {
|
|
|
416
416
|
Identity = 3,
|
|
417
417
|
}
|
|
418
418
|
|
|
419
|
+
// TODO: Figure out if these are even supported anymore
|
|
419
420
|
enum StyleURL {
|
|
420
421
|
Street = 'mapbox://styles/mapbox/streets-v11',
|
|
421
422
|
Dark = 'mapbox://styles/mapbox/dark-v10',
|
|
@@ -451,7 +452,7 @@ export interface RegionPayload {
|
|
|
451
452
|
|
|
452
453
|
export interface MapViewProps extends ViewProps {
|
|
453
454
|
animated?: boolean;
|
|
454
|
-
userTrackingMode?:
|
|
455
|
+
userTrackingMode?: MapLibreGL.UserTrackingModes;
|
|
455
456
|
userLocationVerticalAlignment?: number;
|
|
456
457
|
contentInset?: Array<number>;
|
|
457
458
|
style?: StyleProp<ViewStyle>;
|
|
@@ -486,7 +487,7 @@ export interface MapViewProps extends ViewProps {
|
|
|
486
487
|
onRegionDidChange?: (
|
|
487
488
|
feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
|
|
488
489
|
) => void;
|
|
489
|
-
onUserLocationUpdate?: (feature:
|
|
490
|
+
onUserLocationUpdate?: (feature: MapLibreGL.Location) => void;
|
|
490
491
|
onWillStartLoadingMap?: () => void;
|
|
491
492
|
onDidFinishLoadingMap?: () => void;
|
|
492
493
|
onDidFailLoadingMap?: () => void;
|
|
@@ -516,7 +517,7 @@ export interface CameraProps extends CameraSettings, ViewProps {
|
|
|
516
517
|
triggerKey?: any;
|
|
517
518
|
alignment?: number[];
|
|
518
519
|
onUserTrackingModeChange?: (
|
|
519
|
-
event:
|
|
520
|
+
event: MapLibreGLEvent<
|
|
520
521
|
'usertrackingmodechange',
|
|
521
522
|
{
|
|
522
523
|
followUserLocation: boolean;
|
|
@@ -554,7 +555,7 @@ export interface UserLocationProps {
|
|
|
554
555
|
children?: ReactNode;
|
|
555
556
|
minDisplacement?: number;
|
|
556
557
|
onPress?: () => void;
|
|
557
|
-
onUpdate?: (location:
|
|
558
|
+
onUpdate?: (location: MapLibreGL.Location) => void;
|
|
558
559
|
renderMode?: 'normal' | 'native';
|
|
559
560
|
showsUserHeadingIndicator?: boolean,
|
|
560
561
|
visible?: boolean;
|
|
@@ -950,4 +951,4 @@ export class Logger {
|
|
|
950
951
|
public static setLogLevel: (level: LogLevel) => void;
|
|
951
952
|
}
|
|
952
953
|
|
|
953
|
-
export default
|
|
954
|
+
export default MapLibreGL;
|
package/ios/RCTMGL/RCTMGLStyle.h
CHANGED
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
- (void)backgroundLayer:(MGLBackgroundStyleLayer *)layer withReactStyle:(NSDictionary *)reactStyle isValid:(BOOL (^)(void)) isValid;
|
|
26
26
|
- (void)lightLayer:(MGLLight *)layer withReactStyle:(NSDictionary *)reactStyle isValid:(BOOL (^)(void)) isValid;
|
|
27
27
|
|
|
28
|
+
- (void)setFillSortKey:(MGLFillStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
28
29
|
- (void)setFillStyleLayerVisibility:(MGLFillStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
29
30
|
- (void)setFillAntialias:(MGLFillStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
30
31
|
- (void)setFillOpacity:(MGLFillStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
@@ -42,6 +43,7 @@
|
|
|
42
43
|
- (void)setLineJoin:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
43
44
|
- (void)setLineMiterLimit:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
44
45
|
- (void)setLineRoundLimit:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
46
|
+
- (void)setLineSortKey:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
45
47
|
- (void)setLineStyleLayerVisibility:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
46
48
|
- (void)setLineOpacity:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
47
49
|
- (void)setLineOpacityTransition:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
@@ -131,6 +133,7 @@
|
|
|
131
133
|
- (void)setTextTranslate:(MGLSymbolStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
132
134
|
- (void)setTextTranslateTransition:(MGLSymbolStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
133
135
|
- (void)setTextTranslateAnchor:(MGLSymbolStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
136
|
+
- (void)setCircleSortKey:(MGLCircleStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
134
137
|
- (void)setCircleStyleLayerVisibility:(MGLCircleStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
135
138
|
- (void)setCircleRadius:(MGLCircleStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
|
136
139
|
- (void)setCircleRadiusTransition:(MGLCircleStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
|
package/ios/RCTMGL/RCTMGLStyle.m
CHANGED
|
@@ -30,7 +30,9 @@
|
|
|
30
30
|
|
|
31
31
|
RCTMGLStyleValue *styleValue = [RCTMGLStyleValue make:reactStyle[prop]];
|
|
32
32
|
|
|
33
|
-
if ([prop isEqualToString:@"
|
|
33
|
+
if ([prop isEqualToString:@"fillSortKey"]) {
|
|
34
|
+
[self setFillSortKey:layer withReactStyleValue:styleValue];
|
|
35
|
+
} else if ([prop isEqualToString:@"visibility"]) {
|
|
34
36
|
[self setFillStyleLayerVisibility:layer withReactStyleValue:styleValue];
|
|
35
37
|
} else if ([prop isEqualToString:@"fillAntialias"]) {
|
|
36
38
|
[self setFillAntialias:layer withReactStyleValue:styleValue];
|
|
@@ -100,6 +102,8 @@
|
|
|
100
102
|
[self setLineMiterLimit:layer withReactStyleValue:styleValue];
|
|
101
103
|
} else if ([prop isEqualToString:@"lineRoundLimit"]) {
|
|
102
104
|
[self setLineRoundLimit:layer withReactStyleValue:styleValue];
|
|
105
|
+
} else if ([prop isEqualToString:@"lineSortKey"]) {
|
|
106
|
+
[self setLineSortKey:layer withReactStyleValue:styleValue];
|
|
103
107
|
} else if ([prop isEqualToString:@"visibility"]) {
|
|
104
108
|
[self setLineStyleLayerVisibility:layer withReactStyleValue:styleValue];
|
|
105
109
|
} else if ([prop isEqualToString:@"lineOpacity"]) {
|
|
@@ -350,7 +354,9 @@
|
|
|
350
354
|
|
|
351
355
|
RCTMGLStyleValue *styleValue = [RCTMGLStyleValue make:reactStyle[prop]];
|
|
352
356
|
|
|
353
|
-
if ([prop isEqualToString:@"
|
|
357
|
+
if ([prop isEqualToString:@"circleSortKey"]) {
|
|
358
|
+
[self setCircleSortKey:layer withReactStyleValue:styleValue];
|
|
359
|
+
} else if ([prop isEqualToString:@"visibility"]) {
|
|
354
360
|
[self setCircleStyleLayerVisibility:layer withReactStyleValue:styleValue];
|
|
355
361
|
} else if ([prop isEqualToString:@"circleRadius"]) {
|
|
356
362
|
[self setCircleRadius:layer withReactStyleValue:styleValue];
|
|
@@ -681,6 +687,11 @@
|
|
|
681
687
|
|
|
682
688
|
|
|
683
689
|
|
|
690
|
+
- (void)setFillSortKey:(MGLFillStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue
|
|
691
|
+
{
|
|
692
|
+
layer.fillSortKey = styleValue.mglStyleValue;
|
|
693
|
+
}
|
|
694
|
+
|
|
684
695
|
- (void)setFillStyleLayerVisibility:(MGLFillStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue
|
|
685
696
|
{
|
|
686
697
|
layer.visible = [styleValue isVisible];
|
|
@@ -768,6 +779,11 @@
|
|
|
768
779
|
layer.lineRoundLimit = styleValue.mglStyleValue;
|
|
769
780
|
}
|
|
770
781
|
|
|
782
|
+
- (void)setLineSortKey:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue
|
|
783
|
+
{
|
|
784
|
+
layer.lineSortKey = styleValue.mglStyleValue;
|
|
785
|
+
}
|
|
786
|
+
|
|
771
787
|
- (void)setLineStyleLayerVisibility:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue
|
|
772
788
|
{
|
|
773
789
|
layer.visible = [styleValue isVisible];
|
|
@@ -1217,6 +1233,11 @@
|
|
|
1217
1233
|
|
|
1218
1234
|
|
|
1219
1235
|
|
|
1236
|
+
- (void)setCircleSortKey:(MGLCircleStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue
|
|
1237
|
+
{
|
|
1238
|
+
layer.circleSortKey = styleValue.mglStyleValue;
|
|
1239
|
+
}
|
|
1240
|
+
|
|
1220
1241
|
- (void)setCircleStyleLayerVisibility:(MGLCircleStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue
|
|
1221
1242
|
{
|
|
1222
1243
|
layer.visible = [styleValue isVisible];
|
package/ios/RCTMGL/index.d.ts
CHANGED
|
@@ -27,6 +27,11 @@ export interface TransitionProps {
|
|
|
27
27
|
export type TranslationProps = { x: number; y: number } | number[];
|
|
28
28
|
|
|
29
29
|
export interface fillLayerStyleProps {
|
|
30
|
+
/**
|
|
31
|
+
* Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
|
|
32
|
+
*/
|
|
33
|
+
fillSortKey: Value<number, ["zoom", "feature"]>;
|
|
34
|
+
|
|
30
35
|
/**
|
|
31
36
|
* Whether this layer is displayed.
|
|
32
37
|
*/
|
|
@@ -120,6 +125,11 @@ export interface lineLayerStyleProps {
|
|
|
120
125
|
*/
|
|
121
126
|
lineRoundLimit: Value<number, ["zoom"]>;
|
|
122
127
|
|
|
128
|
+
/**
|
|
129
|
+
* Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
|
|
130
|
+
*/
|
|
131
|
+
lineSortKey: Value<number, ["zoom", "feature"]>;
|
|
132
|
+
|
|
123
133
|
/**
|
|
124
134
|
* Whether this layer is displayed.
|
|
125
135
|
*/
|
|
@@ -249,17 +259,17 @@ export interface symbolLayerStyleProps {
|
|
|
249
259
|
symbolSpacing: Value<number, ["zoom"]>;
|
|
250
260
|
|
|
251
261
|
/**
|
|
252
|
-
* If true, the symbols will not cross tile edges to avoid mutual collisions. Recommended in layers that don't have enough padding in the vector tile to prevent collisions, or if it is a point symbol layer placed after a line symbol layer. When using a client that supports global collision detection, like
|
|
262
|
+
* If true, the symbols will not cross tile edges to avoid mutual collisions. Recommended in layers that don't have enough padding in the vector tile to prevent collisions, or if it is a point symbol layer placed after a line symbol layer. When using a client that supports global collision detection, like MapLibre GL JS version 0.42.0 or greater, enabling this property is not needed to prevent clipped labels at tile boundaries.
|
|
253
263
|
*/
|
|
254
264
|
symbolAvoidEdges: Value<boolean, ["zoom"]>;
|
|
255
265
|
|
|
256
266
|
/**
|
|
257
|
-
* Sorts features in ascending order based on this value. Features with
|
|
267
|
+
* Sorts features in ascending order based on this value. Features with lower sort keys are drawn and placed first. When `iconAllowOverlap` or `textAllowOverlap` is `false`, features with a lower sort key will have priority during placement. When `iconAllowOverlap` or `textAllowOverlap` is set to `true`, features with a higher sort key will overlap over features with a lower sort key.
|
|
258
268
|
*/
|
|
259
269
|
symbolSortKey: Value<number, ["zoom", "feature"]>;
|
|
260
270
|
|
|
261
271
|
/**
|
|
262
|
-
*
|
|
272
|
+
* Determines whether overlapping symbols in the same layer are rendered in the order that they appear in the data source or by their yPosition relative to the viewport. To control the order and prioritization of symbols otherwise, use `symbolSortKey`.
|
|
263
273
|
*/
|
|
264
274
|
symbolZOrder: Value<Enum<SymbolZOrderEnum, SymbolZOrderEnumValues>, ["zoom"]>;
|
|
265
275
|
|
|
@@ -267,6 +277,8 @@ export interface symbolLayerStyleProps {
|
|
|
267
277
|
* If true, the icon will be visible even if it collides with other previously drawn symbols.
|
|
268
278
|
*
|
|
269
279
|
* @requires iconImage
|
|
280
|
+
*
|
|
281
|
+
* @disabledBy iconOverlap
|
|
270
282
|
*/
|
|
271
283
|
iconAllowOverlap: Value<boolean, ["zoom"]>;
|
|
272
284
|
|
|
@@ -328,11 +340,11 @@ export interface symbolLayerStyleProps {
|
|
|
328
340
|
iconRotate: Value<number, ["zoom", "feature"]>;
|
|
329
341
|
|
|
330
342
|
/**
|
|
331
|
-
* Size of
|
|
343
|
+
* Size of additional area round the icon bounding box used for detecting symbol collisions. Values are declared using CSS margin shorthand syntax: a single value applies to all four sides; two values apply to [top/bottom, left/right]; three values apply to [top, left/right, bottom]; four values apply to [top, right, bottom, left]. For backwards compatibility, a single bare number is accepted, and treated the same as a oneElement array padding applied to all sides.
|
|
332
344
|
*
|
|
333
345
|
* @requires iconImage
|
|
334
346
|
*/
|
|
335
|
-
iconPadding: Value<number, ["zoom"]>;
|
|
347
|
+
iconPadding: Value<number, ["zoom", "feature"]>;
|
|
336
348
|
|
|
337
349
|
/**
|
|
338
350
|
* If true, the icon may be flipped to prevent it from being rendered upsideDown.
|
|
@@ -528,6 +540,8 @@ export interface symbolLayerStyleProps {
|
|
|
528
540
|
* If true, the text will be visible even if it collides with other previously drawn symbols.
|
|
529
541
|
*
|
|
530
542
|
* @requires textField
|
|
543
|
+
*
|
|
544
|
+
* @disabledBy textOverlap
|
|
531
545
|
*/
|
|
532
546
|
textAllowOverlap: Value<boolean, ["zoom"]>;
|
|
533
547
|
|
|
@@ -710,6 +724,11 @@ export interface symbolLayerStyleProps {
|
|
|
710
724
|
}
|
|
711
725
|
|
|
712
726
|
export interface circleLayerStyleProps {
|
|
727
|
+
/**
|
|
728
|
+
* Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
|
|
729
|
+
*/
|
|
730
|
+
circleSortKey: Value<number, ["zoom", "feature"]>;
|
|
731
|
+
|
|
713
732
|
/**
|
|
714
733
|
* Whether this layer is displayed.
|
|
715
734
|
*/
|
package/ios/install.md
CHANGED
|
@@ -12,7 +12,7 @@ Add the following to your `ios/Podfile`:
|
|
|
12
12
|
end
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
Running `pod install` will add version `5.
|
|
15
|
+
Running `pod install` will add version `5.13.0` of the MapLibre SDK.
|
|
16
16
|
|
|
17
17
|
```sh
|
|
18
18
|
# Go to the ios directory
|
|
@@ -34,7 +34,7 @@ until this is fixed upstream. iOS devs can open the workspace in Xcode and run f
|
|
|
34
34
|
|
|
35
35
|
## Installing a specific version
|
|
36
36
|
|
|
37
|
-
The current default MapLibre version is `5.
|
|
37
|
+
The current default MapLibre version is `5.13.0`.
|
|
38
38
|
If you want to install a different version, you can override as follows in
|
|
39
39
|
your `Podfile`:
|
|
40
40
|
|
|
@@ -43,7 +43,7 @@ $RNMBGL_Use_SPM = {
|
|
|
43
43
|
url: "https://github.com/maplibre/maplibre-gl-native-distribution",
|
|
44
44
|
requirement: {
|
|
45
45
|
kind: "upToNextMajorVersion",
|
|
46
|
-
minimumVersion: "5.
|
|
46
|
+
minimumVersion: "5.13.0"
|
|
47
47
|
},
|
|
48
48
|
product_name: "Mapbox"
|
|
49
49
|
}
|
|
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
|
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import {NativeModules, requireNativeComponent} from 'react-native';
|
|
9
9
|
|
|
10
|
-
const
|
|
10
|
+
const MapLibreGL = NativeModules.MGLModule;
|
|
11
11
|
|
|
12
12
|
export const NATIVE_MODULE_NAME = 'RCTMGLBackgroundLayer';
|
|
13
13
|
|
|
@@ -72,7 +72,7 @@ class BackgroundLayer extends AbstractLayer {
|
|
|
72
72
|
};
|
|
73
73
|
|
|
74
74
|
static defaultProps = {
|
|
75
|
-
sourceID:
|
|
75
|
+
sourceID: MapLibreGL.StyleSource.DefaultSourceID,
|
|
76
76
|
};
|
|
77
77
|
|
|
78
78
|
render() {
|
|
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
|
|
|
5
5
|
import {NativeModules, requireNativeComponent} from 'react-native';
|
|
6
6
|
import React from 'react';
|
|
7
7
|
|
|
8
|
-
const
|
|
8
|
+
const MapLibreGL = NativeModules.MGLModule;
|
|
9
9
|
|
|
10
10
|
export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
|
|
11
11
|
|
|
@@ -155,7 +155,7 @@ class Camera extends React.Component {
|
|
|
155
155
|
followUserLocation: PropTypes.bool,
|
|
156
156
|
|
|
157
157
|
/**
|
|
158
|
-
* 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 `
|
|
158
|
+
* 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.UserTrackingModes` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](../example/src/examples/SetUserTrackingModes.js)
|
|
159
159
|
*/
|
|
160
160
|
followUserMode: PropTypes.oneOf(['normal', 'compass', 'course']),
|
|
161
161
|
|
|
@@ -605,13 +605,13 @@ class Camera extends React.Component {
|
|
|
605
605
|
_getNativeCameraMode(config) {
|
|
606
606
|
switch (config.animationMode) {
|
|
607
607
|
case Camera.Mode.Flight:
|
|
608
|
-
return
|
|
608
|
+
return MapLibreGL.CameraModes.Flight;
|
|
609
609
|
case Camera.Mode.Move:
|
|
610
|
-
return
|
|
610
|
+
return MapLibreGL.CameraModes.None;
|
|
611
611
|
case Camera.Mode.Linear:
|
|
612
|
-
return
|
|
612
|
+
return MapLibreGL.CameraModes.Linear;
|
|
613
613
|
default:
|
|
614
|
-
return
|
|
614
|
+
return MapLibreGL.CameraModes.Ease;
|
|
615
615
|
}
|
|
616
616
|
}
|
|
617
617
|
|
|
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
|
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import {NativeModules, requireNativeComponent} from 'react-native';
|
|
9
9
|
|
|
10
|
-
const
|
|
10
|
+
const MapLibreGL = NativeModules.MGLModule;
|
|
11
11
|
|
|
12
12
|
export const NATIVE_MODULE_NAME = 'RCTMGLCircleLayer';
|
|
13
13
|
|
|
@@ -76,7 +76,7 @@ class CircleLayer extends AbstractLayer {
|
|
|
76
76
|
};
|
|
77
77
|
|
|
78
78
|
static defaultProps = {
|
|
79
|
-
sourceID:
|
|
79
|
+
sourceID: MapLibreGL.StyleSource.DefaultSourceID,
|
|
80
80
|
};
|
|
81
81
|
|
|
82
82
|
render() {
|
|
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
|
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import {NativeModules, requireNativeComponent} from 'react-native';
|
|
9
9
|
|
|
10
|
-
const
|
|
10
|
+
const MapLibreGL = NativeModules.MGLModule;
|
|
11
11
|
|
|
12
12
|
export const NATIVE_MODULE_NAME = 'RCTMGLFillExtrusionLayer';
|
|
13
13
|
|
|
@@ -75,7 +75,7 @@ class FillExtrusionLayer extends AbstractLayer {
|
|
|
75
75
|
};
|
|
76
76
|
|
|
77
77
|
static defaultProps = {
|
|
78
|
-
sourceID:
|
|
78
|
+
sourceID: MapLibreGL.StyleSource.DefaultSourceID,
|
|
79
79
|
};
|
|
80
80
|
|
|
81
81
|
render() {
|
|
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
|
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import {NativeModules, requireNativeComponent} from 'react-native';
|
|
9
9
|
|
|
10
|
-
const
|
|
10
|
+
const MapLibreGL = NativeModules.MGLModule;
|
|
11
11
|
|
|
12
12
|
export const NATIVE_MODULE_NAME = 'RCTMGLFillLayer';
|
|
13
13
|
|
|
@@ -75,7 +75,7 @@ class FillLayer extends AbstractLayer {
|
|
|
75
75
|
};
|
|
76
76
|
|
|
77
77
|
static defaultProps = {
|
|
78
|
-
sourceID:
|
|
78
|
+
sourceID: MapLibreGL.StyleSource.DefaultSourceID,
|
|
79
79
|
};
|
|
80
80
|
|
|
81
81
|
render() {
|
|
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
|
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import {NativeModules, requireNativeComponent} from 'react-native';
|
|
9
9
|
|
|
10
|
-
const
|
|
10
|
+
const MapLibreGL = NativeModules.MGLModule;
|
|
11
11
|
|
|
12
12
|
export const NATIVE_MODULE_NAME = 'RCTMGLHeatmapLayer';
|
|
13
13
|
|
|
@@ -76,7 +76,7 @@ class HeatmapLayer extends AbstractLayer {
|
|
|
76
76
|
};
|
|
77
77
|
|
|
78
78
|
static defaultProps = {
|
|
79
|
-
sourceID:
|
|
79
|
+
sourceID: MapLibreGL.StyleSource.DefaultSourceID,
|
|
80
80
|
};
|
|
81
81
|
|
|
82
82
|
render() {
|
|
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
|
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import {NativeModules, requireNativeComponent} from 'react-native';
|
|
9
9
|
|
|
10
|
-
const
|
|
10
|
+
const MapLibreGL = NativeModules.MGLModule;
|
|
11
11
|
|
|
12
12
|
export const NATIVE_MODULE_NAME = 'RCTMGLLineLayer';
|
|
13
13
|
|
|
@@ -75,7 +75,7 @@ class LineLayer extends AbstractLayer {
|
|
|
75
75
|
};
|
|
76
76
|
|
|
77
77
|
static defaultProps = {
|
|
78
|
-
sourceID:
|
|
78
|
+
sourceID: MapLibreGL.StyleSource.DefaultSourceID,
|
|
79
79
|
};
|
|
80
80
|
|
|
81
81
|
render() {
|
|
@@ -21,8 +21,8 @@ import {
|
|
|
21
21
|
} from 'react-native';
|
|
22
22
|
import {debounce} from 'debounce';
|
|
23
23
|
|
|
24
|
-
const
|
|
25
|
-
if (
|
|
24
|
+
const MapLibreGL = NativeModules.MGLModule;
|
|
25
|
+
if (MapLibreGL == null) {
|
|
26
26
|
console.error(
|
|
27
27
|
'Native part of Mapbox React Native libraries were not registered properly, double check our native installation guides.',
|
|
28
28
|
);
|
|
@@ -36,10 +36,10 @@ const styles = StyleSheet.create({
|
|
|
36
36
|
matchParent: {flex: 1},
|
|
37
37
|
});
|
|
38
38
|
|
|
39
|
-
const defaultStyleURL =
|
|
39
|
+
const defaultStyleURL = MapLibreGL.StyleURL.Street;
|
|
40
40
|
|
|
41
41
|
/**
|
|
42
|
-
* MapView backed by
|
|
42
|
+
* MapView backed by MapLibre GL Native
|
|
43
43
|
*/
|
|
44
44
|
class MapView extends NativeBridgeComponent(React.Component) {
|
|
45
45
|
static propTypes = {
|
|
@@ -59,7 +59,7 @@ class MapView extends NativeBridgeComponent(React.Component) {
|
|
|
59
59
|
style: PropTypes.any,
|
|
60
60
|
|
|
61
61
|
/**
|
|
62
|
-
* Style URL for map - notice, if non is set it _will_ default to `
|
|
62
|
+
* Style URL for map - notice, if non is set it _will_ default to `MapLibreGL.StyleURL.Street`
|
|
63
63
|
*/
|
|
64
64
|
styleURL: PropTypes.string,
|
|
65
65
|
|
|
@@ -106,13 +106,10 @@ class MapView extends NativeBridgeComponent(React.Component) {
|
|
|
106
106
|
rotateEnabled: PropTypes.bool,
|
|
107
107
|
|
|
108
108
|
/**
|
|
109
|
-
* The Mapbox terms of service, which governs the use of Mapbox-hosted vector tiles and styles,
|
|
110
|
-
* [requires](https://www.mapbox.com/help/how-attribution-works/) these copyright notices to accompany any map that features Mapbox-designed styles, OpenStreetMap data, or other Mapbox data such as satellite or terrain data.
|
|
111
|
-
* If that applies to this map view, do not hide this view or remove any notices from it.
|
|
112
|
-
*
|
|
113
|
-
* If this view is hidden, you must implement this setting elsewhere in your app. See our website for [Android](https://www.mapbox.com/android-docs/map-sdk/overview/#telemetry-opt-out) and [iOS](https://www.mapbox.com/ios-sdk/#telemetry_opt_out) for implementation details.
|
|
114
|
-
*
|
|
115
109
|
* Enable/Disable attribution on map.
|
|
110
|
+
*
|
|
111
|
+
* This must be enabled for Mapbox-hosted tiles and styles. Please refer to the Mapbox Terms of Service.
|
|
112
|
+
* Other providers do not require this.
|
|
116
113
|
*/
|
|
117
114
|
attributionEnabled: PropTypes.bool,
|
|
118
115
|
|
|
@@ -269,7 +266,7 @@ class MapView extends NativeBridgeComponent(React.Component) {
|
|
|
269
266
|
pitchEnabled: true,
|
|
270
267
|
rotateEnabled: true,
|
|
271
268
|
attributionEnabled: true,
|
|
272
|
-
logoEnabled:
|
|
269
|
+
logoEnabled: false,
|
|
273
270
|
surfaceView: false,
|
|
274
271
|
regionWillChangeDebounceTime: 10,
|
|
275
272
|
regionDidChangeDebounceTime: 500,
|
|
@@ -326,46 +323,46 @@ class MapView extends NativeBridgeComponent(React.Component) {
|
|
|
326
323
|
const events = [];
|
|
327
324
|
|
|
328
325
|
if (props.onRegionWillChange) {
|
|
329
|
-
events.push(
|
|
326
|
+
events.push(MapLibreGL.EventTypes.RegionWillChange);
|
|
330
327
|
}
|
|
331
328
|
if (props.onRegionIsChanging) {
|
|
332
|
-
events.push(
|
|
329
|
+
events.push(MapLibreGL.EventTypes.RegionIsChanging);
|
|
333
330
|
}
|
|
334
331
|
if (props.onRegionDidChange) {
|
|
335
|
-
events.push(
|
|
332
|
+
events.push(MapLibreGL.EventTypes.RegionDidChange);
|
|
336
333
|
}
|
|
337
334
|
if (props.onUserLocationUpdate) {
|
|
338
|
-
events.push(
|
|
335
|
+
events.push(MapLibreGL.EventTypes.UserLocationUpdated);
|
|
339
336
|
}
|
|
340
337
|
if (props.onWillStartLoadingMap) {
|
|
341
|
-
events.push(
|
|
338
|
+
events.push(MapLibreGL.EventTypes.WillStartLoadingMap);
|
|
342
339
|
}
|
|
343
340
|
if (props.onDidFinishLoadingMap) {
|
|
344
|
-
events.push(
|
|
341
|
+
events.push(MapLibreGL.EventTypes.DidFinishLoadingMap);
|
|
345
342
|
}
|
|
346
343
|
if (props.onDidFailLoadingMap) {
|
|
347
|
-
events.push(
|
|
344
|
+
events.push(MapLibreGL.EventTypes.DidFailLoadingMap);
|
|
348
345
|
}
|
|
349
346
|
if (props.onWillStartRenderingFrame) {
|
|
350
|
-
events.push(
|
|
347
|
+
events.push(MapLibreGL.EventTypes.WillStartRenderingFrame);
|
|
351
348
|
}
|
|
352
349
|
if (props.onDidFinishRenderingFrame) {
|
|
353
|
-
events.push(
|
|
350
|
+
events.push(MapLibreGL.EventTypes.DidFinishRenderingFrame);
|
|
354
351
|
}
|
|
355
352
|
if (props.onDidFinishRenderingFrameFully) {
|
|
356
|
-
events.push(
|
|
353
|
+
events.push(MapLibreGL.EventTypes.DidFinishRenderingFrameFully);
|
|
357
354
|
}
|
|
358
355
|
if (props.onWillStartRenderingMap) {
|
|
359
|
-
events.push(
|
|
356
|
+
events.push(MapLibreGL.EventTypes.WillStartRenderingMap);
|
|
360
357
|
}
|
|
361
358
|
if (props.onDidFinishRenderingMap) {
|
|
362
|
-
events.push(
|
|
359
|
+
events.push(MapLibreGL.EventTypes.DidFinishRenderingMap);
|
|
363
360
|
}
|
|
364
361
|
if (props.onDidFinishRenderingMapFully) {
|
|
365
|
-
events.push(
|
|
362
|
+
events.push(MapLibreGL.EventTypes.DidFinishRenderingMapFully);
|
|
366
363
|
}
|
|
367
364
|
if (props.onDidFinishLoadingStyle) {
|
|
368
|
-
events.push(
|
|
365
|
+
events.push(MapLibreGL.EventTypes.DidFinishLoadingStyle);
|
|
369
366
|
}
|
|
370
367
|
|
|
371
368
|
this._runNativeCommand(
|
|
@@ -564,7 +561,7 @@ class MapView extends NativeBridgeComponent(React.Component) {
|
|
|
564
561
|
|
|
565
562
|
_createStopConfig(config = {}) {
|
|
566
563
|
const stopConfig = {
|
|
567
|
-
mode: isNumber(config.mode) ? config.mode :
|
|
564
|
+
mode: isNumber(config.mode) ? config.mode : MapLibreGL.CameraModes.Ease,
|
|
568
565
|
pitch: config.pitch,
|
|
569
566
|
heading: config.heading,
|
|
570
567
|
duration: config.duration || 2000,
|
|
@@ -623,54 +620,54 @@ class MapView extends NativeBridgeComponent(React.Component) {
|
|
|
623
620
|
let propName = '';
|
|
624
621
|
|
|
625
622
|
switch (type) {
|
|
626
|
-
case
|
|
623
|
+
case MapLibreGL.EventTypes.RegionWillChange:
|
|
627
624
|
if (regionWillChangeDebounceTime > 0) {
|
|
628
625
|
this._onDebouncedRegionWillChange(payload);
|
|
629
626
|
} else {
|
|
630
627
|
propName = 'onRegionWillChange';
|
|
631
628
|
}
|
|
632
629
|
break;
|
|
633
|
-
case
|
|
630
|
+
case MapLibreGL.EventTypes.RegionIsChanging:
|
|
634
631
|
propName = 'onRegionIsChanging';
|
|
635
632
|
break;
|
|
636
|
-
case
|
|
633
|
+
case MapLibreGL.EventTypes.RegionDidChange:
|
|
637
634
|
if (regionDidChangeDebounceTime > 0) {
|
|
638
635
|
this._onDebouncedRegionDidChange(payload);
|
|
639
636
|
} else {
|
|
640
637
|
propName = 'onRegionDidChange';
|
|
641
638
|
}
|
|
642
639
|
break;
|
|
643
|
-
case
|
|
640
|
+
case MapLibreGL.EventTypes.UserLocationUpdated:
|
|
644
641
|
propName = 'onUserLocationUpdate';
|
|
645
642
|
break;
|
|
646
|
-
case
|
|
643
|
+
case MapLibreGL.EventTypes.WillStartLoadingMap:
|
|
647
644
|
propName = 'onWillStartLoadingMap';
|
|
648
645
|
break;
|
|
649
|
-
case
|
|
646
|
+
case MapLibreGL.EventTypes.DidFinishLoadingMap:
|
|
650
647
|
propName = 'onDidFinishLoadingMap';
|
|
651
648
|
break;
|
|
652
|
-
case
|
|
649
|
+
case MapLibreGL.EventTypes.DidFailLoadingMap:
|
|
653
650
|
propName = 'onDidFailLoadingMap';
|
|
654
651
|
break;
|
|
655
|
-
case
|
|
652
|
+
case MapLibreGL.EventTypes.WillStartRenderingFrame:
|
|
656
653
|
propName = 'onWillStartRenderingFrame';
|
|
657
654
|
break;
|
|
658
|
-
case
|
|
655
|
+
case MapLibreGL.EventTypes.DidFinishRenderingFrame:
|
|
659
656
|
propName = 'onDidFinishRenderingFrame';
|
|
660
657
|
break;
|
|
661
|
-
case
|
|
658
|
+
case MapLibreGL.EventTypes.DidFinishRenderingFrameFully:
|
|
662
659
|
propName = 'onDidFinishRenderingFrameFully';
|
|
663
660
|
break;
|
|
664
|
-
case
|
|
661
|
+
case MapLibreGL.EventTypes.WillStartRenderingMap:
|
|
665
662
|
propName = 'onWillStartRenderingMap';
|
|
666
663
|
break;
|
|
667
|
-
case
|
|
664
|
+
case MapLibreGL.EventTypes.DidFinishRenderingMap:
|
|
668
665
|
propName = 'onDidFinishRenderingMap';
|
|
669
666
|
break;
|
|
670
|
-
case
|
|
667
|
+
case MapLibreGL.EventTypes.DidFinishRenderingMapFully:
|
|
671
668
|
propName = 'onDidFinishRenderingMapFully';
|
|
672
669
|
break;
|
|
673
|
-
case
|
|
670
|
+
case MapLibreGL.EventTypes.DidFinishLoadingStyle:
|
|
674
671
|
propName = 'onDidFinishLoadingStyle';
|
|
675
672
|
break;
|
|
676
673
|
default:
|