Start a new topic

multiple poi markers

hello,

i have seen a use case based on your SDK that shows wifi spots with different mark

ers(see the image) i have the same issue. i want to show different markers for each type of monuments (doors, mosques...) so i tried the following : 


if(poiData.type=="mosquee)

{this.markerDrawable_idle = new AR.ImageDrawable(World.markerDrawable_idle, 2.5, {

        zOrder: 0,

        opacity: 1.0,

        onClick: Marker.prototype.getOnClickTrigger(this)

    });


    // create an AR.ImageDrawable for the marker in selected state

    this.markerDrawable_selected = new AR.ImageDrawable(World.markerDrawable_selected, 2.5, {

        zOrder: 0,

        opacity: 0.0,

        onClick: null

    });

}

else {

this.markerDrawable_idle = new AR.ImageDrawable(World.markerDrawable_idle_2, 2.5, {

        zOrder: 0,

        opacity: 1.0,

        onClick: Marker.prototype.getOnClickTrigger(this)

    });


    // create an AR.ImageDrawable for the marker in selected state

    this.markerDrawable_selected = new AR.ImageDrawable(World.markerDrawable_selected_2, 2.5, {

        zOrder: 0,

        opacity: 0.0,

        onClick: null

    });

},

so is it possible?? if not can you explain why because i will need to include it in the reporting file??

image



Hello Mohamed,

I am a bit confused with what you want your use case to be. If you need to display an image that is associated with a POI based on the type of monument the POI is, then you can do that by simply defining the image in the JSON file. Basically, you can define all details that are associated with specific POIs in this file.

Thanks
Eva

 

i have 5 types of monuments and i would like to display 5 different markers for eash type.

in the screen there will 5 multiple markers for eash type of POI's??

Hello Mohamed,

If you are working with POIs, then what you need to do if define a POI at a specific location. For example, for your use case, you need to define 5 POIs with 5 different locations, each for the 5 different monuments you want to have. In order to define the details for the POI markers you need to add your piece of code and modify the file marker.js.

The best way to start is to check out the sample app which comes with the SDK download package together with the respective documentation section. Each section includes a set-up guide, which helps you set up your project. As for question - displaying POIs - then those samples should be what you're looking for:

Thanks
Eva

hi eva

i'm affraid you didn't understand

what i want is to show multiple markers on my screen!! for example if the poi is a restaurant then a bleu marker is fired otherwise if the poi is a school a green one is fired

Hi Mohamed,


You may define custom visual representation of your POIs, that's no problem.

You may e.g. define a mapping between type and idle/selected marker.


Create one ImageDrawable per type in your experience code's init block.

e.g.

   

World.markerImageRessources = {"idle": {}, "selected": {}};
World.markerImageRessources.idle["typeA"] = new AR.ImageRessource("https://myserver.com/typeA_idle.png")
World.markerImageRessources.selected["typeA"] = new AR.ImageRessource("https://myserver.com/typeA_selected.png")
World.markerImageRessources.idle["typeB"] = new AR.ImageRessource("https://myserver.com/typeB_idle.png")
World.markerImageRessources.selected["typeB"] = new AR.ImageRessource("https://myserver.com/typeB_selected.png")

// that way you can then call, e.g.
this.markerDrawable_selected = new AR.ImageDrawable(World.markerImageRessources.selected[poiData.type], 2.5, {});

   


Hope this helps,


Best regards,
Andi









Thanks Andi

it worked like magic :)

now i'm trying to filter my POI's with a selection option. i had writen my list like following with Jquery : 

 

HTML
<ul data-role="listview">
                <li><a href="#">Mosquee</a></li>
                <li><a href="#">Portes</a></li>
                <li><a href="#">Medersas</a></li>
                <li><a href="#">Transport</a></li>
             </ul>

 but i don't know how to create  an ID and use it to filter my POI's ??

Hi again!

I recommend you to hold a list of markers and only set the enabled flag of the selected ones to true.
e.g.

   

World.allMarkers = [];
[...]

this.markerDrawable_selected.poiType = poiData.type;
World.allMarkers.push (this.markerDrawable_selected);
[...]
this.markerDrawable_idle.poiType = poiData.type;
World.allMarkers.push (this.markerDrawable_idle);
[...]

// Whenever somebody modifies the list, execute something like
World.selectedPoiType = /*selectedPoiTypeFromDropdown*/;
World.allMarkers.forEach(function callback(currentMarker, index, array) {
currentMarker.enabled = (currentMarker.poiType === World.selectedPoiType);
});

   

Note: Depending on the amount of POIs it may be smarter to create POIs on demand and destroy the existing ones where needed.


Best regards,
andi





got it but can you give me an example for this line i didn't quit understand the syntaxe :

 

World.selectedPoiType = /*selectedPoiTypeFromDropdown*/;

 is it the id from the list??


World.selectedPoiType="mosquee";

It should match the value of the dropdown, whereat each item uses a valid poiData.type.


Please note that this is not SDK specific but of a general "best practice"JS related question, where forums like stackoverflow may give you better advise.


Best regards,

andi

Login or Signup to post a comment