Databound Map with custom marker

May 20, 2011 at 6:08 PM

Is there a way to use a custom PNG image for my markers when the map is bound via a DataAccess control?

May 23, 2011 at 2:08 AM

We use a custom PNG  with a marker-db - and iteratively place each one in a loop.  If that is doable, I'll look up the code.

May 24, 2011 at 2:14 PM

Yes, please. I would like to see that code. I really would like to see a clean (meaning small amount of code as possible) sample.

 

I though there would be a simple Property to change the marker icon to something like "/images/mycustommarker.png". But I do not see that option.

Thanks

May 24, 2011 at 2:38 PM

I gave up trying to use this control. I use Reimers (http://reimers.dk/), and this is how I set up custom icons:

Dim icHQ As New GoogleIcon("hqMarker", "/_images/googleMarkerWhiteGP.png", "/_images/googleMarkerWhiteGPShadow.png", New GoogleSize(40, 72), New GoogleSize(77, 72), New GooglePoint(20, 72), New GooglePoint(20, 72), New GooglePoint(20, 4))     

GMap.Icons.Add(icHQ)

This sets up a custom icon with a shadow image. There are different overloads when you define the GoogleIcon.

Then I assign the icon to the marker like this:

Dim locMarkerHQ As New GoogleMarker("hqMarker", (CDbl(HQ.Lat)), CDbl(HQ.Lng))     

locMarkerHQ.Options.Icon = icHQ

Very simple.

Sorry that I can't help with the GoogleMap control. As I said, I gave up on it early on. Maybe I just didn't try hard enough.

May 24, 2011 at 3:03 PM

I've gone back and pulled it - part of a MUCH bigger codebase with a db backend, so there's a few "extras" to do with the boolean if you want custom markers (bCustomMarkers) and also the "objPin" which is a Location class... It will add the desired custom marker icon from the css (css locationlabel in this case)...

 

Dim bCustomMarkers as Boolean = True
Dim sbCustomMarkerBuilder As New StringBuilder("")

If bCustomMarkers Then sbCustomMarkerBuilder.AppendLine("var label;")

'\\ Do the line below for each desired Customer Marker
sbCustomMarkerBuilder.Append("label = new ELabel(new GLatLng(" & objPin.Latitude & "," & objPin.Longitude & "), """ & sMarker & """, ""locationlabel""); GoogleMap1.addOverlay(label);")

'\\ If needed add Custom Markers Scripting

If bCustomMarkers Then Me.GoogleMap1.OnClientMapLoad = sbCustomMarkerBuilder.ToString

The css sample is this:
.locationlabel{color:Red;
               font-family:Tahoma,sans-serif;
               font-size:10px;
               background-image:url('images/yourimage.png');
               background-repeat:no-repeat;
               text-align:center;
               min-height:29px;
               min-width:28px;}

It scales nicely to thousands of markers (in Chrome at least / IE is a little slow!)
May 25, 2011 at 1:37 PM

All the examples above are not for maps that are data bound right? My map is bound to a datasource that reads in latitudes & longitudes from rows in a database. There is no "code" to create markers, its all driven by properties in the grid control.

 

Hope that makes more sense.

May 25, 2011 at 2:00 PM

That is why I said " and iteratively place each one in a loop" - that would be iterative through the source rows instead of binding the whole table/datasource.