Full screen map

This sample illustrates the simplest approach to showing a map with the following characteristics:

• Fills the entire screen
• Correctly sets the viewport on mobile devices
• Adds two zoom buttons to perform animated zoom in/out
• Locates HTML attribution within the map bounds

There are a number of boilerplate parts to this demo that have nothing to do with nanomaps. Many structures can work and you can translate what is being done to your favorite JavaScript framework.

Try It Live

Header

Here we set up the HTML header with viewport information and style.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<style>
html, body {
	height: 100%;	
}
body {
	overflow: hidden;
	margin: 0;
	padding: 0;
}
#mapContainer {
	width: 100%;
	height: 100%;
}

#map {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Map copyright */
#mapcopy {
	z-index: 50;
	position: absolute;
	right: 2px; bottom: 2px;
	text-align: right;
	white-space: nobreak;
	font-family: sans-serif;
	font-size: 10px;
	line-height: 12px;
	-webkit-user-select:none;
	-moz-user-select:none;
	cursor: default;
}
#mapcopy a:visited {
	color: #00f;
}

/* Zoom controls */
#zoomControl {
	position: absolute;
	top: 36px;
	left: 5px;
}

#zoomIn {
	background-image: url(zoomin.png);
	width: 40px;
	height: 40px;
}

#zoomOut {
	background-image: url(zoomout.png);
	width: 40px;
	height: 40px;
}

HTML Body

We use a simple layout mechanism for the screen. Both the mapContainer and map elements fill the entire viewport. We place the map copyright within the map itself. Although we don't use it in this example, putting it in this position ensures that we can layer markers and other content over the copyright if we choose.

We also add two simple zoom control buttons to the outer mapContainer.

<div id="mapContainer">
	<div id="map">
		<!-- Map copyright -->
		<div id="mapcopy" onselectstart="return false">
			<span>Tiles Courtesy of <a href="http://open.mapquest.co.uk/" target="_blank">MapQuest</a> <img width="16" height="16" src="http://developer.mapquest.com/content/osm/mq_logo.png" border="0"></span>
			<br />
			<span>&copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a></span>
		</div>
	</div>
	
	<!-- Zoom Controls -->
	<div id="zoomControl">
		<div id="zoomIn"></div>
		<div id="zoomOut"></div>
	</div>		
</div>

Script

The necessary script is very similar to what we've done previously in the quick start. The bits that are added are:

• Hooking the window resize event and calling map.setSize() when it fires
• Hooking the zoom button clicks and performing an animated transition between zoom levels

Script code:

var map=new nanomaps.MapSurface(document.getElementById('map'));
map.setLocation({ lat: 47.604317, lng: -122.329773 });
map.setZoom(13);

var tileLayer=new nanomaps.TileLayer({
	tileSrc: 'http://otile${modulo:1,2,3}.mqcdn.com/tiles/1.0.0/osm/${level}/${tileX}/${tileY}.png'
});
map.attach(tileLayer);

// Reset map size on window resize
window.addEventListener('resize', function() {
	map.setSize();
}, false);

// Perform animated zoom in on button click
document.getElementById('zoomIn').addEventListener('click', function() {
	map.begin();		// Capture Animation Sequence
	map.zoomIn();
	map.commit(true);	// Start animation
}, false);

// Perform animated zoom out on button click
document.getElementById('zoomOut').addEventListener('click', function() {
	map.begin();		// Capture Animation Sequence
	map.zoomOut();
	map.commit(true);	// Start animation
}, false);

Animation

As seen previously, this sample makes use of the animation features. Animation in nanomaps is really simple. You bracket any calls that change the map state between MapSurface.begin() and one of MapSurface.commit() or MapSurface.rollback(). If you pass true or an animation parameters object to commit, it will animate the changes you made. See the api docs for MapSurface.commit() for more info.