Colored Multiple markers

ThinkGeo UI for Web WebForms
1

I am evaluating MapSuite Web Edition product.  


I am using states.shp to show the USA map on  a web page.  I need help to figure out the following requirement.


1. I need to show multiple markers for some states which will have multiple color  codes


Example:  NY -1,3 ,5   CA- 5,9


1-Red, 3-Blue , 5 -Green , 9 -Yellow


2. I do not have lat long information . I need to show these multiple markers in the respective states without markers overlapping .


3. I need to show custom hover text for each of these.


4. I need to be able to filter  the markers based on the color code selection  . i.e show / hide on a check box switch


5. I need to show a legend showing the color codes  which will print with the map.


 



2

Savy,


Please check the following steps to see whether this solution is suitable for your scenario.


1. Get position information for each marker (lon/lat)


2. Customize each marker’s image and popup


3. Add markers to SimpleMarkerOverlay


4. On client side, use javascript to control markers’ visibility 


5. Use LegendAdornmentLayer to customize your own legends


I also attach some code snippet for your reference (“CodeSnippet_P9173.zip”). Please let us know if you have further questions. 


Regards,


Ivan



CodeSnippet_P9173.zip (2.46 KB)

3

Hi Ivan 



Thanks for your quick response and a great sample to get me going in the right direction. I have a few more questions. 

1. If I have the average ( lat, long) for a state NY,42.1497,-74.9384 . How do I place multiple markers in the state without over lapping . The only thing I could come up with is  to generate a random lat , long in a 2 degree radius from this average. 

Also from the states.shp file can I some how get the lat long from a feature. 

2. I could implement the markers using SimpleMarkerOverLay like you mentioned in the sample. I also did it in another way using ValueMarkerStyle and adding Features to MarkerOverLay of the Map Control . My question is what is the difference between them and what is he preferred method to add markers . 

 



4

 


Hi Savy,
Just as you have mentioned, I recommend you using ValueMarkerStyle and adding Features into MarkerOverlay of map control, it will give us a better performance than SimpleMarkerOverlay, because it always load the markers in view export only rather than all the markers like SimpleMarkerOverlay. Additionally, we can use ClusterMarkerStyle to filter the markers based on the screen distance to make sure there isn’t any overlapping. Here is the demo code:



ValueMarkerStyle valueMarkerStyle = new ValueMarkerStyle();

MarkerValueItem item1 = new MarkerValueItem("value");
ClusterMarkerStyle clusterMarkerStyle = new ClusterMarkerStyle(10d, Map1..WidthInPixels, Map1.HeightInPixels);
clusterMarkerStyle.MarkerStyle = new PointMarkerStyle(new WebImage()));
item1.CustomMarkerStyle = clusterMarkerStyle;

valueMarkerStyle.ValueItems.Add(item1);


 
To get the lat/long from a feature in “states.shp”, we can loop all the features in the featureSource and get the center point using “feature.GetShape().GetCenterPoint()”.
 
Hope the above is helpful to you.
 
Thanks,
 
Johnny
 

5

Hi Johnny , 



Thanks for the clarification regarding the SimpleMarkerOverlay. I used GetCenterPoint to get the lat long of the state feature and generated a random value between (-1,1) and used this to offset the placement of the multiple marker. I did not want to cluster them as I have not more than five markers per state . Just want to make sure that this the best way to do . 



Also , I am using states.shp file to display my map I have statesLayer added to the Map control's StaticOverlay.layers collection and a markerOverLay added to CustomOverLays collection . Is this the right way to use Layers ? 



The map displays as a flat image without the projection . How do I use a projection on the states.shp file so that its layout is similar google maps. I am in a disconnected network without internet connection . 



 



6

 


HI Savy,
Please check the answers:
1.       Maybe there is a problem if we generate the random values between (-1,1),  because I’m not sure whether there is any state which is smaller than (-1,1) like (-0.5, 0.5.),  if in that case, we will get a marker outside of the state, right?    I strongly recommend you checking the width of state with (-1,1) before generation.
2.       Yes, absolutely it’s the right way to display the map and markers.
3.       To get the projected map like Google’s, we just need to assign the projection to the stateLayer, please check the code as following:
               

ShapeFileFeatureLayer shapeFileFeatureLayer = new ShapeFileFeatureLayer(MapPath("~/SampleData/USA/STATES.shp"));
                shapeFileFeatureLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.CreateSimpleAreaStyle(GeoColor.FromArgb(100,212,220,184), GeoColor.FromArgb(255,132,132,154), 1);
                shapeFileFeatureLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;

                Proj4Projection proj4 = new Proj4Projection();
                proj4.InternalProjectionParametersString = Proj4Projection.GetEpsgParametersString(4326);
                proj4.ExternalProjectionParametersString = Proj4Projection.GetGoogleMapParametersString();
                shapeFileFeatureLayer.FeatureSource.Projection = proj4;


Any question please let us know, thanks,
Johnny

7

Hi Johnny,  
  
 Thanks for your response .  
  
 1.  I am using the randomPoint.IsWithin(feature)  to test if my random point is within the state .   
  
 For the states.shp projection issue, I forgot to set the unit GeographyUnit.Meter when I changed the projection. Now my map displays fine .  
  
 Once again I appreciate your help. I could successfuly demonstrate the features required by our application.  


8

Hi Savy, 
  
 You are so welcome, we are always here and any questions please let us know. 
  
 Thanks, 
 Johnny