Embedding on your site

You can embed a the UNL Map on your own site and center it on a specific building, using an iframe. The iframe src attribute should be in the format of https://maps.unl.edu/embed/{{BUILDING-CODE}}. To find a building code, please visit the map directory.

Example

The iframe can support just about and size (width, height), so you should determine what size works best with your page design. The web framework provides some utility classes to maintain aspect ratios for responsive iframe sizes.

Bus Requests

(Warning this is getting into more advanced javascript)

Bus data requests happen every second and can be taxing on the site the embed is on. You can change the initial bus loop interval by adding a url param of bus_time with the interval value in milliseconds. The minimum time is 1000 milliseconds.
https://maps.unl.edu/embed/{{BUILDING-CODE}}?bus_time=5000

For even finer control you can halt/start the bus polling loop and adjust the timing of the bus loop interval from the parent page. Check out the example code below to see how we use javascript's postMessage to send data and controls between the iframe and the parent window.

<div class="dcf-ratio dcf-ratio-16x9">
  <iframe id="maps_embed" class="dcf-ratio-child dcf-obj-fit-cover" title="UNL Map" src="https://local-maps.unl.edu/embed/NU?bus_time=2000"></iframe>
</div>
<script defer>
  // Selecting the bus iframe
  const maps_embed = document.getElementById('maps_embed');

  // Wait for the ready message from maps
  window.addEventListener('message', (event) => {
    if ('data' in event && event['data'] === 'maps_ready') {

      // Dynamically adjust the bus loop interval time in milliseconds
      // Minimum time you can set is 1000 milliseconds
      maps_embed.contentWindow.postMessage({type: 'bus_time', time: 4000}, '*');

      // Halt the loop, so no more requests are going through
      maps_embed.contentWindow.postMessage({type: 'bus_halt'}, '*');

      // Restart the bus loop
      maps_embed.contentWindow.postMessage({type: 'bus_go'}, '*');
    }
  });
</script>