Embedding Roadmaps & POST Views
From Career Pathways Tutorial
Contents |
Introduction
There are several reasons you would want to embed roadmaps in your organization's web pages rather than simply linking to them.
- Embedded roadmaps keep your visitors on your site and maintain visual coherence with your branding
- Visitors won't feel like they've come to a dead end, and will always have a way to return to your home page
- You can track visitors using your standard analytics software, since visitors will still be visiting pages on your website
Basic Embedding
The standard way to embed roadmaps in your webpages is by using the "embed code" provided in a roadmap's "Drawing Properties" page. This code looks something like this:
<div id="pathwaysContainer" style="width:100%; height:600px"></div> <script type="text/javascript" src="http://oregon.ctepathways.org/c/published/386/embed.js"></script>
This gives you the flexibility to easily adjust the width and height of the roadmap on your web page. However, to avoid scroll bars appearing on the page, you should adjust the width and height for each drawing.
Basic Embedding without Javascript
If you don't want to use a <script> tag to embed the drawings, you can alternatively use an iframe. This iframe code is actually written by the javascript method above.
<iframe width="800" height="600" src="http://oregon.ctepathways.org/c/published/386/embed.html" frameborder="0" scrolling="auto"></iframe>
However, with this method you lose the URL-tracking functionality of the system. The "Basic Embedding" code includes a snippet of Javascript which reports back to the server the URL of the page embedding the drawing. If you choose to embed drawings by using an iframe, we request that you also include this bit of javascript which will report the page URLs back to our system. Be sure to insert the drawing id in the appropriate place.
<script type="text/javascript">
var s=document.createElement('script');
s.setAttribute('src','http://oregon.ctepathways.org/c/log/INSERT_DRAWING_ID?url='+window.location);
document.getElementsByTagName('body')[0].appendChild(s);
</script>
Advanced Embedding
If you want to get away from having to specify the width/height of the container for each drawing, there is a way to dynamically resize the iframe after the content has loaded.
In order for this to work, you need to be able to access an element inside the iframe from your containing document. Cross-site restrictions prevent this from being possible, since your containing document is on a different domain than the contents of the iframe. You need to get the contents of the iframe into a document on your domain. This is done via a proxy script that you will need to host on your domain. Note the change in the URL of the iframe:
<iframe id="pathwaysFrame" width="800" height="600" src="proxy.php?code=lcc_accounting" frameborder="0" scrolling="auto"></iframe>
You'll also need jQuery for this to work, so go ahead and download that and include it in your <head>.
Include this script somewhere on the page. It will wait until the iframe has loaded, then go look inside it to find the size of the canvas and resize the iframe appropriately.
$(document).ready(function() {
$("#mapframe").load( function(){
// access frame content (must be on same domain)
var iContent = $(this.contentDocument);
// resize the iframe to match the canvas' dimensions
$("#mapframe").height(iContent.find("canvas").height());
$("#mapframe").width(iContent.find("canvas").width());
});
});
The proxy script can be written in any language. All it needs to do is echo the contents of the normal .html URL on oregon.ctepathways.org. A sample script in PHP follows:
<?php
echo file_get_contents("http://oregon.ctepathways.org/c/published/" . $_GET['code'] . ".html");
?>
Of course, you would want to include some sort of sanity-checking on the GET variable to ensure this script couldn't be used to include arbitrary files on your system or other domains. If your PHP settings restrict you from using file_get_contents to read a remote file, you will need to use CURL or something similar.
Dynamic Embedding
If you use a CMS which does not allow users to include <script> tags or iframes, then you will need a different way to embed drawings.
PCC came up with a dynamic wrapper for their drawings which matches their site's colors and navigation. You can see an example here. They are also using the Advanced Embedding technique to dynamically resize the container. People wanting to link to a roadmap only have to put the drawing code in the url, and the page automatically points the iframe to the new content.
The script to something like this might look like the following:
<?php
include('header.htm');
<iframe id="pathwaysFrame" width="800" height="600" src="proxy.php?code=<?= $_GET['code'] ?>" frameborder="0" scrolling="auto"></iframe>
include('footer.htm');
?>
Link Tracking
We keep a list of all published roadmaps in the system, which is used in a couple places:
- The front-end website (link TBD) acts as a way for visitors to find a school based on the program they want to study.
- OLMIS provides detailed reports on occupations, and they (will) include links to your roadmaps on an occupational report page. This allows us to provide links to your web pages when we report programs to the OLMIS database, so that visitors end up on your website.
If we have the URL of the page on your website that is embedding a roadmap, we can use this link instead of the default oregon.ctepathways.org URL.
Page Tools
Personal tools
