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,

Hello, again Andreas,

here I'm again after 3 years, I restarted the work on my project, I added a lot of features to my application, but unfortunately, I still can't figure out how to restrict the (load of POIs) to the selected type I hope you can be more helpful with this. it's the only feature i need to add to be able to publish my app.


Since this forum post is pretty old, let's start again from the beginning. First of all, could you please tell me which SDK version you are using and which platform? In addition, could you please describe in details what exactly you wish to do and what are the issues you are facing?

In addition, my colleagues Nicola and Andreas, have shared some best practices here. Did you follow them? 

Thank you,


Hello Eva, 

SDK version: 8.4.0 (working with Sdk_startup)

Platform: ANDROID

My objective: Display only the markers with the type selected by the user.

So I attributed a type to each marker, and I created a list for the user, what I need is when the user selects a type in the list ((below)), my application should display on the screen just the markers with that exact type.

This is my list in the HTML file : 


 <div data-role="collapsible" data-theme="b" data-content-theme="b">
                    <h2>Choose a monument type </h2>
			        <ul data-role="listview" id= "myList" data-theme="e" data-inset="false" class="ui-alt-icon" data-filter="true">

                        <li id="masjid" class="lister"><a href="#popType" class="btnpopup" data-rel="popup" data-position-to="window">MASJID (mosque)<span class="ui-li-count">10</span></a></li>
                        <li id="babs" class="lister"><a href="#popType" class="btnpopup" data-rel="popup" data-position-to="window">BABs (gate)<span class="ui-li-count">07</span></a></li>
                        <li id="medersas" class="lister"><a href="#popType" class="btnpopup" data-rel="popup" data-position-to="window">MEDERSAs (school)<span class="ui-li-count">04</span></a></li>
                        <li id="burjs" class="lister"><a href="#popType" class="btnpopup" data-rel="popup" data-position-to="window">BURJs (tower)<span class="ui-li-count">02</span></a></li>
                        <li id="fondok" class="lister"><a href="#popType" class="btnpopup" data-rel="popup" data-position-to="window">FONDOK (hotel)<span class="ui-li-count">02</span></a></li>
                        <li id="transport" class="lister"><a href="#popType" class="btnpopup" data-rel="popup" data-position-to="window">TRANSPORT<span class="ui-li-count">05</span></a></li>
                        <li id="others" class="lister"><a href="#popType" class="btnpopup" data-rel="popup" data-position-to="window">OTHERS<span class="ui-li-count">07</span></a></li>
                        <li id="all" class="lister"><a href="#popType" class="btnpopup" data-rel="popup" data-position-to="window">ALL<span class="ui-li-count">37</span></a></li>


    And this is how i retrieve the filtered data from Json file in which i stored my markers.


requestDataFromLocal: function requestDataFromLocalFn(centerPointLatitude, centerPointLongitude) {
		var filtered_data;
		var selected_type;
		$("#myList li").click(function(){
			selected_type = $(this).attr('id');
			filtered_data = GpsData.filter(function(el){
				return el.type.toLowerCase() == selected_type;


  Please note that I did try Andreas's solution, i have no JS errors so i think i'm missing something in the AR world variable. should i enable something for example?

Best Regards.

(i really hope to fix this soon, a hole thesis depends on this :( )


Your code looks fine to me, so I would suggest to debug by writing some logs/alerts. For examples: is the click function always called? If yes, are GpsData and filtered_data always the same after calling filter? If no, is the loadPoisFromJsonData method creating a markerList from scratch?

I do also notice that Andreas code is a bit different than yours in terms of Marker generation. Yours is recreating all the marker list while his code is just disabling the existing markers that doesn't fit with the type.

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



In case someone wanted to do this feature!!
This is how i successfully managed to implement it : 

  1.  in the javascript file where you call the data from local or server : 


  1. // request POI data
    	requestDataFromLocal: function (centerPointLatitude, centerPointLongitude) {
    		$(document).on('click', '#myList li', function() {
    			let listerId = $(this).attr('id');
    			switch(listerId) {
    				case "mosquee":
    					World.loadPoisFromJsonData(Masjid); break;
    				case "bab":
    					World.loadPoisFromJsonData(Babs); break;
    				case "fondouk":
    					World.loadPoisFromJsonData(Fondok);	break;
    				case "borj":
    					World.loadPoisFromJsonData(burjs);	break;
    				case "medersa":
    					World.loadPoisFromJsonData(medersas);	break;
    				case "transport":
    					World.loadPoisFromJsonData(transport);	break;
    				case "autre":
    					World.loadPoisFromJsonData(Others);	break;
    				case "mausoleum":
    					World.loadPoisFromJsonData(mausoleum); break;
    				case "all":
    					World.loadPoisFromJsonData(GpsData); break;


  2. for the data, i created separated files for each type so that i can call each type separately


  • for  each type i created a different types of markers to display on screen : 


 World.markerImageRessources = {"idle": {}, "selected": {}};
        World.markerImageRessources.idle["transport"] = new AR.ImageResource("assets/logi_idle.png");
        World.markerImageRessources.selected["transport"] = new AR.ImageResource("assets/logi_selected.png");
        World.markerImageRessources.idle["medersa"] = new AR.ImageResource("assets/medersa_idle.png");
        World.markerImageRessources.selected["medersa"] = new AR.ImageResource("assets/medersa_selected.png");
		World.markerImageRessources.idle["mosquee"] = new AR.ImageResource("assets/mosquee_idle.png");
        World.markerImageRessources.selected["mosquee"] = new AR.ImageResource("assets/mosquee_selected.png");
		World.markerImageRessources.idle["bab"] = new AR.ImageResource("assets/bab_idle.png");
        World.markerImageRessources.selected["bab"] = new AR.ImageResource("assets/bab_selected.png");
		World.markerImageRessources.idle["borj"] = new AR.ImageResource("assets/borj_idle.png");
        World.markerImageRessources.selected["borj"] = new AR.ImageResource("assets/borj_selected.png");
		World.markerImageRessources.idle["autre"] = new AR.ImageResource("assets/others_idle.png");
        World.markerImageRessources.selected["autre"] = new AR.ImageResource("assets/others_selected.png");
		World.markerImageRessources.idle["fondouk"] = new AR.ImageResource("assets/fondouk_idle.png");
		World.markerImageRessources.selected["fondouk"] = new AR.ImageResource("assets/fondouk_selected.png");
		World.markerImageRessources.idle["mausoleum"] = new AR.ImageResource("assets/mausoleum_idle.png");
		World.markerImageRessources.selected["mausoleum"] = new AR.ImageResource("assets/mausoleum_selected.png");
		World.markerDrawable_directionIndicator = new AR.ImageResource("assets/indi.png");


Login or Signup to post a comment