Hello World

Custom Map Color Palette Generator

Problem: You’d like to design a custom map style that matches your brand, your school or team colors, holiday colors, or you just want to have fun. There are tools to do this, but maps are complicated, with dozens of layers of place types, road types, water types, land types, big labels, big labels...all with different shades and line weights to create a pleasing design. Try to design all of this yourself, and you’ll be pulling your hair out.

Solution: Hire a cartographer, OR give MapJam’s autoPalette Javascript function a try. Just feed it one or two colors and, it will shade dozens of map elements on-the-fly with a top secret proprietary formula (actually, you can just look at our code!)

<!DOCTYPE html>

    <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%;



<!-- add div for map -->
<div style= 'height:100%' id='mapDiv'></div>

    //** add MapJam map
    var map1 = new MJ.map('mapDiv', {
        centerMap: [25.772765, -80.193672], // Miami
        zoom: 14,
        accessToken: 'insert-auth-token-here',


    //** Paint train tracks with random colors from the kolor.js libary                

    changeIt(map1, 0);

    function changeIt(map, i) {    
        if (i == 0) {
            palette = MJ.autoPalette(["#76A1dc"]); //lt blue 
            MJ.updateTilePalette(map, palette);
        else if (i == 1) {
            palette = MJ.autoPalette(["#ec74B3"]); //lt pink  
            MJ.updateTilePalette(map, palette);
        else if (i == 2) {
            palette = MJ.autoPalette(["#ec74B3", "#76A1dc"]); //lt pink / lt blue 
            MJ.updateTilePalette(map, palette);
        else if (i == 3) {
            palette = MJ.autoPalette(["#76A1dc", "#ec74B3"]); //lt blue / lt pink
            MJ.updateTilePalette(map, palette);
            MJ.updateTileAttribute(map, ["place_label*", "text-color", "#2A9C00"] ); //name places in green
            MJ.updateTileAttribute(map, ["road_label*", "text-color", "#2A9C00"] ); //road labels in green
            i = 0; //reset for next run

        setTimeout(function() {
            changeIt(map, i);
        }, 5000);