Google map Cluster with Url

Question

I work with Google Map cluster using Android-map-utils library from google. In my case, I use Glide to load image from URL:

@Override
        protected void onBeforeClusterItemRendered(final FeedsModel feedsModel, final MarkerOptions markerOptions) {
            // Draw a single person.
            // Set the info window to show their name.
            Glide
                    .with(mActivity.getApplicationContext())
                    .load(feedsModel.getImages().getThumbnail().getUrl())
                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                    .into(new SimpleTarget<GlideDrawable>() {
                        @Override
                        public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                            mImageView.setImageDrawable(resource);
                            Bitmap icon = mIconGenerator.makeIcon();
                            Marker markerToChange = null;
                            for (Marker marker : mClusterManager.getMarkerCollection().getMarkers()) {
                                if (marker.getPosition().equals(feedsModel.getPosition())) {
                                    markerToChange = marker;
                                }
                            }
                            // if found - change icon
                            if (markerToChange != null) {
                                markerToChange.setIcon(BitmapDescriptorFactory.fromBitmap(icon));
                            }
                        }
                    });
            Bitmap icon = mIconGenerator.makeIcon();
            markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));
        }

        @Override
        protected void onBeforeClusterRendered(final Cluster<FeedsModel> cluster, final MarkerOptions markerOptions) {
            // Draw multiple people.
            // Note: this method runs on the UI thread. Don't spend too much time in here (like in this example).
            final List<Drawable> profilePhotos = new ArrayList<Drawable>(Math.min(4, cluster.getSize()));
            final int width = mDimension;
            final int height = mDimension;

            int i = 0;

            for (final FeedsModel p : cluster.getItems()) {
                // Draw 4 at most.
                i++;
                Glide
                        .with(mActivity.getApplicationContext())
                        .load(p.getImages().getThumbnail().getUrl())
                        .diskCacheStrategy(DiskCacheStrategy.ALL)
                        .into(new SimpleTarget<GlideDrawable>() {
                            @Override
                            public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                                resource.setBounds(0, 0, width, height);
                                profilePhotos.add(resource);
                                MultiDrawable multiDrawable = new MultiDrawable(profilePhotos);
                                multiDrawable.setBounds(0, 0, width, height);

                                mClusterImageView.setImageDrawable(multiDrawable);
                                Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
                                markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));
                            }
                        });

                if (i == 4) break;
            }
            Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
            markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));
        }

With above code, I see that: image load in Item and Cluster wrong when zoom in or zoom out. What is my wrong here ?

Answer 1

Finally, I found solution, I combine with :

protected void onClusterItemRendered(FeedsModel clusterItem, Marker marker) 
protected void onClusterRendered(Cluster<FeedsModel> cluster, Marker marker)

these function to load image from URL

Answer 2

@Override
protected void onBeforeClusterItemRendered(Trace trace, MarkerOptions markerOptions) {
    // Draw a single person.
    // Set the info window to show their name.

    mImageView.setImageResource(R.drawable.aa001); //temp image.
    icon = mIconGenerator.makeIcon();
    markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));

}
@Override
protected void onClusterItemRendered(final Trace trace, final Marker marker){

    Glide.with(mContext.getApplicationContext())
            .load(ApplicationClass.photoServer + trace.image)
            .diskCacheStrategy(DiskCacheStrategy.ALL)
            .thumbnail(0.1f)
            .into(new SimpleTarget<GlideDrawable>() {
                @Override
                public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                    mImageView.setImageDrawable(resource);
                    icon = mIconGenerator.makeIcon();
                    marker.setIcon(BitmapDescriptorFactory.fromBitmap(icon));
                }
            });
}

And for the clusters:

  @Override
    protected void onBeforeClusterRendered(Cluster<Trace> cluster, MarkerOptions markerOptions) {
        super.onBeforeClusterRendered(cluster, markerOptions);
        //pick the first media

        Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
        markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));

    }

    @Override
    protected void onClusterRendered(Cluster<Trace> cluster, Marker marker) {
        super.onClusterRendered(cluster, marker);
        //pick the first trace 
        final Trace trace = cluster.getItems().iterator().next();

        Glide.with(mContext.getApplicationContext())
                .load(ApplicationClass.photoServer + trace.image)
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .centerCrop()
                .into(new SimpleTarget<GlideDrawable>() {
                    @Override
                    public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                        mClusterImageView. setImageDrawable(resource);
                        Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
                        marker.setIcon(BitmapDescriptorFactory.fromBitmap(icon));
                    }
                });
    }

