event14/04/2022
First stable version of a JAVA wrapper which allow you to call YOUMAPS API in your JAVA project.
<repositories>
<repository>
<id>artifact-registry</id>
<url>artifactregistry://europe-west2-maven.pkg.dev/youmaps-api/maven-devoteam</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
</repositories>
<build>
<extensions>
<extension>
<groupId>com.google.cloud.artifactregistry</groupId>
<artifactId>artifactregistry-maven-wagon</artifactId>
<version>2.1.0</version>
</extension>
</extensions>
</build>
<dependencies>
<dependency>
<groupId>devoteam-youmaps</groupId>
<artifactId>java-sdk</artifactId>
<version>1.0.1</version>
</dependency>
</dependencies>
<!DOCTYPE html>
<html>
<head>
<title>Displaying Text Directions With setPanel()</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
display: flex;
}
#sidebar {
flex-basis: 15rem;
flex-grow: 1;
padding: 1rem;
max-width: 30rem;
height: 100%;
box-sizing: border-box;
overflow: auto;
}
#map {
flex-basis: 0;
flex-grow: 4;
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
padding: 5px;
font-size: 14px;
text-align: center;
line-height: 30px;
height: auto;
}
#map {
flex: auto;
}
#sidebar {
flex: 0 1 auto;
padding: 0;
}
#sidebar>div {
padding: 0.5rem;
}
</style>
</head>
<body>
<div id="floating-panel">
<strong>Start:</strong>
<select id="start">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
<br />
<strong>End:</strong>
<select id="end">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
</div>
<div id="container">
<div id="map"></div>
<div id="sidebar"></div>
</div>
<div style="display: none">
<div id="floating-panel">
<strong>Start:</strong>
<select id="start">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
<br />
<strong>End:</strong>
<select id="end">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
</div>
</div>
<script type="text/javascript">
let map;
let GGAPIKEY = '-- GOOGLE MAP API KEY --';
let YMAPIKEY = '-- YOUMAPS API KEY --';
let YMAPIURL = 'https://api.youmaps.fr';
function initMap() {
const directionsRenderer = new google.maps.DirectionsRenderer();
const directionsService = new google.maps.DirectionsService();
map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 41.881832,
lng: -87.623177
},
zoom: 6,
});
directionsRenderer.setMap(map);
directionsRenderer.setPanel(document.getElementById("sidebar"));
const control = document.getElementById("floating-panel");
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
const onChangeHandler = function () {
calculateAndDisplayRoute(directionsService, directionsRenderer);
};
document.getElementById("start").addEventListener("change", onChangeHandler);
document.getElementById("end").addEventListener("change", onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsRenderer) {
const start = document.getElementById("start").value;
const end = document.getElementById("end").value;
//https://developers.google.com/maps/documentation/javascript/directions
/*
{
origin: LatLng | String | google.maps.Place,
// origin=place_id:ChIJ3S-JXmauEmsRUcIaWtf4MzE
// origin=24+Sussex+Drive+Ottawa+ON
// origin=41.43206,-81.38992
destination: LatLng | String | google.maps.Place,
// destination=place_id:ChIJ3S-JXmauEmsRUcIaWtf4MzE
// destination=24+Sussex+Drive+Ottawa+ON
// destination=41.43206,-81.38992
travelMode: TravelMode,
transitOptions: TransitOptions,
drivingOptions: DrivingOptions,
unitSystem: UnitSystem,
waypoints[]: DirectionsWaypoint,
optimizeWaypoints: Boolean,
provideRouteAlternatives: Boolean,
avoidFerries: Boolean,
avoidHighways: Boolean,
avoidTolls: Boolean,
region: String
}
*/
var routeRequest = {
origin: start, //String representation of : LatLng | String | google.maps.Place see above
destination: end, //String representation of : LatLng | String | google.maps.Place see above
travelMode: google.maps.TravelMode.DRIVING, //'DRIVING'
//optimizeWaypoints: true,
/*
waypoints: [
{
location: 'Omaha',
stopover: false
},
{
location: 'Albuquerque',
stopover: true
}
]
*/
};
//CALL GOOGLE
//googleDirections(directionsService, directionsRenderer, routeRequest);
//OR
//CALL YOUMAPS
youmapsDirections(directionsRenderer, routeRequest);
}
function googleDirections(service, renderer, request){
var startTime = performance.now();
service
.route(request)
.then((response) => {
var endTime = performance.now();
console.log(`GOOGLE call : ${endTime - startTime} milliseconds`);
//console.log(JSON.stringify(response));
renderer.setDirections(response);
})
.catch((e) => window.alert("Directions request failed due to " + status));
}
function youmapsDirections(renderer, request){
var startTime = performance.now();
fetch(YMAPIURL+'/api/google/directions/js?key='+YMAPIKEY, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(request)
})
.then((response) => {
var endTime = performance.now()
console.log(`YOUMAPS call : ${endTime - startTime} milliseconds`);
return response.json()
})
.then((data) => {
display(renderer, data);
})
.catch((err) => {
console.error(err);
});
}
//Rendering the data
function display(renderer, data){
data["routes"] = camelCaseKeysToUnderscore(data.routes);
//With optional WAYPOINTS
if (data.geocodedWaypoints) {
data["geocode_waypoints"] = camelCaseKeysToUnderscore(data.geocodedWaypoints);
delete data.geocodedWaypoints;
}
//console.log(JSON.stringify(data));
renderer.setDirections(data);
}
//Function to convert map key from camelcase to snakeCase
function camelCaseKeysToUnderscore(obj){
if (typeof(obj) != "object") return obj;
for(var oldName in obj){
// Camel to underscore
newName = oldName.replace(/([A-Z])/g, function($1){return "_"+$1.toLowerCase();});
// Only process if names are different
if (newName != oldName) {
// Check for the old property name to avoid a ReferenceError in strict mode.
if (obj.hasOwnProperty(oldName)) {
obj[newName] = obj[oldName];
delete obj[oldName];
}
}
// Recursion
if (typeof(obj[newName]) == "object") {
obj[newName] = camelCaseKeysToUnderscore(obj[newName]);
}
}
return obj;
}
//Load Google Map
var scriptTag = document.createElement('script'); // create a script tag
scriptTag.setAttribute("defer", "");
scriptTag.setAttribute("async", "");
scriptTag.src = 'https://maps.googleapis.com/maps/api/js?key=' + GGAPIKEY + '&callback=initMap';
document.body.appendChild(scriptTag);
</script>
<script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
</body>
</html>package com.devoteam.youmaps;
import java.util.logging.Logger;
import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Order;
import org.junit.jupiter.api.Test;
import com.devoteam.youmaps.client.YoumapsApiRequest;
import com.google.maps.DirectionsApiRequest;
import com.google.maps.GeocodingApiRequest;
import com.google.maps.errors.ApiException;
import com.google.maps.model.DirectionsResult;
import com.google.maps.model.GeocodingResult;
import com.google.maps.model.TravelMode;
public class YoumapsAPITests {
static {
System.setProperty("java.util.logging.SimpleFormatter.format","[%1$tF %1$tT] [%4$-7s] %5$s %n");
}
private static Logger logger = Logger.getLogger(YoumapsAPITests.class.getSimpleName());
private static final String origin = "Boston,MA";
private static final String destination = "Concord,MA";
private static final String waypoints = "Charlestown,MA|via:Lexington,MA";
private static final String language = "fr";
private static final TravelMode mode = TravelMode.DRIVING;
private static final String address = "1600 Amphitheatre Parkway, Mountain View, CA";
private final String YM_API_KEY = "-- YOUMAPS API KEY --";
private YoumapsApiRequest youmapsApiRequest = new YoumapsApiRequest(YM_API_KEY);
@Test
@Order(1)
@DisplayName("directionsYouMapsAPI")
void directionsYouMapsAPI() {
DirectionsApiRequest directionsApiRequest = new DirectionsApiRequest(null);
directionsApiRequest.origin(origin);
directionsApiRequest.destination(destination);
directionsApiRequest.language(language);
directionsApiRequest.mode(mode);
DirectionsResult directionsResult = null;
try {
directionsResult = youmapsApiRequest.directions(directionsApiRequest);
Assertions.assertNotNull(directionsResult);
Assertions.assertNotNull(directionsResult.geocodedWaypoints);
Assertions.assertNotNull(directionsResult.routes);
/*
logger.info("-> NB WAYPOINTS : "+directionsResult.geocodedWaypoints.length);
Assertions.assertTrue(directionsResult.geocodedWaypoints.length == 2);
logger.info("-> NB ROUTES : "+directionsResult.routes.length);
Assertions.assertTrue(directionsResult.routes.length == 1);
DirectionsRoute directionsRoute = directionsResult.routes[0];
Assertions.assertTrue(directionsRoute.legs != null);
logger.info("-> DIR LEGS : "+directionsRoute.legs.length);
Assertions.assertTrue(directionsRoute.legs.length == 1);
Assertions.assertTrue(directionsRoute.legs[0].steps != null);
logger.info("-> DIR STEPS : "+directionsRoute.legs[0].steps.length);
Assertions.assertTrue(directionsRoute.legs[0].steps.length == 16);
*/
}catch (ApiException e) {
//e.printStackTrace();
Assertions.fail(e.getMessage());
}
}
@Test
@Order(2)
@DisplayName("geocodeYouMapsAPI")
void geocodeYouMapsAPI() {
GeocodingApiRequest geocodingApiRequest = new GeocodingApiRequest(null);
geocodingApiRequest.address(address);
GeocodingResult[] geocodingResult = null;
try {
geocodingResult = youmapsApiRequest.geocode(geocodingApiRequest);
Assertions.assertNotNull(geocodingResult);
/*
logger.info("-> NB WAYPOINTS : "+directionsResult.geocodedWaypoints.length);
Assertions.assertTrue(directionsResult.geocodedWaypoints.length == 2);
logger.info("-> NB ROUTES : "+directionsResult.routes.length);
Assertions.assertTrue(directionsResult.routes.length == 1);
DirectionsRoute directionsRoute = directionsResult.routes[0];
Assertions.assertTrue(directionsRoute.legs != null);
logger.info("-> DIR LEGS : "+directionsRoute.legs.length);
Assertions.assertTrue(directionsRoute.legs.length == 1);
Assertions.assertTrue(directionsRoute.legs[0].steps != null);
logger.info("-> DIR STEPS : "+directionsRoute.legs[0].steps.length);
Assertions.assertTrue(directionsRoute.legs[0].steps.length == 16);
*/
}catch (ApiException e) {
//e.printStackTrace();
Assertions.fail(e.getMessage());
}
}
}