JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<script src="http://code.jquerygeo.com/jquery.geo-1.0b1.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/blitzer/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
    <div id="map">
    </div>
    <div class="info">
      <div class="basemap-inputs">
        <input type="radio" id="basemap-street" name="basemap" value="street" checked="checked" /><label for="basemap-street">Street</label>
        <input type="radio" id="basemap-aerial" name="basemap" value="aerial" /><label for="basemap-aerial">aerial</label>
      </div>
    </div>

CSS

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

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

JavaScript

// create a map with two basemap services, the aerial service is hidden

      // note that the space in the "class" properties below means both services
      // have the basemap class but each one has a second class that we use to show/hide them
      var map = $( "#map" ).geomap( {
        center: [ -71.0595678, 42.3604823 ],
        zoom: 8,

        services: [
          {
            "class": "basemap street",
            type: "tiled",
            src: function( view ) {
              return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
            },
            attr: "Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"
          },

          {
            "class": "basemap aerial",
            type: "tiled",
            src: function( view ) {
              return "http://oatile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/sat/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
            },
            style: {
              visibility: "hidden"
            },
            attr: "Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency"
          }
        ]
      } );

      // jQuery UI for pretty buttons

      $( ".basemap-inputs" ).buttonset( );

      // hook into when user clicks one of the basemap buttons
      $( 'input[name="basemap"]' ).click( function( e ) {
        // the value of the checked basemap input matches the class of the
        // jQuery Geo service we want to show

        var basemapServiceClass = $( 'input[name="basemap"]:checked' ).val();

        // hide all basemap services
        $( ".basemap" ).geomap( "toggle", false );

        // show the selected one
        $( "." + basemapServiceClass ).geomap( "toggle", true );
      } );