# Colored Multiple markers

**URL:** <https://community.thinkgeo.com/t/colored-multiple-markers/5807>\
**Category:** WebForms\
**Created:** [May 9, 2011, 3:35pm UTC](https://community.thinkgeo.com/t/colored-multiple-markers/5807 "2011-05-09T15:35:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Savy](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/s/c6cbf5/32.png) [@Savy](https://community.thinkgeo.com/u/Savy)\
**Post date:** [May 9, 2011, 3:35pm UTC](https://community.thinkgeo.com/t/colored-multiple-markers/5807/1 "2011-05-09T15:35:39Z")

</div>

I&nbsp;am&nbsp;evaluating&nbsp;MapSuite&nbsp;Web&nbsp;Edition&nbsp;product.&nbsp;&nbsp;

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

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

Example:&nbsp;&nbsp;NY&nbsp;-1,3&nbsp;,5&nbsp;&nbsp;&nbsp;CA-&nbsp;5,9

1-Red,&nbsp;3-Blue&nbsp;,&nbsp;5&nbsp;-Green&nbsp;,&nbsp;9&nbsp;-Yellow

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

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

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

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

&nbsp;

---

<div class="post-metadata">

**Author:** ![ThinkGeo](https://community.thinkgeo.com/user_avatar/community.thinkgeo.com/thinkgeo/32/25029_2.png) [@ThinkGeo](https://community.thinkgeo.com/u/ThinkGeo)\
**Post date:** [May 10, 2011, 4:30am UTC](https://community.thinkgeo.com/t/colored-multiple-markers/5807/2 "2011-05-10T04:30:01Z")

</div>

Savy,

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

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

2.&nbsp;Customize&nbsp;each&nbsp;marker’s&nbsp;image&nbsp;and&nbsp;popup

3.&nbsp;Add&nbsp;markers&nbsp;to&nbsp;SimpleMarkerOverlay

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

5.&nbsp;Use&nbsp;LegendAdornmentLayer&nbsp;to&nbsp;customize&nbsp;your&nbsp;own&nbsp;legends

I&nbsp;also&nbsp;attach&nbsp;some&nbsp;code&nbsp;snippet&nbsp;for&nbsp;your&nbsp;reference&nbsp;(“CodeSnippet\_P9173.zip”).&nbsp;Please&nbsp;let&nbsp;us&nbsp;know&nbsp;if&nbsp;you&nbsp;have&nbsp;further&nbsp;questions.&nbsp;

Regards,

Ivan

[CodeSnippet\_P9173.zip](https://community.thinkgeo.com/uploads/default/original/2X/a/a61027ca7c46a3cf7c813c4660c6a4b9649cdb6f.zip) (2.46 KB)

---

<div class="post-metadata">

**Author:** ![Savy](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/s/c6cbf5/32.png) [@Savy](https://community.thinkgeo.com/u/Savy)\
**Post date:** [May 10, 2011, 2:14pm UTC](https://community.thinkgeo.com/t/colored-multiple-markers/5807/3 "2011-05-10T14:14:37Z")

</div>

Hi&nbsp;Ivan&nbsp;  
  
  
  
Thanks&nbsp;for&nbsp;your&nbsp;quick&nbsp;response&nbsp;and&nbsp;a&nbsp;great&nbsp;sample&nbsp;to&nbsp;get&nbsp;me&nbsp;going&nbsp;in&nbsp;the&nbsp;right&nbsp;direction.&nbsp;I&nbsp;have&nbsp;a&nbsp;few&nbsp;more&nbsp;questions.&nbsp;  
  
1.&nbsp;If&nbsp;I&nbsp;have&nbsp;the&nbsp;average&nbsp;(&nbsp;lat,&nbsp;long)&nbsp;for&nbsp;a&nbsp;state&nbsp;NY,42.1497,-74.9384&nbsp;.&nbsp;How&nbsp;do&nbsp;I&nbsp;place&nbsp;multiple&nbsp;markers&nbsp;in&nbsp;the&nbsp;state&nbsp;without&nbsp;over&nbsp;lapping&nbsp;.&nbsp;The&nbsp;only&nbsp;thing&nbsp;I&nbsp;could&nbsp;come&nbsp;up&nbsp;with&nbsp;is&nbsp;&nbsp;to&nbsp;generate&nbsp;a&nbsp;random&nbsp;lat&nbsp;,&nbsp;long&nbsp;in&nbsp;a&nbsp;2&nbsp;degree&nbsp;radius&nbsp;from&nbsp;this&nbsp;average.&nbsp;  
  
Also&nbsp;from&nbsp;the&nbsp;states.shp&nbsp;file&nbsp;can&nbsp;I&nbsp;some&nbsp;how&nbsp;get&nbsp;the&nbsp;lat&nbsp;long&nbsp;from&nbsp;a&nbsp;feature.&nbsp;  
  
2.&nbsp;I&nbsp;could&nbsp;implement&nbsp;the&nbsp;markers&nbsp;using&nbsp;SimpleMarkerOverLay&nbsp;like&nbsp;you&nbsp;mentioned&nbsp;in&nbsp;the&nbsp;sample.&nbsp;I&nbsp;also&nbsp;did&nbsp;it&nbsp;in&nbsp;another&nbsp;way&nbsp;using&nbsp;ValueMarkerStyle&nbsp;and&nbsp;adding&nbsp;Features&nbsp;to&nbsp;MarkerOverLay&nbsp;of&nbsp;the&nbsp;Map&nbsp;Control&nbsp;.&nbsp;My&nbsp;question&nbsp;is&nbsp;what&nbsp;is&nbsp;the&nbsp;difference&nbsp;between&nbsp;them&nbsp;and&nbsp;what&nbsp;is&nbsp;he&nbsp;preferred&nbsp;method&nbsp;to&nbsp;add&nbsp;markers&nbsp;.&nbsp;  
  
&nbsp;

---

<div class="post-metadata">

**Author:** ![Johnny](https://community.thinkgeo.com/user_avatar/community.thinkgeo.com/johnny/32/19044_2.png) [@Johnny](https://community.thinkgeo.com/u/Johnny)\
**Post date:** [May 10, 2011, 5:03pm UTC](https://community.thinkgeo.com/t/colored-multiple-markers/5807/4 "2011-05-10T17:03:54Z")

</div>

&nbsp;

Hi&nbsp;Savy,  
Just&nbsp;as&nbsp;you&nbsp;have&nbsp;mentioned,&nbsp;I&nbsp;recommend&nbsp;you&nbsp;using&nbsp;ValueMarkerStyle&nbsp;and&nbsp;adding&nbsp;Features&nbsp;into&nbsp;MarkerOverlay&nbsp;of&nbsp;map&nbsp;control,&nbsp;it&nbsp;will&nbsp;give&nbsp;us&nbsp;a&nbsp;better&nbsp;performance&nbsp;than&nbsp;SimpleMarkerOverlay,&nbsp;because&nbsp;it&nbsp;always&nbsp;load&nbsp;the&nbsp;markers&nbsp;in&nbsp;view&nbsp;export&nbsp;only&nbsp;rather&nbsp;than&nbsp;all&nbsp;the&nbsp;markers&nbsp;like&nbsp;SimpleMarkerOverlay.&nbsp;Additionally,&nbsp;we&nbsp;can&nbsp;use&nbsp;ClusterMarkerStyle&nbsp;to&nbsp;filter&nbsp;the&nbsp;markers&nbsp;based&nbsp;on&nbsp;the&nbsp;screen&nbsp;distance&nbsp;to&nbsp;make&nbsp;sure&nbsp;there&nbsp;isn’t&nbsp;any&nbsp;overlapping.&nbsp;Here&nbsp;is&nbsp;the&nbsp;demo&nbsp;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);`  
  
&nbsp;  
To&nbsp;get&nbsp;the&nbsp;lat/long&nbsp;from&nbsp;a&nbsp;feature&nbsp;in&nbsp;“states.shp”,&nbsp;we&nbsp;can&nbsp;loop&nbsp;all&nbsp;the&nbsp;features&nbsp;in&nbsp;the&nbsp;featureSource&nbsp;and&nbsp;get&nbsp;the&nbsp;center&nbsp;point&nbsp;using&nbsp;“feature.GetShape().GetCenterPoint()”.  
&nbsp;  
Hope&nbsp;the&nbsp;above&nbsp;is&nbsp;helpful&nbsp;to&nbsp;you.  
&nbsp;  
Thanks,  
&nbsp;  
Johnny  
&nbsp;

---

<div class="post-metadata">

**Author:** ![Savy](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/s/c6cbf5/32.png) [@Savy](https://community.thinkgeo.com/u/Savy)\
**Post date:** [May 11, 2011, 2:28pm UTC](https://community.thinkgeo.com/t/colored-multiple-markers/5807/5 "2011-05-11T14:28:00Z")

</div>

Hi&nbsp;Johnny&nbsp;,&nbsp;  
  
  
  
Thanks&nbsp;for&nbsp;the&nbsp;clarification&nbsp;regarding&nbsp;the&nbsp;SimpleMarkerOverlay.&nbsp;I&nbsp;used&nbsp;GetCenterPoint&nbsp;to&nbsp;get&nbsp;the&nbsp;lat&nbsp;long&nbsp;of&nbsp;the&nbsp;state&nbsp;feature&nbsp;and&nbsp;generated&nbsp;a&nbsp;random&nbsp;value&nbsp;between&nbsp;(-1,1)&nbsp;and&nbsp;used&nbsp;this&nbsp;to&nbsp;offset&nbsp;the&nbsp;placement&nbsp;of&nbsp;the&nbsp;multiple&nbsp;marker.&nbsp;I&nbsp;did&nbsp;not&nbsp;want&nbsp;to&nbsp;cluster&nbsp;them&nbsp;as&nbsp;I&nbsp;have&nbsp;not&nbsp;more&nbsp;than&nbsp;five&nbsp;markers&nbsp;per&nbsp;state&nbsp;.&nbsp;Just&nbsp;want&nbsp;to&nbsp;make&nbsp;sure&nbsp;that&nbsp;this&nbsp;the&nbsp;best&nbsp;way&nbsp;to&nbsp;do&nbsp;.&nbsp;  
  
  
  
Also&nbsp;,&nbsp;I&nbsp;am&nbsp;using&nbsp;states.shp&nbsp;file&nbsp;to&nbsp;display&nbsp;my&nbsp;map&nbsp;I&nbsp;have&nbsp;statesLayer&nbsp;added&nbsp;to&nbsp;the&nbsp;Map&nbsp;control's&nbsp;StaticOverlay.layers&nbsp;collection&nbsp;and&nbsp;a&nbsp;markerOverLay&nbsp;added&nbsp;to&nbsp;CustomOverLays&nbsp;collection&nbsp;.&nbsp;Is&nbsp;this&nbsp;the&nbsp;right&nbsp;way&nbsp;to&nbsp;use&nbsp;Layers&nbsp;?&nbsp;  
  
  
  
The&nbsp;map&nbsp;displays&nbsp;as&nbsp;a&nbsp;flat&nbsp;image&nbsp;without&nbsp;the&nbsp;projection&nbsp;.&nbsp;How&nbsp;do&nbsp;I&nbsp;use&nbsp;a&nbsp;projection&nbsp;on&nbsp;the&nbsp;states.shp&nbsp;file&nbsp;so&nbsp;that&nbsp;its&nbsp;layout&nbsp;is&nbsp;similar&nbsp;google&nbsp;maps.&nbsp;I&nbsp;am&nbsp;in&nbsp;a&nbsp;disconnected&nbsp;network&nbsp;without&nbsp;internet&nbsp;connection&nbsp;.&nbsp;  
  
  
  
&nbsp;

---

<div class="post-metadata">

**Author:** ![Johnny](https://community.thinkgeo.com/user_avatar/community.thinkgeo.com/johnny/32/19044_2.png) [@Johnny](https://community.thinkgeo.com/u/Johnny)\
**Post date:** [May 11, 2011, 4:12pm UTC](https://community.thinkgeo.com/t/colored-multiple-markers/5807/6 "2011-05-11T16:12:46Z")

</div>

&nbsp;

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

---

<div class="post-metadata">

**Author:** ![Savy](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/s/c6cbf5/32.png) [@Savy](https://community.thinkgeo.com/u/Savy)\
**Post date:** [May 12, 2011, 10:23am UTC](https://community.thinkgeo.com/t/colored-multiple-markers/5807/7 "2011-05-12T10:23:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Johnny](https://community.thinkgeo.com/user_avatar/community.thinkgeo.com/johnny/32/19044_2.png) [@Johnny](https://community.thinkgeo.com/u/Johnny)\
**Post date:** [May 12, 2011, 10:45am UTC](https://community.thinkgeo.com/t/colored-multiple-markers/5807/8 "2011-05-12T10:45:38Z")

</div>

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