The latest version of GMapsFX has been released and includes a major bug fix and a few enhancements.
Bug Fix
Last month I reported a bug that has been affecting users of GMapsFX on Mac OSX where the text appeared ‘garbled’. An example image is below.
The underlying issue is that the JavaFx WebView component on Mac OSX is rendering icons rather than letters for some websites, including Google Maps.
I receive a tweet from @ggeorgopoulos1 with a proposed work around that involves injecting CSS programatically into the page with the correct font. I’ve incorporated the code into the latest GMapsFX library and I am happy to say that it is working once again on Mac OSX!
Enhancements
Added a setKey() method to the GoogleMap compoment
This will allow a key to be set in the FXML and will eliminate the need to programatically set a key on the map object at runtime.
I have been receiving a lot of messages the last couple of months regarding the text in GMapsFX applications looking “garbled”, as illustrated in the screenshot below.
This is appears to only affect applications running on Mac OSX. GMapsFX makes use of the JavaFX WebView component under the hood, so I created a simple test app that loads Google Maps into a WebView to confirm the issue was the WebView component.
I filed a bug report with Oracle, but apparently this is a known issue that affects only some websites in WebView on Mac. Linux and Windows applications using the WebView component are unaffected.
The issue has been open for a couple of years now which leads me to think that a recent Mac update may be contributing to the problem becoming more widespread.
Unfortunately a fix for this won’t be available until Java 9, and there is no work around that I know of.
A new API has been created for mouse events in the GMapsFX API which will begin to make it easier to obtain information about mouse events occurring within the Google Map without having to interact with the underlying Javascript API.
So now getting the Lat/Long of a mouse click is a relatively straightforward process.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
We tell the map we want to add a click UI event listener and pass in an event handler which handles a GMapMouseEvent event object. From that object the latitude and longitude of the event can be determined.
Currently the Lat/Long are the only properties available on the GMapMouseEvent object, but additional properties will be added as demand warrants.
Below is a screenshot of one of the example applications included with the GMapsFX project that illustrates how to capture the lat/long of a mouse click.
I recently received a question regarding how to add the GMapsFX component to SceneBuilder, so it could be dragged and dropped onto the UI as its being constructed.
I thought I would address the question here since the good folks at Gluon have made it extremely easy to import custom components to SceneBuilder.
The first step is to click the small ‘gear’ icon just to the right of the Library search box and select the “JAR/FXML Manager” menu item from the popup menu.
Since the GMapsFX binaries are in the Maven Central repository SceneBuilder can directly download and install the component from there. Click the “Search repository” link in the Library Manager dialog box.
Next, enter “GMapsFX” into the Group or artifact ID text box, and click the “Search” button. You should get a search result with the com.lynden:GMapsFX artifact. Select the result and click “Add JAR”.
The GoogleMapView should be the only component available in the Jar file, select it and click the “Import Component” button.
Finally, you should get a confirmation that the library was imported into SceneBuilder.
At this point the GoogleMapView component should be visible in the “Custom” component section of the pallette, and ready to be dragged and dropped onto your UI. Due to the way the component is constructed, a map will not display in SceneBuilder or the SceneBuilder preview tool, but the proper FXML will be generated and the map will display when the program is run.
Feel free to tweet me at: @RobTerpilowski with any questions.
Mapping directions in a JavaFX application is easy with the Directions API that was recently introduced in GMapsFX. In this blog post I’ll walk through an example of setting up an application with a map and a couple of text fields, one which will be used for the trip origin and the second which will be used for the trip destination. When the user hits ‘Enter’ in the destination text field, the map will display the directions.
Starting off with the FXML file, we have an AnchorPane which contains the GoogleMapView and 2 TextFields. The AnchorPane has a controller assigned to it named FXMLController, and both components have an FX ID associated with them so they will be accessible from the FXMLController class. Also, the destination TextField has an action, “toTextFieldAction” associated with it, so this method will be called when the user hits the ‘Enter’ key in the TextField.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Next, I’ve cut up the relevant parts of the FXMLController class. The MapComponentInitializedListener interface needs to be implemented by the controller since the underlying GoogleMap doesn’t get initialized immediately. The DirectionsServiceCallback interface also needs to be implemented, although in this example I won’t be doing anything with it.
The GoogleMapView and the TextFields components from the FXML file are defined below and annotated with @FXML.
There is also a reference to the Directions Service as well as StringProperties to represent the ‘to’ and ‘from’ endpoints that the user will enter.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
After the controller is created, its initialize method is called which will set the MapView’s initialization listener to the FXMLController as well as bind the ‘to’ and ‘from’ String properties to the TextProperties of their respective TextFields.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Once the map has been initialized, the DirectionService can be instantiated as well as a MapOptions object to set various attributes about the map. The options are then configured and a GoogleMap object can be instantiated from the map view. The directionsPane is a component which can be used to render the step by step direction text, in this example however, it won’t be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Finally, the action method defined in the FXML file when the user hits ‘Enter’ in the TextField is below. The method will call the getRoute() method on the DirectionsService class, passing in a boolean value which will define whether the route can be modified by dragging it, the map object, and the DirectionsRequest object.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Below is an example when the user enters directions from Seattle to Redmond
That’s it! For completeness I’ll include the full source code of the example below.
Scene.fxml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
The latest version of GMapsFX has been released which contains a fix for a bug that was preventing the GoogleMapView component from being added as a custom component to SceneBuilder.
The fix will allow the MapView to be added as a custom component. In a future blog post I will detail how to do this.
Mapping an address in a JavaFX application is extremely easy with the Geocoding API that was recently introduced in GMapsFX. In this blog post I’ll walk through an example of setting up an application with a map and a text field. The map will recenter itself at whatever address or place the user types in the text field.
Starting off with the FXML file, we have an AnchorPane which contains the GoogleMapView and a TextField. The AnchorPane has a controller assigned to it named FXMLController, and both components have an FX ID associated with them so they will be accessible from the FXMLController class. Also, the TextField has an action, “addressTextFieldAction” associated with it, so this method will be called when the user hits the ‘Enter’ key in the TextField.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Next, I’ve cut up the relevant parts of the FXMLController class. The MapComponentInitializedListener interface needs to be implemented by the controller since the underlying GoogleMap doesn’t get initialized immediately. The GoogleMapView and TextField components from the FXML file are defined below and annotated with @FXML.
There is also a reference to the GeocodingService as well as a StringProperty to represent the address the user enters.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
After the controller is created its initialize method is called which will set the MapView’s initialization listener to the FXMLController as well as bind the address property to the address TextField’s text property.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Once the map has been initialized, the GeocodingService can be instantiated as well as a MapOptions object to set various attributes about the map. Once the options are configured, a GoogleMap object can be instantiated from the map view.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Finally, the action method defined in the FXML file when the user hits ‘Enter’ in the TextField is below. The method will call the geocode() method on the GeocodeService class, passing in the value of the Address property as well as a callback method.
The callback will check the status of the results, and based on the outcome, will recenter the map at the latitude/longitude the user had entered.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Below is an example when the user enters New York City as the address.
That’s it! For completeness I’ll include the full source code of the example below.
Scene.fxml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
A new version of GMapsFX has been released to bintray and Maven Central. The main feature in this version is to allow the use of custom marker/pin images, rather than relying on the default Google images.
A future blog post will demonstrate how to add custom markers to your GMapsFX application.
GMapsFX 2.0.5 has been released and is now available via bintray and maven central.
This version contains a major bugfix where the directions pane was always enabled. The framework has been updated to make the direction pane an option that can be toggled on or off at runtime as it is needed.
GMapsFX is a Java library that makes it extremely easy to add a Google Map to a JavaFX application.