ThinkGeo.com    |     Documentation    |     Premium Support

Quest about SampleMarkOverlay Class

#1

Dear gurus


I used the SampleMarkOverlay Class to show the picture as below one (size is 40*40). The requirements are to show several triangles with different rotated angle, which are defined in file, at the same point. And the triangles keep the same size with the map’s zoom in/out. 


Since the picture in the SampleMarkOverlay class is central rotation, so I create a template picture (size also is 40*40) which has only one rectangle and its background is transparent. I put the template picture at the display point and then I rotate it with required angle. By this way, I put several template pictures at the same point and rotate them, the results are perfect.


Now my question is when I click it, I can only get one picture (or one id). In fact there are several template pictures are completely covered at the same point. How could I get them all? Or is there any setting in SampleMarkOverlay class to let the pictures rotatable center is not at the template picture center? Then I can create a small template with the different directions and select every template picture by clicking different triangles.   



I had no idea on SampleMarkOverlay to resolve the problem. Would you please give me some other way to implement it? Many thanks!



Best Regards

YuPing



1.txt (1.76 KB)

#2

Hi Yu, 
  
 Do you meant SimpleMarkOverlay but not SampleMarkOverlay?  
  
 And it looks you should failed to upload your image, an image or screen shot should be helpful to understand your scenario, because it looks it’s not easy to understand this question: “Or is there any setting in SampleMarkOverlay class to let the pictures rotatable center is not at the template picture center? Then I can create a small template with the different directions and select every template picture by clicking different triangles.” 
  
 If you want to find the picture, I need to know what API you are using now. 
  
 If SimpleMarkerOverlay is not so well, you can try our InMemoryMarkerOverlay. 
  
 Regards, 
  
 Don 


#3

Hi Yu,  
  
 Do you meant SimpleMarkOverlay but not SampleMarkOverlay?  
  
 And it looks you should failed to upload your image(I download the 1.txt, then rename it to .png .bmp .jpg, it don’t shows anything), an image or screen shot should be helpful to understand your scenario, because it looks it’s not easy to understand this question: “Or is there any setting in SampleMarkOverlay class to let the pictures rotatable center is not at the template picture center? Then I can create a small template with the different directions and select every template picture by clicking different triangles.”  
  
 If you want to find the picture, I need to know what API you are using now.  
  
 If SimpleMarkerOverlay is not so well, you can try our InMemoryMarkerOverlay.  
  
 Regards,  
  
 Don

#4

Thank you very much for your quick reply. The class I used is SimpleMarkOverlay. I sent the two pictures to the mailbox noreply@thinkgeo.com because I can’t attached it in webpage. The mail name is “Two pictures for using SimpleMarkOverlay”.  
  
 I felt current problem is the pictures in SimpleMarkOverLay is central rotation. So I use several picture 2 and rotate in different angles, then display them in the position to create picture 1. The result is I can show it perfectly, but I can’t select some one picture on the position. 
  
 Thanks again 
 yuping

#5

Hi Yu,


Thanks for your detailed description. Actually the image is always rotated at the center point to make sure it doesn’t runs into mismatch problem,   maybe 3 another options for you, just list them as following:


1.       Take advantage of ImageOffsetX and ImageOffsetY to give a small offset for the image if they are overlapped each other. The code may look like as following: 



marker.WebImage.ImageOffsetX = 10;
marker.WebImage.ImageOffsetY = 10;

2.       Maybe do a filter for the overlapped markers, by overwriting the moveTo function on client side, the code looks like:

 



var OnMapCreating = function (map) {
    OpenLayers.Layer.Markers.prototype.moveTo = function (bounds, zoomChanged, dragging) {
        OpenLayers.Layer.prototype.moveTo.apply(this, arguments);
 
        if (zoomChanged || !this.drawn) {
            for (var i = 0, len = this.markers.length; i < len; i++) {
 
                // todo: Do a filter marker filter here. 
 
                this.drawMarker(this.markers<i>);</i>

            }
            this.drawn = true;
        }
    }
}


 3.       Do a spatial query to find all the markers in a small circle with clicked point as center point when you click on the marker, I guess the server code is easy to be implemented, for the client scripts, it should be:





var OnMapCreated = function (map) {
    var markerOverlay = map.getLayersByName("MarkerOverlay")[0];
    markerOverlay.events.register("click", markerOverlay, function (e) {
        var clickedXY = new OpenLayers.Pixel(e.screenX, e.screenY);
        var lonlat = this.map.getLonLatFromViewPortPx(clickedXY);
 
        var clusterMarkers = [];
        for (var i = 0; i < this.markers.length; i++) {
            var distance = GetDistance(this.markers<i>.lonlat, lonlat);</i>

            if (distance < tolerance) {
                clusterMarkers.push(this.markers<i>);</i>

            }
        }
 
        // thus the clusterMarkers are all markers you would like to search.
    });
}


Hope it helps.



Regards,

Johnny




#6

BTW, anything you would like to send to the guys who are working on the forum support, you can send it to forumsupport@thinkgeo.com, or you can paste the image in the thread by click the image as below after uploading it to the forum.







Thanks,

Johnny