Android Maps Utility: images from URL

Question

I am using the excellent Android Maps Utility library to display on the map custom markers withs clusters. It works great and it is very easy to customize.

My problem is how to change local resources from the demo (R.drawable.image_demo) to images from a URL. I'm using Universal Image Loader to load this images on the imageView async, but the problems is that the images are not loaded on the marker that corresponds.

Anyone know about any example?

This is the code where the image is downloaded and loaded inside the DefaultClusterRender class. Thanks in advance.

        @Override
    protected void onBeforeClusterItemRendered(MapFoto mapFoto, MarkerOptions markerOptions) {
        // Draw a single person.
        // Set the info window to show their name.
        // mImageView.setImageResource(R.drawable.barcelona);
        // mImageView.setScaleType(ScaleType.CENTER_CROP);

        Log.d("", "--- url: " + mapFoto.getPictureUrl());
        ImageLoader.getInstance().displayImage(mapFoto.getPictureUrl(), mImageView, BlipointApp.optionsAvatarImage, new ImageLoadingListener() {
            @Override
            public void onLoadingStarted(String imageUri, View view) {
            }

            @Override
            public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
            }

            @Override
            public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                mImageView.setImageBitmap(loadedImage);
                mImageView.setScaleType(ScaleType.CENTER_CROP);
            }

            @Override
            public void onLoadingCancelled(String imageUri, View view) {
            }
        });

        Bitmap icon = mIconGenerator.makeIcon();
        markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon)).title(mapFoto.getName());
    }

Answer 1

I had a similar problem using the UIL, not all images were loaded. Every time I ran the map activity and zoomed into the clusters there were different markers/clusters that had no image. Only the standard marker/cluster icons were shown.

Finally after two days of trying and trying it works fine. Temporarily I had switched to the Picasso library to see if it might work but I experienced similar problems there and couldn't get it done. Besides with Picasso all the images loaded from the web (URL) were rotated by 90 degrees. I couldn't figure out why. According to some posts that I found in the web it might have to do something with the device, I am using Samsung Galaxy S5 device for testing. But not sure....

Here some notes how I did it: I created a HardRefSimpleImageLoadingListener with an ImageView which will exist until UIL loading process is finished. Without its hard reference ImageView the onLoadingCancelled would get called and loading would not complete. I also created the objects ClusterMarkerTarget and ClusterItemMarkerTarget which contain a Marker, ImageView, and bitmap for the Icon generators. I also put them into HashSets myClusterItemMarkerTargets and myClusterMarkerTargets to keep them from getting garbagecollected.

Maybe it can be of use for somebody.

Here some code:

        @Override
        protected void onClusterItemRendered(ReportItem clusterItem, Marker marker) {

        final ClusterItemMarkerTarget pm_ClusterItem = new ClusterItemMarkerTarget(marker);

        myClusterItemMarkerTargets.add(pm_ClusterItem);

        HardRefSimpleImageLoadingListener loadingListener = new HardRefSimpleImageLoadingListener() {
            @Override
            public void onLoadingFailed(String s, View view, FailReason failReason) {
                myClusterItemMarkerTargets.remove(pm_ClusterItem);
            }

            @Override
            public void onLoadingComplete(String s, View view, Bitmap bitmap) {
                mClusterItemImageView.setImageBitmap(bitmap);
                pm_ClusterItem.myIcon_cluster = mClusterItemIconGenerator.makeIcon();
                pm_ClusterItem.mMarker.setIcon(BitmapDescriptorFactory.fromBitmap(pm_ClusterItem.myIcon_cluster));
                myClusterItemMarkerTargets.remove(pm_ClusterItem);
            }

            @Override
            public void onLoadingCancelled(String s, View view) {
                myClusterItemMarkerTargets.remove(pm_ClusterItem);
            }
        };

        ImageLoader.getInstance().displayImage(clusterItem.picPath, pm_ClusterItem.myClusterItemImageView ,   loadingListener );
    }

    @Override
    protected void onClusterRendered(Cluster<ReportItem> cluster, Marker marker) {

        int i=0;
        clustersize = cluster.getSize();

        final ClusterMarkerTarget pm_Cluster = new ClusterMarkerTarget(marker, cluster);

        myClusterMarkerTargets.add(pm_Cluster);

        for (ReportItem r : cluster.getItems()) {
            // Draw 1 at most.
            if (i == 1 ) {
                break;
            }

            HardRefSimpleImageLoadingListener loadingListener = new HardRefSimpleImageLoadingListener() {

                @Override
                public void onLoadingFailed(String s, View view, FailReason failReason) {
                    myClusterMarkerTargets.remove(pm_Cluster);
                }

                @Override
                public void onLoadingComplete(String s, View view, Bitmap bitmap) {
                    mClusterImageView.setImageBitmap(bitmap); // = (ImageView) view; //pm.myClusterImageView;
                    pm_Cluster.myIcon_clusterItem = mClusterIconGenerator.makeIcon(String.valueOf(clustersize));
                    pm_Cluster.myMarker.setIcon(BitmapDescriptorFactory.fromBitmap(pm_Cluster.myIcon_clusterItem));
                    myClusterMarkerTargets.remove(pm_Cluster);
                }

                @Override
                public void onLoadingCancelled(String s, View view) {
                    myClusterMarkerTargets.remove(pm_Cluster);
                }
            };

            ImageLoader.getInstance().displayImage(r.picPath, pm_Cluster.myClusterImageView, loadingListener);

            i++;
        }
    }

