GMapsFX 2.12.0 Released – Mac OSX Garbled Text Fixed!

/ rterp / Leave a comment

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.
Screen Shot 2017-03-29 at 2.15.45 PM

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!

 

Screen Shot 2016-03-18 at 3.40.46 PM

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.

 

Support for Clustered Markers

Added ability to cluster markers by utilizing the Google Maps Marker Clustering API.  https://developers.google.com/maps/documentation/javascript/marker-clustering

clusteredMarkers

Ability to Set Route Colors

Route colors can now be specified rather than having to rely on the default blue that Google Maps uses.

ColorRoute

 

 

Garbled Text in GMapsFX on Mac OSX

/ rterp / Leave a comment

 

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.

 

Screen Shot 2017-03-29 at 2.15.45 PM

 

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.

Screen Shot 2017-03-01 at 5.09.09 PM.png

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.

http://bugs.java.com/bugdatabase/view_bug.do?bug_id=JDK-8088205

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.

 

 

Get the Lat/Long of a Mouse Click in a GMapsFX Map

/ rterp / 2 Comments

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.


GoogleMap map = googleMapView.createMap(mapOptions, false);
map.addMouseEventHandler(UIEventType.click, (GMapMouseEvent event) -> {
LatLong latLong = event.getLatLong();
System.out.println("Latitude: " + latLong.getLatitude());
System.out.println("Longitude: " + latLong.getLongitude());
});

view raw

LatLong.java

hosted with ❤ by GitHub

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.

 

latlongscreenshot.png

 

Help! How do I Ship my Freight? Ask the Machine.

/ rterp / Leave a comment

Problem: Lynden, Inc. a freight and logistics company owns a number of operating companies that ship via different modes of transport (air, truck, sea), and also specialize in shipping different types of commodities.  How do I, as a customer know which Lynden company to call if I want to have something shipped? Below is a table of a few of our operating companies, with the company abbreviation (referenced later in this post), and how each company moves their freight.

 

Company Abbreviation Mode of Transport
Alaska Marine Lines AML Sea
Lynden International LINT Air
Lynden Air Cargo LAC Air
Alaska West Express AWE Truck
Lynden Transport LTIA Truck
LTI, Inc. LTII Truck

Currently there is a single number that a customer can call to get directed to the appropriate company that can move the freight.  However this has proved to be a somewhat error prone process as there are a number of exception cases that can dictate which company can move the freight, such as is it oversized, or hazmat.

I wanted to see if we could gain any insight to this problem by looking at our historical shipments and possibly use various attributes about a shipment itselfto make an accurate recommendation as to which company to call.  This boils down to a classification problem, ie how do we classify the company that ships the freight based on attributes that the customer tells us about their freight?  Classification problems are one of the areas where machine learning has been applied extensively over the last few years.

There are dozens and dozens of attributes related to our shipments which could be used to feed into a machine learning model, but to keep things simple for this experiment I chose to use the freight description field. If the customer could give a description of their freight to a predictive model, could it properly suggest which company should ship it?  The exercise would be to see if there was any predictive power at all with the description field, and if so, additional fields could potentially be added to refine the model further.

I obtained data from 50,000 historical shipments which included a short description of the goods being shipped and the abbreviation of the company that shipped the goods.  I imported this data into R Studio for analysis.

data

 

There are a number of different machine learning models to choose from for classification problems.  I selected the Naive Bayes model which is the same model that most spam filters use to classify email  as spam based on the words within the email.

Out of curiosity I decided to use R to create a word cloud of common terms for a few of the companies just to see what pops out.   The first cloud below is common words found in the descriptions of freight shipped with Alaska Marine Lines (AML).

amlplot

 

The word cloud below was generated for freight shipped with Lynden International (LINT).
lintplot

Finally, the last cloud is for freight that was shipped with LTI, Inc. (LTII), with an interesting combination of commodities which were returned.  Hopefully the same tankers that are being used to ship sulfur are also not being used to ship wine!
ltiiplot

