Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Embrace The Journey

Embrace The Journey

In this session we will talk about Mapbox mobile SDKs.

In order to prepare the talk, I created a survey and based on the results I divided the talk in two main parts:

1. What are/were the worst problems/features missing you find/found developing with maps?
2. What do you want me to cover? What would you like to learn?

Freakend Mobile 2017

Pablo Guardiola

February 23, 2017
Tweet

More Decks by Pablo Guardiola

Other Decks in Programming

Transcript

  1. Mapbox - Mobile •Custom features •Free up to 50,000 monthly

    active users •Similar SDK as Google Maps and Apple Maps
  2. Survey (55 responses) Platforms 5 % 9 % 86 %

    Android iOS Both Maps 47 % 53 % Yes No
  3. Markers - Add mapView.getMapAsync(new OnMapReadyCallback() {
 @Override
 public void onMapReady(MapboxMap

    mapboxMap) {
 mapboxMap.addMarker(new MarkerViewOptions()
 .position(new LatLng(-37.821629, 144.978535)));
 }
 });
  4. mapView.getMapAsync(new OnMapReadyCallback() {
 @Override
 public void onMapReady(MapboxMap mapboxMap) {
 final

    Marker marker = mapboxMap.addMarker(new MarkerViewOptions()
 .position(new LatLng(64.900932, -18.167040)));
 mapboxMap.setOnMapClickListener(new MapboxMap.OnMapClickListener() {
 @Override
 public void onMapClick(@NonNull LatLng point) {
 ValueAnimator markerAnimator = ObjectAnimator.ofObject(marker, "position",
 new LatLngEvaluator(), marker.getPosition(), point);
 markerAnimator.setDuration(2000);
 markerAnimator.start();
 }
 });
 }
 }); Markers - Animate
  5. Publish to fleet Property pane Live map preview Layer selector

    Watching a designer create a night style within minutes with Mapbox Studio. Custom maps - Mapbox Studio
  6. Drawing - Map matching MapboxMapMatching client = new MapboxMapMatching.Builder()
 .setAccessToken(Mapbox.getAccessToken())


    .setProfile(MapMatchingCriteria.PROFILE_DRIVING)
 .setCoordinates(coordinates) client.enqueueCall(
 .build(); client.enqueueCall(new Callback<MapMatchingResponse>() {
 @Override
 public void onResponse(Call<MapMatchingResponse> call, Response<MapMatchingResponse> response) {
 List<LatLng> mapMatchedPoints = new ArrayList<>();
 if (response.code() == 200) {
 String geometry = response.body().getMatchings().get(0).getGeometry();
 List<Position> positions = PolylineUtils.decode(geometry, Constants.PRECISION_6);
 // Traverse positions adding points into mapMatchedPoints
 mapMatchedRoute = map.addPolyline(new PolylineOptions()
 .addAll(mapMatchedPoints)
 .color(Color.parseColor("#3bb2d0"))
 .width(4));
 }
 }
  7. Drawing - Polygons List<LatLng> STAR_SHAPE_POINTS = new ArrayList<LatLng>() {
 {


    add(new LatLng(45.522585, -122.685699));
 // ...
 add(new LatLng(45.522585, -122.685699));
 }
 }; BLUE_COLOR = Color.parseColor("#3bb2d0"); polygon = mapboxMap.addPolygon(new PolygonOptions()
 .addAll(STAR_SHAPE_POINTS)
 .fillColor(BLUE_COLOR));
  8. Offline maps - Pre-caching String minZoom = map.getStyleUrl();
 double minZoom

    = map.getCameraPosition().zoom;
 double maxZoom = map.getMaxZoom();
 float pixelRatio = this.getResources().getDisplayMetrics().density;
 OfflineTilePyramidRegionDefinition definition = new OfflineTilePyramidRegionDefinition(
 styleURL, bounds, minZoom, maxZoom, pixelRatio);
 byte[] metadata = name.getBytes(CHARSET);
 offlineManager.createOfflineRegion(definition, metadata, new OfflineManager.CreateOfflineRegionCallback() {
 @Override
 public void onCreate(OfflineRegion offlineRegion) {
 offlineRegion.setDownloadState(OfflineRegion.STATE_ACTIVE);
 }
 
 @Override
 public void onError(String error) {
 }
 });
  9. Navigation - Off route detection client.enqueueCall(new Callback<DirectionsResponse>() {
 @Override
 public

    void onResponse(Call<DirectionsResponse> call, Response<DirectionsResponse> response) {
 currentRoute = response.body().getRoutes().get(0);
 drawRoute(currentRoute);
 }
 
 @Override
 public void onFailure(Call<DirectionsResponse> call, Throwable throwable) {
 }
 });
 // ... Position carCurrentPosition = Position.fromCoordinates(
 car.getPosition().getLongitude(),
 car.getPosition().getLatitude()
 );
 if (routeUtils.isOffRoute(carCurrentPosition, currentRoute.getLegs().get(0))) {
 }
  10. Custom maps - Runtime Styling Layer water = mapboxMap.getLayer("water");
 if

    (water != null) {
 mapboxMap.setTransitionDuration(5);
 mapboxMap.setTransitionDelay(1);
 water.setProperties(
 visibility(VISIBLE),
 fillColor(Color.RED)
 );
 }
  11. References • Mapbox Android SDK: https:/ /www.mapbox.com/android-sdk/ • Mapbox iOS

    SDK: https:/ /www.mapbox.com/ios-sdk/ • Android demo app: https:/ /github.com/mapbox/mapbox-android-demo • Core (Maps): https:/ /github.com/mapbox/mapbox-gl-native • MAS: https:/ /github.com/mapbox/mapbox-java