java tutorials: Maps

Showing posts with label Maps. Show all posts

Tuesday, February 12, 2013

Obtain API Key for Google Maps API v3

All Maps API applications* should load the Maps API using an API key ~ https://developers.google.com/maps/documentation/javascript/tutorial.

The steps are shown here:

- Visit Google APIs Console (you have to login with your Google account).

- Create a new API Project.

- Enter the name to your project.

- Enable the Google Maps API V3.

- Accept these terms.

- Make sure to select the Project in the left, and select API Access, you can copy the API Key to your application.

Related article:
- Embed Google Maps API v3 in JavaFX WebView.

Embed Google Maps API v3 in JavaFX WebView

Note:

In order to use Google Maps API v3 in your application, you have to obtain API Key. Read here: Obtain API Key for Google Maps API v3.
In the current version, it seem that there are problem in mouse gesture action on Map; you cannot plan on the may.

package javafxgooglemaps;

import java.net.URL;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFXGoogleMaps extends Application {
    
    private Scene scene;
    MyBrowser myBrowser;
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("java-buddy.blogspot.com");
        primaryStage.setWidth(400);
        primaryStage.setHeight(300);
        myBrowser = new MyBrowser();
        scene = new Scene(myBrowser, 400, 300);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
    
    class MyBrowser extends Region {
        HBox toolbar;
        
        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        
        
        public MyBrowser(){
         
            final URL urlGoogleMaps = getClass().getResource("GoogleMapsV3.html");
            webEngine.load(urlGoogleMaps.toExternalForm());
            webEngine.setJavaScriptEnabled(true);
            
            getChildren().add(webView);
         
      }
    }
}

Create a html file, GoogleMapsV3.html.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=< your API Key >&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:400px; height:300px"></div>
  </body>
</html>

Wednesday, May 30, 2012

Embed WebView in FXML, to load OpenLayers with OpenStreetMap.

Last article demonstrate how to "Embed OpenLayers with OpenStreetMap in JavaFX WebView". This article demonstrate how to do it in FXML.

New a JavaFX FXML Application in NetBeans.

Copy openstreetmap.html from last article.

Create MyBrowser.java, extends Region.

package javafxml_web;

import java.net.URL;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class MyBrowser extends Region{
        HBox toolbar;

        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        
        public MyBrowser(){
            
            final URL urlGoogleMaps = getClass().getResource("openstreetmap.html");
            webEngine.load(urlGoogleMaps.toExternalForm());
            
            getChildren().add(webView);
        
        }
}

Modify Sample.fxml to add MyBrowser, and remove un-used elements.

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafxml_web.*?>

<AnchorPane id="AnchorPane" prefHeight="500" prefWidth="660" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxml_web.Sample">
    <children>
        <MyBrowser id="mybrowser" layoutX="10" layoutY="10" prefHeight="460" prefWidth="620" fx:id="mybrowser" />
    </children>
</AnchorPane>

Modify Sample.java to remove un-used code.

package javafxml_web;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class Sample implements Initializable {
    
    @FXML
    private MyBrowser mybrowser;
    
    @FXML
    private void handleButtonAction(ActionEvent event) {

    }
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    
    
}

Embed OpenLayers with OpenStreetMap in JavaFX WebView

OpenLayers makes it easy to put a dynamic map in any web page. With OpenStreetMap, it's a free replacement of Google Maps. We can embed WebView loaded with OpenLayers in JavaFX to display map.

Create a HTML file, openstreetmap.html. Actually it's a normal web page HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
 <script type="text/javascript" >
  var myMap;
   
  function loadOpenLayers(){  
   
   myMap = new OpenLayers.Map("mymap", {});
    
   var wms = new OpenLayers.Layer.WMS(
    "OpenLayers WMS",
    "http://vmap0.tiles.osgeo.org/wms/vmap0",
    {layers: "basic"},
    {});
     
   myMap.addLayer(wms);
 
   myMap.setCenter(new OpenLayers.LonLat(-122.349243, 47.651743));
   myMap.zoomTo(6);   
  } 
  
 </script>
</head>
<body onload="loadOpenLayers();">
 <div id="mymap" style="width: 620px; height: 460px; border: 1px solid;">
 </div>
 
</body>
</html>

Java Code

package javafx_openstreetview;

import java.net.URL;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFX_OpenStreetView extends Application {
    
    private Scene scene;
    MyBrowser myBrowser;
    
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("java-buddy.blogspot.com");
        
        myBrowser = new MyBrowser();
        scene = new Scene(myBrowser, 640, 480);
        
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    class MyBrowser extends Region{
        
        HBox toolbar;

        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        
        public MyBrowser(){
            
            final URL urlGoogleMaps = getClass().getResource("openstreetmap.html");
            webEngine.load(urlGoogleMaps.toExternalForm());
            
            getChildren().add(webView);
        
        }
    }
}

Wednesday, March 28, 2012

Embed Google Maps in JavaFX WebView

The Google Maps Javascript API lets you embed Google Maps in your own web pages. With WebView in JavaFX 2.0, you can easy embed Google Maps in your Java application.

Create a googlemaps.html to embed Google Maps in web page.

<!DOCTYPE html>
<html>
<head>
<title>Java-Buddy: Google Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>#mapcanvas { height: 360px; width: 100%}</style>

<script>
var map;
function loadmap(){

  var options = {
      zoom: 16,
      center: new google.maps.LatLng(51.507222, -0.1275),
      mapTypeId: google.maps.MapTypeId.SATELLITE
  }
  map = new google.maps.Map(document.getElementById("mapcanvas"), options);
}

</script>

</head>
<body onload="loadmap()">
<h1>Java-Buddy: Google Maps</h1>
<div id="mapcanvas"></div>
</body>
</html>

Embed googlemaps.html in WebView in your Java application.

package javafx_googlemaps;

import java.net.URL;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebEvent;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_GoogleMaps extends Application {

  private Scene scene;
  MyBrowser myBrowser;

  /**
   * @param args the command line arguments
   */
  public static void main(String[] args) {
      launch(args);
  }

  @Override
  public void start(Stage primaryStage) {
      primaryStage.setTitle("java-buddy.blogspot.com");
    
      myBrowser = new MyBrowser();
      scene = new Scene(myBrowser, 640, 480);
    
      primaryStage.setScene(scene);
      primaryStage.show();
  }

  class MyBrowser extends Region{
    
      HBox toolbar;
    
      WebView webView = new WebView();
      WebEngine webEngine = webView.getEngine();
    
      public MyBrowser(){
        
          final URL urlGoogleMaps = getClass().getResource("googlemaps.html");
          webEngine.load(urlGoogleMaps.toExternalForm());

          getChildren().add(webView);
        
      }
    
  }
}