Skip to content

New Landing Page #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ohommes merged 7 commits into from
Jul 3, 2025
Merged

New Landing Page #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
60339ea
Map stays roughly centered when zooming in and out.
Feb 6, 2024
2206bdd
Merge pull request #21 from rsedevnet/main
MaxWaldorf Feb 6, 2024
2cfa0b0
Scroll compensation on zoom now happening in the same event loop. (#22)
rsedevnet Feb 7, 2024
ab5c93e
Add scroll wheel zoom
ohommes Feb 27, 2024
533bf0e
Merge branch 'main' into dev
ohommes Feb 27, 2024
fbaeae8
Sync dev branch with main (#27)
ohommes Feb 28, 2024
a13db8a
Prepare for 4.38 Maps
ohommes Jul 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 44 additions & 7 deletions common/scripts/map_actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,12 @@ var properties = {
}
};

const limits = {
zoom_max: 2.0,
zoom_min: 0.5,
wheel_rate_hz: 20
}

// Toolbar Icons for actions
const toolbar = {
icon: {
Expand Down Expand Up @@ -215,7 +221,7 @@ function locateAirport(list) {
refreshCanvas();
x = parseInt(coords[0]);
y = parseInt(coords[1]);
drawHighlight(context,x,y,radius);
drawHighlight(context,x,y,radius * properties.zoom);

// Make the airport the focus
window.scrollTo(x-window.innerWidth/2,y-window.innerHeight/2);
Expand Down Expand Up @@ -532,14 +538,21 @@ function selectVisibility(list) {
refreshCanvas();
}

var hotspots;
function storeMapCoordinates() {
var imgMap = document.getElementById("imgMap");
hotspots = [];
for (area of imgMap.children) hotspots.push(area);
}

// Scale the image map coordinates to match the airport overlay image
function scaleMap(scale) {
var imageMap = document.getElementById("imgMap");
var areas = imageMap.children;
i = 0;
for (area of areas) {
area.coordArr = area.coords.split(',');
area.coords = area.coordArr.map(coord => Math.round(coord * scale)).join(',');
var coordArr = hotspots[i++].coords.split(',');
area.coords = coordArr.map(coord => Math.round(coord * scale)).join(',');
if (area.alt == "Legend") properties.legend = area.coords;
if (area.alt == "Bullseye") bullseye.coords = area.coords;
}
Expand Down Expand Up @@ -827,13 +840,13 @@ function button(e) {
break;

case "zoom1":
if (id == "zoom1" && properties.zoom > 0.55) {
if (e.shiftKey) properties.zoom = 0.55;
if (id == "zoom1" && properties.zoom > limits.zoom_min) {
if (e.shiftKey) properties.zoom = limits.zoom_min;
else properties.zoom -= 0.05;
}
case "zoom2":
if (id == "zoom2" && properties.zoom < 1.0) {
if (e.shiftKey) properties.zoom = 1;
if (id == "zoom2" && properties.zoom < limits.zoom_max) {
if (e.shiftKey) properties.zoom = limits.zoom_max;
else properties.zoom += 0.05;
}
scaleView(properties.zoom);
Expand Down Expand Up @@ -1222,6 +1235,26 @@ var pointer_end = function(e) {
properties.ctrl = false;
}

var wheel_enabled = true;
function enable_wheel() {
wheel_enabled = true;
}

// Allow zooming with the mouse but limit it to a set wheel rate
// See Limiters (20 hz)
var mouse_zoom = function(e) {
e.preventDefault();
var zoom = properties.zoom - (e.deltaY/200);
if ( wheel_enabled && zoom >= limits.zoom_min && zoom <= limits.zoom_max ) {
properties.zoom = zoom;
scaleView(properties.zoom);
saveSettings();
refreshCanvas();
wheel_enabled = false;
setTimeout(enable_wheel, (1 / limits.wheel_rate_hz) * 1000);
}
}

//
// Canvas and Layer Routines
//
Expand Down Expand Up @@ -1615,7 +1648,9 @@ window.onload = function(e) {

// Adjust map to used scale
// Safari will slow beyond 3840 canvas size
storeMapCoordinates();
scaleMap(3840/4096);
storeMapCoordinates();

// Setup the Layers to be rendered on the main canvas
setupLayer(layer.mission, canvas.width, canvas.height );
Expand All @@ -1640,6 +1675,7 @@ window.onload = function(e) {
this.addEventListener('mousedown', pointer_start);
this.addEventListener('mousemove', pointer_drag);
this.addEventListener('mouseup', pointer_end);
this.addEventListener("wheel", mouse_zoom, {passive:false} );

// Trigger a Render
updateToolbar();
Expand All @@ -1648,6 +1684,7 @@ window.onload = function(e) {
window.scrollTo(bullseye.x-window.innerWidth/2,bullseye.y-window.innerHeight/2);

// Draw the Layers
enable_wheel();
scaleView(properties.zoom);
refreshCanvas();
}
182 changes: 100 additions & 82 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<!doctype html>
<html>
<head>
<title>Falcon BMS - Interactive Maps (BMS 4.37)</title>
<title>Falcon BMS - Interactive Maps</title>
<style type="text/css">

color_backround {
color: #163546;
body {
margin: 0;
padding: 0;
background-color: white;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
color: #5a87a4;
Expand All @@ -23,11 +24,7 @@
font-size: 12px;
color: #5a87a4;
}

div {
margin: 30px 50px
}


center {
display: block;
margin-left: auto;
Expand Down Expand Up @@ -70,7 +67,6 @@
font-size: 1.5em;
}


table th,
table td {
text-align: center;
Expand All @@ -79,89 +75,42 @@
table th {
text-transform: uppercase;
}
.color_background {
color: #163546;
}

.blue-bar {
width: 100%;
height: 50px;
background-color: #1E3444;
padding-top: 20px; /* Adds 20px space above the image */
}

@media screen and (max-width: 768px) {
table {
border: 0;
}
.content {
padding: 20px;
margin: 30px 50px;
}

table caption {
font-size: 1.3em;
}

table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}

table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: center;
}

table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: center;
font-weight: bold;
text-transform: uppercase;
}

table td:last-child {
border-bottom: 0;
}
</style>
</head>
<body>
<div class="color_backround">
<center>
<a href="https://www.falcon-bms.com"><img src="https://cdn.falcon-bms.com/maps/web_assets/web_logo_small.jpg" width="324" height="83" border="0"></a>
</center>
<div class="blue-bar">
<center>
<!-- <a href="https://www.falcon-bms.com"><img src="https://cdn.falcon-bms.com/maps/web_assets/web_logo_small.jpg" width="324" height="83" border="0"></a> -->
<a href="https://www.falcon-bms.com"><img src="https://www.falcon-bms.com/wp-content/uploads/2021/07/web_logo_large_alt.png" width="324" height="83" border="0"></a>
</center>
</div>
<div class="content">
<font>
<h1>Falcon BMS 4.37 - Interactive Maps</h1><hr>
You find here Interactive Maps providing access to airbase and airstrip information for the respective theater of operations. The maps provide the following features:
<ul>
<li>Locate airports and navigation beacons and request their information by hovering over them</li>
<li>Move map, zoom in/out and measure distances on map</li>
<li>Mission.ini or Pilot.ini drag and drop to show route on map and more.</li>
<li>Full whiteboard collaboration using collaboration server</li>
<li>Save Whiteboard(.png) and restore with drag and drop</li>
<li>MIL-STD-2525D symbology</li>
<li>Weather import (fmap drop) for weather charts (Temperature, Doppler, Winds, Isobars)</li>
<li>Route Waypoint dialog (actions, heading, distance and duration updates, etc)</li>
<li>Computed Mission Flight Info, Mission Radio Frequencies and Mission Objectives</li>
<li>Show Lat/Long on map and x,y of image map</li>
<li>Aerodrome Weather Report (METAR) as tooltips and on route dialog (uses) fmap </li>
<li>Add notes on Whiteboard</li>
<li>Bullseye placement</li>
<li>Download and Import GFS data and files</li>
</ul>
<h5 style="text-align: left;"><a href="https://forum.falcon-bms.com/topic/22922/falcon-bms-interactive-maps" target="_blank">Change log</a> &nbsp;| &nbsp;<a href="https://cdn.falcon-bms.com/maps/manual/BMS_Interactive_Maps.pdf" target="_blank">Manual (PDF)</a></h5>
<hr>
<h1>Falcon BMS - Interactive Maps</h1><hr>
<h2>Theater Maps 4.37</h2>
<table>
<thead>
<tr>
<th scope="col"><strong>Korea Theater</strong><br><em><font_small>Rev: 26 JUNE 2023</font_small></em></th>
<th scope="col"><strong>Balkans Theater</strong><br><em><font_small>Rev: 26 JUNE 2023</font_small></em></th>
<th scope="col"><strong>Israel Theater</strong><br><em><font_small>Rev: 26 JUNE 2023</font_small></em></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -193,7 +142,76 @@ <h5 style="text-align: left;"><a href="https://forum.falcon-bms.com/topic/22922/
</tr>
</tbody>
</table>

<br>
<h2>Theater Maps 4.38</h2>
<table>
<thead>
<tr>
<th scope="col"><strong>Korea Theater</strong><br><em><font_small>UNDER CONSTRUCTION</font_small></em></th>
<th scope="col"><strong>Balkans Theater</strong><br><em><font_small>UNDER CONSTRUCTION</font_small></em></th>
<th scope="col"><strong>Israel Theater</strong><br><em><font_small>UNDER CONSTRUCTION</font_small></em></th>
<th scope="col"><strong>Hellenic Theater</strong><br><em><font_small>UNDER CONSTRUCTION</font_small></em></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Korea Theater">
<div class="container">
<div class="polaroid">
<a href="index.html" target="blank"><img src="https://cdn.falcon-bms.com/maps/web_assets/kto.jpeg" width="150" height="150" alt="Korea Theater" border="0" class="image"></a>
</div>
<!-- a href="https://github.com/BenchmarkSims/maps-website/releases">Download</a -->
</div>
</td>
<td data-label="Balkans Theater">
<div class="container">
<div class="polaroid">
<a href="index.html" target="blank"><img src="https://cdn.falcon-bms.com/maps/web_assets/balkans.jpeg" width="150" height="150" alt="Balkans Theater" border="0" class="image"></a>
</div>
<!-- a href="https://github.com/BenchmarkSims/maps-website/releases">Download</a -->
</div>
</td>
<td data-label="Israel Theater">
<div class="container">
<div class="polaroid">
<a href="index.html" target="blank"><img src="https://cdn.falcon-bms.com/maps/web_assets/israel.jpeg" width="150" height="150" alt="Israel Theater" border="0" class="image"></a>
</div>
<!-- a href="https://github.com/BenchmarkSims/maps-website/releases">Download</a -->
</div>
</td>
<td data-label="Hellenic Theater">
<div class="container">
<div class="polaroid">
<a href="index.html" target="blank"><img src="https://cdn.falcon-bms.com/maps/web_assets/hellenic.jpeg" width="150" height="150" alt="Hellenic Theater" border="0" class="image"></a>
</div>
<!-- a href="https://github.com/BenchmarkSims/maps-website/releases">Download</a -->
</div>
</td>
</tr>
</tbody>
</table>
<br>
<h2>Map Features</h2>
The maps provide the following features:
<ul>
<li>Locate airports and navigation beacons and request their information by hovering over them</li>
<li>Move map, zoom in/out and measure distances on map</li>
<li>Mission.ini or Pilot.ini drag and drop to show route on map and more.</li>
<li>Full whiteboard collaboration using collaboration server</li>
<li>Save Whiteboard(.png) and restore with drag and drop</li>
<li>MIL-STD-2525D symbology</li>
<li>Weather import (fmap drop) for weather charts (Temperature, Doppler, Winds, Isobars)</li>
<li>Route Waypoint dialog (actions, heading, distance and duration updates, etc)</li>
<li>Computed Mission Flight Info, Mission Radio Frequencies and Mission Objectives</li>
<li>Show Lat/Long on map and x,y of image map</li>
<li>Aerodrome Weather Report (METAR) as tooltips and on route dialog (uses) fmap </li>
<li>Download and Import GFS data and files</li>
<li>Bullseye placement</li>
</ul>
<h5 style="text-align: left;"><a href="https://forum.falcon-bms.com/topic/22922/falcon-bms-interactive-maps" target="_blank">Change log</a> &nbsp;| &nbsp;<a href="https://cdn.falcon-bms.com/maps/manual/BMS_Interactive_Maps.pdf" target="_blank">Manual (PDF)</a></h5>
<hr>
</font>
</div>
</body>
</html>
</html>