Popups are a common way to add information to a map. They are an important tool but often rather ugly. Worse yet, they always obscure most of the map detail around their stubby little pointer. You then have to dismiss the popup to really understand how that location relates to the surroundng area — and all that useful information is gone. This may not be a problem in every situation but it certainly can be annoying.
OpenLayers is a popular and powerful Javascript library for producing complex web map applications. SpherAware uses it for everthing. Like most mapping environments, it provides a basic popup capability. It can be slightly modified if the developer chases down all the external styling rules and annotates their code correctly. This usually doesn't happen. There is also no way to change that stubby little pointer! It just is what it is.
OL-Balloon is SpherAware's solution for the ugly popup problem. We think it's a nice improvement and want to make it available for anyone to use in their OpenLayers applications (version 3 and above). It has a configurable pointer (length and width) and several unique behaviors. The style properties can also be set directly in the constructor so it is easy to use and manage.
Major Features:
This simple demo page shows OL-Balloon in action. Be sure to scroll down below the map to change its appearance and behavior. The page also includes sample code for the OL-Balloon constructor which can be easily copied into your project.
This download package includes a copy of the demo HTML page, the Javascript source code for OL-Balloon and a minified version for deployment with your application. OL-Balloon also requires jQuery. (Check the source code for details.)
SpherAware is here to help! We offer consulting and custom development services on projects of all sizes. GIS is our specialty and we know how to put your data on the map. Please call or contact us with your needs. You may also register on this site and leave your OL-Balloon comments below.