11
Mapbox for Android Anna Kasagawa, Monsurat Olaosebikan, and Rebecca Alpert

Mapbox for Android - GitHub Pages · 2017-12-15 · What is mapbox? Map, Search & NavigationSDKs for Android, iOS, Web Display Maps Navigation Directions (turn by turn, text to speech)

  • Upload
    others

  • View
    13

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Mapbox for Android - GitHub Pages · 2017-12-15 · What is mapbox? Map, Search & NavigationSDKs for Android, iOS, Web Display Maps Navigation Directions (turn by turn, text to speech)

Mapbox for AndroidAnna Kasagawa, Monsurat Olaosebikan, and Rebecca Alpert

Page 2: Mapbox for Android - GitHub Pages · 2017-12-15 · What is mapbox? Map, Search & NavigationSDKs for Android, iOS, Web Display Maps Navigation Directions (turn by turn, text to speech)

What is mapbox?

● Map, Search & Navigation SDKs for Android, iOS, Web

● Display Maps

● Navigation Directions (turn by turn, text to speech)

● Custom Maps & Markers

Page 3: Mapbox for Android - GitHub Pages · 2017-12-15 · What is mapbox? Map, Search & NavigationSDKs for Android, iOS, Web Display Maps Navigation Directions (turn by turn, text to speech)

Demo :)basic map with markers & navigation

Page 4: Mapbox for Android - GitHub Pages · 2017-12-15 · What is mapbox? Map, Search & NavigationSDKs for Android, iOS, Web Display Maps Navigation Directions (turn by turn, text to speech)

Step 1 : Add permissions

<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

AndroidManifest.xml

Page 5: Mapbox for Android - GitHub Pages · 2017-12-15 · What is mapbox? Map, Search & NavigationSDKs for Android, iOS, Web Display Maps Navigation Directions (turn by turn, text to speech)

Step 2 : Add the mapbox sdk to build.gradle

compile ('com.mapbox.mapboxsdk:mapbox-android-navigation-ui:0.6.1') {

transitive = true

}

compile ('com.mapbox.mapboxsdk:mapbox-android-sdk:5.1.4@aar') {

transitive = true

}

compile 'com.mapbox.mapboxsdk:mapbox-android-services:2.2.6'

build.gradle (Module: app)

Page 6: Mapbox for Android - GitHub Pages · 2017-12-15 · What is mapbox? Map, Search & NavigationSDKs for Android, iOS, Web Display Maps Navigation Directions (turn by turn, text to speech)

Step 3: Add map component to XML

<Layout….>

<com.mapbox.mapboxsdk.maps.MapView

android:id="@+id/mapView"

android:layout_width="match_parent"

android:layout_height="match_parent"

mapbox:mapbox_cameraTargetLat="42.40817"

mapbox:mapbox_cameraTargetLng="-71.11375"

mapbox:mapbox_styleUrl="mapbox://styles/mapbox/streets-v10"

mapbox:mapbox_cameraZoom="14" />

</Layout…>

content_main.xml

Page 7: Mapbox for Android - GitHub Pages · 2017-12-15 · What is mapbox? Map, Search & NavigationSDKs for Android, iOS, Web Display Maps Navigation Directions (turn by turn, text to speech)

Step 4 : Initialize map in onCreate

MapboMapbox.getInstance(this, ACCESS_TOKEN);

mapView = (MapView) findViewById(R.id.mapView);

mapView.onCreate(savedInstanceState);

MainActivity.java (onCreate)

Page 8: Mapbox for Android - GitHub Pages · 2017-12-15 · What is mapbox? Map, Search & NavigationSDKs for Android, iOS, Web Display Maps Navigation Directions (turn by turn, text to speech)

Step 5: Add markers

mapView.getMapAsync(new OnMapReadyCallback() {

@Override

public void onMapReady(MapboxMap mapboxMap) {

mapboxMap.addMarker(new MarkerOptions()

.position(new LatLng(42.4075, -71.1190))

.title("Tufts University")

.snippet("Welcome jumbos!"));

}

});

MainActivity.java (onCreate)

Page 9: Mapbox for Android - GitHub Pages · 2017-12-15 · What is mapbox? Map, Search & NavigationSDKs for Android, iOS, Web Display Maps Navigation Directions (turn by turn, text to speech)

Step 6 : Navigate!

Position origin = Position.fromCoordinates(-77.03613, 38.90992);

Position destination = Position.fromCoordinates(-77.0365, 38.8977);

NavigationLauncher.startNavigation(MainActivity.this, origin, destination, null, true);

AndroidManifest.xml

Page 10: Mapbox for Android - GitHub Pages · 2017-12-15 · What is mapbox? Map, Search & NavigationSDKs for Android, iOS, Web Display Maps Navigation Directions (turn by turn, text to speech)

Step 7 : Customize

Page 11: Mapbox for Android - GitHub Pages · 2017-12-15 · What is mapbox? Map, Search & NavigationSDKs for Android, iOS, Web Display Maps Navigation Directions (turn by turn, text to speech)

Step 8: Profit!