Some nanomaps Updates December 13th, 2010

I spent some time getting api docs and some other odds and ends done for Nanomaps. ┬áThe front page on github (see README) has an example of the “declarative mapping” mode that this library enables. ┬áBasically, you can choose to just add your map content directly to your HTML and then make a simple JavaScript call to turn the container into a map.

Here’s an example of declaratively constructing a map, using CSS to style the markers and copyright.

    #map {
        width: 640px;
        height: 480px;

    #mapcopy {
        z-index: 50;
        position: absolute;
        right: 2px; bottom: 2px;
        text-align: right;
        font-family: sans-serif;
        font-size: 10px;
        cursor: default;
    #mapcopy a:visited {
        color: #00f;

    .poi {
        z-index: 100;
        margin-left: -10px;
        margin-top: -32px;
        display: none;  /* make not displayed by default to avoid startup flicker */

<div id="mymap">
    <img src="images/red-pushpin.png" latitude="39.780533" longitude="-104.988896" />

    <span>Tiles Courtesy of <a href="" target="_blank">MapQuest</a> <img width="16" height="16" src="" border="0"></span>
    <br />
    <span>&copy; <a href="">OpenStreetMap</a> and contributors, <a href="">CC-BY-SA</a></span>

    var map=new nanomaps.MapSurface(document.getElementById("mymap"));
    map.attach(new nanomaps.TileLayer({
       tileSrc: "http://otile${modulo:1,2,3}${level}/${tileX}/${tileY}.png" }));
This entry was posted on Monday, December 13th, 2010 at 6:43 pm and is filed under geeky, nanomaps. You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.

No Responses

Leave a Reply