Mise à jour MAP AREA après requête AJAX

Version imprimable

Bonjour à tous,
Dernière ligne droite pour la réussite de mon code, enfin je crois !
Suite aux échanges de NoSmoking et ASCIIDEFOND, que je remercie, j'ai de nouveau besoin d'aide pour ce bout de code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
           $("#MapWorld area").remove();
 
            $("#BtnRechCarte").click(function () {
 
                $("#MapWorld area").remove();
 
                if ($('#ChoixMois')[0].selectedIndex <= 0) { $("#MapWorld area").remove(); document.getElementById("ChoixMois").focus(); return false; }
                if ($('#ChoixTemp')[0].selectedIndex <= 0) { $("#MapWorld area").remove(); document.getElementById("ChoixTemp").focus(); return false; }
                var SelectMois = $('#ChoixMois option:selected').val();
                var SelectTemp = $('#ChoixTemp option:selected').val();
 
                $.ajax({
                    type: 'post',
                    url: '@Url.Action("AffichageShape")',
                    async: false,
                    dataType: "json",
                    data: { Mois: SelectMois, Temp: SelectTemp },
                    success: function (data) {
                        var items = '';
                        $("#MapWorld area").remove();
                        $.each(data, function (i, item) {
 
                            $('#MapWorld').append(`<area shape="${item.ShapeDest}" coords="${item.CoordsDest}" href="#" alt="${item.Destination}" title="${item.Destination}" >`);
                        });
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(chr.responseText);
                    }
                });
 
                $(function () {
                    $('.map').maphilight({
                        alwaysOn: true,
                        strokeWidth: 2,
                        fillColor: "ff0000",
                        fillOpacity: 0,
                        singleSelect: true
 
                    });
                });
 
 
            });

Dans la console j'ai bien le code area complet, MAIS !

Je souhaiterais afficher un pays à l'aide du code ci-dessous :

Code:

1
2
3
4
5
6
7
8
9
10
               $(function () {
                    $('.map').maphilight({
                        alwaysOn: true,
                        strokeWidth: 2,
                        fillColor: "ff0000",
                        fillOpacity: 0,
                        singleSelect: true
 
                    });
                });

Mais cela ne fonctionne pas.
Si je copie depuis la console le code Area ainsi obtenu et que je le colle directement dans la balise map comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
            <div id="IdCarte">
                <div id="DivMapWorld">
                    <img id="IdWorld_Map" usemap="#MapWorld" width="10000" height="5280" title="Map monde en français" class="img-fluid map" src="~/Content/Images/World_Map.jpg" />
                    <map id="MapWorld" name="MapWorld">
 
                        <area shape="poly" coords="5088,3415,5108,3450,5099,3465,5101,3474,5133,3472,5137,3465,5161,3445,5166,3427,5182,3424,5191,3433,5212,3444,5239,3437,5248,3410,5264,3407,5273,3396,5279,3377,5283,3375,5297,3360,5317,3339,5335,3334,5346,3322,5379,3329,5388,3328,5402,3337,5409,3374,5415,3394,5416,3450,5417,3453,5416,3460,5418,3476,5425,3477,5438,3474,5430,3509,5422,3530,5394,3556,5376,3578,5359,3610,5344,3622,5331,3635,5312,3657,5264,3690,5253,3697,5233,3699,5222,3705,5205,3711,5171,3709,5167,3711,5151,3708,5134,3711,5126,3719,5104,3722,5072,3735,5065,3731,5055,3721,5044,3716,5036,3709,5032,3713,5030,3708,5034,3692,5021,3671,5022,3668,5028,3668,5035,3660,5032,3643,5012,3602,5002,3584,4996,3557,4984,3536,4993,3528,5000,3527,5017,3537,5029,3540,5045,3542,5056,3546,5080,3530,5088,3529,5088,3416" href="#" alt="Afrique du Sud" title="Afrique du Sud">
 
                    </map>
 
 
                </div>
            </div>

Et QUE je click sur le bouton à l'aide de ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
        $("#Btnok").click(function () {
 
                          $(function () {
                    $('.map').maphilight({
                        alwaysOn: true,
                        strokeWidth: 2,
                        fillColor: "ff0000",
                        fillOpacity: 0,
                        singleSelect: true
 
                    });
                });
 
            });

Et bien cela fonctionne, le pays en question est coloré en rouge....

Avec mes mots à moi :

Comment faire pour prendre en compte le code html (area) réalisé avec Ajax (en virtuel ! si je puis dire !) ?