Next it was time to train the model.  I took 40,000 of the records and submitted it to a Naive Bayes model that I had configured in R.  This would give the model a chance to look at the terms in each shipment, and associate it with the company that shipped the freight, hopefully finding commonalities that it could use when it needed to predict the company based on the description.

I then took the remaining 10,000 records and had the model guess which company shipped the goods based solely on the freight description.  I then tabulated the accuracy of the model’s 10,000 predictions.

The table below illustrates what percent of the time the model selected the correct company given the description of the freight.

  • AML:  95%
  • AWE:  94%
  • LTII:   94%
  • LTIA:  83%
  • LAC:   52%

I was quite surprised by the accuracy of the results given that just one attribute of the shipment data was being used by the model.  LAC is the big outlier, and freight that should have been classified as LAC was most commonly misclassified as LINT.  Likewise freight that should have been classified as LTIA was most commonly misclassified as AML.

The next step would be to take a look at some of the other attributes of the freight and see if we can further refine the model, by possibly using fields such as origin, destination, weight, etc.

If you are curious about the R code that I wrote to perform this experiment I have included it below.


install.packages("tm")
install.packages("e1071")
install.packages("gmodels")
install.package""
library(tm)
library(e1071)
library(gmodels)
library(wordcloud)
set.seed(123)
shipment.data.all <- read.table( "ShipmentsDescOnly.csv", sep="|", header=TRUE, stringsAsFactors = FALSE)
#Shuffle the shipments up so they aren't in any particular order.
shipment.data.all <- shipment.data.all[sample(nrow(shipment.data.all)),]
shipment.data.all$CompanyAbbreviation <- factor(shipment.data.all$CompanyAbbreviation)
# Build a word cloud for each company
aml <- subset(shipment.data.train, CompanyAbbreviation == "AML")
lint <- subset(shipment.data.train, CompanyAbbreviation == "LINT")
ltia <- subset(shipment.data.train, CompanyAbbreviation == "LTIA")
awe <- subset(shipment.data.train, CompanyAbbreviation == "AWE")
ltii <- subset(shipment.data.train, CompanyAbbreviation == "LTII")
lac <- subset(shipment.data.train, CompanyAbbreviation == "LAC")
wordcloud(aml$ShortDescription, max.words = 40, scale = c(3,0.5))
wordcloud(lint$ShortDescription, max.words = 40, scale = c(3,0.5))
wordcloud(ltia$ShortDescription, max.words = 40, scale = c(3,0.5))
wordcloud(awe$ShortDescription, max.words = 40, scale = c(3,0.5))
wordcloud(ltii$ShortDescription, max.words = 40, scale = c(3,0.5))
wordcloud(lac$ShortDescription, max.words = 40, scale = c(3,0.5))
#Cleanup the description fields remove numbers, punctuation etc.
corpus <- Corpus(VectorSource(shipment.data.all$ShortDescription))
corpus.clean <- tm_map(corpus, content_transformer(tolower))
corpus.clean <- tm_map(corpus.clean, removeNumbers)
corpus.clean <- tm_map(corpus.clean, removeWords, stopwords())
corpus.clean <- tm_map(corpus.clean, removePunctuation)
corpus.clean <- tm_map(corpus.clean, stripWhitespace)
document.term.matrix <- DocumentTermMatrix(corpus.clean)
#Break the data set into a training set containing 80% of the data, and a test set with the remaining.
training.set.size <- floor(0.80 * nrow(shipment.data.all))
training.index <- sample(seq_len(nrow(shipment.data.all)), size = training.set.size)
shipment.data.train <- shipment.data.all[training.index, ]
shipment.data.test <- shipment.data.all[-training.index, ]
#Get the data in a format the model can understand.
dtm.train <- document.term.matrix[training.index,]
dtm.test <- document.term.matrix[-training.index,]
corpus.train <- corpus.clean[training.index]
corpus.test <- corpus.clean[-training.index]
shipment.dict <- c(findFreqTerms(dtm.train,5))
convert_counts <- function(x) {
x <- ifelse(x > 0, 1, 0)
x <- factor(x, levels = c(0,1), labels = c("No", "Yes"))
return(x)
}
shipments.train <- DocumentTermMatrix(corpus.train, list(dictionary=shipment.dict))
shipments.test <- DocumentTermMatrix(corpus.test, list(dictionary=shipment.dict))
shipments.train <- apply(shipments.train, MARGIN = 2, convert_counts)
shipments.test <- apply(shipments.test, MARGIN = 2, convert_counts)
#Train the model with the training data.
model <- naiveBayes(shipments.train, shipment.data.train$CompanyAbbreviation)
#See how well the model predicts based on the test data.
prediction <- predict(model, shipments.test)
#Print the results of the prediction
CrossTable(prediction, shipment.data.test$CompanyAbbreviation, prop.chisq = FALSE, prop.t = FALSE, dnn = c('predicted', 'actual'))

