Hello World

Leaflet Map Markers with Font Awesome Icons

MapJam’s Leaflet marker library says “goodbye” to little red, boring, static map markers.

We’ve made it dead simple to color your marker to match your brand, add a Font Awesome icon, add a highlight “glowy” ring (or not), and size it from xl to xxl. Map notes (the little flag) can help your map tell a story. Highlight a special, the best place to park nearby, or the bike or delivery entrance of a building. Notes can be displayed to the left, or right, or only on hover.

With our small library of JavaScript functions you can programatically add, hide, show, delete, and restyle on-the-fly. Highlight search results or, as our example shows, with a little JavaScript you can put on a bit of a show!


<!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 map1 = new MJ.map('mapDiv', {
        centerMap: [37.784753, -122.404701],
        zoom: 16,
        accessToken: 'insert-auth-token-here',
        markers:[]
    });


    //** add MapJam marker with styling, icon, and note
    var myMarker = new MJ.marker(map1, {
        latLng: [37.784232, -122.404711],
        size: 'xl',  //valid sizes are xs, s, m, l, xl, xxl
        color: '#ff0000',
        backgroundColor: '#ffff00',
        locationPointColor: '#00ffff',
        ring:true,
        ringColor:'#00ff00',
        iconName: 'fa-glass',
        iconColor: '#ff00ff',      
        note: {
            text: '500 Bar & Grill',
            side: 'left',
            autoHide: false,
            color: '#0000ff',
            textColor: '#ffffff',
        }
    });

    var messageNum = 0;
    var messages = ['500 Martinis', '$5.00 Burgers', '500 Smiles', '500 Bar & Grill'];
    
    setTimeout(makeSmall, 5000)

    function makeSmall() {
        MJ.updateMarker(myMarker, {'size':'xs'});
        setTimeout(changeText, 500)
    }

    function changeText() {
        if (messageNum == 1 || messageNum == 3)
            var noteSide = 'left';
        else
            var noteSide = 'right';

        MJ.updateMarker(myMarker, {note: { text: messages[messageNum], side: noteSide }});

        MJ.updateMarker(myMarker, {'size':'xl'});
        if (++messageNum == 4)
            messageNum = 0

        setTimeout(makeSmall, 5000)

    }
    
</script>
</body>

</html>