Thank you for sending this. Take a look at the included screenshots showing the bottom of the map as viewed in both Chrome and Safari. The Chrome one shows what I mentioned about the “y” axis being increasingly off the closer to the bottom it gets. It is easier to see because of the yellow background box.
In Safari, it just shows the Text Tool. It did not appear that either worked.
FYI: Mac Studio M2 Max, Safari v17.3.1, Chrome v121.0.6167.184
@Greg Here is a improved example. Example 2 It uses the 1600px instead for more clarity. Layout is responsive Bootstrap 3.
Hi twinstream. Thank you for your help.
When I first went to it using Safari, nothing appeared to happen after several attempts so I tried Chrome. In Chrome rollovers created the yellow box and it showed the URL. When I went back to Safari and tried again, the yellow boxes appeared that time.
Since I did not have image maping on the 1600px map at this address (Mount Desert Island Map - Acadia Maine), did you just use the one that was on the smaller map with javascript to make the size adjustment?
After I was running into the problem with non-responsive mapping, I began adding the regular links on the page. If I have a responsive map that works with links now, I can do away with all of the written out links.
What do I need to set the map and page up so it can be tested live?
Does the script self-adjust to the map size? Does the image mapping become embedded or is that saved in another file somewhere?
I just remembered a detail about the 1600px map. The only thing I did to that one was make the whole map linked to doing a Lightbox of the whole image.
@Greg Yes, I used the 1600px resolution image at that address because it’s only 166kb more for a sharper image. I arrived at the coordinates by using a scaling script.
document.addEventListener("DOMContentLoaded", function() {
// Original and new dimensions
const originalWidth = 730;
const originalHeight = 894;
const newWidth = 1600;
const newHeight = 1956;
// Calculate scale factors for width and height
const scaleX = newWidth / originalWidth;
const scaleY = newHeight / originalHeight;
// Find all area elements in the map and adjust their coordinates
document.querySelectorAll('map[name="acadia_map_730px"] area').forEach(area => {
// Get current coordinates and convert them into an array of numbers
const coords = area.getAttribute('coords').split(',').map(Number);
// Scale the coordinates
const scaledCoords = coords.map((coord, index) => {
// Apply scaleX to x coordinates (even indices) and scaleY to y coordinates (odd indices)
return Math.round(coord * (index % 2 === 0 ? scaleX : scaleY));
});
// Update the area element with the new scaled coordinates
area.setAttribute('coords', scaledCoords.join(','));
});
});
It’s not relevant, but I got the code in the browser I needed for the 1600px size, and then I swapped out the map info and updated the image information also. I used the original responsive map script provided by @kuligaposten.
I also fine-tuned some of the coordinates using this online site by uploading the 1600px image and obtaining new positions for about 10 or so areas: https://imagemap.org/
If you open up my example in a browser and then view the source code, everything for the image and map is right there to copy from.
Then add the script.
You should end up with this when you are done.
<!-- Make sure to edit img for updated settings
-->
<div class="column_center_map">
<img src="images/maps/acadia-mdi-1600px.png" alt="Map of Mount Desert Island and Acadia National Park" usemap="#acadia_map_1600px" id="responsive-image" class="img-responsive map_shadow">
<map name="acadia_map_1600px" id="acadia_map_1600px">
<area shape="rect" alt="Otter Cove" coords="1337,1284,1539,1335" href="otter-cove-photos-01.html" title="Otter Cove">
<!-- All the other areas -->
<area shape="rect" alt="Ellsworth, Maine" coords="107,23,317,76" href="ellsworth-maine.html" title="Ellsworth, Maine">
</map>
</div>
<!--
add map.js script (kuligaposten)
-->
<script src="ScriptLibrary/map.js"></script>
<!--
document.addEventListener(
'DOMContentLoaded',
function () {
let originalWidth =
document.getElementById('responsive-image').naturalWidth;
let originalHeight =
document.getElementById('responsive-image').naturalHeight;
function adjustImageMap() {
const img = document.getElementById('responsive-image');
const areas = img.parentNode.getElementsByTagName('area');
const imgWidth = img.clientWidth;
const imgHeight = img.clientHeight;
const scaleFactor = Math.min(
imgWidth / originalWidth,
imgHeight / originalHeight
);
originalWidth = img.clientWidth;
originalHeight = img.clientHeight;
for (let i = 0; i < areas.length; i++) {
let coords = areas[i].coords.split(',');
for (let j = 0; j < coords.length; j++) {
coords[j] = Math.round(coords[j] * scaleFactor);
}
areas[i].coords = coords.join(',');
}
}
window.addEventListener('resize', adjustImageMap);
window.addEventListener('DOMContentLoaded', adjustImageMap);
},
false
);
-->
Thank you so much twinstream and kuligaposten. This will be my project for the next week. I could not have done it without your assistance.
Thats pretty cool !
I wonder if the end objective is to have a responsive map and then on hover and click area a lightgallery loads the page link right in the lightgallery. That way you would keep visitors on the map page after reading about different locations and closing gallery info and not send them away to only have them find the way back to the map again ?
If you are speaking of the lightbox or gallery… The one I had been using was very old. During the time when I was not able to have a responsive image map, I did discovery that when the actual map was loaded via lightbox, it made it so the image could be made smaller or larger very easily. I have not been sure how this would be for SEO because I had gotten messages from some SEO services that it was not desirable to have a picture link to another picture or something like that. It would be a good way to access information and stay on the page. However, what would work well on a larger display may not so well on a cellphone. What do you think?
@Greg I personally would not use a lightbox or gallery for SEO reasons. From a SEO standpoint it may be a good idea to keep the link columns surrounding the map too. I defer to the SEO experts.
You may also want to add this to the image for performance reasons if someone zooms on mobile.
#responsive-image {
will-change: transform;
}
@Greg @kuligaposten I think there might be a bug in kulig resize script as sometimes on first load or when first load happens and zooming in on map the tooltips are not functional. I was looking through some old map projects and I have used this one which seems to fix the problem or it could be the way its intialized with load.
You would add the library from here
then I intialize with script like this
window.addEventListener('load', function() {
imageMapResize('#acadia_map_1600px');
});
Here is a updated example mapper2 using imageMapResize
I am glad that you caught that as it matches what I was experiencing as well. Whenever I had first viewed the map in Safari, nothing worked. I next tried Chrome. When I went back to Safari, the mouse overs were working. I hope to give this a try soon. Thanks again!
I have different images depending the viewport so both the image and the overlays are responsive
have a look
Hello again,
So, from what I saw, there are 3 different sizes. At least that is what seemed to be the case when I was in Safari. In the Page Source, I noted that the map size it is based on stayed the same: 730px wide by 894px high. I have no idea how this is happening unless it is locked in to the ratio. FYI - I have been cramming trying to get a smaller website (acadia.ws) updated to Bootstrap 5.3 to test everything on before tackling the main one at Acadia Magic. I am looking forward to getting your feedback. Thanks again.
@kuligaposten It would be nice if tooltips could be made responsive too. When zooming the hover box on a image map stays synced in size but when using any tooltip method including yours I cannot get them to resize accordingly.? Try 500 % zoom…
If you want tooltips to be responsive you can try this
CSS
:root {
--tooltip-fontsize: 24px;
}
.tooltip-inner {
font-size: var(--tooltip-fontsize);
}
javascript
const cssVar = (name, value) => {
if (name.substring(0, 2) !== '--') name = '--' + name;
if (value) document.documentElement.style.setProperty(name, value);
return getComputedStyle(document.documentElement).getPropertyValue(name);
};
const setTooltipFontSizeWithZoomFactor = (zoomFactor) => {
const baseTooltipFontSize = 24; // Adjust this as needed
const adjustedTooltipFontSize = baseTooltipFontSize / zoomFactor;
cssVar('--tooltip-fontsize', adjustedTooltipFontSize + 'px');
};
const detectZoomLevel = () => {
const innerWidth = window.innerWidth;
const outerWidth = window.outerWidth;
const zoomLevel = outerWidth / innerWidth;
return zoomLevel;
};
const handleZoomChange = () => {
const zoomLevel = detectZoomLevel();
setTooltipFontSizeWithZoomFactor(zoomLevel);
};
window.addEventListener('resize', handleZoomChange);
window.addEventListener('load', handleZoomChange);
FYI - My original interactive map (with the image mapping) became popular so fast because it was basically a navigation tool for those who were visually inclined. Very soon it dominated the online options because it also performed additional functions. Acting as a navigation tool was number one. This allowed people to quickly access information. Number two was that it allowed anyone who was considering visiting Acadia National Park a way to become familiar with the layout of the land, and to plan what to do while visiting (before their arrival). Number three: For the person who had already been to the area (whether vacationing or having lived there), using the interactive map was the fasted way to get to the page, section, or place they wanted to and relive or reminisce the experience.