Home » Jquery » javascript – How can I get the numbers on the map in the middle of the cities without slipping?

javascript – How can I get the numbers on the map in the middle of the cities without slipping?

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have got a map and I want to show a number each at on country.. I give x, y position on-page. But move my code another page x,y position is slipping. there should be only one box above each city.

$(function () {
  $("#map svg path").each(function () {
    var id=$(this).attr("id");
    $("#sehir").text(id);
    $(this).html(id);

    if ($("#" + id).length > 0) {
      var k = $("#" + id).position();
      var x = "", y = "";
      x = k.left - 110, y = k.top + 20;

              $.ajax({

                      url: '<%=ResolveUrl("~/Default.aspx/GetDeger") %>',
                      data: '{prefix: ' + JSON.stringify(id) + '}',
                      dataType: "json",
                      type: "POST",
                      context: this,
                      contentType: "application/json; charset=utf-8",                     
                      success: function (data) {

                          $("#map").append("<a href='https://www.elemanhavuzu.com/'><div class='kutu' style='left:" + x + "px;top:" + y + "px;' data-toggle='tooltip' title="+id+"><b> " + data.d + "</b></div></a> ");


                          if (data.d != null)
                          {
                                var i = +(data.d);

                                if (i == 0) {
                                    $(this).attr("style", "fill:#C12E3F");
                                }
                                else if (i > 0 && i <= 10) {
                                    $(this).attr("style", "fill:#FFD28B");
                                }

                                else if (i > 10 && i <= 20) {
                                    $(this).attr("style", "fill:#4dbc83");
                                }
                                else if (i > 20) {                          
                                    $(this).attr("style", "fill:#40A556");
                                }
                          }
                      },
                      error: function (response) {
                          alert(response.responseText);
                      },
                      failure: function (response) {
                          alert(response.responseText);
                      }
                  });
    }
  });
})

looks like now;

enter image description here

How to&Answer: