- Create folder named tmapswww
- Download and Unzip map package inside tmapswww (Request map package from Tagipedia Team)
- Duplicate Config.Secrets.Example.xml and rename it to 'Config.Secrets.xml' and fill the file with your configration info
- Read our sample for examples
it works using dispatch actions between your APP and TMaps. So your APP dispatch actions to TMaps and TMaps dispatch actions to your APP.
IMPORTANT: You should inject this script into webview because it is called from TMap when TMap need to reload webview. if you don't inject it webview will not reloaded.
mWebView.addJavascriptInterface(new JavascriptInterface(){
@JavascriptInterface
public void reload() {
runOnUiThread(new Runnable() { @Override public void run() { mWebView.reload(); } });
}
},"__tmaps_bridge__");
String tbString = "window.__reload__ = function(){__tmaps_bridge__.reload();};";
injectScript(tbString);
dispatched when TMaps ready to receive dispatches from Your APP. So you should not dispatch any action before TMaps get ready.
new HashMap<String, Object>(){{
put("type", "READY");
}};
dispatched when map loaded and visible to user.
new HashMap<String, Object>(){{
put("type", "MAP_LOADED");
}};
dispatched when features in map tapped.
new HashMap<String, Object>(){{
put("type", "FEATURES_TAPPED");
put("features", features);
}};
features
Required List with Map, each Map with id, properties keys
dispatched when features in map tapped with the top feature visible to user.
new HashMap<String, Object>(){{
put("type", "ASSOCIATED_FEATURE_TAPPED");
put("feature_id", feature_id);
put("feature", feature);
}};
feature_id
Required String with valid feature id
feature
Required Map with id, properties keys
dispatched when select category in map
new HashMap<String, Object>(){{
put("type", "CATEGORY_MARKED");
put("category", category);
}};
category
Required valid String category
dispatched when error happened in TMaps
new HashMap<String, Object>(){{
put("type", "ERROR");
put("error", error);
}};
error
Required Map with stack key and String value
dispatched after MARK_FEATURE ended
new HashMap<String, Object>(){{
put("type", "FEATURE_MARKED");
put("feature_id", feature_id);
}};
feature_id
Required String with valid feature id
dispatched after HIGHLIGHT_FEATURE ended
new HashMap<String, Object>(){{
put("type", "FEATURE_HIGHLIGHTED");
put("feature_id", feature_id);
}};
feature_id
Required String with valid feature id
dispatched after SET_ZOOM ended
new HashMap<String, Object>(){{
put("type", "ZOOM_ENDED");
}};
dispatched after SET_CENTER ended
new HashMap<String, Object>(){{
put("type", "CENTER_ENDED");
}};
dispatched after any event happened in TMaps. Your app can send analytics after receive this action.
new HashMap<String, Object>(){{
put("type", "EVENT_LOGGED");
put("event_category", "Maps");
put("event_action", "Loaded");
put("event_label", map_name);
put("fields_object", new HashMap<String, Object>(){{
put("map_id", map_id);
}});
}};
new HashMap<String, Object>(){{
put("type", "EVENT_LOGGED");
put("event_category", "Features");
put("event_action", "Tapped");
put("event_label", feature_display_name);
put("fields_object", new HashMap<String, Object>(){{
put("map_id", map_id);
put("feature_id", feature_id);
}});
}};
new HashMap<String, Object>(){{
put("type", "EVENT_LOGGED");
put("event_category", "Features");
put("event_action", "Highlighted");
put("event_label", feature_display_name);
put("fields_object", new HashMap<String, Object>(){{
put("map_id", map_id);
put("feature_id", feature_id);
}});
}};
new HashMap<String, Object>(){{
put("type", "EVENT_LOGGED");
put("event_category", "Features");
put("event_action", "Searched");
put("event_label", feature_display_name);
put("fields_object", new HashMap<String, Object>(){{
put("map_id", map_id);
put("feature_id", feature_id);
}});
}};
new HashMap<String, Object>(){{
put("type", "EVENT_LOGGED");
put("event_category", "Categories");
put("event_action", "Highlighted");
put("event_label", category);
put("fields_object", new HashMap<String, Object>(){{
put("map_id", map_id);
}});
}};
new HashMap<String, Object>(){{
put("type", "EVENT_LOGGED");
put("event_category", "Categories");
put("event_action", "Searched");
put("event_label", category);
put("fields_object", new HashMap<String, Object>(){{
put("map_id", map_id);
}});
}};
new HashMap<String, Object>(){{
put("type", "EVENT_LOGGED");
put("event_category", "Routes");
put("event_action", "Routed");
put("event_label", source_display_name => target_display_name);
put("fields_object", new HashMap<String, Object>(){{
put("map_id", map_id);
put("source_feature_id", source_feature_id);
put("target_feature_id", target_feature_id);
}});
}};
new HashMap<String, Object>(){{
put("type", "EVENT_LOGGED");
put("event_category", "Buildings");
put("event_action", "Tapped");
put("event_label", building_name);
put("fields_object", new HashMap<String, Object>(){{
put("map_id", map_id);
put("building_id", building_id);
}});
}};
new HashMap<String, Object>(){{
put("type", "EVENT_LOGGED");
put("event_category", "Buildings");
put("event_action", "Opened");
put("event_label", building_name);
put("fields_object", new HashMap<String, Object>(){{
put("map_id", map_id);
put("building_id", building_id);
}});
}};
new HashMap<String, Object>(){{
put("type", "EVENT_LOGGED");
put("event_category", "Floors");
put("event_action", "Opened");
put("event_label", floor_label);
put("fields_object", new HashMap<String, Object>(){{
put("map_id", map_id);
put("layer_id", layer_id);
}});
}};
new HashMap<String, Object>(){{
put("type", "EVENT_LOGGED");
put("event_category", "RenderModes");
put("event_action", "Changed");
put("event_label", render_mode);
put("fields_object", new HashMap<String, Object>(){{
put("map_id", map_id);
}});
}};
new HashMap<String, Object>(){{
put("type", "EVENT_LOGGED");
put("event_category", "LocationUpdated");
put("event_action", "Gps");
put("event_label", latitude/longitude);
put("fields_object", new HashMap<String, Object>(){{
put("map_id", map_id);
put("lat", latitude);
put("lng", longitude);
}});
}};
new HashMap<String, Object>(){{
put("type", "EVENT_LOGGED");
put("event_category", "LocationUpdated");
put("event_action", "Beacon");
put("event_label", latitude/longitude);
put("fields_object", new HashMap<String, Object>(){{
put("map_id", map_id);
put("lat", latitude);
put("lng", longitude);
}});
}};
dispatched after Tapped GPS Button in TMaps. You Should turn on Location Service and then dispatch Start to begin updating location
new HashMap<String, Object>(){{
put("type", "CHECK_GPS_AVAILABILITY");
}};
dispatched after Tapped Beacon Location Button in TMaps. You Should turn on Bluetooth Service and then dispatch Start to begin updating location
new HashMap<String, Object>(){{
put("type", "CHECK_BEACON_LOCATION_AVAILABILITY");
}};
dispatched after starting updating beacon location in TMaps. You Should start or stop beacon manager according to beacon manager state. if beacon manager state is true you shoud start beacon manager then dispatch the new position to TMaps to update user location
new HashMap<String, Object>(){{
put("type", "START_POSITION_UPDATES_FOR_BEACON_LOCATION");
put("start_beacon_manager",start_beacon_manager);
}};
start_beacon_manager
Required boolean beacon manager state
dispatch it to set tenants of map.
new HashMap<String, Object>(){{
put("type", "SET_TENANT_DATA");
put("payload", tenants_json);
}}
payload
Required List with Map, each Map with id, feature_id, name, booth_id, icon, CUSTOM_KEYS_YOU_NEED keys
dispatch it to change default feature popup template.
new HashMap<String, Object>(){{
put("type", "SET_DEFAULT_FEATURE_POPUP_TEMPLATE");
put("template", template);
put("template_custom_data", templateCustomData);
}}
template
Required valid String angular template with PopupScope
template_custom_data
Optional Map with CUSTOM_KEYS_YOU_NEED keys and String, Number, List, Map values
template custom data of keys that you want to use from customData in PopupScope
dispatch it to change theme of map.
new HashMap<String, Object>(){{
put("type", "SET_THEME");
put("theme", new HashMap<String, Object>(){{
put("primary", primary_color);
put("accent", accent_color);
}});
}}
primary
Optional valid String color
accent
Optional valid String color
dispatch it to load map.
new HashMap<String, Object>(){{
put("type", "LOAD_MAP");
put("map_id", map_id);
put("theme", new HashMap<String, Object>(){{
put("primary", primary_color);
put("accent", accent_color);
}});
put("center", Arrays.asList(lng, lat));
put("zoom", zoom);
}}
map_id
Required String
theme
Optional Map with primary, accent keys and valid String color values
theme used for colors such as buttons and loading
center
Optional List of Numbers
Default map center in longitude and latitude
zoom
Optional Number
Default zoom level
dispatch it to change render mode.
new HashMap<String, Object>(){{
put("type", "CHANGE_RENDER_MODE");
put("modeToRender", modeToRender);
}}
modeToRender Required String with 2D, 3D
dispatch it to change zoom of map.
new HashMap<String, Object>(){{
put("type", "SET_ZOOM");
put("zoom", zoom);
put("zoom_type", zoom_type);
}}
zoom Required Number
zoom_type Optional String with FLY_TO
dispatch it to change center of map.
new HashMap<String, Object>(){{
put("type", "SET_CENTER");
put("center", Arrays.asList(lng, lat));
}}
center Required List of Numbers Default map center in longitude and latitude
dispatch it to highlight feature.
new HashMap<String, Object>(){{
put("type", "HIGHLIGHT_FEATURE");
put("feature_id", feature_id);
}}
feature_id Required String with valid feature id
dispatch it to mark feature.
new HashMap<String, Object>(){{
put("type", "MARK_FEATURE");
put("feature_id", feature_id);
}}
feature_id Required String with valid feature id
dispatch it after Map Loaded to show GPS button
new HashMap<String, Object>(){{
put("type", "ENABLE_GPS_BUTTON");
}}
Don't forget to add permissions to AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_GPS" />
<uses-permission android:name="android.permission.ACCESS_ASSISTED_GPS" />
<uses-permission android:name="android.permission.ACCESS_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
** Follow our samples **
tmaps-android-sample/app/src/main/java/com/tagipedia/tmaps/MainActivity.java
Lines 107 to 115 in 1f109c8
tmaps-android-sample/app/src/main/java/com/tagipedia/tmaps/MainActivity.java
Lines 134 to 200 in 1f109c8
tmaps-android-sample/app/src/main/java/com/tagipedia/tmaps/MainActivity.java
Lines 259 to 264 in 1f109c8
tmaps-android-sample/app/src/main/java/com/tagipedia/tmaps/MainActivity.java
Lines 277 to 284 in 1f109c8
tmaps-android-sample/app/src/main/java/com/tagipedia/tmaps/MainActivity.java
Lines 304 to 344 in 1f109c8
dispatch it after check location service to start updating user location and showing nearest places to user
new HashMap<String, Object>(){{
put("type", "START_UPDATING_LOCATION");
put("is_gps_activated", is_gps_activated);
}}
is_gps_activated Required boolean
dispatch it after Map Loaded to show Beacon Location button
new HashMap<String, Object>(){{
put("type", "ENABLE_BEACON_LOCATION_BUTTON");
}}
dispatch it after check beacon location service to start updating user location and showing nearest places to user
new HashMap<String, Object>(){{
put("type", "START_UPDATING_BEACON_LOCATION");
put("is_beacon_location_activated", is_beacon_location_activated);
}}
is_beacon_location_activated Required boolean
dispatch it after beacon location service started to update user location and showing nearest places to user
new HashMap<String, Object>(){{
put("type", "SET_USER_BEACON_LOCATION");
put("x", x);
put("y", y);
put("origin_lat", origin_lat);
put("origin_lng", origin_lng);
}}
x
Required Number
y
Required Number
origin_lat
Required Number
origin_lng
Required Number
dispatch it to set device id and device type
new HashMap<String, Object>(){{
put("type", "SET_DEVICE_DATA");
put("device_id", device_id);
put("device_type", "ANDROID");
}}
device_id Required String
device_type Required String with ANDROID
dispatch it to set client id and client secret
new HashMap<String, Object>(){{
put("type", "SET_APPLICATION_SECRETS");
put("client_id", client_id);
put("client_secret", client_secret);
}}
client_id Required String
client_secret Required String
current feature
poi
poi Required poi
Boolean to check if routing is enabled
enableRouting
method to show routing dialog.
showRoutingDialog($event, data)
$event Required $event
data Optional Object with from, to keys and poi value
method to call Angular $apply
applyIfneeded(callback)
callback Required Function
custom data object that have all keys of template_custom_data
customData[key]
key Required with valid key from template_custom_data
method to dispatch action from your APP to TMaps.
dispatch(action)
action Required Object with valid action
method to dispatch action from TMaps to your APP.
dispatchToContainer(action)
action
Required Object with type, CUSTOM_KEYS_YOU_NEED keys.
type is String value.
CUSTOM_KEYS_YOU_NEED is any of String, Number, List, Map values.
method to close feature popup
closeInfo()
id of feature
poi.id
category of feature
poi.category
tags of feature
poi.tags
tenant of feature you set in SET_TENANT_DATA
poi.getTenant()
tenant name of feature you set in SET_TENANT_DATA
poi.getTenantName()
tenant icon of feature you set in SET_TENANT_DATA
poi.getTenantIcon()
tenant booth_id of feature you set in SET_TENANT_DATA
poi.getTenantBoothId()
getTenantName or feature name
poi.getDisplayName()
check if tenant or feature have name.
poi.hasName()
get first category of tenant or feature if there is category.
poi.getDisplayCategory()
check if tenant or feature have categories.
poi.hasCategories()
check if feature is building.
poi.isBuilding()
getTenantIcon or feature icon
poi.getIcon()
getTenantBoothId or feature booth id
poi.getBoothId()
you should dispatch HIGHLIGHT_FEATURE for initial feature after ZOOM_ENDED/CENTER_ENDED
you should dispatch HIGHLIGHT_FEATURE for initial feature after MAP_LOADED
you should dispatch SET_DEFAULT_FEATURE_POPUP_TEMPLATE for your customized template and add your custom buttons and use dispatchToContainer when button clicked to handle the click action in your APP.
<md-card id="{{poi.id}}" class="feature-popup display-none slide-up">
<div layout="row" layout-align="end start" >
<md-card-title class="padding-bottom-overide" layout="row" layout-align="center center">
<md-card-title-media ng-if="poi.getDisplayName()">
<div class="circle" layout="row" layout-align="center center">
<md-icon ng-if="!poi.getIcon()" md-font-set="material-icons" class="camera-icon">camera_alt</md-icon>
<img ng-if="poi.getIcon()" ng-src="{{poi.getIcon()}}" />
</div>
</md-card-title-media>
<md-card-title-text >
<div class="md-subline">{{poi.getDisplayName() || poi.getDisplayCategory()}}</div>
<div ng-if="poi.getBoothId()" layout="row">
<div class="categoryline" >
<div class="margin-right-margin-left">{{poi.getBoothId()}}</div>
</div>
</div>
<div ng-if="poi.category" layout="row">
<div class="categoryline" >
<div class="margin-right-margin-left">{{poi.category}}</div>
</div>
</div>
</md-card-title-text>
</md-card-title>
<md-button id="close-info" class="md-icon-button" ng-click="closeInfo()">
<md-icon md-font-set="material-icons" aria-label="close info">close</md-icon>
</md-button>
</div>
<md-card-actions layout="row" layout-align="center center" >
<div ng-if="poi.category === 'wheelchair-bathroom'" layout="row" layout-align="center center">
<i class="fa fa-3x fa-wheelchair"></i>
</div>
<!-- <md-divider></md-divider> -->
<br ng-if="poi.category === 'wheelchair-bathroom'" />
<br ng-if="poi.category === 'wheelchair-bathroom'" />
<div flex ng-if="enableRouting && poi.entrances && poi.entrances.length" class="feature-routing-buttons" layout="row" layout-align="center center">
<md-button layout="row" class="md-raised md-primary" ng-click="showRoutingDialog($event, {from: poi})">
<div class="margin-right-margin-left"> Route From</div>
<md-icon md-font-set="material-icons" >adjust</md-icon>
</md-button>
<md-button layout="row" class="md-raised md-primary" ng-click="showRoutingDialog($event, {to:poi})">
<div class="margin-right-margin-left"> Route To</div>
<md-icon md-font-set="material-icons" >flag</md-icon>
</md-button>
</div>
</md-card-actions>
</md-card>