Edit in JSFiddle

      // create a map
      var map = $( "#map" ).geomap( {
        center: [ -71.0595678, 42.3604823 ],
        zoom: 8,
        click: function ( e, geo ) {
          // in the click handler append the shape to the map
          // the final display style will be the base shapeStyle
          // plus individual shape style property overrides via
          // a style passed to the append method
          var appendStyle = { };

          $.each( $( "#append input" ).serializeArray( ), function( ) {
            // run through each input in the append fieldset and
            // build a style object if there are any style overrides
            if ( this.value ) {
              appendStyle[ this.name ] = this.value;
            }
          } );

          // append the shape
          // it will get the base shapeStyle (which can change later)
          // plus any overrides from the append style (which cannot change)
          map.geomap( "append", geo, appendStyle );
        }
      } );

      $( "#shapeStyle input" ).change( function( ) {
        // when an input of the shapeStyle section changes,
        // immediately set the property of geomap's shapeStyle option
        // this change will effect all appended shapes that don't have
        // an explicit override for the style property that's changing

        // first, we can grab a jQuery reference to the input that changed
        var $this = $( this );

        // next, we can create an object that represents this change
        // this example doesn't, but you can set more than one property
        // on geomap's shapeStyle option at a time
        var shapeOption = { };
        shapeOption[ $this.attr( "name" ) ] = $this.val();

        map.geomap( "option", "shapeStyle", shapeOption );
      } );

      // jQuery UI for pretty reset buttons
      $( "button" ).button( );

      // maintin a copy of the original shapeStyle so we can reset it later
      var originalShapeStyle = map.geomap( "option", "shapeStyle" );

      $( "#shapeStyle button[type='reset']" ).click( function( ) {
        // when the user resets the shapeStyle form,
        // we want to also reset the shapeStyle option
        // back to its original state
        map.geomap( "option", "shapeStyle", originalShapeStyle );
      } );

    <div id="map">
    </div>
    <div class="info">
      <h1>shapeStyle</h1>
      <p>This page tests various style properties using the shapeStyle option to change the default style or and passing a shape-specific style to the append method.</p>
      <form id="shapeStyle">
        <fieldset>
          <legend>base geomap shapeStyle option</legend>
          <div>
            <label><span>color</span> <input type="color" name="color" value="#7f0000" /></label>
            <label><span>opacity</span> <input type="text" name="opacity" value="1.0" /></label>
          </div>
          <div>
            <label><span>fill</span> <input type="color" name="fill" value="" /></label>
            <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value=".2" /></label>
          </div>
          <div>
            <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
            <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="1" /></label>
            <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="2" /></label>
          </div>
          <div>
            <label><span>width</span> <input type="number" name="width" value="8" /></label>
            <label><span>height</span> <input type="number" name="height" value="8" /></label>
            <label><span>borderRadius</span> <input type="number" name="borderRadius" value="8" /></label>
          </div>
        </fieldset>
        <button type="button">set shapeStyle</button>
        <button type="reset">reset shapeStyle</button>
      </form>
      <form id="append">
        <fieldset>
          <legend>specific append style argument</legend>
          <div>
            <label><span>color</span> <input type="color" name="color" value="" /></label>
            <label><span>opacity</span> <input type="text" name="opacity" value="" /></label>
          </div>
          <div>
            <label><span>fill</span> <input type="color" name="fill" value="" /></label>
            <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value="" /></label>
          </div>
          <div>
            <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
            <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="" /></label>
            <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="" /></label>
          </div>
          <div>
            <label><span>width</span> <input type="number" name="width" value="" /></label>
            <label><span>height</span> <input type="number" name="height" value="" /></label>
            <label><span>borderRadius</span> <input type="number" name="borderRadius" value="" /></label>
          </div>
        </fieldset>
        <button type="reset">clear append style</button>
      </form>
    </div>

html
{
  font:13px/1.231 Calibri,Arial,sans-serif; *font-size:small;
}

.info 
{
  background: #fff;
  border-radius: 8px;
  box-shadow: -4px 4px #444;
  opacity: .8;
  padding: 8px;
  width: 95%;
}

fieldset { border: none; }

legend {
  font-size: 14px;
  font-weight: bold;
}

    #map
    {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }

    label { white-space: nowrap; }

    label span { display: inline-block; width: 7rem; }
    input { width: 6rem; }

    button { width: 16rem; }