Close
Main Menu

Prestonwood Christian Academy - Plano Campus
6801 W. Park Blvd.
Plano, Texas 75093
972.820.5300

Google Maps: 6801 W. Park Blvd. • Plano, Texas 75093

Legend

Full Steps (A.D.D. version)

  • Create a campus map page, and give that page a custom class of campus-map.
    • In that page, put a content element with your image in it. Give that .fsElement a class of map-container
    • Under it, make a navigation element with the class map-key. Set it to start on your campus map page, and end 1 level below starting level
  • Go into media manager, make all your slideshows (aka get all the content in there)
  • Under your "Campus Map" page, make child pages.
    • Put a media element on that page with class map-detail. Check the "custom" player option. Link up the slideshow in media manager
  • Go to your Sass and update anything you need to (minimum will be to set the pins locations on the map).
    • PRO TIP - There are two styles you can choose from in your Sass;

Setup

This Campus Map utilizes children pages under it. All pages that are children of this campus map page will be a location marker on the campus map, along with being listed in the Legend.

Image

The image has been saved without the markers, so it's blank. The markers are positioned with CSS from the bottom left corner of the image with percentage values. This allows the markers to stay positioned as the image changes sizes for different window sizes and devices.

The image is placed in the Content Editor.

  • Content Editor
    • <img width="1400" src="/uploaded/themes/default/images/campus-map-overlay.png">
              
  • Design
    • Custom Class: map-container

Key

The HTML output from the Navigation Element is manipulated with JavaScript. The locations are cloned from the Navigation Element then placed in the map-container for the markers.

  • General Settings
    • Starts 1 Levels Below Selected Page
    • Campus Map Select Page/Branch
    • Ends 1 Level below Starting Level
  • Design
    • Custom Class: map-key

Map Locations

Those locations on the map, along with the legend, are going to be called in via the navigation element described above. To set up the slideshow (when users click a point on the map), make a child page in the campus map page (the name will be what is in the popup on hover).

Once the page is created, put a media element on the page, with custom class map-detail. Check the box to make it a custom player. Then, go in and select the slideshow (note, if you haven't put content in the media manager for the campus maps, go do it now, since each page you make will need a slideshow to point to).

Finally, go into the _campus-map.scss partial and the first pins location will already be set (obviously it can be changed)

&.pin-1 { left:46%; bottom:21%;}

Define each pin manually there.