JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <div id="tweets" data-role="page">
      <div data-role="header">
        <h1>Tweets near you</h1>
      </div>

      <div class="tweets-content" data-role="content">
        <ul class="tweets-list" data-role="listview" data-inset="true">
        </ul>
      </div>
    </div>

    <div id="tweetinfo" data-role="page">
      <div data-role="header">
        <a data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a>
        <h1><span class="tweetinfo-from_user_name"></span></h1>
      </div>

      <div class="tweetinfo-content" data-role="content">
        <p><b class="tweetinfo-from_user_name"></b><br /><span class="tweetinfo-from_user"></span></p>

        <p class="tweetinfo-text"></p>

        <div id="map_canvas"></div>
      </div>
    </div>

    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>

CSS

.tweetinfo-from_user { color: #888; }

      /* you MUST give the in-page maps a height or it won't work in jQuery Mobile */
      #map_canvas
      {
        width: 100%;
        height: 12em;
      }

@media screen and (min-device-height: 641px) {
      #map_canvas
      {
        height: 24em;
      }
}

JavaScript

var map = null; //< a map widget reference for later
        var marker = null; //< tweet marker

        $( "body" ).on( "pagebeforeshow", "#tweets", function( ) {
          $( ".tweets-list" ).html( "" );

          if ( navigator.geolocation ) {
            navigator.geolocation.getCurrentPosition( function( position ) {
              var latLng = position.coords.latitude + "," + position.coords.longitude,
                  radius = "5km",
                  geocodeArgument = latLng + "," + radius;

              $.ajax( {
                url: "http://search.twitter.com/search.json",
                data: {
                  rpp: 50, //< max results
                  geocode: geocodeArgument
                },
                cache: "false",
                dataType: "jsonp",
                success: function ( tweets ) {
                  var tweetItems = new jQuery( ),
                      tweetItem;

                  $.each( tweets.results, function () {
                    // not all tweet results have the geo property set
                    if ( this.geo ) {
                      tweetItem = $( '<li><a href="#tweetinfo">' + ('<h2>' + this.from_user_name + '</h2>') + ('<p>' + this.text + '</p>') + '</a></li>' );
                      tweetItem.children( ).data( "tweet", this );
                      tweetItems = tweetItems.add( tweetItem );
                    }
                  } );

                  if ( tweetItems.length > 0 ) {
                    $( ".tweets-list" ).append( tweetItems ).listview( "refresh" );
                  } else {
                    $( ".tweets-content" ).html( '<p>There are no tweets in your area</p>' );
                  }
                },
                error: function( xhr ) {
                  $( ".tweets-content" ).html( '<p>There was an error querying twitter</p>' );
                }
              });
            }, function( error ) {
              $( ".tweets-content" ).html( '<p>HTML5 geolocation request...