Hello World

Custom Street Map Color Scheme

We spent hundreds of hours designing and refining our standard “street map” style to provide the perfect blend of color and contrast.

AND THEN we designed a set of simple JavaScript functions to allow you to fine tune the design, or change the whole thing in dramatic ways if you’d care to.

Our example map below was inspired by the "Midnight" and "Railway" map styles presented by our friends at Yahoo Maps Japan, which provides maps in nearly a dozen beautiful styles. We found the rails of Washington DC to provide a great canvas for our demo, which only requires a few lines of JavaScript to totally change the style of the map.


<!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" />

     <!-- Add jQuery -->
     <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

     <!-- Awesome color manipulation library by GU Yiling at http://justineo.github.io/kolor/ -->
     <script src="https://res.mapjam.com/lib/0.9/kolor.js"></script>

    <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 style= 'height:100%' id='mapDiv'></div>

<script>

    //** add MapJam map
    var map1 = new MJ.map('mapDiv', {
        centerMap: [38.912908, -76.994634], // Washington, DC
        zoom: 14,
        accessToken: 'insert-auth-token-here',
        markers:[]
    });


    //** Create a dark gray map palette with autoPalette                
    var palette = MJ.autoPalette(["#3f3f3f"]); //dk gray
    MJ.updateTilePalette(map1, palette);

    
    //** Paint train tracks with random colors from the kolor.js libary                
    //** Loop the call with a setTimeout delay
    trackFun(map1);
    
    function trackFun(map) {    
        var color1 = kolor.random();
        var color2 = kolor.random();
        MJ.updateTileAttribute(map, [["train_rail_major", "line-color", color1],
                                    ["train_rail_major_hatching", "line-color", color1]]);
        MJ.updateTileAttribute(map, ["train_rail_metro", "line-color", color2]);

        setTimeout(function() {
            trackFun(map);
        }, 2500);
    }

</script>

</body>

</html>