view raw

BayesScript.R

hosted with ❤ by GitHub

 

Why You Shouldn’t Use Complex Objects as HashMap Keys

/ rterp / 2 Comments

I’m a big believer in learning from my mistakes, but I’m an even bigger believer in learning from other people’s mistakes.  Hopefully someone else will be able to learn from my mistakes.

mistakes

 

This post is inspired by an issue that took me a number of days to track down and pin point the root cause.  It started with NullPointerExceptions randomly be thrown in one of my applications.  I wasn’t able to consistently replicate the issue, so I added an indiscriminate amount of logging to the code to see if I could track down what was going on.

What I found was that when I was attempting to pull a value out of a particular hashmap, the value would sometimes be Null, which was a bit puzzling because after initializing the map with the keys/values, there were no more calls to put(), only calls to get(), so there should have been no opportunity to put a null value in the map.

Below is a code snippet similar (but far more concise) to the one I had been working on.


public void runTest() {
ProductSummaryBean summaryBean = new ProductSummaryBean(19.95, "MyWidget", "Z332332", new DecimalFormat("$#,###,##0.00"));
ProductDetailsBean detailBean = getProductDetailsBean(summaryBean);
productMap.put(summaryBean, detailBean);
//Load the same summaryBean from the DB
summaryBean = loadSummaryBean("Z332332");
//Pull the detailBean from the map for the given summaryBean
detailBean = productMap.get(summaryBean);
System.out.println("DetailBean is: " + detailBean );
}

view raw

HashMapTest.java

hosted with ❤ by GitHub

There is a ProductSummaryBean with a short summary of the product, and a ProductDetailBean with further product details.  The summary bean is below and contains four properties.


package com.lynden.mapdemo;
import java.text.DecimalFormat;
import java.util.Objects;
public class ProductSummaryBean {
protected double price;
protected String name;
protected String upcCode;
protected DecimalFormat priceFormatter;
public ProductSummaryBean(double price, String name, String upcCode, DecimalFormat priceFormatter) {
this.price = price;
this.name = name;
this.upcCode = upcCode;
this.priceFormatter = priceFormatter;
}
public double getPrice() {
return price;
}
public String getName() {
return name;
}
public String getUpcCode() {
return upcCode;
}
public DecimalFormat getPriceFormatter() {
return priceFormatter;
}
@Override
public int hashCode() {
int hash = 7;
hash = 79 * hash + (int) (Double.doubleToLongBits(this.price) ^ (Double.doubleToLongBits(this.price) >>> 32));
hash = 79 * hash + Objects.hashCode(this.name);
hash = 79 * hash + Objects.hashCode(this.upcCode);
hash = 79 * hash + Objects.hashCode(this.priceFormatter);
return hash;
}
@Override
public boolean equals(Object obj) {
if (this == obj) {
return true;
}
if (obj == null) {
return false;
}
if (getClass() != obj.getClass()) {
return false;
}
final ProductSummaryBean other = (ProductSummaryBean) obj;
if (Double.doubleToLongBits(this.price) != Double.doubleToLongBits(other.price)) {
return false;
}
if (!Objects.equals(this.name, other.name)) {
return false;
}
if (!Objects.equals(this.upcCode, other.upcCode)) {
return false;
}
if (!Objects.equals(this.priceFormatter, other.priceFormatter)) {
return false;
}
return true;
}
@Override
public String toString() {
return "ProductBean{" + "price=" + price + ", name=" + name + ", upcCode=" + upcCode + ", priceFormatter=" + priceFormatter + '}';
}
}

