Hello World

Basic Leaflet "Street Map" Example

All of the example pages on this developer site use three key ingredients: vector map tiles we’ve created from data provided by OpenStreetMap (OSM); the magnificent Leaflet library and ecosystem which provides a wide variety of plugins to make your maps more interactive and functional; and, our own mapjam.js library to enhance and simplify map implementation with Leaflet even more.


<!DOCTYPE html>
<html>
<head>
	
    <title>MapJam for Developers</title>
    <meta charset="utf-8">
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
    
    <!-- Add MapJam .js/.css and consolidated resources (Leaflet version 0 and MapboxGL libraries) -->
    <script src="https://res.mapjam.com/lib/0.9/mapjam.js"></script>
    <link href="https://res.mapjam.com/lib/0.9/mapjam.css" rel="stylesheet" />
    <script src="https://res.mapjam.com/lib/0.9/mapjam-resources-L0.js"></script>
    <link href="https://res.mapjam.com/lib/0.9/mapjam-resources-L0.css" rel="stylesheet" />
 
    <style type='text/css'>
        /* add css for map */
        #mapDiv {
            position:absolute; top:0; bottom:0; width:100%;
        }
    </style>

</head>

<body>

<!-- add div for map -->
<div id='mapDiv'></div>

<script>
    
    //** add MapJam map
    var map = new MJ.map('mapDiv', {
        centerMap: [51.5079313, -0.1280328],
        zoom: 12,
        accessToken: 'insert-auth-token-here',
        markers:[]
    });

    //** add MapJam Marker
    var myMarker = new MJ.marker(map, {
        latLng: [51.5079313, -0.1280328],
        size: 'xl',  //valid sizes are xs, s, m, l, xl, xxl
    });


    markerBump();

    function markerBump() {
    	setTimeout(function() {
        	setTimeout(function() {
                MJ.updateMarker(myMarker, {'size': 'xl'}); //last move
                markerBump();
            }, 300); //last duration
           MJ.updateMarker(myMarker, {'size': 'xxl'}); //first move
        }, 10000); //first duration
    }

</script>
</body>

</html>