How to Embed
To embed the Project Bob map in your own webpage, use either of these methods:
Method 1: Using the embed parameter
URL: http://your-domain.com/?embed=true
<iframe src="http://your-domain.com/?embed=true"
width="100%"
height="500"
frameborder="0"
title="Project Bob Live Map">
</iframe>
Method 2: Using the dedicated embed route
URL: http://your-domain.com/embed
<iframe src="http://your-domain.com/embed"
width="100%"
height="500"
frameborder="0"
title="Project Bob Live Map">
</iframe>
Features in Embed Mode
- ✅ Real-time GPS tracking from Redis
- ✅ Live boat position and trail
- ✅ ArcGIS map with all layers
- ✅ Responsive design
- ❌ No navigation menus
- ❌ No status panels
- ❌ No video components
- ❌ No Grafana dashboard
CSS Customization
You can further customize the embedded map appearance with CSS:
/* Hide iframe borders */
.map-embed {
border: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Responsive embedding */
.map-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}