Android Maps Utility: Images from a URL

Question

I use the excellent Android Maps library to display custom markers with clusters on the map. It works great and is very easy to configure.

My problem is how to change local resources from the demo (R.drawable.image_demo) to images from the url. I am using Universal Image Loader to load these images onto asView images, and the problem is that the images are not loading onto the corresponding marker.

Does anyone know of any example?

This is the code where the image is loaded 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 UIL, but not all images were uploaded. Each time I started map activity and increased in clusters, there were different markers / clusters that did not have an image. Only standard marker / cluster icons were shown.

Finally, after two days of trying and trying, this works fine. I temporarily switched to the Picasso library to make sure this might work, but I ran into similar problems and was unable to achieve this. In addition, with Picasso, all images downloaded from the Internet (URL) were rotated 90 degrees. I could not understand why. According to some reports that I found on the Internet, I may have to do something with the device, I use the Samsung Galaxy S5 device for testing. But not sure ....

Here are some notes on how I did this: I created a HardRefSimpleImageLoadingListener with an ImageView that will exist until the UIL loading process is complete. Without its hardlink ImageView the onLoadingCancelled call will be called and the download will not complete. I also created ClusterMarkerTarget and ClusterItemMarkerTarget objects that contain Marker, ImageView, and a bitmap for icon generators. I also put them in HashSets myClusterItemMarkerTargets and myClusterMarkerTargets so that they don't get garbagecollected.

Maybe this can be useful for someone.

Here is the 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; } }