$49

Smart Map

Documentation  •  Changelog

Documentation

Styling a Map

It's common for people to use a site like Snazzy Maps to generate a JSON styling for their map. Once you've got a JSON snippet from there, you'll want to apply those styles to your map.

As of Smart Map 2.4.1 it's incredibly easy to apply JS styles to your map.

var styles = [...];
smartMap.styleMap('smartmap-mapcanvas-1', styles);

You'll want to delay that JS code until the page has fully loaded.

// Delay with jQuery
$(function () {
    var styles = [...];
    smartMap.styleMap('smartmap-mapcanvas-1', styles);
});

You may also be trying to load this through a Twig template (possibly the same Twig template that's loading your map). In that case, simply wrap your JS with an `includejs` tag pair.

{# Load via Twig #}
{% includejs %}

    // Delay with jQuery
    $(function () {
        var styles = [...];
        smartMap.styleMap('smartmap-mapcanvas-1', styles);
    });

{% endincludejs %}