Skip to content

Commit ffdeae9

Browse files
notclivenotclive
committed
feat: extend options to position controls that overlay the map
1 parent d30b7e2 commit ffdeae9

File tree

4 files changed

+107
-27
lines changed

4 files changed

+107
-27
lines changed

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -266,8 +266,11 @@ All currently supported options for your XML based map are (__don't__ use other
266266
|`zoomLevel`|0|0-20
267267
|`showUserLocation `|false|Requires location permissions on Android which you can remove from `AndroidManifest.xml` if you don't need them
268268
|`hideCompass `|false|Don't show the compass in the top right corner during rotation of the map
269+
|`compassPosition`|ControlPosition.TOP_RIGHT|Corner in which to position the compass
269270
|`hideLogo`|false|Mapbox requires `false` if you're on a free plan
271+
|`logoPosition`|ControlPosition.BOTTOM_LEFT|Corner in which to position the Mapbox logo
270272
|`hideAttribution `|true|Mapbox requires `false` if you're on a free plan
273+
|`attributionPosition`|ControlPosition.BOTTOM_LEFT|Corner in which to position the attribution link
271274
|`disableZoom`|false|Don't allow the user to zoom in or out (pinch and double-tap)
272275
|`disableRotation`|false|Don't allow the user to rotate the map (two finger gesture)
273276
|`disableScroll`|false|Don't allow the user to move the center of the map (one finger drag)

‎src/ui-mapbox/common.ts

+64-21
Original file line numberDiff line numberDiff line change
@@ -427,18 +427,24 @@ export interface ListOfflineRegionsOptions {
427427

428428
// ------------------------------------------------------------
429429

430+
export enum ControlPosition {
431+
TOP_LEFT,
432+
TOP_RIGHT,
433+
BOTTOM_LEFT,
434+
BOTTOM_RIGHT
435+
}
436+
430437
/**
431438
* The options object passed into the show function.
432439
*/
433-
434440
export interface ShowOptions {
435441
accessToken: string;
436442
/**
437443
* default 'streets'
438444
*/
439-
style?: MapStyle;
445+
style?: string | MapStyle;
440446
margins?: ShowOptionsMargins;
441-
center?: LatLng;
447+
center?: Partial<LatLng>;
442448
/**
443449
* default 0 (which is almost the entire planet)
444450
*/
@@ -451,14 +457,26 @@ export interface ShowOptions {
451457
* default false (required for the 'starter' plan)
452458
*/
453459
hideLogo?: boolean;
460+
/**
461+
* default BOTTOM_LEFT
462+
*/
463+
logoPosition?: ControlPosition;
454464
/**
455465
* default true
456466
*/
457467
hideAttribution?: boolean;
468+
/**
469+
* default BOTTOM_LEFT
470+
*/
471+
attributionPosition?: ControlPosition;
458472
/**
459473
* default false
460474
*/
461475
hideCompass?: boolean;
476+
/**
477+
* default TOP_RIGHT
478+
*/
479+
compassPosition?: ControlPosition;
462480
/**
463481
* default false
464482
*/
@@ -479,52 +497,46 @@ export interface ShowOptions {
479497
* Immediately add markers to the map
480498
*/
481499
markers?: MapboxMarker[];
482-
483500
/**
484501
* callback on location permission granted
485502
*
486503
* Android Only
487504
*/
488-
489505
onLocationPermissionGranted?: any;
490-
491506
/**
492507
* callback on location permission denied
493508
*
494509
* Android Only
495510
*/
496-
497511
onLocationPermissionDenied?: any;
498-
499512
/**
500513
* callback on Map Ready
501514
*/
502-
503515
onMapReady?: any;
504-
505516
/**
506517
* callback on scroll event
507518
*/
508-
509519
onScrollEvent?: any;
510-
511520
/**
512521
* callback on move begin event
513522
*/
514-
515523
onMoveBeginEvent?: any;
516-
517524
/**
518525
* Android context
519526
*/
520-
521527
context?: any;
522-
523528
/**
524529
* Android parent View
525530
*/
526-
527531
parentView?: any;
532+
/**
533+
* On Android by default there is a 200ms delay before showing the map to work around a race condition.
534+
*/
535+
delay?: number;
536+
/**
537+
* See https://docs.mapbox.com/archive/android/maps/api/9.0.0/com/mapbox/mapboxsdk/location/LocationComponentOptions.html
538+
*/
539+
locationComponentOptions: any;
528540
}
529541

530542
// ------------------------------------------------------------
@@ -724,9 +736,8 @@ export interface MapboxApi {
724736

725737
export abstract class MapboxCommon implements MapboxCommonApi {
726738
constructor(public view?: MapboxViewCommonBase) {}
727-
public static defaults = {
739+
public static defaults: Partial<ShowOptions> = {
728740
style: MapStyle.STREETS.toString(),
729-
mapStyle: MapStyle.STREETS.toString(),
730741
margins: {
731742
left: 0,
732743
right: 0,
@@ -737,8 +748,11 @@ export abstract class MapboxCommon implements MapboxCommonApi {
737748
showUserLocation: false, // true requires adding `NSLocationWhenInUseUsageDescription` or `NSLocationAlwaysUsageDescription` in the .plist
738749
locationComponentOptions: {},
739750
hideLogo: false, // required for the 'starter' plan
751+
logoPosition: ControlPosition.BOTTOM_LEFT, // The default position mimics constructor of MapboxMapOptions
740752
hideAttribution: true,
753+
attributionPosition: ControlPosition.BOTTOM_LEFT, // The default position mimics constructor of MapboxMapOptions
741754
hideCompass: false,
755+
compassPosition: ControlPosition.TOP_RIGHT, // The default position mimics constructor of MapboxMapOptions
742756
disableRotation: false,
743757
disableScroll: false,
744758
disableZoom: false,
@@ -1152,13 +1166,25 @@ export const hideLogoProperty = new Property<MapboxViewCommonBase, boolean>({
11521166
});
11531167
hideLogoProperty.register(MapboxViewCommonBase);
11541168

1169+
export const logoPositionProperty = new Property<MapboxViewCommonBase, ControlPosition>({
1170+
name: 'logoPosition',
1171+
defaultValue: MapboxCommon.defaults.logoPosition
1172+
});
1173+
logoPositionProperty.register(MapboxViewCommonBase);
1174+
11551175
export const hideAttributionProperty = new Property<MapboxViewCommonBase, boolean>({
11561176
name: 'hideAttribution',
11571177
defaultValue: MapboxCommon.defaults.hideAttribution,
11581178
valueConverter: booleanConverter
11591179
});
11601180
hideAttributionProperty.register(MapboxViewCommonBase);
11611181

1182+
export const attributionPositionProperty = new Property<MapboxViewCommonBase, ControlPosition>({
1183+
name: 'attributionPosition',
1184+
defaultValue: MapboxCommon.defaults.attributionPosition
1185+
});
1186+
attributionPositionProperty.register(MapboxViewCommonBase);
1187+
11621188
export const telemetryProperty = new Property<MapboxViewCommonBase, boolean>({
11631189
name: 'telemetry',
11641190
defaultValue: false,
@@ -1173,6 +1199,12 @@ export const hideCompassProperty = new Property<MapboxViewCommonBase, boolean>({
11731199
});
11741200
hideCompassProperty.register(MapboxViewCommonBase);
11751201

1202+
export const compassPositionProperty = new Property<MapboxViewCommonBase, ControlPosition>({
1203+
name: 'compassPosition',
1204+
defaultValue: MapboxCommon.defaults.compassPosition
1205+
});
1206+
compassPositionProperty.register(MapboxViewCommonBase);
1207+
11761208
export const disableZoomProperty = new Property<MapboxViewCommonBase, boolean>({
11771209
name: 'disableZoom',
11781210
defaultValue: MapboxCommon.defaults.disableZoom,
@@ -1229,15 +1261,14 @@ export abstract class MapboxViewBase extends MapboxViewCommonBase {
12291261
public static locationPermissionGrantedEvent: string = 'locationPermissionGranted';
12301262
public static locationPermissionDeniedEvent: string = 'locationPermissionDenied';
12311263

1232-
protected config: any = {};
1264+
protected config: Partial<ShowOptions> = {};
12331265

12341266
[zoomLevelProperty.setNative](value: number) {
12351267
this.config.zoomLevel = +value;
12361268
}
12371269

12381270
[mapStyleProperty.setNative](value: string) {
12391271
this.config.style = value;
1240-
this.config.mapStyle = value;
12411272
}
12421273

12431274
[accessTokenProperty.setNative](value: string) {
@@ -1270,14 +1301,26 @@ export abstract class MapboxViewBase extends MapboxViewCommonBase {
12701301
this.config.hideLogo = value;
12711302
}
12721303

1304+
[logoPositionProperty.setNative](value: ControlPosition) {
1305+
this.config.logoPosition = value;
1306+
}
1307+
12731308
[hideAttributionProperty.setNative](value: boolean) {
12741309
this.config.hideAttribution = value;
12751310
}
12761311

1312+
[attributionPositionProperty.setNative](value: ControlPosition) {
1313+
this.config.attributionPosition = value;
1314+
}
1315+
12771316
[hideCompassProperty.setNative](value: boolean) {
12781317
this.config.hideCompass = value;
12791318
}
12801319

1320+
[compassPositionProperty.setNative](value: ControlPosition) {
1321+
this.config.compassPosition = value;
1322+
}
1323+
12811324
[disableZoomProperty.setNative](value: boolean) {
12821325
this.config.disableZoom = value;
12831326
}

‎src/ui-mapbox/index.android.ts

+22-5
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
AnimateCameraOptions,
1818
CLog,
1919
CLogTypes,
20+
ControlPosition,
2021
DeleteOfflineRegionOptions,
2122
DownloadOfflineRegionOptions,
2223
Feature,
@@ -126,7 +127,7 @@ export class MapboxView extends MapboxViewBase {
126127

127128
private nativeMapView: any; // com.mapbox.mapboxsdk.maps.MapView
128129

129-
private settings: any = null;
130+
private settings: ShowOptions = null;
130131

131132
// whether or not the view has already been initialized.
132133
// see initNativeView()
@@ -144,7 +145,7 @@ export class MapboxView extends MapboxViewBase {
144145
/**
145146
* programmatically include settings
146147
*/
147-
setConfig(settings: any) {
148+
setConfig(settings: ShowOptions) {
148149
// zoom level is not applied unless center is set
149150

150151
if (settings.zoomLevel && !settings.center) {
@@ -170,7 +171,7 @@ export class MapboxView extends MapboxViewBase {
170171
*
171172
* @see Mapbox
172173
*/
173-
public getMapboxApi(): any {
174+
public getMapboxApi() {
174175
return this.mapbox;
175176
}
176177

@@ -2900,15 +2901,18 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
29002901
* @link https://docs.mapbox.com/android/api/map-sdk/7.1.2/com/mapbox/mapboxsdk/maps/MapboxMapOptions.html
29012902
*/
29022903

2903-
_getMapboxMapOptions(settings) {
2904+
_getMapboxMapOptions(settings: ShowOptions) {
29042905
const mapboxMapOptions = new com.mapbox.mapboxsdk.maps.MapboxMapOptions()
29052906
.compassEnabled(!settings.hideCompass)
2907+
.compassGravity(Mapbox.mapPositionToGravity(settings.compassPosition))
29062908
.rotateGesturesEnabled(!settings.disableRotation)
29072909
.scrollGesturesEnabled(!settings.disableScroll)
29082910
.tiltGesturesEnabled(!settings.disableTilt)
29092911
.zoomGesturesEnabled(!settings.disableZoom)
29102912
.attributionEnabled(!settings.hideAttribution)
2911-
.logoEnabled(!settings.hideLogo);
2913+
.attributionGravity(Mapbox.mapPositionToGravity(settings.attributionPosition))
2914+
.logoEnabled(!settings.hideLogo)
2915+
.logoGravity(Mapbox.mapPositionToGravity(settings.logoPosition));
29122916

29132917
// zoomlevel is not applied unless center is set
29142918
if (settings.zoomLevel && !settings.center) {
@@ -2929,6 +2933,19 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
29292933
return mapboxMapOptions;
29302934
}
29312935

2936+
private static mapPositionToGravity(position: ControlPosition) {
2937+
switch (position) {
2938+
case ControlPosition.TOP_LEFT:
2939+
return android.view.Gravity.TOP | android.view.Gravity.START;
2940+
case ControlPosition.TOP_RIGHT:
2941+
return android.view.Gravity.TOP | android.view.Gravity.END;
2942+
case ControlPosition.BOTTOM_LEFT:
2943+
return android.view.Gravity.BOTTOM | android.view.Gravity.START;
2944+
case ControlPosition.BOTTOM_RIGHT:
2945+
return android.view.Gravity.BOTTOM | android.view.Gravity.END;
2946+
}
2947+
}
2948+
29322949
/**
29332950
* convert string to camera mode constant.
29342951
*

‎src/ui-mapbox/index.ios.ts

+18-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
AnimateCameraOptions,
99
CLog,
1010
CLogTypes,
11+
ControlPosition,
1112
DeleteOfflineRegionOptions,
1213
DownloadOfflineRegionOptions,
1314
Feature,
@@ -517,10 +518,13 @@ export * from './common';
517518
let _markers = [];
518519
const _markerIconDownloadCache = [];
519520

520-
const _setMapboxMapOptions = (mapView: MGLMapView, settings) => {
521+
const _setMapboxMapOptions = (mapView: MGLMapView, settings: ShowOptions) => {
521522
mapView.logoView.hidden = settings.hideLogo;
523+
mapView.logoViewPosition = _mapControlPositionToOrnamentPosition(settings.logoPosition);
522524
mapView.attributionButton.hidden = settings.hideAttribution;
525+
mapView.attributionButtonPosition = _mapControlPositionToOrnamentPosition(settings.attributionPosition);
523526
mapView.compassView.hidden = settings.hideCompass;
527+
mapView.compassViewPosition = _mapControlPositionToOrnamentPosition(settings.compassPosition);
524528
mapView.rotateEnabled = !settings.disableRotation;
525529
mapView.scrollEnabled = !settings.disableScroll;
526530
mapView.zoomEnabled = !settings.disableZoom;
@@ -538,6 +542,19 @@ const _setMapboxMapOptions = (mapView: MGLMapView, settings) => {
538542
mapView.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
539543
};
540544

545+
const _mapControlPositionToOrnamentPosition = (position: ControlPosition) => {
546+
switch (position) {
547+
case ControlPosition.TOP_LEFT:
548+
return MGLOrnamentPosition.TopLeft;
549+
case ControlPosition.TOP_RIGHT:
550+
return MGLOrnamentPosition.TopRight;
551+
case ControlPosition.BOTTOM_LEFT:
552+
return MGLOrnamentPosition.BottomLeft;
553+
case ControlPosition.BOTTOM_RIGHT:
554+
return MGLOrnamentPosition.BottomRight;
555+
}
556+
};
557+
541558
const _getMapStyle = (input: any): NSURL => {
542559
if (input.startsWith('mapbox://styles') || input.startsWith('http://') || input.startsWith('https://')) {
543560
return NSURL.URLWithString(input);

0 commit comments

Comments
 (0)