jaybo Posted July 29, 2023 Share Posted July 29, 2023 I have a map image with clickable flag hotspots. The site is active and live at www.berkshirebeertrail.com When I make the image larger the flag hotspots don't keep their position. I have tried to ensure the container is set to position:relative and the markers to position:absolute and used % values for left and top in the css properties. Any ideas what I'm missing? Quote Link to comment Share on other sites More sharing options...
requinix Posted July 30, 2023 Share Posted July 30, 2023 If I change the max-width on the .trailMap, the markers reposition correctly for me. How are you trying to resize it? And instead of positioning elements over the image like that, consider using an older technique instead: the image map. Quote Link to comment Share on other sites More sharing options...
Barand Posted July 30, 2023 Share Posted July 30, 2023 I tried the image map example in the above link. When I double the image size (by adding width="700" to the image tag) the image map circles remain at their original sizes and positions, so not scaling with image. Using SVG, they did scale and reposition correctly. (Coloured borders added to circles to view) Example code... <html> <head> <title>Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type='text/javascript'> $(function() { $(".hotspot").click(function() { let page = $(this).data('href') window.open ("https://developer.mozilla.org/docs/Web/" + page) }) }) </script> <style type='text/css'> .hotspot { fill: #fff; fill-opacity: 0; stroke: #F0F; } </style> </head> <body> <!-- Normal size image --> <svg width='25%' viewBox='0 0 350 150'> <image x='-30' y='0' href="parrots.jpg" width="360" height="150" preserveAspectRatio/> <circle cx='70.5' cy='75' r='50' class='hotspot' data-href="JavaScript" /> <circle cx='233' cy='75' r='50' class='hotspot' data-href="CSS" /> </svg> <br> <!-- Double size image --> <svg width='50%' viewBox='0 0 350 150'> <image x='-30' y='0' href="parrots.jpg" width="360" height="150" preserveAspectRatio/> <circle cx='70.5' cy='75' r='50' class='hotspot' data-href="JavaScript" /> <circle cx='233' cy='75' r='50' class='hotspot' data-href="CSS" /> </svg> </body> </html> P.S. Another option you may want to consider for this application is the Google Maps API. Quote Link to comment Share on other sites More sharing options...
jaybo Posted August 5, 2023 Author Share Posted August 5, 2023 On 7/29/2023 at 11:54 PM, requinix said: If I change the max-width on the .trailMap, the markers reposition correctly for me. How are you trying to resize it? And instead of positioning elements over the image like that, consider using an older technique instead: the image map. Thank you - Its for different device sizes. So when it increases to a tablet or desktop screen the markers shift up and to the left of the original positions. I am looking at using image map - thank you for that advice. I have locked in the map image size for now while I work on that. Quote Link to comment Share on other sites More sharing options...
jaybo Posted August 5, 2023 Author Share Posted August 5, 2023 On 7/30/2023 at 8:27 AM, Barand said: I tried the image map example in the above link. When I double the image size (by adding width="700" to the image tag) the image map circles remain at their original sizes and positions, so not scaling with image. Using SVG, they did scale and reposition correctly. (Coloured borders added to circles to view) Example code... <html> <head> <title>Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type='text/javascript'> $(function() { $(".hotspot").click(function() { let page = $(this).data('href') window.open ("https://developer.mozilla.org/docs/Web/" + page) }) }) </script> <style type='text/css'> .hotspot { fill: #fff; fill-opacity: 0; stroke: #F0F; } </style> </head> <body> <!-- Normal size image --> <svg width='25%' viewBox='0 0 350 150'> <image x='-30' y='0' href="parrots.jpg" width="360" height="150" preserveAspectRatio/> <circle cx='70.5' cy='75' r='50' class='hotspot' data-href="JavaScript" /> <circle cx='233' cy='75' r='50' class='hotspot' data-href="CSS" /> </svg> <br> <!-- Double size image --> <svg width='50%' viewBox='0 0 350 150'> <image x='-30' y='0' href="parrots.jpg" width="360" height="150" preserveAspectRatio/> <circle cx='70.5' cy='75' r='50' class='hotspot' data-href="JavaScript" /> <circle cx='233' cy='75' r='50' class='hotspot' data-href="CSS" /> </svg> </body> </html> P.S. Another option you may want to consider for this application is the Google Maps API. Thank you - I am well versed in google maps api but for this project I am using a database to connect data and provide breweries a login to update its information amongst other things. I will look at the svg version too. Quote Link to comment Share on other sites More sharing options...
requinix Posted August 5, 2023 Share Posted August 5, 2023 4 hours ago, jaybo said: I am well versed in google maps api but for this project I am using a database to connect data and provide breweries a login to update its information amongst other things. Not sure how "I am using a database" means you can't use Google Maps? You can even use a custom "map" image, if you like the cartoonish style - people have done so with things like this GoT site. Quote Link to comment Share on other sites More sharing options...
jaybo Posted August 9, 2023 Author Share Posted August 9, 2023 On 8/5/2023 at 5:24 PM, requinix said: Not sure how "I am using a database" means you can't use Google Maps? You can even use a custom "map" image, if you like the cartoonish style - people have done so with things like this GoT site. Sorry yes the database comment is incorrect - to clarify I want this to be a zero cost custom solution (no API charges) and also the client has specific needs on the map design. Quote Link to comment Share on other sites More sharing options...
kicken Posted August 11, 2023 Share Posted August 11, 2023 If you want to explore other mapping options, Leaflet is a free interactive mapping library like google maps. You can also use it with just a static image if you want. Create the leaflet map with your base map image, then you can pull your marker locations from your database and add them to the map. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.