view raw

ProductSummaryBean.java

hosted with ❤ by GitHub

 

Any guesses what happens when the code above is run?

Exception in thread "main" java.lang.NullPointerException
 at com.lynden.mapdemo.TestClass.runTest(TestClass.java:34)
 at com.lynden.mapdemo.TestClass.main(TestClass.java:50)

 

So what happened?  The HashMap stores its keys by using the hashcode of the key objects.  If we print out the hashcode when the ProductSummaryBean is first created and also after its read out of the DB we get the following.

SummaryBean hashcode before: -298224643
SummaryBean hashcode after: -298224679

 

We  can see that the hashcode before and after are different, so there must be something different about the two objects.

SummaryBean before: ProductBean{priceFormatter=java.text.DecimalFormat@67500, price=19.95, name=MyWidget, upcCode=Z332332}
SummaryBean after: ProductBean{priceFormatter=java.text.DecimalFormat@674dc, price=19.95, name=MyWidget, upcCode=Z332332}

 

Printing out the entire objects shows that while name, upc code, and price are all the same, the DecimalFormatter used for the price is different.  Since the DecimalFormatter is part of the hashcode() calculation for the ProductSummaryBean, the hashcodes between the before and after versions of the bean turned out different.  Since the hashcode was modified, the map was not able to find the corresponding ProductDetailBean which in turned caused the NullPointerException.

Now one may ask, should the DecimalFormat object in the bean been used as part of the equals() and hashcode() calculations?  In this case, probably not, but this may not be true in your case.  The safer way to go for the hashmap key would be to have used the product’s upc code as the HashMap key to avoid the danger of the keys changing unexpectedly.

 

 

 

 

 

How to Import the GMapsFX Component into SceneBuilder

/ rterp / Leave a comment

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.

screen-shot-2016-09-30-at-2-49-38-pm

 

 

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.

screen-shot-2016-09-30-at-2-52-03-pm

 

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”.

screen-shot-2016-09-30-at-2-52-24-pm

 

The GoogleMapView should be the only component available in the Jar file, select it and click the “Import Component” button.

screen-shot-2016-09-30-at-2-52-33-pm

 

Finally, you should get a confirmation that the library was imported into SceneBuilder.

screen-shot-2016-09-30-at-2-52-41-pm

 

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.

screen-shot-2016-09-30-at-2-52-50-pm

 

Feel free to tweet me at:  @RobTerpilowski with any questions.

 

Mapping Directions with JavaFX using the GMapsFX Directions API

/ rterp / 2 Comments

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.


<?xml version="1.0" encoding="UTF-8"?>
<?import com.lynden.gmapsfx.GoogleMapView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane id="AnchorPane" prefHeight="443.0" prefWidth="711.0" xmlns:fx="http://javafx.com/fxml/1&quot; xmlns="http://javafx.com/javafx/8.0.65&quot; fx:controller="com.lynden.gmaps.directions.FXMLController">
<children>
<GoogleMapView fx:id="mapView" layoutX="-311.0" layoutY="-244.0" prefWidth="490.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
<TextField fx:id="fromTextField" prefHeight="27.0" prefWidth="222.0" promptText="From:" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="10.0" />
<TextField fx:id="toTextField" layoutX="10.0" layoutY="10.0" onAction="#toTextFieldAction" prefHeight="27.0" prefWidth="222.0" promptText="To:" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="50.0" />
</children>
</AnchorPane>

view raw

Scene.fxml

hosted with ❤ by GitHub

 

The result should look as follows:

Screen Shot 2016-08-19 at 2.56.27 PM

 

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.

 