Answer 3

This is the solution i found with help of above mentions solution

private class PersonRenderer extends DefaultClusterRenderer<Person> {
    private final IconGenerator mIconGenerator = new IconGenerator(getActivity().getApplicationContext());
    private final IconGenerator mClusterIconGenerator = new IconGenerator(getActivity().getApplicationContext());
    private final ImageView mImageView;
    private final ImageView mClusterImageView;
    private final int mDimension;
    Bitmap icon;

    public PersonRenderer() {
        super(getActivity().getApplicationContext(), mMap, mClusterManager);

        View multiProfile = getLayoutInflater().inflate(R.layout.multi_profile, null);
        mClusterIconGenerator.setContentView(multiProfile);
        mClusterImageView = (ImageView) multiProfile.findViewById(R.id.image);

        mImageView = new ImageView(getActivity().getApplicationContext());
        mDimension = (int) getResources().getDimension(R.dimen.custom_profile_image);
        mImageView.setLayoutParams(new ViewGroup.LayoutParams(mDimension, mDimension));
        int padding = (int) getResources().getDimension(R.dimen.custom_profile_padding);
        mImageView.setPadding(padding, padding, padding, padding);
        mIconGenerator.setContentView(mImageView);
    }

    @Override
    protected void onBeforeClusterItemRendered(Person person, MarkerOptions markerOptions) {
        icon = mIconGenerator.makeIcon();
        markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon)).title(person.name);
    }

    @Override
    protected void onClusterItemRendered(Person clusterItem, final Marker marker) {
        Glide.with(getActivity())
                .load(clusterItem.profilePhoto)
                .apply(new RequestOptions().diskCacheStrategy(DiskCacheStrategy.ALL))
                .thumbnail(0.1f)
                .into(new SimpleTarget<Drawable>() {
                    @Override
                    public void onResourceReady(Drawable drawable, Transition<? super Drawable> transition) {
                        mImageView.setImageDrawable(drawable);
                        icon = mIconGenerator.makeIcon();
                        marker.setIcon(BitmapDescriptorFactory.fromBitmap(icon));
                    }
                });
    }

    @Override
    protected void onClusterRendered(final Cluster<Person> cluster, final Marker marker) {
        final List<Drawable> profilePhotos = new ArrayList<>(Math.min(4, cluster.getSize()));
        final int width = mDimension;
        final int height = mDimension;
        Bitmap dummyBitmap = null;
        Drawable drawable;
        final int clusterSize = cluster.getSize();
        final int[] count = {0};

        for (Person p : cluster.getItems()) {
            // Draw 4 at most.
            if (profilePhotos.size() == 4) break;
            try {
                Glide.with(getActivity().getApplicationContext())
                        .load(p.profilePhoto)
                        .apply(new RequestOptions().diskCacheStrategy(DiskCacheStrategy.ALL))
                        .into(new SimpleTarget<Drawable>(){
                            @Override
                            public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
                                resource.setBounds(0, 0, width, height);
                                profilePhotos.add(resource);
                                MultiDrawable multiDrawable = new MultiDrawable(profilePhotos);
                                multiDrawable.setBounds(0, 0, width, height);

                                mClusterImageView.setImageDrawable(multiDrawable);
                                Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
                                marker.setIcon(BitmapDescriptorFactory.fromBitmap(icon));
                            }
                        });
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
        marker.setIcon(BitmapDescriptorFactory.fromBitmap(icon));
    }

    @Override
    protected void onBeforeClusterRendered(final Cluster<Person> cluster, final MarkerOptions markerOptions) {
    }

    @Override
    protected boolean shouldRenderAsCluster(Cluster cluster) {
        // Always render clusters.
        return cluster.getSize() > 1;
    }

}