ThinkGeo.com    |     Documentation    |     Premium Support

Individual marker hover popup

In the online demo, there is a "Set the hover popup of a marker", it shows how to setup the popup html using StringBuilder, then assign it to DefaultMarkerStyle.Popup.ContentHtml. However, i wish that when user hover to a marker, instead of displaying a fixed text in a popup window, it reads that marker's details from a database, then displays it in the popup window. Is there any sample code?


 


Ric



Ric, 
  
 Marker overlay’s popup data can be bound to a feature’s columnValue. So for example, if your feature has an “AREANAME” column, with the following code, the popups can automatically be formatted with the data in that column. 
 
markerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.Popup.ContentHtml = "[#AREANAME#]";
 
 There is a sample coming with our product within Samples->Markers->AddProjectedMarkers.aspx where we showed how to bind data to a dbf column. 
  
 Thanks, 
  
 Ben 


I have the same need as Ric.  I want to bind the data in the popup to info from a database, not data that can be found in the .DBF file.  Any examples on how to do this?



Jeremy, 
  
 We haven’t updated our online samples yet (so I cannot give you a link of our online demo) but we have an example along with our product in Samples/DataProviders/LoadAMSSQL2008FeatureLayer.aspx, in which you can find how to bind data to MsSql2008FeatureSource and you will see it’s almost the same with loading data from DBF files. 
  
 Thanks, 
  
 Ben 


I saw that example as well, but it doesn't havee the hover behavior and I really would like to be able to use the MarkerOverlay object because of the nice Popup object that is available along with its Hover behavior. 


The problem I am having is that I am looping through my business data and I cannot customize each individual popup.  Each time I add a feature into the MarkerOverlay,   I set the DefaultMarkerStyle.Popup object to be a custom popup, each time with new business data for the feature the popup should represent.  The result is that every single popup on the map is the same.  I just need a way to customize the conentHTML of each popup in the MarkerOverlay without being limited to using the data in the DBF file.


Thanks,


Jeremy



Just for anyone else trying to do this I was able to get the desired result by using the Map.MarkerOverlay.ZoomLevelSet.ZoomLevel01.CustomMarkerStyle object instead of the Map.MarkerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle in a loop.  Each time around I would set the CustomMarkerStyle equal to the following method:



private ValueMarkerStyle GetValueMarkerStyle(string markerId, Feature pointFeature, int counter)
{
StringBuilder contentHtml = new StringBuilder();
contentHtml.Append("")
.Append("<table><tr><td class='tooltitle' align='right'>RailcarName:</td>")
.Append("<td class='toolcontent'>")
.Append(pointFeature.ColumnValues["Name"])
.Append("</td></tr><tr><td class='tooltitle' align='right'>Date:</td>")
.Append("<td class='toolcontent'>")
.Append(DateTime.Parse(pointFeature.ColumnValues["Date"]).ToString("MMM d, yyyy"))
.Append("</td></tr><tr><td class='tooltitle' align='right'>Location:</td>")
.Append("<td class='toolcontent'>")
.Append(pointFeature.ColumnValues["Location"])
.Append("</td></tr></table>")
.Append("");

MarkerValueItem valueItem = new MarkerValueItem(markerId);
WebImage image = new WebImage("MapSuiteData/theme/default/img/marker_green.gif", 21, 25);
image.FontStyle = new GeoFont("Arial", 8, DrawingFontStyles.Bold);
image.TextOffsetX = 5;
image.TextOffsetY = 2;
image.Text = counter.ToString();
valueItem.DefaultMarkerStyle.WebImage = image;
valueItem.DefaultMarkerStyle.WebImage.ImageOffsetY = -27;
valueItem.DefaultMarkerStyle.Popup.ContentHtml = contentHtml.ToString();
valueItem.DefaultMarkerStyle.Popup.AutoSize = true;
valueItem.DefaultMarkerStyle.Popup.AutoPan = true;

markerStyle.ValueItems.Add(valueItem);

return markerStyle;
}


 


I stored my business data in a Feature using the following code: 



Dictionary<string, string> dictionaryAttributes = new Dictionary<string, string>();
dictionaryAttributes.Add("Id", dr["Id"].ToString());
dictionaryAttributes.Add("Name", dr["Name"].ToString());
dictionaryAttributes.Add("Date", dr["Date"].ToString());
dictionaryAttributes.Add("Location", dr["Location"].ToString());

Feature pointFeature = new Feature(new PointShape(Longitude, Latitude), dictionaryAttributes);



Jeremy 
  
 You can add your business data to an InMemoryFeatureSource and use that one as the data source of the markerOverlay, then you can use “#” to customize the popup contents.  
  
 Here is how to create an InMemoryFeatureSource with your business data. 
 
                Collection<FeatureSourceColumn> columns = new Collection<FeatureSourceColumn>();
                columns.Add(new FeatureSourceColumn("Id"));
                columns.Add(new FeatureSourceColumn("Name"));
                columns.Add(new FeatureSourceColumn("Date"));
                columns.Add(new FeatureSourceColumn("Location"));
                InMemoryFeatureSource inMemoryFeatureSourece = new InMemoryFeatureSource(columns);

                Dictionary<string, string> dictionaryAttributes = new Dictionary<string, string>();
                dictionaryAttributes.Add("Id", dr["Id"].ToString());
                dictionaryAttributes.Add("Name", dr["Name"].ToString());
                dictionaryAttributes.Add("Date", dr["Date"].ToString());
                dictionaryAttributes.Add("Location", dr["Location"].ToString());

                Feature pointFeature = new Feature(new PointShape(Longitude, Latitude), dictionaryAttributes);

                inMemoryFeatureSourece.InternalFeatures.Add(pointFeature)
 
                  
 Also, you can use the event featureSource.CustomColumnFetch to bind your custom business data to data source. Please have a look at the sample in FeatureLayers->AddMyOwnCustomDataToAFeatureLayer for detail. 
  
 Thanks, 
  
 Ben