Guides
Guides

Get started with the Embedded Editor

To use the Embedded Editor, you need to embedded it either as an iframe component in your web page where you host HERE maps or as a view in your application.

Add the Embedded Editor to a website

You can use an iframe to add the Embedded Editor to a website, The following codeblock provides an iframe that references the Embedded Editor:

<iframe 
    width="600"
    height="500"
    src="https://mapfeedback.here.com?app_id=\{YOUR_APP_ID}&
    app_code={YOUR_APP_CODE}&[attribute=value]">
</iframe>

You can use the query parameters to customize the behavior of the iframe to match your design patterns.

Add the Embedded Editor as a WebView Component

When you use the Embedded Editor in an Android or iOS application, you can either launch the mobile device browser to load the reporting page or use the Android component WebView or iOS component WKVebView. In either case, construct the URL passed to the mobile device browser or WebView/WKVebView based on how you want the user to interact with the Embedded Editor. You need to add the relevant app_id and app_code credentials to the URL in order to use the service.

To launch a browser from an Android device, use the method startBrowser() in MainActivity as follows:

String feedbackUrl = "https://mapfeedback.here.com/";

    // use a view intent on the URL to open the default browser
    Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(feedbackUrl));
    startActivity(browserIntent);

The following steps create an example implementation that illustrates one way to use the Android component WebView. If you are using an iOS application, create the functional equivalent for iOS.

  1. In the application AndroidManifest.xml file, enable the correct permissions as follows:

    <uses-permission android:name="android.permission.INTERNET"/>
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  2. Configure the WebView to enable JavaScript and Geolocation capabilities as follows:

    // make sure we're properly set up to do JavaScript and Geolocation
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setGeolocationEnabled(true);
        webSettings.setGeolocationDatabasePath( this.getFilesDir().getPath());
        //cache the geolocation data
  3. Configure the WebView to handle all URLs in the application as follows:

    // We want the WebView to take care of all URLs and not open a browser
        myWebView.setWebViewClient(new WebViewClient() {
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return (false);
        }
        });

    The URL passed to WebView should be constructed to create the correct user experience.

  4. Set up the Back button as follows:

    // we want the back button to work properly inside the widget
        @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
    
        // unless we have submitted properly, 'back' takes us back a page in the WebView
        if(!myWebView.getUrl().contains("#/submit")) {
        myWebView.goBack();
        return true;
        }
        }
        return super.onKeyDown(keyCode, event);
        }
  5. Implement logic to completely close the Activity when the URL contains a "#/submit" as this is when the user has submitted a feedback request.