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>
- Printer-friendly version
- Log in to post comments