Icon on the fly

Dynamische Erzeugung von Bildern / Icons mit JSP

Für die Google Maps Karte in einem Routenplaner benötigte ich Ortsnamen und Marker. Da sich die Ortsnamen ständig ändern brauchte es ein Servlet welches ein PNG mit dem Ortsnamen liefert. Das Servlet wird als normales Bild mittels <img>-Tag eingebunden. Es können Parameter übergeben werden, die ins Bild geschrieben werden:

<img src="http://zrp.tournament.de/img/marker/
zrp_dyn_marker.jsp?text=Stuttgart, Krumme Str. 1">

Java Beispielcode (JSP):

 <%@ page import="java.io.*"%>
 <%@ page import="javax.servlet.*"%>
 <%@ page import="java.awt.*" %>
 <%@ page import="java.awt.Graphics"%>
 <%@ page import="java.awt.image.BufferedImage"%>
 <%@ page import="javax.imageio.ImageIO"%>

 <%
  String text = null;
  try {
      text = request.getParameter("text");
  } catch (Exception e) {
  }
  // breite, länge:
  int height = 41;
  int with = 260;
  // buffered image erstellen:
  BufferedImage bi = new BufferedImage(with, height, BufferedImage.TYPE_INT_ARGB);
  Graphics g = bi.createGraphics();
  g.setColor(new Color(0, 0, 0, 0));
  g.drawRect(0, 0, with, height);

  if (text != null) {
      // Hintergrund:
      g.setColor(new Color(255, 255, 255, 200));
      int withre = 10;
      withre = 9 + text.length() * 6;
      g.fillRoundRect(30, 9, withre, 12, 4, 4);
      g.setColor(new Color(10, 150, 10));
      g.drawRoundRect(29, 8, withre + 2, 14, 4, 4);
      // Text:
      g.setFont(new Font("Arial", Font.BOLD, 10));
      g.setColor(new Color(0, 0, 250));
      g.drawString(text, 33, 19);
  }

  // Response:
  response.setContentType("image/png");
  OutputStream os = response.getOutputStream();
  ImageIO.write(bi, "png", os);
  os.close();
  g.dispose();
 %>

Einbindung des Markers in Google Maps (javascript):

 function createTextMarker(point, Adresse) {
      var letteredIcon = new GIcon(baseIcon);
      letteredIcon.image = "img/marker/zrp_dyn_marker.jsp?text=" + Adresse;
      markerOptions = {
    icon:letteredIcon,
    draggable:false
    };
      var marker = new GMarker(point, markerOptions);
      return marker;
      }
 var textMarker = new createTextMarker(point2, "testadresse");
 map.addOverlay(textMarker);

Zu sehen gibts das auf zrp.tournament.de