Hi everybody
I have a custom database with a table containing x,y coordinates columns alongside other colums with different attributes. Now I want to create a layer containing hover popup markers of each record in the table (i.e. by plotting the x,y coordinates) and then using string buider append the other columns in the table into forming a message for the popup. Is this possible and if so, how?
Best Regards,
Vincent
Vincent,
Yes, it is possible. But it requires you read all the data from the table using ADO.net or LinQ by yourself. After that, please create the InMemoryFeatureSource with these records and the InMemoryMarkerOverlay with the InMemoryFeatureSource you created. Here as following are some hints:
DataTable datatable = ReadDataFromDB();
Collection<FeatureSourceColumn> columns = new Collection<FeatureSourceColumn>();
foreach (DataColumn item in datatable.Columns)
{
columns.Add(new FeatureSourceColumn(item.ColumnName));
}
InMemoryMarkerOverlay inMarkerOverlay = new InMemoryMarkerOverlay("markerOverlay", columns);
foreach (DataRow item in datatable.Rows)
{
Feature feature = new Feature(double.Parse(item["X"].ToString()), double.Parse(item["Y"].ToString()));
foreach (DataColumn col in datatable.Columns)
{
feature.ColumnValues[col.ColumnName] = item[col].ToString();
}
inMarkerOverlay.Features.Add(feature);
}
inMarkerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.Popup.ContentHtml = "[#Atrribute1#][#Atrribute2#]....";
Thanks,
Johnny
Hi Johnny
Thank you very much. I have managed to show the hover popup from text fields of my database table. I have one field that contains picture and in my datatable, its field is of type byte[]. I am trying to show the picture in my hover popup but it does not appear and instead it is showing the name of the field '[#picture#]'. Can you help me please.
Best Regards,
Vincent
Hi, Vincent
If you want to show the byte array that represents the image, and I am so sorry to say we don’t support this feature. From the samples in the “Marker” folder of our installed samples and you can see we only use the virtual path of the image, not Bitmap object or something else.
But you can implement it by yourself using HttpHandler. You need to insert the image tag in the ContentHtml of Popup object and set the src property of image tag pointing to the HttpHandler and fetch the image from it. Hope it could help you.
Thanks,
Khalil
Hi Khalil
Thank you for the reply. I want to display my hover popups in different colors based on the values in the one of the columns of the underlying table. How can I use valuestyle or classbreak to fulfill this? Or if there is anyway around apart from that, let me know it please.
Best Regards,
Vincent
Hi, Vincent
There is no need to use ValueStyle or ClassBreakStyle. In fact, we have provided this feature for our customers. But you need to use SimpleMarkerOverlay instead of InMemoryMarkerOverlay, and also you need to add Marker object to overlay and set the properties such as Popup or ContextMenu on that. The BackgroundColor property of Popup is just what you want.
Please let us know if you still have any doubts about it.
Thanks,
Khalil
Hi Khalil
Thank you for the reply. Can you please give me a simple sample code just like the one in one of the replies of this thread?
Best Regards,
Vincent
Hi, Vincent
If you want to know more about how to use SimpleMarkerOverlay, please refer to the "UseDraggableMarkers" sample in the "Markers" folder of our installed samples. I have modified that sample and add some necessary codes for you, please refer to the codes below.
Map1.MapBackground.BackgroundBrush = new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"));
Map1.CurrentExtent = new RectangleShape(-13939426.6371, 6701997.4056, -7812401.86, 2626987.386962);
Map1.MapTools.PanZoomBar.Enabled = true;
Map1.MapTools.MouseCoordinate.Enabled = true;
Map1.MapUnit = GeographyUnit.Meter;
GoogleOverlay google = new GoogleOverlay("Google Map");
google.JavaScriptLibraryUri = new Uri(ConfigurationManager.AppSettings["GoogleUri"]);
google.GoogleMapType = GoogleMapType.Normal;
Map1.CustomOverlays.Add(google);
SimpleMarkerOverlay markerOverlay = new SimpleMarkerOverlay("MarkerOverlay");
// Here get the x and y, and then set them on the Marker object
Marker marker = new Marker(-8922952.93266, 2984101.58384, new WebImage(21, 25, -10.5f, -25f));
marker.Popup.ContentHtml = "ContentHtml";
marker.Popup.BackgroundColor = GeoColor.SimpleColors.Red;
markerOverlay.Markers.Add(marker);
Map1.CustomOverlays.Add(markerOverlay);
Thanks,
Khalil
Hi Khalil
Thank you for the reply. In fact what I am interested with is to have the color of the marker itself changing based on criteria from my custom database. In the sample code you gave me, only the color of popup changes, how can I get the color of the marker changing?
Best Regards,
Vincent
Hi, Vincent
Sorry for delay response. We were busy with the stuff about new release.
I don’t know what you mean by saying that “have the color of marker itself changing”; as far as I know, marker is just an icon that you have set and you can’t change the background color for that.
If I misunderstand your meaning, please correct me.
Thanks,
Khalil
Hi Khalil
Thank you for the reply. Is it possible to put my own icon as a marker which is stored as an image? If so, how can I do it? Can you give me a simple sample code.
Best Regards,
Vincent
Hi, Vincent
Yes, we can do that.
I guess that you can refer to the "ClickEventOnAMarker" sample, which will show you how to set the virtural path for the image.
Thanks,
Khalil
Hi Khalil
How can I use projection (i.e ManagedProj4Projection) to a SimpleMarkerOverlay the same way I do with InMemoryMarkerOverlay? I am trying to plot my points using SimpleMarjerOverlay, but they do not appear within the specified extent due to lack of projection.
Best Regards,
Vincent
Vincent,
If you want to re-project the location of markers, and the converting methods of ManagedProj4Projection can help you, such as ConvertToExternalProjection or ConvertToInternalProjection method depend on your requirements.
Thanks,
Khalil
Hi Khalil
Thank you for the reply. The purpose of wanting to project SimpleMarkerOverlay is to use my own icon image instead of depending on the default one. The code snippet below works fine but I am using InmemoryMarkerOverlay which I can not set icon images of my own.
InMemoryMarkerOverlay inMarkerOverlay = new InMemoryMarkerOverlay("markerOverlay", columns);
foreach (DataRow item in datatable.Rows)
{
string x = item["X"].ToString();
Feature feature = new Feature(double.Parse(item["X"].ToString()), double.Parse(item["Y"].ToString()));
foreach (DataColumn col in datatable.Columns)
{
feature.ColumnValues[col.ColumnName] = item[col].ToString();
}
inMarkerOverlay.Features.Add(feature);
}
ManagedProj4Projection proj4 = new ManagedProj4Projection();
proj4.InternalProjectionParameters = ManagedProj4Projection.GetEpsgParameters(4326);// in Geodetic (the GPS device reads).
proj4.ExternalProjectionParameters = ManagedProj4Projection.GetEpsgParameters(32737); //in UTM (the projection of the Map).
inMarkerOverlay.FeatureSource.Projection = proj4;
inMarkerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.Popup.Width = 450;
inMarkerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.Popup.Height = 200;
inMarkerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.Popup.ContentHtml = "[#Remarks#]";
inMarkerOverlay.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
Can you help me to modify the code below to get it plotting the same coordinates used above and achieve a result which an end user can not distinguish using the projection concept you have mention in your last post.
SimpleMarkerOverlay markerOverlay = new SimpleMarkerOverlay("MarkerOverlay");
string pushpin = "../../theme/default/img/marker_gold.gif";
for (int i = 0; i < datatable.Rows.Count; i++)
{
DataRow rw = datatable.Rows<i>;
String x = rw["X"].ToString();
String y = rw["Y"].ToString();
String Remarks = rw["Remarks"].ToString();
Marker marker = new Marker(double.Parse(x), double.Parse(y), new WebImage(pushpin, 21, 25, -10.5f, -25f));
//marker.Popup.ContentHtml = "ContentHtml";
marker.Popup.ContentHtml = Remarks;
marker.Popup.IsVisible = true;
marker.Popup.BackgroundColor = GeoColor.SimpleColors.Red;
markerOverlay.Markers.Add(marker);
}
Map1.CustomOverlays.Add(markerOverlay);
Best Regards,
Vincent
Hi, Vincent
I don’t understand that you say “but I am using InmemoryMarkerOverlay which I cannot set icon images of my own.” In fact, we have provided the related API for that, and you can refer to the samples in the Markers folder of our installed samples. The code maybe likes the one below:
inMarkerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage = new WebImage("../../theme/default/img/marker_gold.gif"", 21, 25);
Foryour second solution, please refer to the codes below, if don't want to set different web image for markers, and I suggest that you choose to use InMemoryMarkerOverlay.
ManagedProj4Projection projction = new ManagedProj4Projection();
projction.InternalProjectionParameters = ManagedProj4Projection.GetEpsgParameters(4326);
projction.ExternalProjectionParameters = ManagedProj4Projection.GetEpsgParameters(32737);
SimpleMarkerOverlay markerOverlay = new SimpleMarkerOverlay("MarkerOverlay");
string pushpin = "../../theme/default/img/marker_gold.gif";
for (int i = 0; i < datatable.Rows.Count; i++)
{
DataRow rw = datatable.Rows;
String x = rw["X"].ToString();
String y = rw["Y"].ToString();
String Remarks = rw["Remarks"].ToString();
Vertex projectedVertex = projction.ConvertToExternalProjection(double.Parse(x), double.Parse(y));
Marker marker = new Marker(projectedVertex.X, projectedVertex.Y, new WebImage(pushpin, 21, 25, -10.5f, -25f));
//marker.Popup.ContentHtml = "ContentHtml";
marker.Popup.ContentHtml = Remarks;
marker.Popup.IsVisible = true;
marker.Popup.BackgroundColor = GeoColor.SimpleColors.Red;
markerOverlay.Markers.Add(marker);
}
Map1.CustomOverlays.Add(markerOverlay);
Thanks,
Khalil
Hi Khalil
Thank you for the help, it has worked.
Here I have another issue I need your help. I want to retrieve from my database coordinates for just a single point and plot it. Using the same coordinate and possibly the projection used in the above postings, how can I create a bounding box that will enable me to zoom to that specific point? or Is there any other way I can use to zoom to the point?
Best Regards,
Vincent
Hi Khalil
I have encountered a problem when plotting the simple markers. I have labeled my markers by setting the IsVisible property of the popup to true. But when plotted, the labels are getting displaced from the respective markers. I tried to change the OffsetXInPixel/OffsetYInPixels but when I manage to align the labels on one side of the map, the other side becomes disaligned. Below is the code I am using
Marker marker = new Marker(projectedVertex.X, projectedVertex.Y, new WebImage(pushpin, 21, 25, -10.5f, -25f));
marker.Popup.ContentHtml = CustomerRefNo;
marker.Popup.Width = 60;
marker.Popup.Height = 23;
marker.Popup.IsVisible = true;
marker.Popup.OffsetXInPixels = -5;
marker.Popup.OffsetYInPixels = 15;
marker.Popup.BackgroundColor = GeoColor.StandardColors.Transparent;
markerOverlayBase.Markers.Add(marker);
Is there any other best way of setting labels on simple markers?
Best Regards,
Vincent
Hi, Vincent
By default, we have supplied the related API to get the Bounding Box for a single point, please see the codes below:
var extent = marker.Position.GetBoundingBox();
And then you can set it on the map or use it in another ways.
As for your second problem with the “Displaced Labels”, and there is one hack to solve that, adding the following CSS codes before your closing body tag of your web page, and if it doesn’t work, please get the latest Daily Build (4.5.16.0 or later) . Please get it through helpdesk.thinkgeo.com/helpdesk/login.aspx.
<style type="text/css">
.olPopupContent
{
padding: 0px;
overflow: auto;
}
</style>
I suggest that you don’t set the fixed size for the Popup, and the alternate way is to set the AutoSize as true, and the size will be calculated automatically depend on your content html.
marker.Popup.ContentHtml = "ContentHtml";
marker.Popup.HasCloseButton = true;
marker.Popup.AutoSize = true;
marker.Popup.IsVisible = true;
marker.Popup.BackgroundColor = GeoColor.StandardColors.Transparent;
Thanks,
Khalil
Hi Khalil
Thank you for the reply. I have tried to apply the style in my web page as you instructed but the displaced lables problem persisted. I downloaded the latest daily build and update the DLLs, but the problem is stil there. Is there any other way I can try?
Best Regards,
Vincent