wboykinm/index.html

## index.html
<html>
<head>

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

</head>
<body>

<!--Pattern HTML-->
  <div id="pattern" class="pattern">
    <div class="map">
      <a href="http://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=
        "http://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="http://bradfrost.github.com/this-is-responsive/patterns.html">&larr;More Responsive Patterns</a>
				</nav>
			</div>
		</footer>
	</div>

  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
</body>
</html>

## 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();
});


## 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;
  }
}
	<html>
	<head>

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

	</head>
	<body>

	<!--Pattern HTML-->
	<div id="pattern" class="pattern">
	<div class="map">
	<a href="http://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=
	"http://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="http://bradfrost.github.com/this-is-responsive/patterns.html">←More Responsive Patterns</a>
	</nav>
	</div>
	</footer>
	</div>

	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="script.js"></script>
	</body>
	</html>
	$(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();
	});
	.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;
	}
	}