Need help for interactive map

WayzFL·12/27/2023 in Technical Advice & Coding Help

Hello, I'd like to add an option to my interactive map where when I click on an area, a new image of the area appears plus zoom. The file World map Fantasy Life.png is my world map and the file Castel_map.png is the image plus zoom of the city.

When I save the code and check it again, nothing has been saved and all I have is the basic code.

The code:

{

"mapImage": "World map Fantasy Life.png",

"pageCategories": [],

"defaultSort": "",

"description": "",

"coordinateOrder": "xy",

"mapBounds": [

[0, 0],

[3000, 1800]

"origin": "bottom-left",

"useMarkerClustering": true,

"categories": [

{

"id": "1",

"listId": 1,

"name": "General",

"color": "#fa005a",

"symbol": "",

"symbolColor": ""

}

"markers": [],

"areas": [

{

"shape": "rect",

"coords": [1899.2888142670668, 777.8174593052023, 2063.3375875023457, 726.9057710597709],

"href": "Castel_map.png",

"alt": "Zone 1"

}

]

}

Thanks

(Edited by WayzFL)

JasperStones555·1/4/2024

It seems like you're working with a JSON configuration for an interactive map, and you want to implement a feature where clicking on an area displays a new image with zoom. However, the provided code seems to lack the necessary JavaScript functionality to handle the interaction you're looking for.

To achieve the desired behavior, you'll need to incorporate some JavaScript code that handles the click event on the specified area and dynamically updates the displayed image. Here's an example using HTML, JavaScript, and jQuery:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Map</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <div id="map-container" style="position: relative;">
        <img id="world-map" src="World map Fantasy Life.png" alt="World Map" style="width: 100%;">
    </div>

    <script>
        $(document).ready(function() {
            // Attach a click event to the area with the id "zone1"
            $('#map-container').on('click', 'area#zone1', function() {
                // Replace the world map with the zoomed-in image
                $('#world-map').attr('src', 'Castel_map.png');
            });
        });
    </script>
</body>
</html>

In this example:

The map is displayed within a container div.
An event listener is attached to the container for clicks on an area with the id "zone1" (you need to add an id to your area tag).
When the area is clicked, it updates the source of the world map image to display the zoomed-in image.

Remember to replace the placeholder "zone1" with the actual id you have for your area. This approach assumes that your map areas are defined using the HTML <area> element within an <img> tag.

WayzFL·1/5/2024

@JasperStones555 Hi, thanks. I just don't understand well what you want me to do. You said "Remember to replace the placeholder "zone1" with the actual id you have for your area. This approach assumes that your map areas are defined using the HTML <area> element within an <img> tag"

How i can get the id
What do you mean when you are saying"This approach assumes that your map areas are defined using the HTML <area> element within an <img> tag" and how i can do that

And when i past this code, there is an error line 1 Error: Unexpected '<'

Thanks

(Edited by WayzFL)

What do you think?