public class FXMLController implements Initializable, MapComponentInitializedListener, DirectionsServiceCallback {
protected StringProperty from = new SimpleStringProperty();
protected StringProperty to = new SimpleStringProperty();
@FXML
protected GoogleMapView mapView;
@FXML
protected TextField fromTextField;
@FXML
protected TextField toTextField;

view raw

FXMLController.java

hosted with ❤ by GitHub

 

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.


@Override
public void initialize(URL url, ResourceBundle rb) {
mapView.addMapInializedListener(this);
to.bindBidirectional(toTextField.textProperty());
from.bindBidirectional(fromTextField.textProperty());
}

view raw

FXMLController.java

hosted with ❤ by GitHub

 

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.


@Override
public void mapInitialized() {
MapOptions options = new MapOptions();
options.center(new LatLong(47.606189, -122.335842))
.zoomControl(true)
.zoom(12)
.overviewMapControl(false)
.mapType(MapTypeIdEnum.ROADMAP);
GoogleMap map = mapView.createMap(options);
directionsService = new DirectionsService();
directionsPane = mapView.getDirec();
}

view raw

FXMLController.java

hosted with ❤ by GitHub

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.


@FXML
private void toTextFieldAction(ActionEvent event) {
DirectionsRequest request = new DirectionsRequest(from.get(), to.get(), TravelModes.DRIVING);
directionsService.getRoute(request, this, new DirectionsRenderer(true, mapView.getMap(), directionsPane));
}

view raw

FXMLController.java

hosted with ❤ by GitHub

 

Below is an example when the user enters directions from Seattle to Redmond

 

Screen Shot 2016-08-19 at 3.37.38 PM

That’s it!  For completeness I’ll include the full source code of the example below.

 

 

Scene.fxml


<?xml version="1.0" encoding="UTF-8"?>
<?import com.lynden.gmapsfx.GoogleMapView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane id="AnchorPane" prefHeight="443.0" prefWidth="711.0" xmlns:fx="http://javafx.com/fxml/1&quot; xmlns="http://javafx.com/javafx/8.0.65&quot; fx:controller="com.lynden.gmaps.directions.FXMLController">
<children>
<GoogleMapView fx:id="mapView" layoutX="-311.0" layoutY="-244.0" prefWidth="490.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
<TextField fx:id="fromTextField" prefHeight="27.0" prefWidth="222.0" promptText="From:" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="10.0" />
<TextField fx:id="toTextField" layoutX="10.0" layoutY="10.0" onAction="#toTextFieldAction" prefHeight="27.0" prefWidth="222.0" promptText="To:" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="50.0" />
</children>
</AnchorPane>

view raw

Scene.fxml

hosted with ❤ by GitHub

 

MainApp.java


package com.lynden.gmaps.directions;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class MainApp extends Application {
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("/fxml/Scene.fxml"));
Scene scene = new Scene(root);
scene.getStylesheets().add("/styles/Styles.css");
stage.setTitle("JavaFX and Maven");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}

view raw

FXMLController.java

hosted with ❤ by GitHub

 

FXMLController.java


package com.lynden.gmaps.directions;
import com.lynden.gmapsfx.GoogleMapView;
import com.lynden.gmapsfx.MapComponentInitializedListener;
import com.lynden.gmapsfx.javascript.object.*;
import com.lynden.gmapsfx.service.directions.*;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TextField;
public class FXMLController implements Initializable, MapComponentInitializedListener, DirectionsServiceCallback {
protected DirectionsService directionsService;
protected DirectionsPane directionsPane;
protected StringProperty from = new SimpleStringProperty();
protected StringProperty to = new SimpleStringProperty();
@FXML
protected GoogleMapView mapView;
@FXML
protected TextField fromTextField;
@FXML
protected TextField toTextField;
@FXML
private void toTextFieldAction(ActionEvent event) {
DirectionsRequest request = new DirectionsRequest(from.get(), to.get(), TravelModes.DRIVING);
directionsService.getRoute(request, this, new DirectionsRenderer(true, mapView.getMap(), directionsPane));
}
@Override
public void directionsReceived(DirectionsResult results, DirectionStatus status) {
}
@Override
public void initialize(URL url, ResourceBundle rb) {
mapView.addMapInializedListener(this);
to.bindBidirectional(toTextField.textProperty());
from.bindBidirectional(fromTextField.textProperty());
}
@Override
public void mapInitialized() {
MapOptions options = new MapOptions();
options.center(new LatLong(47.606189, -122.335842))
.zoomControl(true)
.zoom(12)
.overviewMapControl(false)
.mapType(MapTypeIdEnum.ROADMAP);
GoogleMap map = mapView.createMap(options);
directionsService = new DirectionsService();
directionsPane = mapView.getDirec();
}
}

