Using a custom image as the base map for the ADF DVT Thematic Map component, such as is supported as of release 12.1.3, is very interesting. Visualization is extremely powerful for conveying complex aggregated information. Using maps to associate information with particular locations – using shape, color, size as well – is very valuable. Being able to not only use a geographical map but any image (with sensibly identifiable locations) is even better.
Creating the custom base map with the Thematic Map component is quite easy. See for example this article for a demonstration: https://technology.amis.nl/2014/08/17/adf-dvt-creating-a-thematic-map-using-a-custom-base-map-with-hotspots/ .There really is only one inconvenience along the way: the creation of an XML file that describes the custom map (image) and the hotspots for associating markers with. That is not necessarily very hard to do, but it takes some time and effort and is error prone.
To overcome that (small) obstacle, I have created a simple tool – a custom base map file editor. It runs as an ADF Web application. An image file is uploaded to it. The image is displayed and the user can click on all the hotspots on the image. Meanwhile, the XML file is composed.
Here is a visual example of the use of the tool:
Download an image that you want to use as a custom base map:
Run the custom base map editor tool. Upload the image to be used:
click on the button Process Image.
The image is now displayed in the browser.
The user can click on the relevant locations on the image. The tool identifies the hotspots from the mouse clicks and creates the custom XML file in the code editor component.
You can edit the contents of the code editor, for example to provide the values for the longLabel attribute.
The contents of the code editor can be copied and pasted into the custom XML file. You will only have to change the file reference to point to the correct local directory.
Resources
You will find the sources for this tool in GitHub at: https://github.com/lucasjellema/adf_dvt_12_1_3_custom_basemap_hotspot-editor. The sources constitute a JDeveloper application. Two Java classes, a JSF file and JavaScript library make up the custom base map editor.
Steps to get going:
- Clone this repository or download the zip-file and expand locally
- Open the CustomBaseMapEditor.jws file in JDeveloper 12.1.3 (or higher)
- Identify a local directory that you will use for holding the image files
- Configure that local image directory in class FileHandler (public final static String imageDirectory)
- Run custom-basemap-editor.jsf
- When the page opens, upload an image, press the button Process File. The image is shown in the browser. Click on it to define hotspots; in the code editor you will find the custom base map xml required for the Thematic Map component
