HTML Guidelines – Dynamic Maps

Below are some best practices to follow when you are creating a custom HTML template for your Direct Mail campaign, together with ‘dynamic maps’ to easily generate highly personalised and dynamic content. Following these HTML Guidelines – Dynamic Maps will help you to get started.

HTML Guidelines – Dynamic Maps – Postcard A5 Template

HTML Guidelines - Dynamic Maps - Example Template Postcard A5

  /* This HTML code snippet only highlights the part of the dynamic map and is not a full version of the postcard displayed above. */

<link href=“https://fonts.googleapis.com/css?family=Bitter:400,400i,700” rel=“stylesheet”>

<style>

.dynamic-map {
  top: 70mm;
  left: 8mm;
  width: 112mm;
  height: 66mm;
  z-index: -1;
  position: absolute;
}

.credits {
  top: 131mm;
  left: 72mm;
  padding: 2px 0px 0px 0px;
  width: 45mm;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
  text-align: center;
  position: absolute;
}

</style>

<div class=“dynamic-map”>
  {{routeMap longitude=52.3162884 latitude=4.9552887 width=424 height=250 routeColor=”ffaa22″}}
</div>

<div class=“credits”>
  <span>© OpenStreetMap.org Contributors<span>
</div>

Geolocation Module

The first step to create dynamic maps is to activate the Geolocation Module. This module enriches your user data with the longitude and latitude information of all the valid recipient addresses. With the geolocation details we create a personalised map that shows the route from the home address of the recipient towards the location of your retail shop or local office. See our Pricing Plans for more information about the Geolocation Module.

Using Dynamic Maps

The next step is to include dynamic maps into your HTML templates by using the pre-defined merge variable called {{routeMap}}. Inside the double curly braces you can include extra information, such as longitude, latitude, width, height and routeColor, to enrich your dynamic map.

The longitude and the latitude that you enter inside this merge variable represent the fixed point on the map. This can be for example the location of your retail shop or local office.

The width and the height that you define inside this merge variable represent the dimensions of the digital map in pixels. Please be aware that the values you enter here is without the px-metric.
Because the standard resolution of a digital maps is not high enough to ensure a high printing quality, you need to create larger sized maps. For Example: to create a 112 x 66mm visual of the map for the A5 postcard, displayed above with a resolution of 272 dpi, the image should have a dimension of 424 x 250 pixels.

The routeColor can be used to adjust the line color between the fixed point on the map and the address of the recipient of the postcard. Please be aware that the value you enter here is without the #-symbol.

Copyrights

Please include the following line of copy in your design: “© OpenStreetMap.org Contributors”, as shown in the HTML template example above, to give credits to the OpenStreetMap community for the use of their services.