geoxml3: Syntax for markerOptions{shape}

Question

I want to limit the clickable area of all the icons from a KML file, and I'm a little stumped about how to make that happen. The icons are all the same typical-style pointer, and I'd like to limit the clickable area to the circle encompassed by the top of the pointer. The icon is 19x32, so I think I want a circle centered 9px from the top, 9px from the left, with a radius of 9px. If geoxml3 will do that, I figure that would be specified in the parser object, though maybe it would be in the IconStyle in the KML file. If in fact that would be in the parser object I haven't found the right syntax. It is apparently not:

var blues = new geoXML3.parser({map: map, singleInfoWindow: true, zoom: false, markerOptions: {shape: {type:circle, coords: [9px,9px,9px]}}});
blues.parse('allbluesdance.kml');

score 0 · Accepted Answer · answered Aug 12 '14 at 06:25

The markerOptions option to GeoXml3 is exactly a Google Maps Javascript API v3 markerOptions object.

Your icon is 49x32 pixels, the center of the circle is defined from the top left, so you probably want 24,9 for the center and a radius of 9:

        var blues = new geoXML3.parser({
              map: map,
              singleInfoWindow: true,
              suppressDirections: true,
              markerOptions: {
                shape: {
                  type: 'circle', 
                  coords: [24,9,9]
                }
              },
              zoom: false
            });

From the documentation on Complex Icons:

// Shapes define the clickable region of the icon.
// The type defines an HTML &lt;area&gt; element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
  coords: [1, 1, 1, 20, 18, 20, 18 , 1],
  type: 'poly'
};

The HTML area circle shape, looks like what you have should work if you remove the "px" (the documentation says an array of numbers), except that it is off to the left of the icon.

working example

Thanks, geocodezip. I see, um, that I didn't quote 'circle'. Now it works perfectly. I should have mentioned, but I split the image from the previous question into a 19x32 marker image and a 49x32 shadow. I'm loading those onto a clickable marker layer above a non-clickable shadow layer, respectively. The initial reason was to reduce the size of the clickable region for each maker from 49px wide to 19px. Now that I can specify the clickable region, image size is no longer an issue, but having two layers raises another question, which I'll now post separately. — Drew Tronvig, Aug 13 '14 at 05:39

geoxml3: Syntax for markerOptions{shape}

1 Answers1