Example 3 : A simple Graph with Image Map

MapDemo.html
MapDemo.java

This is an example of how to add image maps to a DynamicImage

Set the hasMap parameter of DynamicImage to true
Map areas are added to the image in the paint method with the addMapArea(..) method of IPainterContext
Each area can have the following properties, that can be set with the corresponding setter methods of IPainterContext
- a tooltip
- javascript event handlers : onclick, ondblclick, onmouseover, onmouseout : see the js handler example
- a direct link : see the direct link example
See the next examples how to add JavaScript Handlers and/or DirectLink actions to the map.

Note

This is static documentation. The image below is just a screenshot. You can see this example live

MapDemo.html

			
<img jwcid="@sotacs:DynamicImage" hasMap="ognl:true"
       parameters="ognl:{100, 80, 150}"
          height="200" width="200" painter="painter:paintme" />

MapDemo.java

			
public abstract class MapDemo extends BasePage{
    
   public void paintme(Graphics2D g2d, IPainterContext context){
       // Enable antialiasing for shapes
       g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
       
       //white background
       g2d.setColor(Color.WHITE);
       g2d.fillRect(0,0, context.getWidth(), context.getHeight());

       //draw the time string
       g2d.setColor(Color.BLACK);
       g2d.drawString("produced " + new Date(), 0, 180);
       
       //draw a green triangle
       g2d.setColor(Color.GREEN);
       Polygon triangle = new Polygon(new int[]{130, 150, 170}, new int[]{0, 60, 0},3); 
       g2d.fill(triangle);
       //and declare the image map area
       MapArea area = new PolygonMapArea(triangle);
       area.setTooltip("This is a green triangle");
       context.addMapArea(area);
      
       //draw a black circle
       g2d.setColor(Color.BLACK);
       g2d.fillOval(0, 0, 60, 60);
       //... and declare the image map area
       area = new CircleMapArea(30,30,30);
       area.setTooltip("This is a black circle");
       context.addMapArea(area);
       
       
       //draw the 3 bars
       Color[] colors = new Color[]{Color.RED, Color.BLUE, Color.BLUE.darker()};
       Rectangle[] bars = new Rectangle[3];
       for (int i = 0; i < 3; i++) {
           int value = (Integer)context.getParameters()[i];
           g2d.setColor(colors[i]);
           bars[i] = new Rectangle(0, 80 + 30 * i, value, 20);
           g2d.fill(bars[i]);
           //... and declare the image map area
           area = new RectangleMapArea(bars[i]);
           area.setTooltip("results of 200" + i);
           context.addMapArea(area);
       }
    }
}