0

I am trying to figure a way to draw a marker in Mapbox Android SDK but all example show how to use a custom image from the DRAWABLE folder.

I would like to place a custom SVG icon from a custom URL. If not SVG at least PNG for transparency purposes.

Is it possible?

Examples that I found are similar to this one:

Bitmap icon = BitmapFactory.decodeResource(
    MainActivity.this.getResources(), R.drawable.custom_marker);
    mapboxMap.addImage(MARKER_IMAGE, icon);
Vivek Mishra
  • 5,494
  • 7
  • 44
  • 77
Ignacio Correia
  • 3,563
  • 8
  • 36
  • 66

1 Answers1

1

With the caveat that in v7.0.0 you have the option to use the Annotation Plugin, which provides a slightly more intuitive, object-oriented way to set up your icon/annotation layer, here's my recommended approach:

The code snippet you've posted is one part of the Style -> Source -> Layer flow used for runtime styling in Mapbox's SDK. For your purposes, especially if you're adding multiple markers to your map with the same icon, you should add your markers via a SymbolLayer. There's a working example of how the SymbolLayer syntax works here (it also includes some code for adding interactivity to your markers). You can also get some quick boilerplate code over at Mapbox's marker playground.

To answer your primary question: the SDK doesn't include any convenience methods for loading an external SVG or PNG directly as a SymbolLayer's iconImage, so you'll need to use a library like Glide or Picasso to retrieve the image and convert it to a bitmap before passing it to mapboxMap.addImage().

riastrad
  • 1,474
  • 9
  • 19
  • 1
    It's also worth noting that direct URL support is being debated as a possible feature for Mapbox's GL JS library (see option `B)` on this GitHub ticket: https://github.com/mapbox/mapbox-gl-js/issues/7587). If adopted by the GL JS team, this feature would likely be added to the roadmap for the native SDKs. – riastrad Jan 25 '19 at 14:10
  • mapboxMap doesn't has an addImage on android. you need to add the image through the style style.addImage(string, bitmap) – Pedro Teran Sep 26 '19 at 03:12