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

Customização de Mapas no Android

Customização de Mapas no Android

Utilizando Google Maps API + Google Play Services, é demonstrado um pouco de como é feito a estilização de mapas para Android por aplicativos como UBER, 99Taxis e FlightRadar

278d0b5b8f680ac2a39bb3d8a6e21be3?s=128

Wellington Mitrut

February 14, 2017
Tweet

More Decks by Wellington Mitrut

Other Decks in Technology

Transcript

  1. CUSTOM MAPS INTRODUÇÃO A CUSTOMIZAÇÃO DE MAPAS NO ANDROID @wmitrut

  2. Wellington Mitrut - Ex-Baixista do Dream Theater, - Ex-Batman -

    Ex-Paquita - Flash Reverso - Freelance @wmitrut
  3. None
  4. Os mapas são uma expressão da necessidade humana de conhecer

    e representar o seu espaço.
  5. None
  6. CARTOGRAFIA

  7. A cartografia é a ciência da representação gráfica da superfície

    terrestre, tendo como produto final o mapa. Ou seja, é a ciência que trata da concepção, produção, difusão, utilização e estudo dos mapas.
  8. CARTOGRAFIA = UX

  9. Sketch do século XIV

  10. Mapas no dia-a-dia

  11. None
  12. None
  13. Mas é tudo 100% confiável?

  14. None
  15. None
  16. Soluções

  17. None
  18. None
  19. None
  20. None
  21. None
  22. Mas a mais usada é a GOOGLE MAPS API

  23. None
  24. É possível personalizar mapas desde a versão 9.6.0 do Google

    Play Services (set/2016) Segunda-feira saiu a 10.2.0
  25. Mas como eu faço isso?

  26. Google Maps API Styling Wizard

  27. None
  28. None
  29. Customiza-se o mapa e salva-se o JSON do estilo na

    pasta raw do projeto
  30. None
  31. None
  32. ~ 5Kb ~ 320 linhas

  33. None
  34. Talk is cheap. Show me The Code.

  35. 1 - Não se esqueça de colocar a SUA chave

    da Google Maps API.
  36. 2 - Implemente a View public class MapsActivity extends FragmentActivity

    implements OnMapReadyCallback { private GoogleMap mMap; private static final String TAG = MapsActivity.class.getSimpleName(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_maps); SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.map); mapFragment.getMapAsync(this); } MapsActivity.java
  37. 2 - Implemente a View <fragment xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_width=

    "match_parent" android:layout_height= "match_parent" android:id="@+id/map" tools:context="com.custommapsgdgcvel.custommapsgdgcvel.MapsActivity" android:name="com.google.android.gms.maps.SupportMapFragment" /> activity_maps.xml
  38. 3 - Faça a Chamada do estilo e seu tratamento

    @Override public void onMapReady(GoogleMap googleMap) { try { boolean success = googleMap.setMapStyle( MapStyleOptions.loadRawResourceStyle( this, R.raw.cascavel_style)); if (!success) { Log.e(TAG, "Falhou ao aplicar estilo."); } } catch (Resources.NotFoundException e) { Log.e(TAG, "Estilo não encontrado. Error: ", e); } mMap = googleMap; LatLng cascavel = new LatLng(-24.952327, -53.461767); mMap.addMarker(new MarkerOptions().position(cascavel).title("Cascavel")); mMap.moveCamera(CameraUpdateFactory.newLatLng(cascavel)); } } MapsActivity.java
  39. Documentação: https://goo.gl/uhXUdN

  40. Código: https://goo.gl/GbkH60

  41. SLIDES https://speakerdeck.com/wmitrut

  42. DÚVIDAS?

  43. Obrigado!