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();
}
}
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.
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();
}
}
Search bar #
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.
Show/hide search bar #
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:
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):
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”.
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.
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();
}
}
