How to add Custom Views as a marker in Mapbox android?

Question

So I want to add custom view markers in my android application, I am fetching the coordinates from an API request and I want to display the logo of the places on their respective marker. I am getting the URL of the marker from the same API request. Moreover, I want all the markers to be a part of the single symbol layer because I want to cluster those markers as well. Image credits: Google Image Search.

try this link https://stackoverflow.com/questions/42365658/custom-marker-in-google-maps-in-android-with-vector-asset-icon — unzila, Jul 24 '19 at 05:03

score 2 · Answer 1 · edited Jan 20 '20 at 06:28

I have solved this problem.

First You Have to create a private class which will fetch a data for you then you store it in an array.

private class getgeo extends AsyncTask<Void, Void, Void> {

    @Override
    protected void onPreExecute() {
        super.onPreExecute();
        // Showing progress dialog
        pDialog = new ProgressDialog(Poi_View.this);
        pDialog.setMessage("Please wait...");
        pDialog.setCancelable(false);
        pDialog.show();

    }

    @Override
    protected Void doInBackground(Void... arg0) {
        HttpHandler sh = new HttpHandler();

        // Making a request to url and getting response
        String jsonStr = sh.makeServiceCall(url);

        Log.e(TAG, "Response from url: " + jsonStr);

        if (jsonStr != null) {
            try {
                JSONObject jsonObj = new JSONObject(jsonStr);

                // Getting JSON Array node
                JSONArray contacts = jsonObj.getJSONArray("data");

                // looping through All Contacts
                for (int i = 0; i < contacts.length(); i++) {
                    JSONObject JO = (JSONObject) contacts.get(i);
                   /* if(JO.has("devices"))
                    {
                        Toast.makeText(Index.this,"No Data Found",Toast.LENGTH_LONG).show();
                    }*/
                    JSONObject jb = (JSONObject) JO.get("ro");


                    String name = jb.getString("name");
                    String center = jb.getString("center");


                    HashMap<String, String> contact = new HashMap<>();


                    contact.put("name", name);
                    contact.put("center", center);


                    // adding contact to contact list
                    contactList.add(contact);
                }
            } catch (final JSONException e) {
                Log.e(TAG, "Json parsing error: " + e.getMessage());
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Toast.makeText(getApplicationContext(),
                                "Your Internet Connection is Weak. Try Reloading Your Page",
                                Toast.LENGTH_LONG)
                                .show();
                    }
                });

            }
        } else {
            Log.e(TAG, "Couldn't get json from server.");
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(getApplicationContext(),
                            "Check Your Internet Connection",
                            Toast.LENGTH_LONG)
                            .show();
                }
            });

        }

        return null;
    }

    @Override
    protected void onPostExecute(Void result) {
        super.onPostExecute(result);
        // Dismiss the progress dialog
        if (pDialog.isShowing())
            pDialog.dismiss();

    }

}

After that you have to execute it in your mapbox onStyleloaded() method

public void onStyleLoaded(@NonNull Style style) {

    for(int a=0;a<contactList.size();a++)
    {
        HashMap<String, String> hashmap = contactList.get(a);
        pump_name= hashmap.get("name");
        pump_center= hashmap.get("center");
        String fullname = pump_center;
        String[] names = fullname.split(",", 3); // "1" means stop splitting after one space
        String firstName = names[0];
        String lastName = names[1];
        double lat = Double.parseDouble(firstName);
        double lng = Double.parseDouble(lastName);
        System.out.println(lat);
        System.out.println(pump_name);
        mapboxMap.addMarker(new MarkerOptions()
                .position(new LatLng(lat, lng))
                .title(pump_name));
        //onMapReady(mapboxMap);
    }
}

score 0 · Answer 2 · answered Jul 24 '19 at 05:38

0

Check out https://docs.mapbox.com/android/maps/examples/symbol-layer-info-window. GenerateViewIconTask in that example, uses a View to create a Bitmap. The Bitmap(s) are added to the map for usage as SymbolLayer icons.

Alternatively, you could use the Mapbox Annotation Plugin for Android: https://docs.mapbox.com/android/plugins/overview/annotation/

answered Jul 24 '19 at 05:38

langsmith

2,529
1
11
13

I think you didn't get my point, I am using annotation plugin what I want is, to show logo of each place in a symbol layer, like I am fetching coordinated of places where I want to place marker and those places have their logo images and I want to show the logo of the place in the marker like custom marker having some marker kind of shape and place logo on it. – divyanshu dhawan Jul 24 '19 at 18:16
Ahh, now I get it, you are saying that first I should make a symbol layer for all the icons like info window in the mentioned example right?? – divyanshu dhawan Jul 24 '19 at 18:30
yep, that's correct. Turn the custom view into a bitmap and then pass/use those bitmaps to the plugin/map. – langsmith Jul 25 '19 at 17:55

How to add Custom Views as a marker in Mapbox android?

2 Answers2