Adaptive Map - Mapbox edition by wboykinm

script.js

$(document).ready(function(){
  buildMap();
});

var sw = document.body.clientWidth,
    bp = 550,
    $map = $('.map');
var static = "http://api.tiles.mapbox.com/v3/landplanner.map-1sdx5y5e/pin-l-park2+343055(-89.93957,13.903408)/-88.79150,13.7421,8/640x320.png";
var embed = "<iframe width='980' height='650' src='http://a.tiles.mapbox.com/v3/landplanner.map-1sdx5y5e.html#9/14.031578144890714/-88.89312744140625'></iframe>";

function buildMap() {
  if(sw>bp) { //If Large Screen
      if($('.map-container').length < 1) { //If map doesn't already exist
        buildEmbed();
      }
  } else {
      if($('.static-img').length < 1) { //If static image doesn't exist
        buildStatic();
      }
  }
};

function buildEmbed() { //Build iframe view
    $('<div class="map-container"/>').html(embed).prependTo($map);
};
  
function buildStatic() { //Build static map
   var mapLink = $('.map-link').attr('href'),
       $img = $('<img class="static-img" />').attr('src',static);
   $('<a/>').attr('href',mapLink).html($img).prependTo($map); 
}

$(window).resize(function() {
  sw = document.body.clientWidth;
  buildMap();
});

index.html

<html>
<head>

<link rel="stylesheet" href="style.css" />

</head>
<body>

<!--Pattern HTML-->
  <div id="pattern" class="pattern">
    <div class="map">
      <a href="//a.tiles.mapbox.com/v3/landplanner.map-1sdx5y5e.html#9/14.031578144890714/-88.89312744140625" class="btn map-link">View Map</a>
    </div>
  </div>
  <!--End Pattern HTML-->
  
  <div class="container">  
		<section class="pattern-description">
			<h1>Adaptive Map</h1>
      <p>A map experience that defaults to a text link to Mapbox Maps, loads in a static map image for small screens and an iframe map for larger screens.</p>
      <p><a href=
        "//bradfrostweb.com/blog/post/maps-and-the-mobile-web/">Read more about Adaptive Maps</a></p>
		</section>
		<footer role="contentinfo">   
			<div>
				<nav id="menu">
					<a href="//bradfrost.github.com/this-is-responsive/patterns.html">&larr;More Responsive Patterns</a>
				</nav>
			</div>
		</footer>
	</div>
	
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
</body>
</html>

style.css

.btn {
  display: inline-block;
  padding: 0.5em 1em;
  background: #808080;
  color: #fff;
  margin: 1em;
  &:hover, &:focus {
     color: #fff;
     background: #333;
  }
}

.static-img {
  display: block; 
}

iframe {
   max-width: 100%; 
}
/* From http://codepen.io/chriscoyier/full/kycDp */
.map-container {
  width: 100%;
  margin: 0 auto;
  height: 0;
  padding-top: 38%;
  position: relative;
  display: none; /* Hide for small screens */
  iframe {
    width: 100%;
    height: 100%; /* had to specify height/width */
    position: absolute;
    top: 0; 
    right: 0;
    left: 0; 
    bottom: 0;   
  }
}

/* Medium Screens */
@media all and (min-width: 34.375em) {
  .map-container {
    display: block;
  } 
  .static-img {
    display: none; 
  }
}