# Draw Rectangle on any map

**URL:** <https://forum.kirupa.com/t/draw-rectangle-on-any-map/637994>\
**Category:** programming\
**Created:** [March 29, 2018, 3:59am UTC](https://forum.kirupa.com/t/draw-rectangle-on-any-map/637994 "2018-03-29T03:59:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![gauravp446](https://avatars.discourse-cdn.com/v4/letter/g/e99b99/32.png) [@gauravp446](https://forum.kirupa.com/u/gauravp446)\
**Post date:** [March 29, 2018, 3:59am UTC](https://forum.kirupa.com/t/draw-rectangle-on-any-map/637994/1 "2018-03-29T03:59:07Z")

</div>

How to add a functionality on a map using javascript that enables draw shapes like rectangle on the map ?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 29, 2018, 4:45am UTC](https://forum.kirupa.com/t/draw-rectangle-on-any-map/637994/2 "2018-03-29T04:45:30Z")

</div>

Are you drawing on a `canvas`?

---

<div class="post-metadata">

**Author:** ![gauravp446](https://avatars.discourse-cdn.com/v4/letter/g/e99b99/32.png) [@gauravp446](https://forum.kirupa.com/u/gauravp446)\
**Post date:** [March 29, 2018, 5:27am UTC](https://forum.kirupa.com/t/draw-rectangle-on-any-map/637994/3 "2018-03-29T05:27:45Z")

</div>

No sir I want to create a webapi that enables drawing shapes on maps  
something like this :- [http://openlayers.org/en/latest/examples/draw-shapes.html](http://openlayers.org/en/latest/examples/draw-shapes.html)

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [March 29, 2018, 1:47pm UTC](https://forum.kirupa.com/t/draw-rectangle-on-any-map/637994/4 "2018-03-29T13:47:17Z")

</div>

That is a `canvas`.

Is _that_ the map you’re dealing with? How to draw things on a map depends entirely on the map.

---

<div class="post-metadata">

**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Post date:** [March 29, 2018, 6:55pm UTC](https://forum.kirupa.com/t/draw-rectangle-on-any-map/637994/5 "2018-03-29T18:55:50Z")

</div>

I have previously worked on Google maps to draw shapes on their map system.  
It´s well documented: [https://developers.google.com/maps/documentation/javascript/shapes](https://developers.google.com/maps/documentation/javascript/shapes)

---

<div class="post-metadata">

**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Post date:** [March 29, 2018, 7:06pm UTC](https://forum.kirupa.com/t/draw-rectangle-on-any-map/637994/6 "2018-03-29T19:06:37Z")

</div>

You have to tell us more about your map and your web API.  
Is it an external map source or did you create your own?  
Remember that you can still use canvas to draw things on top of things. You simply have to create a javascript package/module that the programmer can interact with (API =) )

---

<div class="post-metadata">

**Author:** ![gauravp446](https://avatars.discourse-cdn.com/v4/letter/g/e99b99/32.png) [@gauravp446](https://forum.kirupa.com/u/gauravp446)\
**Post date:** [March 30, 2018, 4:10am UTC](https://forum.kirupa.com/t/draw-rectangle-on-any-map/637994/7 "2018-03-30T04:10:46Z")

</div>

the map is from an external source.

---

<div class="post-metadata">

**Author:** ![gauravp446](https://avatars.discourse-cdn.com/v4/letter/g/e99b99/32.png) [@gauravp446](https://forum.kirupa.com/u/gauravp446)\
**Post date:** [March 30, 2018, 4:42am UTC](https://forum.kirupa.com/t/draw-rectangle-on-any-map/637994/8 "2018-03-30T04:42:43Z")

</div>

the map that I will be using is this:- [https://maps.mapmyindia.com/@jqiofalfl,ooilfjavf,lj,l,f,fzdata](https://maps.mapmyindia.com/@jqiofalfl,ooilfjavf,lj,l,f,fzdata)  
API of this map is available to me from the website.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [March 30, 2018, 2:41pm UTC](https://forum.kirupa.com/t/draw-rectangle-on-any-map/637994/9 "2018-03-30T14:41:06Z")

</div>

You’ll need to refer to that API to know what drawing capabilities are available to you to use.