Tile5 Creating Markers Demo

by DamonOehlman

HTML

<script src="https://raw.github.com/DamonOehlman/tile5/master/dist/tile5.cloudmade.js"></script>
<div id="mapContainer"></div>

CSS

html, body, #mapContainer {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.t5-copyright {
    background: rgba(255, 255, 255, 0.7);
    color: #333;
    padding: 4px 0 4px 8px;
    font: 0.7em Arial;
}

.t5-copyright a {
    color: #555;
}

JavaScript

map = new T5.Map('mapContainer');

map.layer('tiles', 'tile', {
    generator: 'osm.cloudmade',
    // demo api key, register for an API key at http://dev.cloudmade.com/
    apikey: '7960daaf55f84bfdb166014d0b9f8d41'
});

map.zoom(8).center('-27.4695 153.0201');

// on tap events, create markers
map.bind('tap', function(evt, absXY, relXY, projXY, hits) {
    var marker = map.layer('markers').create('marker', {
        draggable: true,
        xy: projXY
    });
    
    // animate the drawable
    marker.translate(0, -500).translate(0, 0, {
        easing: 'bounce.out',
        duration: 1000
    }, true);
});