Wikitude
How can we help you today?
How can i customize POI marker With custom Layout
Wikitude Support
hola kedar
¿lograste personalizar el POI?
Estaría muy agradecido si compartes tu progreso.
Saludos
Wikitude Support
Hello Nicola,
thanks for your answer. The truth read and reviewed on several occasions the documentation and examples. It's a problem that has stuck me a long time ago.
I did the following:
marker.js:
function Marker(poiData) {
...
this.imgFondo = new AR.ImageDrawable(World.fondo, 2.5, {
zOrder: 0,
opacity: 0.0,
onClick: Marker.prototype.getOnClickTrigger(this)
});
...
this.markerObject = new AR.GeoObject(markerLocation, {
drawables: {
cam: [this.imgFondo, this.titleLabel, this.descriptionLabel],
indicator: this.directionIndicatorDrawable,
radar: this.radardrawables
}
});
}
reloading.js:
var World = {
...
for (var currentPlaceNr = 0; currentPlaceNr < poiData.length; currentPlaceNr++) {
var singlePoi = {
"id": poiData[currentPlaceNr].id,
"latitude": parseFloat(poiData[currentPlaceNr].latitude),
"longitude": parseFloat(poiData[currentPlaceNr].longitude),
"altitude": parseFloat(poiData[currentPlaceNr].altitude),
"title": poiData[currentPlaceNr].name,
"description": poiData[currentPlaceNr].description,
"fondo": poiData[currentPlaceNr].bg,
};
World.markerList.push(new Marker(singlePoi));
}
}
myjsondata.js
var datos = [{
"id": "1",
"latitude":"-1.1746043",
"longitude":"84.68826073",
"altitude":"923.45807",
"description":" textoooo ",
"bg": "new AR.ImageResource('assets/Sun-icon.png');"
}, {
"id": "2",
"latitude":"-33.4366262",
"longitude":"-70.6347541",
"altitude": "823.45807",
"description":"texxxxttttooo",
"bg": "new AR.ImageResource('assets/Earth-icon.png');"
} ];
The result is that no POI appears in the camera view, so what is the error?
I hope you can help me.
regards
Wikitude Support
Hello Romina,
So your problem is not that you cannot customize POIs but you cannot see any POI. As a first step, I would suggest you try our sample (exactly as we provide it with no further adjustment) and see if this is working for you. Then, please refer to this How To Guide regarding the GeoLocation class and modify your code accordingly.
Thanks
Eva
Hello Eva,
the examples provided by you, work correctly (I see the POI) my problem is when I want to modify the code and add an image to each POI, as it says above, Kedar.
Could you check the code I published in the previous post ?. I saw the link you sent and I understand how the POI is built. But I do not know what I'm doing wrong.
Thank you
Wikitude Support
If you want to change the style of how the POIs look like then this is a CSS issue. So what I would suggest you do is
- Copy our sample code where we load POIs (and make sure they are loaded correctly)
- Modify the css part so that you will have images there instead of our default layout. The part you need to adjust and define your own css style would be the following:
<!-- content of POI detail page, you may also add thumbnails etc. here if you like -->
<div data-role="content">
<!-- title -->
<h3 id="poi-detail-title"></h3>
<!-- description -->
<h4 id="poi-detail-description"></h4>
<!-- distance -->
<h4>Distance: <a id="poi-detail-distance"></a></h4>
</div>
Thanks
Eva
What you tell me, I had done a while ago. In my content panel, each POI shows an image, audio and text.
What I want to do is that in the view of the camera there are multiple POIs, where each POI has a different image.
(attached an image)
as well as the example of the solar system, but applied to the example reloading content. I insist on asking you guys, why I can not make it work.
Wikitude Support
What you need to do if define an ImageDrawable class for each photo and then associate this drawable with a GeoObject class. You can find more information here https://www.wikitude.com/external/doc/documentation/latest/Reference/JavaScript%20API/classes/GeoObject.html.
Thanks
Eva
Kedar Torase
we are building AR view using Wikitude API. we need to customize marker image with round edge . now we are using image.Resourece method to pass image to POI marker .