05 – Static UI settings

Please note! All the code snippets in this section have been provided for Android. If you use iOS, Cordova or ReactNative you’ll find it easy to translate them appropriately.

SitumWYF allows you to configure several aspects of the User Interface. Some of these aspects are configured before SitumWYF is loaded, hence we call the static UI settings (as opposed to dynamic UI settings, which can be changed on-the-fly after SitumWYF is loaded).

All the static UI settings can be configured by using the LibrarySettings (Android, iOS) class. The basic usage is as follows:

public class MainActivity extends AppCompatActivity {

    SitumMapsLibrary mapsLibrary = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Create LibrarySettings and set the account credentials
        LibrarySettings librarySettings = new LibrarySettings();
        librarySettings.setApiKey("EMAIL", "APIKEY");


        //Set some static UI configurations (e.g. max zoom, show POI names...) 
        librarySettings.setMaxZoom(21);
        librarySettings.setShowPoiNames(true);

        //Build the view and load it (with the library settings previously set)
        mapsLibrary = new SitumMapsLibrary(R.id.maps_library_target, this, librarySettings);
        mapsLibrary.load();
    }
}

Note! LibrarySettings in iOS follows a Bu Initial and minimum zoom levels should only be used when blocking the camera to the building’s bounds.

Camera controls #

Initial, minimum and maximum zoom level #

As a developer, you may want configure the initial, maximum and minimum zoom of the camera. Zoom levels are passed to the underlying Google Maps controller, whose zoom value range is [1, 21]. SitumWYF allows you to do that, using the LibrarySettings (Android, iOS) methods:

  • setInitialZoom (Android, iOS comming soon). Minimum initial zoom is 15.
  • setMaxZoom (Android, iOS comming soon). Should be greater than the minimum zoom.
  • setMinZoom (Android, iOS comming soon). Should be lower than the maximum zoom.

The following GIFs show you two examples where the minimum and maximum zoom has been set to different values.

Max zoom = 15 | Min zoom = 1
Max zoom = 21 | Min zoom = 19

Choose your zoom levels carefully: they have a great impact in the UX of your app. Some useful UX tips:

  • Limit the maximum zoom to a reasonable value. You don’t need to allow users to view every little detail in the map: it’s better to put a maximum zoom level that allow to see a wide map area. This will help the user to know its way around the map.
  • Limit the minimum zoom to a value that allows to see the whole venue comfortably. But don’t go any further! You don’t want users to be wandering around other places.
  • The initial zoom should always show the whole building at a glance.

The following snippet shows you an Android example:

public class MainActivity extends AppCompatActivity {

    SitumMapsLibrary mapsLibrary = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LibrarySettings librarySettings = new LibrarySettings();
        librarySettings.setApiKey("EMAIL", "APIKEY");


        //Sets max, min and initial zoom
        librarySettings.setMaxZoom(21);
        librarySettings.setMinZoom(19);
        librarySettings.setInitialZoom(19);

        mapsLibrary = new SitumMapsLibrary(R.id.maps_library_target, this, librarySettings);
        mapsLibrary.load();
    }
}

Please note! Initial and minimum zoom levels should only be used when blocking the camera to the building’s bounds.

SitumWYF implements a Point of Interest (POI) search bar. This search bar allows users to look for their favourite places in the venue, click on them, and retrieve a turn-by-turn route to the destination.

By default , the search bar will be shown. To this extent, remember to tell your app that you already have a Toolbar by adding these lines to your values/themes/themes.xml:

<resources ...>
    <style ...>
        ...
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    ...        
    </style>
</resources>

However, you may deactivate it by using the LibrarySettings (Android, iOS) method setHasSearchView (Android, iOS). This is an Android example:

public class MainActivity extends AppCompatActivity {

    SitumMapsLibrary mapsLibrary = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LibrarySettings librarySettings = new LibrarySettings();
        librarySettings.setApiKey("EMAIL", "APIKEY");


        //Disable search bar Toolbar
        librarySettings.setHasSearchView(false)

        mapsLibrary = new SitumMapsLibrary(R.id.maps_library_target, this, librarySettings);
        mapsLibrary.load();
    }
}

And this is the result:

With search bar
Without search bar

Search bar text #

The search bar title can be configured using the LibrarySettings (Android, iOS) method setSearchViewPlaceholder (Android, iOS), as shown in the following figures.

The following snippet shows you an Android example:

public class MainActivity extends AppCompatActivity {

    private static final String TAG = MainActivity.class.getSimpleName();

    SitumMapsLibrary mapsLibrary = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LibrarySettings librarySettings = new LibrarySettings();
        librarySettings.setApiKey("EMAIL", "APIKEY");
        
