Start a new topic

Problems displaying information from imported Google Earth .kml files

Problems displaying information from imported Google Earth .kml files


Hello,

I'm actually working on publishing .kml files in Wikitude. I created the .kmz files in Google Earth. A small web page is embedded in each of them. In Google Earth, I can display this small web page and click on the links. The .kmz files are available here : http://www.valleeduvar.fr/index.php?page=visite_google_earth

I published in Wikitude the .kml files exported from Google Earth. The web page doesn't display in Wikitude. You can search for "Vallée du Var" in Wikitude app to see the result.

Does anyone know how to fix that ?

Thanks !

Hi,

The KML interface of Wikitude is very simple and supports only plain text. It will filter any HTML tags.

If you want more complex display options, consider using out JavaScript interface. You might wanna look specifically into HTMLDrawables.

Best,

Martin

Hello,

Thanks for the answer ! I looked at the API reference, pasted the example code in ht HTML snippet included in on reference point in my KML file between <script></script> tags, but it doesn't work. Is there an entire example code somewhere, including the declarations ?

Thanks !

Hi,

Did you check if there are any syntactical errors in the JavaScript code now? It is safer to link to a HTML file rather than to paste the HTML directly into the JavaScript file, since it avoids syntax errors. For example, you might have conflicting quotes or double-quotes from JavaScript and HTML.

An example for referencing a HTML file can be found here.

Best,

Martin

Hi,

 

Here's the code I tried. I passed an URL as webpage.

Nothing seems to work.

Can you tell me what I'm doing wrong ?

 

Thanks !

 

<html>

<head>

<link rel="stylesheet" href="http://www.valleeduvar.fr/css/general.css">

<link rel="shortcut icon" href="http://www.valleeduvar.fr/images/Logo_vallee_var_icone.png">

<link rel="apple-touch-icon" href="http://www.valleeduvar.fr/images/Logo_vallee_var_mini.png">

<link rel="apple-touch-icon-precomposed" href="http://www.valleeduvar.fr/images/Logo_vallee_var_mini.png">

</head>

 

<body style="background-color:white;">

<div class="patrimoine_littoral">

 

<script>

var weatherWidget = new AR.HtmlDrawable({

    uri: "http://fabien.nguyen.free.fr"

}, 0.25, {

    viewportWidth: 320,

    viewportHeight: 100,

    backgroundColor: "#FFFFFF",

    offsetX: +0.36,

    offsetY: 0.5,

    horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT,

    verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP,

    clickThroughEnabled: true,

    allowDocumentLocationChanges: false,

    onDocumentLocationChanged: function onDocumentLocationChangedFn(uri) {

        AR.context.openInBrowser(uri);

    }

});

var pageOne = new AR.Trackable2DObject(this.tracker, "pageOne", {

    drawables: {

        cam:

    }

});

</script>

</body>

</html>

Hi,

Am I assuming correctly that you are trying to run this HTML code in a web browser? In this case, it will not work, because our SDK does not run in the webbrowser.

You need to build an Android or iOS application to run the content. I suggest you familiarize yourself with the setup guides we have prepared for Android and iOS. They give step-by-step instructions how to setup your project.

Best,

Martin

Hi,

In fact, I don't. This HTML code in included in the KML file exported from Google Earth. In this software, I can click a reference point and display this small webpage. According to the HTMLdrawable API description, it should be possible in Wikitude too.

I understood I had to put the HTML code including the HTMLdrawable instructions in the KML file to make it work. But, it seems to be more complicated !

I don't want to develop my own app. I just want users to download the Wikitude App and display AR information.

So, how can it be done in Wikitude ?

Thanks !

Hi,

In general, you have 2 ways to achieve what you want:


Using KML. However, in this scenario, you cannot use any sophisticated HTML content, the KML interface only allows plain text. It will filter any content between HTML tags. It is intended for people who want to create something fast.

Using JavaScript. In this scenario, you are pretty flexible with rendering options (including HTMLDrawables). You still need to follow the setup guide (don't forget to include the architect://architect.js JavaScript in your HTML file, otherwise the Wikitude-specific library will not be loaded!), but you can skip the points where you set up an Android or iOS app. You just create the HTML and JavaScript files, and then publish in into the Wikitude App. You need to select "ARchitect" as the world time when you publish the world, so the application will know it contains JavaScript content.


You cannot combine the KML and the JavaScript approach.

Hope that helps!

Best,

Martin
Login or Signup to post a comment