type Object ( geomap style )
  borderRadius: "8px",
  color: "#7f0000",
  fill: undefined,
  fillOpacity: .2,
  height: "8px",
  opacity: 1,
  stroke: undefined,
  strokeOpacity: 1,
  strokeWidth: "2px",
  visibility: "visible",
  width: "8px"
$( map or service selector ).geomap( { shapeStyle: { color: "green" } } );
var shapeStyle = $( map or service selector ).geomap( "option", "shapeStyle" );
$( map or service selector ).geomap( "option", "shapeStyle", { strokeWidth: "4px" } );

The shapeStyle option retrieves or updates the base style of shapes appended to the map.

This differs from the drawStyle option which defines the style of incomplete lines and polygons as they are being drawn.

Two extra color properties, stroke and fill, are not defined by default and use the value of the color property until they are defined individually.

This option changes specific properties of the internal base style. If you send an incomplete style object, only the style properties you reference are updated.

Similar to CSS, you can override this style on a per-shape basis by passing a different style to the append method.

Changing this base style will update how geomap draws existing shapes that do not have their own style. For shapes that do have their own style, changing the base shapeStyle will update any style properties not referenced in the shape-specific style. For example, assume the following:

  1. the base shapeStyle starts with its initial style having a red color (applied to both stroke and fill) and a strokeWidth of 2px
    var map = $( '#map' ).geomap( );
    map.geomap( 'option', 'shapeStyle' );
      // {
      //   color: "#7f0000"
      //   ...
      //   strokeWidth: "2px"
      // }
  2. you call append with a style that increases the stroke width to 4px but does not supply a stroke color
    $( '#map' ).geomap(
      { type: 'Point', coordinates: [ -71, 42 ] },
      { strokeWidth: '4px' }
  3. you later change the base shapeStyle's stroke color to blue
    $( '#map' ).geomap( 'option', 'shapeStyle', { stroke: '#00f' } );

The shape described in the above example will draw with a blue stroke color and a strokeWidth of 4px.

You can also set a base style for a specific service. These are called service-level styles and apply only to service-level shapes. To do this, target a service inside a map instead of the map itself for your call to geomap's shapeStyle option. To expand upon the above example, consider the following additional steps:

  1. you change the shapeStyle option of the default service specifically so that points are twice as long as usual; the default service has the CSS class: osm
    $( "#map .osm" ).geomap( "option", "shapeStyle", { width: "16px" } )
  2. you append a second point directly to the default .osm service
    $( "#map .osm" ).geomap( 
      { type: "Point", coordinates: [ -70.5, 42.5 ] }

This second point will:

This is the only option that can be applied to services. All other options require a reference to the original map element.

When called with a second argument to set the shapeStyle, the jQuery UI widget factory returns the original jQuery collection to maintain call chaining.

Please see the style section at the bottom of the geomap widget page for more information about the style object.