JSFiddle - React, Tailwind, and code Playground

by Guill84

HTML

<script src="http://jquerygeo.com/test/jquery.geo-test.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css">
    <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"...

CSS

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; }

JavaScript

// create a map
 var map = $( "#map" ).geomap( {
        center: [ -71.0595678, 42.3604823 ],
        zoom: 8,
        mode: "drawPoint",
        shape: function( e, geo ) {
          // the shape event triggers when the user finishes drawing a shape
          // the geo argument is a GeoJSON object representing the shape
          // for this example, we'll append it to the map forcing an
          // individual style that matches the current drawStyle

          // make a copy of the current drawStyle
          var drawStyle = $.extend( { }, map.geomap( "option", "drawStyle" ) );

          // append the shape using that style
          map.geomap( "append", geo, drawStyle );

        }
      } );

      $( "#drawStyle input" ).change( function( ) {
        // when an input of the drawStyle form changes,
        // immediately set the property of geomap's drawStyle option

        // keep in mind that the three point-only styles (width, height & borderRadius)
        // cannot be seen because with drawPoint, the shape event triggers immediately
        // without drawing a shape
        // this example, however, does use them when appending the shape after a click

        // 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 drawStyle option at a time
        var styleOption = { };
        styleOption[ $this.attr( "name" ) ] = $this.val();

        map.geomap( "option", "drawStyle", styleOption );
      } );

      // jQuery UI for pretty buttons
      $("#modes").buttonset();

      $("#modes input").click(function () {
        // set the map's mode option based on value of the input clicked
        // this will change the map's mode to drawPoint, drawLineString or drawPolygon
        map.geomap("option", "mode", $(this).val());
      });

      //...