Use OpenstreetMap as a map in Titanium. Library: osmdroid
Add module to tiapp.xml:
<module>ti.osm</module>const win = Titanium.UI.createWindow({});
const OSM = require('ti.osm');
const osmView = OSM.createOSMView({
lifecycleContainer: win
});
osmView.addEventListener("regionchanged", function(e) {
console.log(e.longitude, e.latitude);
})
osmView.addEventListener("zoom", function(e) {
console.log(e.zoomLevel);
})
win.add(osmView);
win.open();view.xml
<OSMView module="ti.osm" id="osm"/>- set start location
mapview.location = { longitude: 0.0, latitude: 0.0, zoomLevel: 5}- allow map rotation
mapview.allowRotation = true;- set user location (creation only)
OSM.createOSMView({
userLocation: true, // show marker
followLocation: true // automatically set viewport to userlocation
});- mapType:
OSM.createOSMView({
mapType: OSM.WIKIMEDIA
});allowed constants:
* MAPNIK
* WIKIMEDIA
* PUBLIC_TRANSPORT
* CLOUDMADESTANDARDTILES
* CLOUDMADESMALLTILES
* FIETS_OVERLAY_NL
* BASE_OVERLAY_NL
* ROADS_OVERLAY_NL
* HIKEBIKEMAP
* OPEN_SEAMAP
* USGS_TOPO
* USGS_SAT
- change map type:
mapView.mapType = OSM.PUBLIC_TRANSPORT;- userAgent: by default the bundleId will be used. If you want to change it you can use the creation-only
userAgentproperty
OSM.createOSMView({
userAgent: "customString"
});- downloadAllowed: returns true/false if caching is allowed
-
clear all markers:
clearMarker(); -
add a marker
osmView.addMarker({
longitude: 0.00,
latitude: 0.00,
title: "title",
icon: "/path/to/image.png", // marker icon
image: "/path/to/image.png" // image inside the infobox
});- add multiple markers: if you want to add many markers you can use this syntax to increase performance:
var markerList = []
for (var i = 0; i < 100; ++i) {
markerList.push({
longitude: 11.581981 + Math.random(),
latitude: 48.135124 + Math.random(),
icon: "/marker_default.png",
title: "this is a longer text",
});
}
osmView.addMarkers(markerList);-
pause/resume: if you manually need to call the pause/resume event (will be called automatically if you assign the livecycleContainer). Will pause the userlocation calls
-
downloadAreaAsync(zoommin, zoommax)
-
possibleTilesInArea(zoommin, zoommax)
-
currentCacheUsage()
-
cacheCapacity()
- infoboxClick return
marker,type - markerClick return
marker,type - regionchanged returns
longitude,latitude - zoom returns
zoomLevel - downloadprogress
- downloadcomplete
- downloadfailed
- downloadstarted
var OSM = require('ti.osm');
var win = Titanium.UI.createWindow();
var osmView = OSM.createOSMView({
userLocation: true,
followLocation: false
});
osmView.location = {
longitude: 151.276417,
latitude: -33.891614,
zoomLevel: 9.5
}
osmView.addMarker({
longitude: 151.276417,
latitude: -33.891614,
icon: "/marker_default.png",
title: "this is a longer text",
});
osmView.addMarker({
longitude: 151.3,
latitude: -33.88,
title: "test 2",
image: "/appicon.png"
});
osmView.addEventListener("infoboxClick", onClick);
osmView.addEventListener("markerClick", onClick);
osmView.allowRotation = true;
function onClick(e) {
console.log("Marker:", e.marker);
console.log("Type:", e.type);
}
win.add(osmView);
win.open();- Michael Gangolf (@MichaelGangolf / Web)
Initial development was sponsored by Wikimedia Italia. Thank you for the support and allowing the module to be available as an open-source module!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent