ThinkGeo.com    |     Documentation    |     Premium Support

Resizing an Image on the map

Hi,


we are  adding images to our maps to represent some real world objects.(buildings,gates etc.)


We have 2 questions regarding this;


1) We can add images either with points (PointType.Bitmap) or with Marker class (by setting imagesource)


Which one should we use? Which one is more performant?


 


2) Our customers would like to resize images on the maps.  (like we can resize polygons,rectangles with EditOverlay.EditShapesLayer)


How can we accomplish this task?


 


Thanks&Regards



ABDULKADIR, 
  
 1, Use PointStyle has better performance than use Marker 
 2, We don’t have API such can do that. 
  
 Thanks, 
 James

Hi James, 
 thanks for prompt reply. 
  
 I’m new to MapSuite so it can be very basic question but how can we add different type of images to same layer? 
 Because let’s say if I add 100 images to one  layer it’s fine and application is not slowing down. 
 But if I add 100 different layer, each has 1 image,  this slows down application. 
 That’s why I would like to add different images to same layer. Am I clear? 
  
  
 For second item, I’ll appreciate if you can give us some hints/directions to achieve this?

Abdulkadir, how exactly are you adding these layers and what kind of layers are you using? 
  
 If you are adding 100 LayerOverlays with 1 layer (regardless of the type of layer) per overlay, you will run into performance problems.   
 If you are adding 100 MarkerOverlays you will run into performance problems. 
 If you are adding 100 InMemoryFeatureLayers (my favorite) in one overlay, you should not run into performance problems.

Hello Klaus, 
 I was using SimpleMarkerOverlay, because I need to show some data when mouse is over an image. 
 By using Marker, I can do this with mouse enter/leave events. 
  
 However if I use InMemoryFeatureLayer with PointType.Bitmap, I don’t know how to achieve this task? 
  
 Anyone have any idea regarding this?

… and this is the problem with SimpleMarkerOverlay.  It is very easy to use but is costly in terms of performance given that Markers add to the WPF visual tree.  These derive from ContentControl.  
    
 Unfortunately, ThinkGeo does not capture this tradeoff in their documentation so I will send provide you various links for your reference; 
  
 gis.thinkgeo.com/Support/DiscussionForums/tabid/143/aff/39/aft/7898/afv/topic/Default.aspx 
 gis.thinkgeo.com/Support/DiscussionForums/tabid/143/aff/39/aft/8198/afv/topic/Default.aspx 
 gis.thinkgeo.com/Support/DiscussionForums/tabid/143/aff/39/aft/8341/afv/topic/Default.aspx 
  
  
 What you need to do is use ain InMemoryFeatureLayer and PopupOverlay in combination with the MoveMove event of the map to create your popups.  This is what I do. 
  
 1. Add a PopupOverlay. 
 2. Add an InMemoryFeatureLayer  
 3. Create and add the appropriate styles to render your features 
 4. Attach to the MouseMove event of the map.  Use some sort of timer to delay how often you action this event. 
 5. When timer expires, go perform a GetFeaturesNearestTo on your InMemoryFeature layer’s QueryTools property.  You can also do this asyn or in parrallel although I have not tried latter. 
 6. When you get feature, create your popup on the fly, add it to the popup overlay but make sure you clear overlay first. 
  
 A lot more work but from a performance perspective, well worth it.

Klaus, 
 appreciations for your great support, explanations and idea. 
 After trying what you said, I can come up with additional questions.  
  
 But meantime I need another thing, 
 if a user clicks on a image, they would like to see its borders highlighted. I mean I have to draw (let’s say a yellow) border around the image user clicked. 
 What can you advise me to achieve this? 
  
 Many thanks&Regards

You can probably do this several ways: 



First way: Using InMemoryFeatureLayer: 

- Configure layer with a different style to be applied when the feature is clicked. 

- Add a FeatureSourceColumn to your layer's Column property to represent a feature's selected state 

- For each feature being added to InMemoryFeatureLayer, add a key value pair to its ColumnValues to track its selected state. 

- Add feature to layer using a key, so you can swap it out later 

- When map is clicked find the closest feature and change its selected attribute to true. 

- Replace feature in layer using key 

- Refresh layer 



Second way: Using an additional SimpleMarkerOverlay 

- When map is clicked find the closest feature 

- Get feature's shape and create appropriate image marker in SimpleMarkerOverlay. 

- Refresh overlay. 



Third way: Using an additional InMemoryFeatureLayer similar to a highlight overlay ( you may want to look at ThinkGeo's highlight a feature example) 

- Configure this layer with style to render when feature is clicked 

- Configure layer's FeatureSourceColumn 

- When map is clicked find the closest feature in layer that holds all features 

- Get feature's shape and create a new feature and add your highlight layer. 



HTH. 





 



Dear Klaus, 
 many many thanks for your great support. 
  
 I already implemented your third advice, and working very well for features (for polygons) 
 But for images there are two problems 
 1) Since I get closest feature, it can be highlighted even if mouse is not over image 
 2) Getting feature’s shape and adding its buffered shape to highlight layer doesn’t work. Because since I added images to InMemoryFeatureLayer as point type, returned BaseShape is type of point. So it is highlighting point which is the center of image. Increasing buffer width seems very ugly, since images icons can be slected by user and has different sizes. Maybe we can calculate thickness of buffer according to image resolution? 
  
 Sorry for bothering with questions but this is the last and most important item for our project. 
 Thanks in advance for your invaluable support.

Yes, you would have to do some calculations based on the image resolution and coordinates of your center point. Calculation is relatively simple if these are all square images.  Let me know if you need help with the calculation.

Klaus, 
 a sample calculation would be great. 
 Thanks

Greate big Thanks for your help, Claus.


Abdulkadir,


I think you can try the buffer in a simple way like below:




        internal static RectangleShape GenerateMiniBoundingBox(Vertex vertex)
        {
            RectangleShape bbox = new RectangleShape();
            double miniTolerance = Tolerance / 2;
            bbox.UpperLeftPoint.X = vertex.X - miniTolerance;
            bbox.UpperLeftPoint.Y = vertex.Y + miniTolerance;
            bbox.LowerRightPoint.X = vertex.X + miniTolerance;
            bbox.LowerRightPoint.Y = vertex.Y - miniTolerance;

            return bbox;
        }


Thanks,


Johnny



Thanks for your nice sharing. I found that each time I come here, I will learn something more. I want to share the CODE I am using to define the size of  images using a third party imaging tool.

Besides,  this Imaging site also gives a lot of tutorials for processing different kinds of document and image formats. Share with you. And I hope you success. Good luck.



Best regards,

Arron

Hi Arron, 
  
 Thanks for your sharing if you have any more question, please feel free to let us know. 
  
 Best Regards 
  
 Summer


Posted By arron on 08-29-2013 02:02 AM


Thanks for your nice sharing. I found that each time I come here, I will learn something more. I want to share the CODE I am using to define the size of  images using a third party imaging tool.

Besides,  this Imaging site also gives a lot of tutorials for processing different kinds of document and image formats. Share with you. And I hope you success. Good luck.



Best regards,

Arron


I found my post of looking for a fine image resizer to help with defining the size of images here in 2013. You guys are really nice here. Thanks so much.







Sincerely yours,

Arron

Arron, 
  
 Thanks for the sharing. 
  
 Troy