Embedding Roadmaps & POST Views
From Career Pathways Tutorial
Due to browser compatibility issues, please use the latest version of Google Chrome or FireFox when using the Career Pathways Roadmap Web Tool.
Contents |
Introduction
There are several reasons you would want to embed Roadmap Drawings 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 the 
Drawing Properties page for Roadmap Drawings or POST Views. 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.
NOTE: 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>
With this method you lose the URL-tracking functionality of the system. The code provided in the Basic Embedding instructions 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. Please be sure to insert the unique drawing id (e.g. 386 or 850) in the appropriate place.
<script type="text/javascript">
var s=document.createElement('script');
s.setAttribute('src','http://oregon.ctepathways.org/c/log/pathways/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 "src" URL of the iframe:
<iframe id="pathwaysFrame" width="800" height="600" src="proxy.php?id=386" frameborder="0" scrolling="auto"></iframe>
You will also need jQuery for this to work, so go ahead and download this and include it in your <head> tag.
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
$id = intval($_GET['id']); // ensure only numbers are passed in the query string
echo file_get_contents("http://oregon.ctepathways.org/c/published/" . $id . "/view.html");
?>
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 (Content Management System) which does not allow users to include <script> or <iframe> tags, 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 Drawing or POST View 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');
?>
<script type="text/javascript">
var s=document.createElement('script');
s.setAttribute('src','http://oregon.ctepathways.org/c/log/pathways/<?=$_GET['id']?>?url='+window.location);
document.getElementsByTagName('body')[0].appendChild(s);
</script>
<iframe id="pathwaysFrame" width="800" height="600" src="proxy.php?id=<?= $_GET['id'] ?>" frameborder="0" scrolling="auto"></iframe>
<?php
include('footer.htm');
?>
Link Tracking
We keep a list of all published Roadmap Drawings and POST Views in the system, which is used in a couple places:
- The front-end, public website (currently in development) provides a way for visitors (e.g. job seekers) to search for a community college that offers an occupation/program they want to study.
- OLMIS provides detailed reports on occupations, and they (will) include links to your published Roadmap Drawings on an occupational report page [sample page provided]. 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 web page on your website that is embedding a roadmap drawing, we can use this link instead of the default link to that Roadmap or POST View on our oregon.ctepathways.org server.
Page Tools
Personal tools
