I am currently in the process of developing a GPS-inspired application, and I have encountered a roadblock while attempting to establish 'no-go' zones on the map. My goal is to have the map dynamically resize based on the window dimensions, using percentages of the maximum screen width and height to define the restricted areas. However, the issue arises when resizing the screen, causing the relative positions of the points on the map to shift. At this point, I am more concerned about ensuring functionality across various window sizes rather than the potential distortion of the map.
Here is my current CSS styling:
#map-container {
display:flex;
justify-content: center;
}
#lower-map {
position:absolute;
transform: rotate(-37.7deg);
top:25%;
max-width:50%;
max-height:50%;
}
Corresponding HTML:
<div id="map-container">
<img src="/static/images/Lower.jpg" alt="Map of lower floor" id="lower-map">
</div>
The current JavaScript for marking the no-go areas only functions correctly on my specific screen size and in full-screen mode:
let screenHeight = $(window).height();
let screenWidth = $(window).width();
$('#dot1').css({left: screenWidth*(60.62499999999999/100)-1, top: screenHeight*(35.75240128068303/100)-1});
$('#dot2').css({left: screenWidth*(51.69642857142858/100)-1, top: screenHeight*(43.54322305229456/100)-1});
$('#dot3').css({left: screenWidth*(55.98214285714286/100)-1, top: screenHeight*(50.160085378868736/100)-1});
$('#dot4').css({left: screenWidth*(64.55357142857143/100)-1, top: screenHeight*(42.58271077908218/100)-1});
These specific percentages were derived by clicking on the map using the following formula:
(evt.pageX/$(window).width())*100
I would greatly appreciate any assistance you can provide. Thank you!