How to pin marker on image imported?

Is it possible to set marker any position on image imported ?

I want to add 2 type of marker to my work that is point marker and regtangle marker.

And how to scale size of marker like resize width and height on regtangle marker?

Please help me Thank you.

Hi @Roong ,

firstly yes,  it is possible to set marker any position on image imported. you can handle the size and alinement using CSS.

But why you have to do that through imported image, we can even set point marker and rectangle marker by using the icons we have in the out systems.


 

Thank you for your answer. Actually, I want to upload image (jpeg or png file) like blueprint to my app. Then my app can mark any position to that blueprint when I click. And the marker can show detail. If you know more please suggest me for more detail, Thank you so much.

Hello Roong

There is no already created Demo for it but you can achieve this with JS and CSS. What you will need to do is below - 

1. Using the JS you will need to get the Coordinates where you want to show that Marker.

2. Display Markers on the Images

3. Apply CSS, and visible the ToolTip if someone hover on the Marker with the information. 


You can achieve this using Image Map HTML Tag as well. This tag selects the portion of image and you can apply CSS on selected Area. 

Hi Manish

Thank you so much for your answer, I ll try Image Map HTML Tag. If you have some example please suggest me more. Thank you again.

Sure, you will need to combine these solutions - 

  1. Sample HTML to select the Part of Image : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_map2
  2. You can use Sample JS to find the Image Coordinates: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_mouse_clientxy
  3. You can set Markers on the Position with CSS and show tooltip: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_right 


Please feel free to contact me in case of any questions.

Regards 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.