Step 1. Log into admin and click on LayerSliderWP > All Sliders
Step 2. Click on the map with an ID of 2, titled ‘Green Map’
Step 3. You will see 3 tabs, labelled ‘Slider Settings’, ‘Slides’ and ‘Event Callbacks’. You’ll be working in the middle tab labelled ‘Slides’
If you scroll down you will see the map, which will look nothing like it does on the homepage. Don’t worry, it’s supposed to look like this.
Below the map you will see the layers view. This is what you’ll be working with the most.
[caption id="" align="alignnone" width="786"]
If you wish to add a new layer, click on ‘Add new layer’ at the bottom of the layers view.
If you wish to delete a layer, click on the red “X” to the far right, next to attributes.
Anatomy of the Layers
You will be working with three types of layers: Map, Location Marker and Tooltips. There will be a location marker layer for each story you wish to appear on the map. There will always be only one tooltips layer. Let’s take a look at the anatomy of each one and how they relate/interact with each other.
Map Layer In the image above (layers view), layer 1 is labelled ‘Map’, and it contains the background image. This layer is locked and should not be edited.
Location Marker Layers Layers 2 through 11 contain the map marker and links to each story. Each location marker also has a unique class that will be referenced by the Tooltips layer.
Tooltips Layer The tooltips layer contains the rollover assets for each marker layer.
Let’s look at an example of a Location Marker:
Within the layer’s content attribute you’ll see some simple html markup. Notice that this is just a simple image link, using the map marker as the source. The two important items here are the link class (data-tooltip) and the href url. The data-tooltip class is a unique identifier that is referenced in the tooltip layer. The href is the link to the actual story. When you add a new location to the map, it is important that you update both of these.
Once you have the layer created, you may drag it around on the map so that the marker appears in the correct location. Since there are so many markers on the map, it can get confusing. I suggest using the layer highlight tool:
Click on this and that layer will be highlighted on the map:
Once you have all of your layers created and placed, you’ll need to reference them in the Tooltips layer. The tooltips layer is labelled ‘stickytooltips’ in the layers view. Click on that layer and take a look at the content attributes. This is a lot of html, but it’s very basic. It will need to be updated so that the correct image and text appears for each marker on the map. Let’s break down the html:
The first two div’s are the containers and should not be changed:
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
{content goes here}
</div>
</div>
{content goes here} will be replaced by your rollover content, each contained in it’s own div who’s ID matches the data-tooltip class in it’s related Location Marker Layer. I have provided the Haltwhistle example to match the Haltwhistle Location Marker Layer above. I have also highlighted the information you will need to edit.
For example:
<div id="Haltwhistle" class="atip" style="width:300px">
<h4>Haltwhistle: Still the Center of Britain</h4>
<a href="http://britheritage.wpengine.com/haltwhistle-still-center-britain/"><img style="width:300px" src="/wp-content/uploads/2015/01/Haltwhistle_img21-773x516.jpg" /></a><br />
<p>In the heart of Roman Wall Country, the Northumbrian market town bristles with pride</p>
</div>
The div id, highlighted in red, should match the data-tooltip class from the link in the Haltwhistle Location Marker Layer.
The title, highlighted in orange, should match the title of the article.
The link, highlighted in magenta, is the link to the article.
The featured image, highlighted in green, is the link to the featured image of the article.
The excerpt, highlighted in blue, is what appears below the image when you roll over the marker.
There will be one div for each marker, and each should match it’s relative marker data-tooltip class or the rollovers will not work.
