JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquerygeo.com/jquery.geo-1.0b1.min.js"></script>
<div id="map">
</div>

  <div class="info">
    <fieldset>
      <legend>marker render technique</legend>
      <label>
        <input type="radio" name="technique" value="css" checked />
        <span>CSS labels</span>
      </label>
      <label>
        <input type="radio" name="technique" value="canvas" />
        <span>canvas service</span>
      </label>
    </fieldset>
  </div>

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: 90%;
}

fieldset { border: none; }

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

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

    input {
      vertical-align: text-bottom;
    }

    /* boat launch css markers (as geomap shape labels)
     * this style will affect all labels on the boat-launch-css service
     * since these are our only real shapes, we could omit the #boat-launch-css
     * part of the rule but it's here for example
     * this does not affect the boat-launch-canvas service (those are drawn without labels)
     *
     * the top-left pixel of each label is placed at the boat launch point on the map
     * by using height, width, and negative margins, we can make each background image appear an the correct location
     *
     * when we append the shapes in javascript, we have to pass an empty string (instead of null or undefined)
     * so that a label gets generated, even though the label has no text
     *
     * on the jsFiddle, we're using a data URI because it's on a different 
     */
    #boat-launch-css .geo-label {
      width: 32px;
      height: 37px;
      margin-left: -16px;
      margin-top: -32px;
background-image:...

JavaScript

var canvas = document.createElement("canvas"), //< a canvas where we draw markers for the second service in the canvas service's src function
          boatImage = $( '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAlCAYAAAAjt+tHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAADeklEQVRYR8WVXU8TURCG/SX+CBU/A9EIRDGIFsQPKorWAlZaQBBBIlgQCsXSigKFUhRQKFIJREVNVAQjmqgxYrxQEi/UGC8wRo1RDHk9s7Ji26GnVMBJnuzudOadd09P9iwC8F9hkwsJm1xIAhKGqMWYT/zn+TxQgW1fNJzGBLQV7JxTSJO0/U0EGGjK1qC9SDsvkLbUwIXiPfOK1EDn8bSQcOg3oESzBLW6GOXaVpjC1vkjNdBVqpuR9qJUZZjKkNct2oBTB36bIZwmDdurIjXQXZY+I67DyXAVpIhSPu51N6AucxM8Zj3bT0gN9FQYWNQ3vFiZjUc3L6N673pYUtfi5K41sO6LgU0fp6zIiaSIP7WcjtSA12JkceXtECWhh1usFKcjNdBrzWFR3qi2CJdOFcJjzVfuvfZi9DeUK/dEd02BcqVVonpOR2qgz5bPQoKdllzFgEp72SGUJi5FV1VeQN6u38jqSA20ZG9hse9fL0oCoy5LM3U3HXe6GlGnj2V1wjZAK+A4mCDKfIM237evn6eegPH3b1C+YzVsaetYnbANNBo2KSYeXvOI0unorSvBz4mJqSegr94M87YINBs3szphGyCsqVE4bdiCiR/fRXlgfPzwDubk5XDootl+4p8MqKvwdPCKKA+MAXeN+A4sg8uUwPYTUgPuXE1QqndHoj5nuyj3jS+fxlGpjVI2K9enIjVwLj85KE3iXKdVeP38kWiZDtobpeLtW3IT2T4VqQHuHFdpFuJO01axy1cqm29ychIvHtzG/f4O2DPjYd2zlu37G6kB7ghVqTfEo600XZCBs6ZtcBXuRdn2lWg6osUZYyLsB2Jh0UayvSpSA9wJpnK+UIuRXjfGngzj1eNhjD0dwejwdeXze7e7CW9fjqK1YBfbqyI1wB0gKs6cJNh0sWKzRYo3XyH+ilV4NjSgmBjytqDXcQxV4oTkelWkBvy/3cFwZMTBkR6nGKpJi0aDKREdJTq2VkVqwFORhatniucF0pYaaDmaip7qXNxwmucU0iTtoAYIKuBoLd6PW61VIUG1nAbhP8/nIRjUfL5Ej8H22qBQDTdoJtjkTJBwR5kB9zz1LPTbbIYTbDIYNODiSSNGvM0+UG62wwk2KYMGdVpy8LCvVYHuwxlOsMlQoIGe6jyFcIcTbDJUaPC/DCfY5ELCJhcOLPoFBN+hapfCkyQAAAAASUVORK5CYII=" />' ).load( function( ) {
            // the image doesn't always load fast enough
            // we could cache it but this is just as easy
            // refresh the canvas-based service once when the image it needs is ready

            // we could also have a flag to denote that the image hasn't loaded yet
            // and not bother drawing the service the first time
            boatLaunchCanvas.geomap( "refresh" );
    ...