Skip to content

Viewer Configuration

Customize the appearance and behavior of your embedded MapBoot viewer.

Basic Configuration

The minimum required configuration:

JavaScript
window.mapboot.init({
  target: '#mapboot',      // Container selector
  mapid: 'your-map-id',    // Your map ID
  unit: 'm'                // 'm' or 'ft'
});

Configuration Options Reference

Required Parameters

Parameter Type Description Example
target string CSS selector for container element '#mapboot'
mapid string Your map ID from the editor '0a74e042'
unit string Measurement unit: 'm' or 'ft' 'm'

Optional Parameters

(Check with MapBoot support for available customization options)

Styling the Container

Control the map size and appearance with CSS:

Fixed Size

HTML
<div id="mapboot" style="width: 1200px; height: 800px;"></div>

Full Width, Fixed Height

HTML
<div id="mapboot" style="width: 100%; height: 600px;"></div>

Responsive (16:9 Aspect Ratio)

HTML
<div class="map-wrapper">
  <div id="mapboot"></div>
</div>

<style>
.map-wrapper {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
}

#mapboot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

Branding Customization

If custom branding features are enabled for your account:

  • Owner field in map properties will display your organization name
  • Logo customization may be available (contact support)

To set owner information: 1. Open map in Editor 2. Select Map (top of tree) 3. In Properties, fill in Owner field 4. Save and publish

Mobile Optimization

Ensure your embedded map works well on mobile devices:

Viewport Meta Tag

Add to your page <head>:

HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Touch-Friendly Controls

The viewer automatically provides touch controls on mobile: - Pan: Drag with one finger - Zoom: Pinch gesture - Rotate: Two-finger rotate gesture

Responsive Container

CSS
#mapboot {
  width: 100%;
  height: 100vh; /* Full viewport height on mobile */
  min-height: 400px; /* Minimum height for usability */
}

@media (min-width: 768px) {
  #mapboot {
    height: 600px; /* Fixed height on larger screens */
  }
}

Performance Optimization

Lazy Loading

For pages with multiple maps or heavy content, consider lazy loading:

HTML
<div id="mapboot" data-map-id="your-map-id"></div>

<script>
// Load map when container is in viewport
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const container = entry.target;
      const mapId = container.dataset.mapId;

      // Load MapBoot script
      const script = document.createElement('script');
      script.src = 'https://cdn.mapboot.com/viewer/latest/mapboot.min.js';
      script.onload = () => {
        window.mapboot.init({
          target: `#${container.id}`,
          mapid: mapId,
          unit: 'm'
        });
      };
      document.body.appendChild(script);

      observer.unobserve(container);
    }
  });
});

observer.observe(document.getElementById('mapboot'));
</script>

Advanced Integration

Deep Linking to Locations

(Feature availability may vary - check with support)

Potential URL patterns for linking directly to locations:

Text Only
https://yoursite.com/map?location=conference-room-a
https://yoursite.com/map?from=entrance&to=cafeteria

Implementation would require custom JavaScript to read URL parameters and control the viewer programmatically.

Browser Compatibility

MapBoot Viewer is compatible with:

  • ✅ Chrome (latest)
  • ✅ Firefox (latest)
  • ✅ Safari (latest)
  • ✅ Edge (latest)
  • ✅ Mobile browsers (iOS Safari, Chrome Mobile)

Not supported: - ❌ Internet Explorer

Accessibility

The MapBoot Viewer includes basic accessibility features:

  • Keyboard navigation support
  • Screen reader compatibility (basic)
  • High contrast support

For enhanced accessibility: - Provide alternative text descriptions of your facility - Include traditional directions alongside the interactive map - Ensure your website meets WCAG guidelines

CDN and Versioning

Always Use Latest

HTML
<script src="https://cdn.mapboot.com/viewer/latest/mapboot.min.js"></script>

This automatically pulls the newest version with bug fixes and improvements.

Version Pinning

(If available - check with support)

To lock to a specific version:

HTML
<script src="https://cdn.mapboot.com/viewer/v1.2.3/mapboot.min.js"></script>

Troubleshooting Configuration

Map Not Loading

  1. Check browser console (F12) for errors
  2. Verify Map ID is correct
  3. Ensure map is published
  4. Check domain is whitelisted

Map Too Small/Large

  1. Inspect container element (F12)
  2. Verify container has explicit height
  3. Check for CSS conflicts
  4. Try setting min-height and max-height

Controls Not Working

  1. Ensure viewer loaded completely (check console)
  2. Verify no JavaScript errors on page
  3. Check for z-index conflicts with other page elements

Custom Implementations

For advanced customizations beyond standard configuration: - Contact contact@mapboot.com - Ask about API access or custom viewer builds - Inquire about enterprise features

Next Steps