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.

<style>
    #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;
        -webkit-user-select:none;
        -moz-user-select:none;
        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 */
    }
</style>

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

    <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>

<script>
    var map=new nanomaps.MapSurface(document.getElementById("mymap"));
    map.attach(new nanomaps.TileLayer({
       tileSrc: "http://otile${modulo:1,2,3}.mqcdn.com/tiles/1.0.0/osm/${level}/${tileX}/${tileY}.png" }));
</script>
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