Giter Site home page Giter Site logo

Coords "0,0" on page load. about image-map HOT 6 CLOSED

m-marc avatar m-marc commented on June 24, 2024
Coords "0,0" on page load.

from image-map.

Comments (6)

rwcbryan avatar rwcbryan commented on June 24, 2024 1

Quick update. I can recreate this issue on the demo site. On load it doesn't always work:

image

from image-map.

m-marc avatar m-marc commented on June 24, 2024

Nwm. Looks like it's happening If a map is hidden

from image-map.

rwcbryan avatar rwcbryan commented on June 24, 2024

Can we clarify what "if a map is hidden" means? I'm also experiencing this. Image is visible on page load, as is the map (I think at least).

from image-map.

clarketm avatar clarketm commented on June 24, 2024

@rwcbryan - I cannot speak for @m-marc as far as the semantics of his most recent comment, but I can assist you with your issue if you can provide a code sample of the specific problem.

I supposed you are using a load event to initialize the image map? Please clarify.

from image-map.

rwcbryan avatar rwcbryan commented on June 24, 2024

Thanks @clarketm.

The code is something I put together through image-map.net, as suggested. On render, it appears this way:

image

When I resize the window, it works well. So, the problem isn't that the script itself isn't working. Just onload, it replaces Coords w/ zeros and moves the Coords into data-coords, which I think the latter is expected.

Map code:
<map name="county-map"> <area class="green" coords="608,277,584,306,575,333,556,366,530,385,508,405,497,449,471,473,467,493,452,504,438,513,422,506,404,512,397,539,380,546,368,554,357,582,323,611,318,622,296,639,288,656,268,645,228,670,235,683,217,700,218,720,234,728,250,737,271,759,287,787,251,945,878,946,867,934,857,917,830,899,836,891,850,894,892,868,1044,765,1042,739,1008,735,991,707,984,671,992,657,1017,655,1039,660,1091,709,1112,704,1147,657,1126,611,1064,588,1053,557,1009,517,977,476,969,454,955,440,942,439,942,426,930,424,920,438,912,454,920,470,936,477,911,485,905,506,894,502,886,517,868,541,853,545,846,529,845,515,830,512,814,499,807,491,794,490,790,481,771,472,758,457,744,446,735,441,711,435,771,362,792,355,788,344,766,339,750,313,736,296,728,285,730,263,717,252,686,271,653,301,641,301,630,296" shape="poly"> <area class="blue" coords="733,946,726,982,726,1021,704,1060,732,1071,781,1074,778,1100,756,1152,752,1167,772,1179,783,1215,793,1228,787,1240,831,1281,842,1301,858,1329,876,1337,894,1322,904,1327,917,1313,1011,1376,1251,1407,1360,1357,1364,1322,1348,1159,1303,1076,1249,900,1228,843,1248,802,1234,781,1184,791,1090,715,1031,659,998,657,989,683,998,710,1012,733,1043,737,1045,762,1030,777,854,895,841,890,837,900,883,945" shape="poly"> <area class="blue" coords="224,694,236,684,232,666,271,643,287,650,319,622,329,600,355,581,381,543,400,535,403,515,427,502,442,509,466,491,471,473,498,448,497,431,524,390,559,362,588,301,616,272,615,245,626,227,604,211,620,167,614,155,613,121,585,127,557,137,447,201,277,287,236,373,209,416,176,482,124,549,112,576,144,596,175,581,194,623,168,662" shape="poly"> <area class="orange" coords="772,49,761,68,742,107,689,68,677,111,661,143,617,151,622,170,606,206,628,228,616,249,619,266,616,276,648,298,719,249,728,261,733,279,737,294,750,306,767,339,791,339,795,355,774,366,720,434,755,457,789,476,825,504,847,509,856,535,867,539,893,501,906,505,912,479,919,467,911,449,926,423,942,423,954,439,972,451,984,477,1015,499,1049,533,1078,578,1131,593,1162,506,1060,417,971,399,949,340,886,352,886,318,905,278,942,240,951,191,908,149,869,124,830,115,838,76,808,51" shape="poly"> </map>

from image-map.

clarketm avatar clarketm commented on June 24, 2024

@rwcbryan - you are right; it looks like this occurs when the page is not fully loaded. I was able to replicate after throttling my network connection and verified against the document.readyState at initialization. I will publish a bugfix ASAP. Bugfix in v1.1.5.

from image-map.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.