Il est existant dans la console, mais il n'est pas pris en compte par ($('.map').maphilight) ?

Avez-vous une idée ?

Par avance merci...

18/05/2022, 10h03
mathieu

essayez de faire l'appel à "maphilight" après l'ajout des "textarea" dans le code.

Bonjour à tous,

Pas trop d’idée… Ou peut-être alors en sélectionnant l’ID de la balise 'img' ?
Code:

1 2 3 4 5 6 7 8 $('#IdWorld_Map').maphilight({ alwaysOn: true, strokeWidth: 2, fillColor: "ff0000", fillOpacity: 0, singleSelect: true });

18/05/2022, 11h32
NoSmoking

Bonjour,
abus manifeste de $(function () { au mauvais endroit.
18/05/2022, 11h55
SpaceFrog

Sinon essaye de forcer le usemap APRES la modification ...

Code:

$("#IdWorld_Map").attr("usemap","#MapWorld")
19/05/2022, 16h43
BRUNO71

Bonjour à vous,

mathieu, (après l'ajout des "textarea" dans le code) ?? à quel niveau ?

ASCIIDEFOND, pas de différence avec L'ID de la balise img, merci.

NoSmoking, effectivement je viens de supprimer ($(function () {), mais pas de changement.

SpaceFrog, je viens d'essayer de forcer le usemap APRES la modification, mais pas de changement.

Merci à vous, c'est quand même étrange que le code ainsi créé n'est pas pris en compte... !

Ben là, je ne sais pas quoi faire...:arf:
19/05/2022, 17h08
SpaceFrog

Essaye de réinitialiser

Code:

$('.map').maphilight({

après l'attribution du nouveau map ?
19/05/2022, 18h38
ASCIIDEFOND

Bonjour à tous,

Et avec 'alwaysOn: false' ?

Citation:

Envoyé par BRUNO71

NoSmoking, effectivement je viens de supprimer ($(function () {), mais pas de changement.

il fallait pousser la réflexion ... ;)

Citation:

Envoyé par BRUNO71

SpaceFrog, je viens d'essayer de forcer le usemap APRES la modification, mais pas de changement.

Aucune raison que cela ne fonctionne pas, ton appel n'est pas au bon endroit !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  $.ajax({
    type: 'post',
    url: '@Url.Action("AffichageShape")',
    async: false,
    dataType: "json",
    data: {
      Mois: SelectMois,
      Temp: SelectTemp
    },
    success: function(data) {
      var items = '';
      $("#MapWorld area").remove();
      $.each(data, function(i, item) {
        $('#MapWorld').append(`<area shape="${item.ShapeDest}" coords="${item.CoordsDest}" href="#" alt="${item.Destination}" title="${item.Destination}" >`);
      });
      //-- Mise à jour ici --
      $('.map').maphilight({
        alwaysOn: true,
        strokeWidth: 2,
        fillColor: "ff0000",
        fillOpacity: 0,
        singleSelect: true
      });
    },
    error: function(xhr, ajaxOptions, thrownError) {
      alert(chr.responseText);
    }
  });

Bonjour à tous,

Merci de vous penchez sur mon projet, j’ai fait une petite vidéo d’écran de 47 secondes :
https://youtu.be/P2rOkDU-0QE
J’ai un bouton essai pour afficher la balise area déjà en place dans le code map.
L’exemple s’affiche, ensuite je click sur le bouton recherche dans la base de données (qui n’a pas beaucoup d’exemple pour l’instant) .
Effacement de ce qui est éventuellement en place et affichage du résultat…mais in ne se passe rien.
Je constate au passage que la balise area issu de la base de données est étrange, car le résultat n’est pas issu de la base de données…
Au lieu de ceci : coords="5088,3415,5108,3450,5099,3465,5101,3474….etc
J’ai ce résultat : coords="668,448,671,453,670,455,670,456… etc
Je re click de nouveau et là effectivement j’ai le bon résultat, mais rien ne s’affiche.
Et même avec le bouton essai…..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
   $.ajax({
                                type: 'post',
                                url: '@Url.Action("AffichageShape")',
                                async: false,
                                dataType: "json",
                                data: {
                                  Mois: SelectMois,
                                  Temp: SelectTemp
                                },
                                success: function(data) {
                                  var items = '';
                                  $("#MapWorld area").remove();
                                  $.each(data, function(i, item) {
                                    $('#MapWorld').append(`<area shape="${item.ShapeDest}" coords="${item.CoordsDest}" href="#" alt="${item.Destination}" title="${item.Destination}" >`);
                                  });
                                  //-- Mise à jour ici --
                                    $('.map').maphilight({
                                        alwaysOn: true,
                                        strokeWidth: 2,
                                        fillColor: "ff0000",
                                        fillOpacity: 0,
                                        singleSelect: true
                                    })
                                    alert('ok');
                                },
                                error: function(xhr, ajaxOptions, thrownError) {
                                  alert(chr.responseText);
                                }
                              });

Le message ok arrive bien...je ne sais plus quoi faire...par avance merci...

20/05/2022, 18h54
ASCIIDEFOND
Salut à tous,

BRUNO71, à mon avis il faut rafraichir le ‘maphilight’. Essaie avec une fonction que tu appelleras une fois ton code créer.
Code:

1 2 3 4 5 6 7 8 9 10 function AreaRefresh() { $('.map').maphilight({ alwaysOn: true, strokeWidth: 1, fillColor: "ff0000", fillOpacity: 0, singleSelect: true }); }
Ou plus simplement

Code:

$('#MapWorld').append(`<area shape="${item.ShapeDest}" coords="${item.CoordsDest}" href="#" alt="${item.Destination}" title="${item.Destination}" >`).trigger('alwaysOn.maphilight');

Bonjour ASCIIDEFOND,

Toujours pareil, rien ne s'affiche.
J'ai même essayé ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
                $FunctMaphilight = function () {
                var data = {};
                $('#IdWorld_Map').maphilight();
                data.alwaysOn = true;
                data.strokeWidth = '2';
                data.fillColor = 'ff0000';
                data.fillOpacity = '0';
                $('area').data('maphilight', data).trigger('alwaysOn.maphilight');
            };
 
// puis :
 
  $.ajax({
                                type: 'get',
                                url: '@Url.Action("AffichageShape")',
                                async: false,
                                dataType: "json",
                                data: {
                                  Mois: SelectMois,
                                  Temp: SelectTemp
                                },
                               success:function(data) {                               
                                  var items = '';
                                //  $("#MapWorld area").remove();
                                  $.each(data, function(i, item) {
                                      $('#MapWorld').append(`<area shape="${item.ShapeDest}" coords="${item.CoordsDest}" href="#" alt="${item.Destination}" title="${item.Destination}" >`);
                                  });
                                  //-- Mise à jour ici --
 
                                  $FunctMaphilight();
 
                                },
                                error: function(xhr, ajaxOptions, thrownError) {
                                  alert(chr.responseText);
                                }
                           });

:cry: je ne sais plus quoi faire....Existe t'il autre chose et plus simple que Maphilight ?

Merci

21/05/2022, 15h42
NoSmoking

Aucune raison pour que cela ne fonctionne pas sauf ... si ... l'erreur est ailleurs ;)

J'ai fait un exemple pour montrer que l'intégration de ce plugin est des plus simples :

↪ Fichier en ligne : Plugin maphilight by David Lynch

Cela m'a permis de voir son fonctionnement et ses « failles », bien faibles somme toutes.

Maintenant revenons à ...

Citation:

Au lieu de ceci : coords="5088,3415,5108,3450,5099,3465,5101,3474….etc
J’ai ce résultat : coords="668,448,671,453,670,455,670,456… etc

On constate que le rapport entre les valeurs est de 7.612, l'erreur semble plutôt venir du fait que tu redimensionnes l'image alors que les coordonnées des <area> sont pour l’échelle 1.

Ton image de départ fait 10000 x 5280, vu dans ton code, et tu dois l'afficher réduite, quelque chose comme 1300 x 686.

Malheureusement le plugin ne le prend pas en compte.
23/05/2022, 11h40
BRUNO71

Bonjour,
Bon !
Merci à vous tous, je vais réfléchir à autre chose..
Je mets de côté ce projet pour quelques jours...
Cordialement,
24/05/2022, 18h18
NoSmoking

Citation:

Merci à vous tous, je vais réfléchir à autre chose..

pas nécessairement, bien qu'il y ait également le SVG qui semblerait correspondre à ton cas, mais tu ne nous dis pas si le soucis vient d'un problème de dimensionnement de l'image.

La mise à l'échelle des <area> des <map> est un problème connu et « facilement » soluble.

J'ai modifié l'exemple liée pour le prendre en compte, c'est perfectible mais devrait résoudre ton problème si celui-ci est bien lié au dimensionnent de ton image bien sûr !

↪ Adaptation du Plugin maphilight aux images responsives.