view raw

FXMLController.java

hosted with ❤ by GitHub

GMapsFX 2.0.9 Released

/ rterp / 4 Comments

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.

 

Screen Shot 2016-08-05 at 4.26.39 PM.png

Mapping an Address with JavaFX using the GMapsFX Geocoding API

/ rterp / 2 Comments

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.


<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.control.*?>
<?import com.lynden.gmapsfx.GoogleMapView?>
<AnchorPane id="AnchorPane" prefHeight="500" prefWidth="750" xmlns:fx="http://javafx.com/fxml/1&quot; xmlns="http://javafx.com/javafx/8.0.65&quot; fx:controller="com.mycompany.gmapstestproject.FXMLController">
<children>
<GoogleMapView fx:id="mapView" prefHeight="500.0" prefWidth="700.0" AnchorPane.bottomAnchor="0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0" AnchorPane.topAnchor="0.0"/>
<TextField fx:id="addressTextField" onAction="#addressTextFieldAction" prefHeight="27.0" prefWidth="274.0" promptText="Address" AnchorPane.leftAnchor="10" AnchorPane.topAnchor="10" />
</children>
</AnchorPane>

view raw

Scene.fxml

hosted with ❤ by GitHub

 

The result should look as follows:

Screen Shot 2016-07-29 at 3.12.18 PM.png

 

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.

 


