# Modest Maps JS

zoom in | zoom out
pan left | pan right | pan down | pan up

The above div is a map initialized like so:

    // "import" the namespace
    var MM = com.modestmaps;

    var provider = new MM.Layer(new MM.BlueMarbleProvider());

    map = new MM.Map('map', provider, new MM.Point(1024,512))

    map.setCenterZoom(new MM.Location(20.0, 0), 2);

    window.jsonFlickrApi = function(rsp) {
        var photos = rsp.photos.photo;
        for (var i = 0; i < photos.length; i++) {
            var p = photos[i];
            var url = [ 'http://farm', p.farm, '.static.flickr.com/', p.server, '/', p.id, '_', p.secret, '_s.jpg' ].join('');
            var html = "<" + "img src='" + url + "'" + ">"; // weird for 'eval', sorry
            var location = new MM.Location(p.latitude, p.longitude);
            var dimensions = new MM.Point(75, 75);
            var f = new MM.Follower(map, location, html, dimensions);
        }
    }

    var script = document.createElement('script');
    script.src = 'http://api.flickr.com/services/rest/?'+
                   'method=flickr.photos.search&'+
                   'api_key=a96cbef093a8c0280d3aed4e0c004d4c&'+
                   'tags=clouds&'+
                   'extras=geo&'+
                   'has_geo=1&'+
                   'format=json';
    document.getElementsByTagName('head')[0].appendChild(script);

Hands up who wants overlays?