Skip to content

Home

Jump to bottom Edit New page
stellaeof edited this page Jul 12, 2011 · 15 revisions

Introduction

Hello. Welcome to the Nanomaps JavaScript library homepage. There are a number of open source JavaScript tile mapping libraries available and many of them overlap in terms of key functionality. Nanomaps-Js is different from most, though, in its design. Specifically, it was designed with the following goals in mind:

  • Focused. You almost certainly have other libraries loaded in your page for doing DOM manipulation, both mundane and advanced. Nanomaps encourages you to use these other libraries to manage anything you add to a map. It manages the work of making sure that those other things are positioned properly, but its up to you to take things from there.
  • Mobile First. Nanomaps was developed first for mobile devices. It works out of the box with all of the expected touch gestures on any iOS device, the Android web browse, Opera, etc. Click gestures are also fully supported on modern desktop browsers (Firefox, Chrome, Safari). It is on the roadmap to provide a compatibility layer that will enable minimal functionality on ancient versions of Internet Explorer (<9).
  • Style Free. You bring your own CSS and content from start to finish. There are a couple of simple DOM structures that the library uses which you can hang CSS off of to style, but mostly its all you.
  • Small. By being focused and leaving out the hand-holding that comes with other toolkits, Nanomaps is small. Gzipped over the wire, it is around 10KB, making it certainly one of the smallest things you will have on your page.
  • Retargetable. At its core, Nanomaps provides a geo-referencing and event management engine for all of the things you put on a map. It also provides a TileLayer class that you can attach. It is the intent that other types of base maps (ie. vector maps ala Polymaps) can be added later while still allowing you to work with Nanomaps at the API level for manipulating your content.

Download

You can clone the repository and run build.sh to get your own copy, or you can download a specific version from one of the links below. Note that for each version, there is a debug and prod build. Debug builds are completely uncompressed. Prod builds have been minimized.

Quick Start

Assuming you have the nanomaps.bundle.all.js loaded onto your page and want to display a free OSM map, the following is what you need:

<style>
#map {
	width: 640px;
	height: 480px;
}
</style>

<div id="map">
</div>

<div>
	&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>
</div>

<script>
	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);
</script>

Try It Live

Things to note:

  • Sizing the map container works best if done by CSS applied to the element vs inline styles
  • Alternatively, you can call map.setSize(width,height). Calling map.setSize() with no arguments causes the map to reset its internal state to occupy the natural size of its container. You must call this whenever changing the size of the container via some other means
  • Setting the location and zoom prior to attaching a TileLayer is a good way to make sure that unneeded image loads are not made
  • Respect copyright. Displaying most type of map data requires proper attribution. Attribution is displayed outside of the map bounds for this simple example, but it is also possible to put it inside of the map and style it with CSS.

All Samples

(These samples are currently being built out)

Add a custom footer
Add a custom sidebar
Clone this wiki locally