How do I using coordinates as map locations?

Question

I am working on a bluetooth location project interface. I am new at html, javascript. I need to assign pixels for location like map/areas. But I need them for place objects. For example while I create an object I am assigning top:"50"px, left"40"px. I am looking a way to just give area id to my object and my object will placed in the area. I hope you guys can understand my question.

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

</head>

<body>

    <img src="~/Images/kroki.jpg" alt="map" usemap="#Map" />

    <map name="Map" id="Map">

        <area target="" alt="" id="galeri" title="" href="" coords="144,186,251,386" shape="rect">
        <area target="" alt="" id="a1" title="" href="" coords="42,32,106,31,106,37,163,37,163,160,40,162" shape="poly">
        <area target="" alt="" id="a2" title="" href="" coords="164,160,290,160,289,47,257,30,196,32,165,41" shape="poly">

    </map>

    <div class="row">

    <div style="position:absolute; top:15px; left:15px; width:15px; height:15px; margin:0; background-color:lawngreen" class="dot"></div>     
    <div style="position:absolute; top:290px; left:190px; width:15px; height:15px;  background-color:deeppink" class="dot" id="pink"></div>
    
        </div>

</body>
</html>

<script>

    var img = (document.getElementsByClassName("dot"));

    var interval = window.setInterval(function () {

        for (var i = 0; i < 100; i++) {

            if (img[i].style.visibility == 'hidden') {
                img[i].style.visibility = 'visible';
            } else {
                img[i].style.visibility = 'hidden';
            }
        }
        }, 500);

</script>

as you can see here I am manually assigning location values. But as you can see again there is areas I created. How do I assign this squares directly into areas with using area ids?

score 0 · Answer 1 · answered Aug 10 '16 at 07:32

0

<img src ="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

answered Aug 10 '16 at 07:32

Bishoy Bisahi

377
1
11

Thanks for answering. But what I need is for example while I create a div like;
– Cappydh Aug 10 '16 at 07:38

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

Instead Of Using Maps,

You Can Make Use Of Canvas And Draw Pixels with Width And Height.

Canvas HTML5: Drawing a dot on HTML5 canvas

edited May 23 '17 at 10:28

Community

1
1

answered Aug 10 '16 at 11:23

Shankar Shastri

1,134
11
18

Thanks for answeing. But how can I use them as my locations? I need to assign the location while creating the object. For example; we created a canvas whic has id:canvas. I want to use that id while creating div. – Cappydh Aug 10 '16 at 12:06

How do I using coordinates as map locations?

2 Answers2