{% extends 'FrontofficeAr/base.html.twig' %}
{% block titre %}Map maritime{% endblock %}
{% block body %}
    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("/assets/Backoffice/images/logo-fcpm.png") }}" />
            <h3 class="title-page" style="color:white;">الخريطة التفاعلية</h3>
        </div>
    </div>
    <div class="row block_ac">
        <div class="col-lg-12 divMap">
            <img src="{{ asset("assets/FrontofficeFr/images/carte.jpg") }}"  class="map2" usemap="#maritimemap" />
            <map name="maritimemap">
                <area class="mapArea" style="cursor: pointer;" shape="circle" coords="1200,190,7" alt="100" href="">
                <area class="mapArea" shape="circle" coords="1185,189,7" alt="110" >

                <area class="mapArea" shape="circle" coords="1170,189,7" alt="120" >
                <area class="mapArea" shape="circle" coords="1155,189,7" alt="130" >

                <area class="mapArea" shape="circle" coords="1140,189,7" alt="140">
                <area class="mapArea" shape="circle" coords="1125,187,7" alt="150">

                <area class="mapArea" shape="circle" coords="1115,181,7" alt="160">
                <area class="mapArea" shape="circle" coords="1109,171,7" alt="170">

                <area class="mapArea" shape="circle" coords="1096,163,7" alt="180">

                <area class="mapArea" shape="circle" coords="1073,211,7" alt="190">

                <area class="mapArea" shape="circle" coords="1069,223,7" alt="200">

                <area class="mapArea" shape="circle" coords="1062,232,7" alt="210">

                <area class="mapArea" shape="circle" coords="1052,245,7" alt="220">

                <area class="mapArea" shape="circle" coords="1042,246,7" alt="230">

                <area class="mapArea" shape="circle" coords="1035,253,7" alt="240">

                <area class="mapArea" shape="circle" coords="1024,261,7" alt="250">

                <area class="mapArea" shape="circle" coords="1013,264,7" alt="260">

                <area class="mapArea" shape="circle" coords="994,272,7" alt="270">

                <area class="mapArea" shape="circle" coords="985,284,7" alt="280">

                <area class="mapArea" shape="circle" coords="969,299,7" alt="290">

                <area class="mapArea" shape="circle" coords="958,331,7" alt="300">

                <area class="mapArea" shape="circle" coords="948,345,7" alt="310">

                <area class="mapArea" shape="circle" coords="945,356,7" alt="320">

                <area class="mapArea" shape="circle" coords="945,365,7" alt="330">

                <area class="mapArea" shape="circle" coords="945,385,7" alt="340">

                <area class="mapArea" shape="circle" coords="948,399,7" alt="350">

                <area class="mapArea" shape="circle" coords="945,413,7" alt="360">

                <area class="mapArea" shape="circle" coords="932,430,7" alt="370">

                <area class="mapArea" shape="circle" coords="919,443,7" alt="380">

                <area class="mapArea" shape="circle" coords="910,453,7" alt="390">

                <area class="mapArea" shape="circle" coords="889,465,7" alt="400">

                <area class="mapArea" shape="circle" coords="867,484,7" alt="410">

                <area class="mapArea" shape="circle" coords="835,495,7" alt="420">

                <area class="mapArea" shape="circle" coords="807,510,7" alt="430">

            </map>
            <div class="map_content2" id="mapContent">
                <img src="{{ asset("/assets/Backoffice/images/logo-fcpm.png") }}" /><br/>
                Cliquez sur un point pour afficher les informations du port.<br/>
                <img src="{{ asset("assets/FrontofficeFr/images/loopMap.png") }}" />
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script type="text/javascript">

        var mapSerialise = {{ map|json_encode|raw }};

        $(".mapArea").on("click", function(e){
            e.preventDefault();

            var map = JSON.parse(mapSerialise);

            var code = $(this).attr("alt");


            var titre = map[code].nom;
            var text = map[code].textAr;

            document.getElementById("mapContent").innerHTML = "<b>"+titre+"</b><br/>"+text;
        });
    </script>

{% endblock %}