more:

//Set for holding a reference to marker targets --> targets won't get carbage collected during looping and loading images
Set<ReportRenderer.ClusterItemMarkerTarget> myClusterItemMarkerTargets = new HashSet<>();
Set<ReportRenderer.ClusterMarkerTarget>     myClusterMarkerTargets  = new HashSet<>();

more:

public ReportRenderer(ClusterManager<ReportItem> mClusterManager, GoogleMap map) {

        super(MyApplication.getContext(), map, mClusterManager);

        mDimension  = (int) MyApplication.getContext().getResources().getDimension(R.dimen.custom_report_image);
        mPadding    = (int) MyApplication.getContext().getResources().getDimension(R.dimen.custom_report_padding);

        // initialize cluster icon generator
        View multiReport = inflater.inflate(R.layout.multi_report, null);
        mClusterImageView = (ImageView) multiReport.findViewById(R.id.image_report);
        mClusterIconGenerator = new IconGenerator(MyApplication.getContext());
        mClusterIconGenerator.setContentView(multiReport);

        // initialize cluster item icon generator
        mClusterItemImageView = new ImageView(MyApplication.getContext());
        mClusterItemImageView.setLayoutParams(new ViewGroup.LayoutParams(mDimension, mDimension));
        mClusterItemImageView.setPadding(mPadding, mPadding, mPadding, mPadding);
        mClusterItemIconGenerator = new IconGenerator(MyApplication.getContext());
        mClusterItemIconGenerator.setContentView(mClusterItemImageView);

        // initialize image loader
        options = new DisplayImageOptions.Builder()
                .showImageOnLoading(R.drawable.loading)
                .showImageForEmptyUri(R.drawable.warning)
                .showImageOnFail(R.drawable.fail)
                .cacheInMemory(true)
                .cacheOnDisk(true)
                .considerExifParams(true)
                        //.bitmapConfig(Bitmap.Config.RGB_565)
                .build();
        config = new ImageLoaderConfiguration.Builder(MyApplication.getContext())
                .defaultDisplayImageOptions(options)
                .build();
        ImageLoader.getInstance().init(config);
    }

more:

//cluster marker with image loaded by Ultimate Image Loader
    class ClusterMarkerTarget {

        Marker    myMarker;
        ImageView myClusterImageView;

        public ClusterMarkerTarget(Marker marker, Cluster<ReportItem> cluster) {
            myMarker = marker;
            View multiReport = inflater.inflate(R.layout.multi_report, null);
            myClusterImageView = (ImageView) multiReport.findViewById(R.id.image_report);
        }
    }

    //cluster item marker with image loaded by Ultimate Image Loader
    class ClusterItemMarkerTarget {

        Marker      mMarker;
        ImageView   myClusterItemImageView;

        public ClusterItemMarkerTarget(Marker marker) {
            mMarker = marker;
            myClusterItemImageView =  new ImageView(MyApplication.getContext());//mClusterItemImageView;
            myClusterItemImageView.setLayoutParams(new ViewGroup.LayoutParams(mDimension, mDimension));
            int padding = (int) MyApplication.getContext().getResources().getDimension(R.dimen.custom_report_padding);
            myClusterItemImageView.setPadding(padding, padding, padding, padding);
        }
    }

and finally:

 class HardRefSimpleImageLoadingListener extends SimpleImageLoadingListener {
        public ImageView mView;

        @Override
        public void onLoadingStarted(String imageUri, View view) {
            mView = (ImageView) view;
        }
    }