public class FXMLController implements Initializable, MapComponentInitializedListener {
@FXML
private GoogleMapView mapView;
@FXML
private TextField addressTextField;
private GoogleMap map;
private GeocodingService geocodingService;
private StringProperty address = new SimpleStringProperty();

view raw

FXMLController.java

hosted with ❤ by GitHub

 

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.


@Override
public void initialize(URL url, ResourceBundle rb) {
mapView.addMapInializedListener(this);
address.bind(addressTextField.textProperty());
}

view raw

FXMLController.java

hosted with ❤ by GitHub

 

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.


@Override
public void mapInitialized() {
geocodingService = new GeocodingService();
MapOptions mapOptions = new MapOptions();
mapOptions.center(new LatLong(47.6097, -122.3331))
.mapType(MapTypeIdEnum.ROADMAP)
.overviewMapControl(false)
.panControl(false)
.rotateControl(false)
.scaleControl(false)
.streetViewControl(false)
.zoomControl(false)
.zoom(12);
map = mapView.createMap(mapOptions);
}

view raw

FXMLController.java

hosted with ❤ by GitHub

 

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.


@FXML
public void addressTextFieldAction(ActionEvent event) {
geocodingService.geocode(address.get(), (GeocodingResult[] results, GeocoderStatus status) -> {
LatLong latLong = null;
if( status == GeocoderStatus.ZERO_RESULTS) {
Alert alert = new Alert(Alert.AlertType.ERROR, "No matching address found");
alert.show();
return;
} else if( results.length > 1 ) {
Alert alert = new Alert(Alert.AlertType.WARNING, "Multiple results found, showing the first one.");
alert.show();
latLong = new LatLong(results[0].getGeometry().getLocation().getLatitude(), results[0].getGeometry().getLocation().getLongitude());
} else {
latLong = new LatLong(results[0].getGeometry().getLocation().getLatitude(), results[0].getGeometry().getLocation().getLongitude());
}
map.setCenter(latLong);
});
}

view raw

FXMLController.java

hosted with ❤ by GitHub

 

Below is an example when the user enters New York City as the address.

Screen Shot 2016-07-29 at 4.27.56 PM

 

That’s it!  For completeness I’ll include the full source code of the example below.

 

 

Scene.fxml


<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.control.*?>
<?import com.lynden.gmapsfx.GoogleMapView?>
<AnchorPane id="AnchorPane" prefHeight="500" prefWidth="750" xmlns:fx="http://javafx.com/fxml/1&quot; xmlns="http://javafx.com/javafx/8.0.65&quot; fx:controller="com.mycompany.gmapstestproject.FXMLController">
<children>
<GoogleMapView fx:id="mapView" prefHeight="500.0" prefWidth="700.0" AnchorPane.bottomAnchor="0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0" AnchorPane.topAnchor="0.0"/>
<TextField fx:id="addressTextField" onAction="#addressTextFieldAction" prefHeight="27.0" prefWidth="274.0" promptText="Address" AnchorPane.leftAnchor="10" AnchorPane.topAnchor="10" />
</children>
</AnchorPane>

view raw

Scene.fxml

hosted with ❤ by GitHub

 

MainApp.java


package com.mycompany.gmapstestproject;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class MainApp extends Application {
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("/fxml/Scene.fxml"));
Scene scene = new Scene(root);
stage.setTitle("JavaFX Geocode Example");
stage.setScene(scene);
stage.show();
}
/**
* The main() method is ignored in correctly deployed JavaFX application.
* main() serves only as fallback in case the application can not be
* launched through deployment artifacts, e.g., in IDEs with limited FX
* support. NetBeans ignores main().
*
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}

view raw

MainApp.java

hosted with ❤ by GitHub

 

FXMLController.java


package com.mycompany.gmapstestproject;
import com.lynden.gmapsfx.GoogleMapView;
import com.lynden.gmapsfx.MapComponentInitializedListener;
import com.lynden.gmapsfx.javascript.object.*;
import com.lynden.gmapsfx.service.geocoding.GeocoderStatus;
import com.lynden.gmapsfx.service.geocoding.GeocodingResult;
import com.lynden.gmapsfx.service.geocoding.GeocodingService;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Alert;
import javafx.scene.control.TextField;
public class FXMLController implements Initializable, MapComponentInitializedListener {
@FXML
private GoogleMapView mapView;
@FXML
private TextField addressTextField;
private GoogleMap map;
private GeocodingService geocodingService;
private StringProperty address = new SimpleStringProperty();
@Override
public void initialize(URL url, ResourceBundle rb) {
mapView.addMapInializedListener(this);
address.bind(addressTextField.textProperty());
}
@Override
public void mapInitialized() {
geocodingService = new GeocodingService();
MapOptions mapOptions = new MapOptions();
mapOptions.center(new LatLong(47.6097, -122.3331))
.mapType(MapTypeIdEnum.ROADMAP)
.overviewMapControl(false)
.panControl(false)
.rotateControl(false)
.scaleControl(false)
.streetViewControl(false)
.zoomControl(false)
.zoom(12);
map = mapView.createMap(mapOptions);
}
@FXML
public void addressTextFieldAction(ActionEvent event) {
geocodingService.geocode(address.get(), (GeocodingResult[] results, GeocoderStatus status) -> {
LatLong latLong = null;
if( status == GeocoderStatus.ZERO_RESULTS) {
Alert alert = new Alert(Alert.AlertType.ERROR, "No matching address found");
alert.show();
return;
} else if( results.length > 1 ) {
Alert alert = new Alert(Alert.AlertType.WARNING, "Multiple results found, showing the first one.");
alert.show();
latLong = new LatLong(results[0].getGeometry().getLocation().getLatitude(), results[0].getGeometry().getLocation().getLongitude());
} else {
latLong = new LatLong(results[0].getGeometry().getLocation().getLatitude(), results[0].getGeometry().getLocation().getLongitude());
}
map.setCenter(latLong);
});
}
}

view raw

FXMLController.java

hosted with ❤ by GitHub

GMapsFX 2.0.7 Released

/ rterp / 3 Comments

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.

 

Screen Shot 2016-05-20 at 2.25.33 PM