Skip to content

Commit 3a0cc72

Browse files
tuyen-vuductuyen-vuduc
committed
fix: Revise README
1 parent 3805a8c commit 3a0cc72

File tree

3 files changed

+95
-133
lines changed

3 files changed

+95
-133
lines changed

‎README.md‎

Lines changed: 89 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -8,152 +8,108 @@ A dedicated library and starting sample for integrating Mapbox into your MAUI ap
88
Install-Package Mapbox.Maui --version 10.11.1
99
```
1010

11-
## Setup
11+
## Integrate into your project
1212

13-
1/ MAPBOX_DOWNLOADS_TOKEN
13+
Please check out [my step-by-step blog post](https://tuyen-vuduc.tech/how-to-use-mapbox-in-your-dotnet-maui-app) for more details.
1414

15-
All Mapbox libraries required an access token to download them for use.
16-
Please follow [the guide from Mapbox](https://docs.mapbox.com/android/maps/guides/install/) and go the dashboard of your Mapbox account and grab one.
15+
## How to run the examples
1716

18-
a/ Android
19-
On Android, we will leverage the gradle way of downloading Mapbox native libraries, please set `MAPBOX_DOWNLOADS_TOKEN` property and put it in `~/.gradle/gradle.properties` as below example
17+
### Prerequisites
18+
- Visual Studio for Mac or Visual Studio for Windows
19+
- .NET 7.0.306
20+
- .NET workloads for iOS, Android, MAUI
2021

21-
```
22-
MAPBOX_DOWNLOADS_TOKEN=YOUR_MAPBOX_DOWNLOADS_TOKEN
23-
```
22+
### Steps
2423

25-
b/ iOS
26-
oOn iOS, we will need to edit iOS's CSPROJ file to have `MAPBOX_DOWNLOADS_TOKEN` property as below example.
24+
- 1/ Generate/grab `MAPBOX_DOWNLOADS_TOKEN` from [your Mapbox account page](https://account.mapbox.com/)
25+
26+
- 2/ Android: Put it into your local `~/.gradle/gradle.properties`
2727

28+
```bash
29+
echo "MAPBOX_DOWNLOADS_TOKEN=YOUR_MAPBOX_DOWNLOADS_TOKEN" >> ~/.gradle/gradle.properties
2830
```
29-
<Project ...>
30-
...
31-
32-
<PropertyGroup>
33-
<MAPBOX_DOWNLOADS_TOKEN>YOUR_MAPBOX_DOWNLOADS_TOKEN</MAPBOX_DOWNLOADS_TOKEN>
34-
</PropertyGroup>
35-
...
36-
</Project>
37-
```
38-
39-
2/ Android addtional setup
40-
As Mapbox has its own private Gradle repository, we need to add these lines to Android's CSPROJ file.
41-
42-
```
43-
<Project ...>
44-
...
45-
46-
<ItemGroup>
47-
<GradleRepository Include="https://api.mapbox.com/downloads/v2/releases/maven">
48-
<Repository>
49-
maven {
50-
url 'https://api.mapbox.com/downloads/v2/releases/maven'
51-
authentication {
52-
basic(BasicAuthentication)
53-
}
54-
credentials {
55-
// Do not change the username below.
56-
// This should always be `mapbox` (not your username).
57-
username = "mapbox"
58-
// Use the secret token you stored in gradle.properties as the password
59-
password = MAPBOX_DOWNLOADS_TOKEN
60-
}
61-
}
62-
</Repository>
63-
</GradleRepository>
64-
</ItemGroup>
65-
66-
...
67-
</Project>
68-
```
31+
- 3/ Make a copy of `MapboxMauiQs.props.template`
32+
- Name it `MapboxMauiQs.props`
33+
- Replace `YOUR_MAPBOX_DOWNLOADS_TOKEN` with yours in `MapboxMauiQs.props` file
34+
- 4/ Grab `mapbox_access_token` from [your Mapbox account page](https://account.mapbox.com/)
35+
- Make a copy of `MauiProgram.dev.cs.template`
36+
- Name it `MauiProgram.dev.cs`
37+
- Replace `YOUR_MAPBOX_ACCESS_TOKEN` with yours in `MauiProgram.dev.cs` file
6938

70-
2/ YOUR_ACCESS_TOKEN
39+
![Files with ignored](assets/files-w-ignored.png)
7140

72-
To display Mapbox Map in your app, you will need another access token which can be easily grabbed by following [the guide from Mapbox](https://docs.mapbox.com/help/getting-started/access-tokens/).
73-
74-
You can set it conventionally in `strings.xml` for Android or in `info.plist` for iOS. Otherwise, you can also set the value in code as the guide from Mapbox documetation.
75-
76-
a/ Android's `strings.xml`
77-
```
78-
<string name="mapbox_access_token">YOUR_MAPBOX_ACCESS_TOKEN</string>
79-
```
80-
81-
b/ iOS's `info.plist`
82-
```
83-
<key>MBXAccessToken</key>
84-
<string>YOUR_MAPBOX_ACCESS_TOKEN</string>
85-
```
41+
- 5/ Run the solution
8642

8743
# Ported Examples
8844

89-
| # | Example | Ported |
45+
| # | Example | Ported (18/66) |
9046
| - | - | - |
91-
| 1 | [AddMarkersSymbolExample](./mapboxqs/AddMarkersSymbolExample.m) | OK |
92-
| 2 | [AddOneMarkerSymbolExample](./mapboxqs/AddOneMarkerSymbolExample.m) | OK |
93-
| 3 | [AdvancedViewportGesturesExample](./mapboxqs/AdvancedViewportGesturesExample.m) | |
94-
| 4 | [AnimateGeoJSONLineExample](./mapboxqs/AnimateGeoJSONLineExample.m) | |
95-
| 5 | [AnimateImageLayerExample](./mapboxqs/AnimateImageLayerExample.m) | |
96-
| 6 | [AnimateLayerExample](./mapboxqs/AnimateLayerExample.m) | |
97-
| 7 | [AnimatedMarkerExample](./mapboxqs/AnimatedMarkerExample.m) | OK |
98-
| 8 | [BasicLocationPulsingExample](./mapboxqs/BasicLocationPulsingExample.m) | |
99-
| 9 | [BasicMapExample](./mapboxqs/BasicMapExample.m) | OK |
100-
| 10 | [BuildingExtrusionsExample](./mapboxqs/BuildingExtrusionsExample.m) | OK |
101-
| 11 | [CameraAnimationExample](./mapboxqs/CameraAnimationExample.m) | |
102-
| 12 | [CameraAnimatorsExample](./mapboxqs/CameraAnimatorsExample.m) | |
103-
| 13 | [CircleAnnotationExample](./mapboxqs/CircleAnnotationExample.m) | OK |
104-
| 14 | [ColorExpressionExample](./mapboxqs/ColorExpressionExample.m) | |
105-
| 15 | [Custom2DPuckExample](./mapboxqs/Custom2DPuckExample.m) | |
106-
| 16 | [Custom3DPuckExample](./mapboxqs/Custom3DPuckExample.m) | |
107-
| 17 | [CustomLayerExample](./mapboxqs/CustomLayerExample.m) | |
108-
| 18 | [CustomLocationProviderExample](./mapboxqs/CustomLocationProviderExample.m) | |
109-
| 19 | [CustomPointAnnotationExample](./mapboxqs/CustomPointAnnotationExample.m) | OK |
110-
| 20 | [CustomStyleURLExample](./mapboxqs/CustomStyleURLExample.m) | OK |
111-
| 21 | [DataDrivenSymbolsExample](./mapboxqs/DataDrivenSymbolsExample.m) | |
112-
| 22 | [DataJoinExample](./mapboxqs/DataJoinExample.m) | |
113-
| 23 | [DebugMapExample](./mapboxqs/DebugMapExample.m) | OK |
114-
| 24 | [DistanceExpressionExample](./mapboxqs/DistanceExpressionExample.m) | |
115-
| 25 | [ExternalVectorSourceExample](./mapboxqs/ExternalVectorSourceExample.m) | |
116-
| 26 | [FeatureStateExample](./mapboxqs/FeatureStateExample.m) | |
117-
| 27 | [FeaturesAtPointExample](./mapboxqs/FeaturesAtPointExample.m) | |
118-
| 28 | [FrameViewAnnotationsExample](./mapboxqs/FrameViewAnnotationsExample.m) | |
119-
| 29 | [GlobeExample](./mapboxqs/GlobeExample.m) | |
120-
| 30 | [GlobeFlyToExample](./mapboxqs/GlobeFlyToExample.m) | |
121-
| 31 | [HeatmapLayerGlobeExample](./mapboxqs/HeatmapLayerGlobeExample.m) | |
122-
| 32 | [IconSizeChangeExample](./mapboxqs/IconSizeChangeExample.m) | OK |
123-
| 33 | [LargeGeoJSONPerformanceExample](./mapboxqs/LargeGeoJSONPerformanceExample.m) | |
124-
| 34 | [LayerPositionExample](./mapboxqs/LayerPositionExample.m) | |
125-
| 35 | [LineAnnotationExample](./mapboxqs/LineAnnotationExample.m) | OK |
126-
| 36 | [LineGradientExample](./mapboxqs/LineGradientExample.m) | |
127-
| 37 | [LiveDataExample](./mapboxqs/LiveDataExample.m) | |
128-
| 38 | [LocalizationExample](./mapboxqs/LocalizationExample.m) | |
129-
| 39 | [MultipleGeometriesExample](./mapboxqs/MultipleGeometriesExample.m) | OK |
130-
| 40 | [NavigationSimulatorExample](./mapboxqs/NavigationSimulatorExample.m) | |
131-
| 41 | [OfflineManagerExample](./mapboxqs/OfflineManagerExample.m) | OK |
132-
| 42 | [OfflineRegionManagerExample](./mapboxqs/OfflineRegionManagerExample.m) | |
133-
| 43 | [PitchAndDistanceExample](./mapboxqs/PitchAndDistanceExample.m) | |
134-
| 44 | [PointAnnotationClusteringExample](./mapboxqs/PointAnnotationClusteringExample.m) | OK |
135-
| 45 | [PointClusteringExample](./mapboxqs/PointClusteringExample.m) | |
136-
| 46 | [PolygonAnnotationExample](./mapboxqs/PolygonAnnotationExample.m) | OK |
137-
| 47 | [RasterTileSourceExample](./mapboxqs/RasterTileSourceExample.m) | |
138-
| 48 | [ResizableImageExample](./mapboxqs/ResizableImageExample.m) | |
139-
| 49 | [RestrictCoordinateBoundsExample](./mapboxqs/RestrictCoordinateBoundsExample.m) | |
140-
| 50 | [SceneKitExample](./mapboxqs/SceneKitExample.m) | N/A |
141-
| 51 | [ShowHideLayerExample](./mapboxqs/ShowHideLayerExample.m) | |
142-
| 52 | [SkyLayerExample](./mapboxqs/SkyLayerExample.m) | OK |
143-
| 53 | [SnapshotterCoreGraphicsExample](./mapboxqs/SnapshotterCoreGraphicsExample.m) | |
144-
| 54 | [SnapshotterExample](./mapboxqs/SnapshotterExample.m) | |
145-
| 55 | [SpinningGlobeExample](./mapboxqs/SpinningGlobeExample.m) | |
146-
| 56 | [StoryboardMapViewExample](./mapboxqs/StoryboardMapViewExample.m) | N/A |
147-
| 57 | [SwitchStylesExample](./mapboxqs/SwitchStylesExample.m) | |
148-
| 58 | [SymbolClusteringExample](./mapboxqs/SymbolClusteringExample.m) | OK |
149-
| 59 | [TerrainExample](./mapboxqs/TerrainExample.m) | OK |
150-
| 60 | [TrackingModeExample](./mapboxqs/TrackingModeExample.m) | |
151-
| 61 | [ViewAnnotationAnimationExample](./mapboxqs/ViewAnnotationAnimationExample.m) | |
152-
| 62 | [ViewAnnotationBasicExample](./mapboxqs/ViewAnnotationBasicExample.m) | |
153-
| 63 | [ViewAnnotationMarkerExample](./mapboxqs/ViewAnnotationMarkerExample.m) | |
154-
| 64 | [ViewAnnotationWithPointAnnotationExample](./mapboxqs/ViewAnnotationWithPointAnnotationExample.m) | |
155-
| 65 | [ViewportExample](./mapboxqs/ViewportExample.m) | |
156-
| 66 | [VoiceOverAccessibilityExample](./mapboxqs/VoiceOverAccessibilityExample.m) | |
47+
| 1 | [AddMarkersSymbol](./src/qs/MapboxMauiQs/Examples/01.AddMarkersSymbol/AddMarkersSymbolExample.cs) | OK |
48+
| 2 | [AddOneMarkerSymbol](./src/qs/MapboxMauiQs/Examples/02.AddOneMarkerSymbol/AddOneMarkerSymbolExample.cs) | OK |
49+
| 3 | [AdvancedViewportGestures](./src/qs/MapboxMauiQs/Examples/03.AdvancedViewportGestures/AdvancedViewportGesturesExample.cs) | |
50+
| 4 | [AnimateGeoJSONLine](./src/qs/MapboxMauiQs/Examples/04.AnimateGeoJSONLine/AnimateGeoJSONLineExample.cs) | |
51+
| 5 | [AnimateImageLayer](./src/qs/MapboxMauiQs/Examples/05.AnimateImageLayer/AnimateImageLayerExample.cs) | |
52+
| 6 | [AnimateLayer](./src/qs/MapboxMauiQs/Examples/06.AnimateLayer/AnimateLayerExample.cs) | |
53+
| 7 | [AnimatedMarker](./src/qs/MapboxMauiQs/Examples/07.AnimatedMarker/AnimatedMarkerExample.cs) | OK |
54+
| 8 | [BasicLocationPulsing](./src/qs/MapboxMauiQs/Examples/08.BasicLocationPulsing/BasicLocationPulsingExample.cs) | |
55+
| 9 | [BasicMap](./src/qs/MapboxMauiQs/Examples/09.BasicMap/BasicMapExample.xaml) | OK |
56+
| 10 | [BuildingExtrusions](./src/qs/MapboxMauiQs/Examples/10.BuildingExtrusions/BuildingExtrusionsExample.cs) | OK |
57+
| 11 | [CameraAnimation](./src/qs/MapboxMauiQs/Examples/11.CameraAnimation/CameraAnimationExample.cs) | |
58+
| 12 | [CameraAnimators](./src/qs/MapboxMauiQs/Examples/12.CameraAnimators/CameraAnimatorsExample.cs) | |
59+
| 13 | [CircleAnnotation](./src/qs/MapboxMauiQs/Examples/13.CircleAnnotation/CircleAnnotationExample.cs) | OK |
60+
| 14 | [ColorExpression](./src/qs/MapboxMauiQs/Examples/14.ColorExpression/ColorExpressionExample.cs) | |
61+
| 15 | [Custom2DPuck](./src/qs/MapboxMauiQs/Examples/15.Custom2DPuck/Custom2DPuckExample.cs) | |
62+
| 16 | [Custom3DPuck](./src/qs/MapboxMauiQs/Examples/16.Custom3DPuck/Custom3DPuckExample.cs) | |
63+
| 17 | [CustomLayer](./src/qs/MapboxMauiQs/Examples/17.CustomLayer/CustomLayerExample.cs) | |
64+
| 18 | [CustomLocationProvider](./src/qs/MapboxMauiQs/Examples/18.CustomLocationProvider/CustomLocationProviderExample.cs) | |
65+
| 19 | [CustomPointAnnotation](./src/qs/MapboxMauiQs/Examples/19.CustomPointAnnotation/CustomPointAnnotationExample.cs) | OK |
66+
| 20 | [CustomStyleURL](./src/qs/MapboxMauiQs/Examples/20.CustomStyleURL/CustomStyleURLExample.cs) | OK |
67+
| 21 | [DataDrivenSymbols](./src/qs/MapboxMauiQs/Examples/21.DataDrivenSymbols/DataDrivenSymbolsExample.cs) | |
68+
| 22 | [DataJoin](./src/qs/MapboxMauiQs/Examples/22.DataJoin/DataJoinExample.cs) | |
69+
| 23 | [DebugMap](./src/qs/MapboxMauiQs/Examples/23.DebugMap/DebugMapExample.cs) | OK |
70+
| 24 | [DistanceExpression](./src/qs/MapboxMauiQs/Examples/24.DistanceExpression/DistanceExpressionExample.cs) | |
71+
| 25 | [ExternalVectorSource](./src/qs/MapboxMauiQs/Examples/25.ExternalVectorSource/ExternalVectorSourceExample.cs) | |
72+
| 26 | [FeatureState](./src/qs/MapboxMauiQs/Examples/26.FeatureState/FeatureStateExample.cs) | |
73+
| 27 | [FeaturesAtPoint](./src/qs/MapboxMauiQs/Examples/27.FeaturesAtPoint/FeaturesAtPointExample.cs) | |
74+
| 28 | [FrameViewAnnotations](./src/qs/MapboxMauiQs/Examples/28.FrameViewAnnotations/FrameViewAnnotationsExample.cs) | |
75+
| 29 | [Globe](./src/qs/MapboxMauiQs/Examples/29.Globe/GlobeExample.cs) | |
76+
| 30 | [GlobeFlyTo](./src/qs/MapboxMauiQs/Examples/30.GlobeFlyTo/GlobeFlyToExample.cs) | |
77+
| 31 | [HeatmapLayerGlobe](./src/qs/MapboxMauiQs/Examples/31.HeatmapLayerGlobe/HeatmapLayerGlobeExample.cs) | |
78+
| 32 | [IconSizeChange](./src/qs/MapboxMauiQs/Examples/32.IconSizeChange/IconSizeChangeExample.cs) | OK |
79+
| 33 | [LargeGeoJSONPerformance](./src/qs/MapboxMauiQs/Examples/33.LargeGeoJSONPerformance/LargeGeoJSONPerformanceExample.cs) | |
80+
| 34 | [LayerPosition](./src/qs/MapboxMauiQs/Examples/34.LayerPosition/LayerPositionExample.cs) | |
81+
| 35 | [LineAnnotation](./src/qs/MapboxMauiQs/Examples/35.LineAnnotation/LineAnnotationExample.cs) | OK |
82+
| 36 | [LineGradient](./src/qs/MapboxMauiQs/Examples/36.LineGradient/LineGradientExample.cs) | |
83+
| 37 | [LiveData](./src/qs/MapboxMauiQs/Examples/37.LiveData/LiveDataExample.cs) | |
84+
| 38 | [Localization](./src/qs/MapboxMauiQs/Examples/38.Localization/LocalizationExample.cs) | |
85+
| 39 | [MultipleGeometries](./src/qs/MapboxMauiQs/Examples/39.MultipleGeometries/MultipleGeometriesExample.cs) | OK |
86+
| 40 | [NavigationSimulator](./src/qs/MapboxMauiQs/Examples/40.NavigationSimulator/NavigationSimulatorExample.cs) | |
87+
| 41 | [OfflineManager](./src/qs/MapboxMauiQs/Examples/41.OfflineManager/OfflineManagerExample.cs) | OK |
88+
| 42 | [OfflineRegionManager](./src/qs/MapboxMauiQs/Examples/42.OfflineRegionManager/OfflineRegionManagerExample.cs) | |
89+
| 43 | [PitchAndDistance](./src/qs/MapboxMauiQs/Examples/43.PitchAndDistance/PitchAndDistanceExample.cs) | |
90+
| 44 | [PointAnnotationClustering](./src/qs/MapboxMauiQs/Examples/44.PointAnnotationClustering/PointAnnotationClusteringExample.cs) | OK |
91+
| 45 | [PointClustering](./src/qs/MapboxMauiQs/Examples/45.PointClustering/PointClusteringExample.cs) | |
92+
| 46 | [PolygonAnnotation](./src/qs/MapboxMauiQs/Examples/46.PolygonAnnotation/PolygonAnnotationExample.cs) | OK |
93+
| 47 | [RasterTileSource](./src/qs/MapboxMauiQs/Examples/47.RasterTileSource/RasterTileSourceExample.cs) | |
94+
| 48 | [ResizableImage](./src/qs/MapboxMauiQs/Examples/48.ResizableImage/ResizableImageExample.cs) | |
95+
| 49 | [RestrictCoordinateBounds](./src/qs/MapboxMauiQs/Examples/49.RestrictCoordinateBounds/RestrictCoordinateBoundsExample.cs) | |
96+
| 50 | [SceneKit](./src/qs/MapboxMauiQs/Examples/50.SceneKit/SceneKitExample.cs) | N/A |
97+
| 51 | [ShowHideLayer](./src/qs/MapboxMauiQs/Examples/51.ShowHideLayer/ShowHideLayerExample.cs) | |
98+
| 52 | [SkyLayer](./src/qs/MapboxMauiQs/Examples/52.SkyLayer/SkyLayerExample.cs) | OK |
99+
| 53 | [SnapshotterCoreGraphics](./src/qs/MapboxMauiQs/Examples/53.SnapshotterCoreGraphics/SnapshotterCoreGraphicsExample.cs) | |
100+
| 54 | [Snapshotter](./src/qs/MapboxMauiQs/Examples/54.Snapshotter/SnapshotterExample.cs) | |
101+
| 55 | [SpinningGlobe](./src/qs/MapboxMauiQs/Examples/55.SpinningGlobe/SpinningGlobeExample.cs) | |
102+
| 56 | [StoryboardMapView](./src/qs/MapboxMauiQs/Examples/56.StoryboardMapView/StoryboardMapViewExample.cs) | N/A |
103+
| 57 | [SwitchStyles](./src/qs/MapboxMauiQs/Examples/57.SwitchStyles/SwitchStylesExample.cs) | |
104+
| 58 | [SymbolClustering](./src/qs/MapboxMauiQs/Examples/58.SymbolClustering/SymbolClusteringExample.cs) | OK |
105+
| 59 | [Terrain](./src/qs/MapboxMauiQs/Examples/59.Terrain/TerrainExample.cs) | OK |
106+
| 60 | [TrackingMode](./src/qs/MapboxMauiQs/Examples/60.TrackingMode/TrackingModeExample.cs) | |
107+
| 61 | [ViewAnnotationAnimation](./src/qs/MapboxMauiQs/Examples/61.ViewAnnotationAnimation/ViewAnnotationAnimationExample.cs) | |
108+
| 62 | [ViewAnnotationBasic](./src/qs/MapboxMauiQs/Examples/62.ViewAnnotationBasic/ViewAnnotationBasicExample.cs) | |
109+
| 63 | [ViewAnnotationMarker](./src/qs/MapboxMauiQs/Examples/63.ViewAnnotationMarker/ViewAnnotationMarkerExample.cs) | |
110+
| 64 | [ViewAnnotationWithPointAnnotation](./src/qs/MapboxMauiQs/Examples/64.ViewAnnotationWithPointAnnotation/ViewAnnotationWithPointAnnotationExample.cs) | |
111+
| 65 | [Viewport](./src/qs/MapboxMauiQs/Examples/65.Viewport/ViewportExample.cs) | |
112+
| 66 | [VoiceOverAccessibility](./src/qs/MapboxMauiQs/Examples/66.VoiceOverAccessibility/VoiceOverAccessibilityExample.cs) | |
157113

158114
NOTE: A handy command to generate a new example
159115

‎assets/files-w-ignored.png‎

22.1 KB
Loading

‎global.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"sdk": {
3+
"version": "7.0.306",
4+
"rollForward": "latestFeature"
5+
}
6+
}

0 commit comments

Comments
 (0)