AMP Visualizer Branding

As you begin to utilize AMP, you will often need to reinforce your brand, via custom logos, watermarks, and other elements. Often times the brand may need to be used in enhanced features such as map animations. This is where the AMP visualizer can assist, as it provides support for stand-alone maps, animation and a variety of branding options.

Basic Visualizer Usage

The AMP visualizer can be used to display a single map, a map animation or a combination, of a single map that animates when clicked. The example below displays a simple dark base map, with radar and city names, with no additional branding/overlays defined:

var animation = new AerisMaps.Visualizer("#map", {
    loc: "minneapolis,mn",
    keys: keys,
    map: {
        zoom: 5,
        size: {
            width: 500,
            height: 300
        },
        layers: ["flat-dk", "radar", "admin-cities-dk"]
    },
    animation: {
        from: -2 * 3600,
        duration: 2
    }
});

Click map to play animation

 

Adding Branding and Labels

The AMP Visualizer supports several “overlay” configuration options, to add title bars, watermarks and Date/Times to the maps. The chart below provides a list of the available options:

Option Default Description
overlays.title null (string) The title to display over the map; use CSS to style the title DOM elements as needed
overlays.timestamp.format MM/dd/yyyy hh:mm tt (string)Time and date format for the map timeline during playback (limited formatting options currently supported)
overlays.timestamp.continuous true (boolean) Whether or not the timestamp should update continuously during playback regardless of frame intervals; if false, then the timestamp will only update when the animation's frame changes
overlays.branding.img null (string) An image URL to display on the map, such as a company logo.
overlays.branding.html null (string) A HTML string to display for the map branding, such as a company name or logo. Offers more customization options than overlays.branding.img.

This configuration is an example of simple radar map, with a title bar, watermark image and timestamp:

var animation = new AerisMaps.Visualizer("#map", {
    loc: "minneapolis,mn",
    keys: keys,
    map: {
        zoom: 5,
        size: {
            width: 500,
            height: 300
        },
        layers: ["flat-dk", "radar", "admin-cities-dk"]
    },
    animation: {
        from: -2 * 3600,
        duration: 2
    },
    overlays: {
        title: "Radar",
        branding: {
            img: "https://www.aerisweather.com/img/logos/watermark-small.png"
        }
    }
});

Click map to play animation

 

Customizing the Labels with CSS

Adding the title bar and timestamps are simple with the AMP Visualizer, but the default styling may not meet your brand requirements. Fortunately, with some basic CSS, you can customize both the title bar and the timestamp styling. Below are the default styles, which can be overridden:

<style type="text/css">
/* override default timestamp styles */
.amp-map-timestamp {
   position: absolute;
   bottom: 5px;
   left: 7px;
   font-size: 16px;
   color: #222;}

/* override the default title bar styles */
.amp-map-title {
   position: absolute;
   top: 10px;
   left: 10px;
   width: 300px;
   height: 34px;
   font-size: 18px;
   background: rgba(255,255,255,0.8);
   color: #222;
   line-height: 36px;
   padding: 0 10px;
   border-bottom: 3px solid #0097e2;
}</style>

A full example of a simple radar map, but with the title bar and time stamp styling customized:

<script src="//cdn.aerisapi.com/js/aerismaps-visualizer.min.js"></script>
<style type="text/css">.amp-map .amp-map-timestamp {
	color: #000;
	background-color: rgba(211,211,211,0.9)
}
.amp-map .amp-map-title {
	border-bottom: 5px solid red;
}
</style>

<div id="”map”"> </div>
<script>
var animation = new AerisMaps.Visualizer("#map", {
	loc: "minneapolis,mn",
	keys: keys,
	map: {
		zoom: 5,
		size: {
			width: 500,
			height: 300
		},
		layers: ["flat-dk","radar","admin-cities-dk"]
	},
	animation: {
		from: -2 * 3600,
		duration: 2
	},
    overlays: {
        title: "Radar",
        branding: {
            img: "https://www.aerisweather.com/img/logos/watermark-small.png"
        }
    }
});
</script> 

Click map to play animation