Start a new topic

Android/iOS Wikitude PhoneGap Plugin - Custom POI CSS/styles

Android/iOS Wikitude PhoneGap Plugin - Custom POI CSS/styles

I've spent days searching Google, forums, everywhere for any direction but have not been able to find anything remotely close to answering my question or even giving any clues where to go from here so I am hoping that one of the wonderful community members would be able to assist me as this has been frustrating me for nearly a month trying to figure everything out. My question/problem is this: As directed by my boss at work, I was tasked with creating both an Android and an iOS Augmented Reality application. I decided that PhoneGap utilizing the Wikitude Plugin for PhoneGap would be the best solution for us due to it being minimally Java-based and primarily HTML/CSS/Javascript-based which is wonderful for our purpose since our Web Development department are at home with HTML, etc. Anyway, I digress.

After a large amount of confusion upon first downloading the Wikitude PhoneGap plugin, I was successfully able to get the foundation of our use down: using the Wikitude SDK's "POI From Web Service" to dynamically push out the POI markers to the device for the GPS locations around our campus (I work for a university) via a dedicated JSON URL sitting on our web server, so that part was very straightforward.

Now we come to the 3 big issues that I desperately need assistance with as they are the core functions necessary in our application.

1.) The university's campus is home to 30 buildings campus-wide. In our JSON file we have the coordinates for each of those 30 buildings..however, when I load the JSON data from our server on my Galaxy S3 test device even when I'm at home (3 miles from campus) and I load up the app all of the POIs being pulled down from the server are crowded together/overlapping (you can only read the first 8 characters of the closest POI's name which any text after the first 8 characters is followed by three dots (...) and also you can only see the 8 characters of the closest POI to you because the closest overlaps all of the others making the text of the others unreadable) so I need help with the "crowding" that is occurring. How can I space them out more or have only the N closest points shown at any given time?

2.) The second issue that I've been trying to find more information on is how to customize the POI markers (such as color, size, shape, making it an image, etc.). Is it via the local CSS in the POIFromWebService folder? Is it via the index.css file from the main index.html loader page?

3.) My third issue is regarding viewing POIs in the AR View. In the example of the actual Wikitude app available from the Google Play and Apple App Stores which lets you view local attractions, etc. how would I be able to 1.) code the distance from where I'm at to a given POI marker and 2.) have the description/more information area be displayed on click of the POI as in the Wikitude app?

Assistance with any or all of these questions would be a VERY VERY huge help as right now I am baffled as to where to go from here even after spending days scouring the Internet searching for answers.

Many thanks to all of the members of the Wikitude community who would be able to help me resolve this issue.

Yeah! I need that information too
Login or Signup to post a comment