Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


Overlay icons on a map jpg for a demo

Posted on 2013-11-09
Medium Priority
Last Modified: 2013-11-19
I have a jpg image for a map.  For a demo, I looking for a quick way to throw icons on to the map at various locations.  The icons are other jpgs.   I have a key index next to the map.   When a checkbox for a key is checked, I want a set of icons to appear on the map.  When unchecked, I want them to go away.  I have multiple types of icons.

This is a VB.NET WEB App.

Any quick way to to this?
Question by:HLRosenberger
  • 3
  • 3
LVL 43

Expert Comment

ID: 39636776
You can do all this with css and simple JavaScript. I did this with one of my sites to show distributors across world.
You use the absolute position style of your image elements within a relative positioned div tag.
I'll have an example when I get to laptop.

Author Comment

ID: 39636999
Thanks,  That would be cool!
LVL 43

Accepted Solution

Rob earned 2000 total points
ID: 39637782
here you go: http://jsbin.com/eYayafen/2
For each of the "icons", they have a background image and in this case I've used a sprite (multiple images in one, offset by their background-position style so you can choose multiple icons depending on what you need)

fairly simple html, you just add more "icon" divs as you need them:

<!DOCTYPE html>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <div id='container'>
      <div class='map'><img src="http://geology.com/world/world-map.gif" alt=""></div>
      <div class='icon' style="top: 170px; left: 160px"></div>
      <div class='icon' style="top: 270px; left: 560px"></div>
      <div class='icon' style="top: 370px; left: 360px"></div>

Open in new window


#container {
  position: relative;
.map {
  position: absolute;
  background: url();
.icon {
  position: absolute;
  width: 42px;
  height: 44px;
  background-image: url(http://webdesignledger.com/wp-content/uploads/2009/11/icons_09_6.jpg);
  background-position: -15px -20px;

Open in new window

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.


Author Comment

ID: 39661065
I've requested that this question be closed as follows:

Accepted answer: 0 points for HLRosenberger's comment #a39636999

for the following reason:

LVL 43

Expert Comment

ID: 39661066
I think this was a mistake?

Author Closing Comment

ID: 39661080
Yes, my mistake.   Sorry!   And Thanks!

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Parsing a CSV file is a task that we are confronted with regularly, and although there are a vast number of means to do this, as a newbie, the field can be confusing and the tools can seem complex. A simple solution to parsing a customized CSV fi…
With just a little bit of  SQL and VBA, many doors open to cool things like synchronize a list box to display data relevant to other information on a form.  If you have never written code or looked at an SQL statement before, no problem! ...  give i…
How can you see what you are working on when you want to see it while you to save a copy? Add a "Save As" icon to the Quick Access Toolbar, or QAT. That way, when you save a copy of a query, form, report, or other object you are modifying, you…
Suggested Courses
Course of the Month11 days, 3 hours left to enroll

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question