How to Render Real-Time Realistic Views during Navigation using HERE SDK Navigate Edition

Complex junctions on a highway can be overwhelming. The signs and lanes can be confusing, making it difficult to determine which path to follow. What if your navigation app could provide you with a realistic views of the junction, showing you exactly which lane to choose and where to turn? With HERE SDK for Android (Navigate edition), you can make this happen. In this blog post, we'll guide you through implementing realisticViews signpost images and 3D junctionGuidance at complex junctions that can help drivers with turn-by-turn navigation including lane guidance at real-time.

If you are new to the HERE SDK product family, it includes the HERE SDK for Android, the HERE SDK for iOS, and the HERE SDK for Flutter which allows cross-platform development for iOS and Android from a single codebase. It consumes data from the HERE platform incorporating micro-services and highly modularized components. The Get Started page can guide you with getting your credentials, building an Android project and loading a map view. To further enhance the navigation experience of the application, follows the steps below.

How to Get Realistic Views for Signposts and Junction Views

1. Create RealisticViewWarningOptions object and set to VisualNavigator

Copied

        // Create RealisticViewWarningOptions object 

RealisticViewWarningOptions realisticViewWarningOptions = new RealisticViewWarningOptions(); 
 realisticViewWarningOptions.aspectRatio = AspectRatio.ASPECT_RATIO_3_X_4; 
 realisticViewWarningOptions.darkTheme = false; 
  
// Set object to visual navigator 
 visualNavigator.setRealisticViewWarningOptions(realisticViewWarningOptions);

2. Create listener to get SVG image content from the visual navigator to be notified on signposts together with complex junction views

Copied

        visualNavigator.setRealisticViewWarningListener(realisticViewWarning -> { 
     double distance = realisticViewWarning.distanceToRealisticViewInMeters; 
     DistanceType distanceType = realisticViewWarning.distanceType; 
  
    // Note that DistanceType.REACHED is not used for Signposts and junction views 
     // as a junction is identified through a location instead of an area. 
     if (distanceType == DistanceType.AHEAD) { 
         Log.d(TAG, "A RealisticView ahead in: "+ distance + " meters."); 
     } else if (distanceType == DistanceType.PASSED) { 
         Log.d(TAG, "A RealisticView just passed."); 
         showTemporaryDialog("Complex junction passed.", null); 
         return; 
     } 
  
    RealisticView realisticView = realisticViewWarning.realisticView; 
     if (realisticView == null) { 
         Log.d(TAG, "A RealisticView just passed. No SVG data delivered."); 
         return; 
     } 
     String signpostSvgImageContent = realisticView.signpostSvgImageContent; 
     String junctionViewSvgImageContent = realisticView.junctionViewSvgImageContent; 
     // Log.d("signpostSvgImage", signpostSvgImageContent); 
     // Log.d("junctionViewSvgImage", junctionViewSvgImageContent); 
  
     // Optionally, substitute missing fonts. 
     signpostSvgImageContent = postProcessSignpostSVGString(signpostSvgImageContent); 
  
    showRealisticViews(signpostSvgImageContent, junctionViewSvgImageContent, distance); 
 });

3. For replacing the necessary text that comes from HERE SDK, create another function called
“postProcessSignpostSVGString”

Copied

        // Optionally, replace the custom HERE font for Latin characters with metric-compatible substitutes. 
 // This can be used as fallback, when you do not have access to the HERE font package. 
 private String postProcessSignpostSVGString(String signpostSVG) { 
     signpostSVG.replace("SignTextNarrow", "ArialNarrow"); 
     signpostSVG.replace("SignText", "HelveticaLTStd"); 
     return signpostSVG; 
 }

4. Create new Function for converting the svgString to image view.
This Process requires an additional library, that needs to be added in gradle of android

Copied

        // Needed for realistic views rendering that are provided as SVG strings. 
 implementation 'com.caverock:androidsvg-aar:1.4' 

 
// Create function for creating the imageview for showing the image  
private ImageView createImageView(String svgString) { 
     SVG svg; 
     try { 
         svg = SVG.getFromString(svgString); 
     } catch (SVGParseException e) { 
         e.printStackTrace(); 
         return null; 
     } 
     PictureDrawable pictureDrawable = new PictureDrawable(svg.renderToPicture()); 
     ImageView imageView = new ImageView(MainActivity.this); 
     imageView.setImageDrawable(pictureDrawable); 
     return imageView; 
 }

5. Create a view to show as a dialog in the screen with FrameLayout

Copied

        private void showRealisticViews(String signpostSvgImageContent, String junctionViewSvgImageContent, double distance) { 
     ImageView signpostSvgImage = createImageView(signpostSvgImageContent); 
     ImageView junctionViewSvgImage = createImageView(junctionViewSvgImageContent); 
  
    if (signpostSvgImage == null || junctionViewSvgImage == null) { 
         throw new RuntimeException("Unexpectedly, the SVG string could not be parsed."); 
     } 
  
    // Draw the signpost image on top of the junction view image. 
     FrameLayout frameLayout = new FrameLayout(MainActivity.this); 
     frameLayout.addView(junctionViewSvgImage); 
     frameLayout.addView(signpostSvgImage); 
  
    // Attention: In a production-app, do not show a dialog to a driver. 
     // Instead, it is recommended to show this on a secondary display that resets 
     // automatically after some time to not distract the driver - or when the junction was passed. 
     showTemporaryDialog("Complex junction ahead in " + distance + " m.", frameLayout); 
 }

6. Show that view in a dialog for a small period of time

Copied

        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); 
 AlertDialog dialog = builder.setTitle(title) 
         .setView(view) 
         .create(); 
 dialog.show(); 
 // Show dialog for 5 second 
 long delayMillis = 5000; 
 new Handler(Looper.getMainLooper()).postDelayed(() -> dialog.dismiss(), delayMillis);

Conclusion and what's next?

The new HERE SDK for Android enables you to build powerful map applications. Bundled along with it are many HERE assets, available on Android for customers to integrate with their own apps.

Stay tuned for the upcoming blog where we will discuss how we can leverage HERE SDK to enable compass function logic which will listen to the device H/W motion sensors like Gyroscope or Magnetometer to update the azimuth value on the device motion and orientation.

Resources