        //Sets the search bar text
        librarySettings.setSearchViewPlaceholder("Find your favourite place ...");
        
        mapsLibrary = new SitumMapsLibrary(R.id.maps_library_target, this, librarySettings);
        mapsLibrary.load();
    }
}

POI customization #

Show/Hide POI names #

SitumWYF can show the POI name on top of each POI. This is the recommended configuration, since it allows users to find easily their favourite places. This can be controlled by using the LibrarySettings (Android, iOS) method setShowPoiNames (Android, iOS):

No POI names are shown by default
POI name can be shown on top of each POI

The following snippet shows you an Android example:

public class MainActivity extends AppCompatActivity {

    SitumMapsLibrary mapsLibrary = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LibrarySettings librarySettings = new LibrarySettings();
        librarySettings.setApiKey("EMAIL", "APIKEY");

        //Enables showing POI names on top of POI icons
        librarySettings.setShowPoiNames(true);

        mapsLibrary = new SitumMapsLibrary(R.id.maps_library_target, this, librarySettings);
        mapsLibrary.load();
    }
}

POI clustering #

By default, SitumWYF clusters POIs that are close together, in order to avoid their icons overlapping with each other. This results on a cleaner map view. You may control this feature by using the LibrarySettings (Android, iOS) setEnablePoiClustering (Android, iOS).

The following snippet shows you an Android example:

public class MainActivity extends AppCompatActivity {

    SitumMapsLibrary mapsLibrary = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LibrarySettings librarySettings = new LibrarySettings();
        librarySettings.setApiKey("EMAIL", "APIKEY");

        //Disables POI clustering (enabled by default)
        librarySettings.setEnablePoiClustering(false);

        mapsLibrary = new SitumMapsLibrary(R.id.maps_library_target, this, librarySettings);
        mapsLibrary.load();
    }
}

Top level POIs #

Sometimes, you’ll have some important POIs in your venue that should be visible at all times. In other words, you don’t want them to be included in any cluster: they should always stand out on their own.

SitumWYF allows you to do that just by configuring that POI with a special custom-field: “top_level”=”true”.

By configuring the Information POI with top_level=true …
… notice how it stands out!

Account’s theme #

By default, SitumWYF uses the colour palette (primary colour) that you have configured in Situm Dashboard. This allows you to configure some UX elements colour to match your own look & feel: positioning & routing FABs, floor selector, route… You may also customize your theme image, which will be shown on the bottom-right corner of SItumWYF UI.

Tip! Your theme image should: 1) not have margins, 2) have a transparent background.

You may disable this by using the LibrarySettings (Android, iOS) method setUseDashboardTheme (Android, iOS). If you set it to false, SitumWYF will use Situm’s colour palette.

The following Android code shows you how to do it:

public class MainActivity extends AppCompatActivity {

    SitumMapsLibrary mapsLibrary = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LibrarySettings librarySettings = new LibrarySettings();
        librarySettings.setApiKey("EMAIL", "APIKEY");

        //Use the theme configured in Situm Dashboard (enabled by default)
        librarySettings.setUseDashboardTheme(true);
        
        mapsLibrary = new SitumMapsLibrary(R.id.maps_library_target, this, librarySettings);
        mapsLibrary.load();
    }
}

Warning! In Android, please use “Theme.AppCompat.Light.DarkActionBar” as your parent theme (values/themes files).

Suscríbete a nuestro boletín

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable del tratamiento: SITUM TECHNOLOGIES, S.L.
Contacto: Responsable del tratamiento: situm@situm.es
Responsable de protección: dpo@situm.es
Finalidad y base legal: Gestionar el envío de newsletter de SITUM sólo con consentimiento.
Legitimación: Consentimiento expreso del interesado.
Destinatarios: Los datos no serán cedidos a terceros salvo obligación legal.
Plazo de conservación: Mientras la parte interesada permanezca suscrita al newsletter (en cada newsletter enviado por Situm estará disponible un link para darse de baja).
Derechos: El interesado podrá revocar en cualquier momento su consentimiento, así como ejercitar los derechos de oposición, acceso, conservación, rectificación, limitación, supresión de datos y no ser objeto de una decisión basada únicamente en el tratamiento automatizado de datos, dirigiéndose por escrito a SITUM en las direcciones indicadas.
Información Adicional: Puede consultar la información adicional y detallada sobre Protección de Datos en nuestra política de privacidad.

Por favor, descarga tu copia aquí.

Muchas gracias por descargar nuestro whitepaper. No dudes en contactar con nosotros si quieres saber más sobre cómo nuestras soluciones pueden ayudar a tu negocio.


Cerrar ventana