Introduction
Today we had a funny task for our company internal Google Maps powered system. We should show simple geo markers on a map, having specific colors. So our designer created markers for three colors. However, we needed markers for a lot of more colors, which an admin can configure. So should we let our designer draw a geo marker every time an admin adds new colors?
We found a more elegant way how to solve that little problem:
Idea
We need an API which produces an image containing a geo marker. A basic idea would be to control colors using GET parameters, such as marker.png?color=ff0000
, or include the color in the image name, like marker-ff0000.png
.
Another task was, to have the color of the inner dot of the marker stating ‘online’, ‘offline’, or something different. For example green for ‘online’ and red for ‘offline’.
So we built a Spring Boot application with a single controller action called marker-{fillColor}-{state}-{scale}.png
, which draws and outputs an image. A few notes on the convention:
- we don’t use a leading dash (#) in
fillColor
, as that is a URI specific char state
can be ‘online’ for green, ‘offline’ for red, or yellow for all other values- scale is an integer factor which is applied to all sizes. The default image height should be 30x40.
Implementation
First, we use start.spring.io (or the corresponding project initializer in IntelliJ) to generate a simple Spring Boot Application
Returning images in Spring Boot
Usually we can specify a return type of an controller action like this
1 2 3 4 |
|
However, given the case, we want to return a PNG image, we don’t return anything, but write our content to the output buffer stream of our response by:
1 2 3 4 5 |
|
Draw graphics in Java
For this simple task, we didn’t use any third party image library, but used only Java native tools like java.awt.image.BufferedImage
and java.awt.Graphics2D
.
Using Graphics2D
, we built our geo marker generator using the following controller action:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
|
We used a simple quadratic curve to make a round bottom corner. The resulting API can now produce images like these:
calling marker-012345-online.png
will produce
calling marker-ff5555-online-10.png
will produce
Conclusion
This is my first article since a very long time, in particular about Java and Spring Boot. It was a funny little project on this very hot day at work (33 °C are not easy!!), and I hope someone might find this useful.
Cheers