Start a new topic

add a liste of places in the panel on JS API


i am trying to add a list of types of places like restaurants Motels etc... so when a user selects a type, he will receive only the POI markers indicating that type. but i don't know how to do it exactly any ideas??

i have attached an image for the liste but i need to know how to filtre the POIs

Best regards


You can store the different categories of POIs in different files e.g. json files and load the only POIs needed based on the users choice. In general implementing such a filter or loading mechanism sounds more like a general js implementation question rather than a functionality of the Wikitude SDK. To get further details on how to load / filter json based lists, you can also refer to general JS tutorials.

I hope this helps. Greetings


Hi Nicola

thanks for replaying :) i am aware it is a JS issue more than a SDK functionnality probleme, but i have almost tried every thing and i can use every help i can get!!!

i already implemented a Json file and gave a type to each POI like this :  

        "id": "2",
        "name": "Ftouh",
        "latitude": "34.063015",
        "longitude": "-4.960649",
        "description": ".....",
        "altitude": "303",
        "type": "bab"

and this is my list in the panel ;  


<ul data-role="listview" id="lister">

                <li id="mosquee"><a href="#">Mosquee</a></li>
                <li id="portes"><a href="#">Portes</a></li>
                <li id="medersa"><a href="#">Medersas</a></li>
                <li id="transport"><a href="#">Transport</a></li>
		<li id="borj"><a href="#">BORJs</a></li>
		<li id="autres"><a href="#">Autres</a></li>
		<li id="tous"><a href="#">tous</a></li>

and this small code allows me to test if my list is working and it is because i retrieve the id


$("#lister li").click(function()
				listId = $(this).attr('id');


so now i need to just filtre the POIs using the part above!! so what do you think? 

Please have a look at the SDK Sample application "Browsing POIs".
Assuming you have direct access to "World.markerList", you can only set the "enabled" value to true for the ones with the selected type.


World.markerList.forEach((marker) => { marker.enabled = selectedType === marker.type; });

Hope that helps.

Best regards,

Login or Signup to post a comment