All Projects → canbican → ti-mapannotationcluster

canbican / ti-mapannotationcluster

Licence: Apache-2.0 license
Titanium Map helper for fast clustering annotations

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to ti-mapannotationcluster

staballoy
Reactive UI framework for Titanium Alloy
Stars: ✭ 18 (+38.46%)
Mutual labels:  appcelerator
titanium-paypal
💰 Use the PayPal iOS-SDK 2.x with Titanium Mobile.
Stars: ✭ 22 (+69.23%)
Mutual labels:  appcelerator
titanium-alternate-icons
Leverage the ability to change the app icon in iOS 10.3+
Stars: ✭ 24 (+84.62%)
Mutual labels:  appcelerator
titanium-apple-sign-in
Use the iOS 13+ Apple Sign In API with Titanium
Stars: ✭ 29 (+123.08%)
Mutual labels:  appcelerator
griffin-app-opensource
The Axway Griffin App goes open source!
Stars: ✭ 19 (+46.15%)
Mutual labels:  appcelerator
Titanium mobile
🚀 Native iOS- and Android- Apps with JavaScript
Stars: ✭ 2,553 (+19538.46%)
Mutual labels:  appcelerator
ti.playservices
Titanium module for Google Play Services
Stars: ✭ 19 (+46.15%)
Mutual labels:  appcelerator
ti.map
Use native Apple Maps & Google Maps in iOS and Android with Axway Titanium
Stars: ✭ 49 (+276.92%)
Mutual labels:  appcelerator
titanium-turbo
Axway Amplify module that adds some enhancements for Appcelerator Titanium Alloy
Stars: ✭ 15 (+15.38%)
Mutual labels:  appcelerator
ti.exoplayer
A native control for playing videos for Titanium. Based on Google ExoPlayer, using Titanium.Media.VideoPlayer API.
Stars: ✭ 17 (+30.77%)
Mutual labels:  appcelerator
titanium-arkit
Use the iOS 11 ARKit API in Axway Titanium
Stars: ✭ 28 (+115.38%)
Mutual labels:  appcelerator
ti recover
Appcelerator Titanium APK source code recovery tool
Stars: ✭ 17 (+30.77%)
Mutual labels:  appcelerator
nl.fokkezb.loading
The widget provides a simple loading mask that can be easily styled and configured.
Stars: ✭ 96 (+638.46%)
Mutual labels:  appcelerator
nl.fokkezb.button
Bootstrap Button widget for Appcelerator (Titanium)
Stars: ✭ 72 (+453.85%)
Mutual labels:  appcelerator
titanium-firebase-analytics
Use the Firebase Analytics SDK in Axway Titanium 🚀
Stars: ✭ 33 (+153.85%)
Mutual labels:  appcelerator
To.BounceView
A bouncing view widget for Titanium
Stars: ✭ 49 (+276.92%)
Mutual labels:  appcelerator
vscode-appcelerator-titanium
Appcelerator development tools and UI package for Visual Studio Code.
Stars: ✭ 35 (+169.23%)
Mutual labels:  appcelerator
titanium-material
Use the native Material UI/UX framework (https://github.com/CosmicMind/Material) in Titanium!
Stars: ✭ 14 (+7.69%)
Mutual labels:  appcelerator
ti.moddevguide
Appcelerator Titanium native Module Guide
Stars: ✭ 39 (+200%)
Mutual labels:  appcelerator
ti.admob
Use the Google AdMob SDK on iOS and Android with Titanium
Stars: ✭ 51 (+292.31%)
Mutual labels:  appcelerator

ti-mapannotationcluster

This is a titanium commonjs module for displaying large amounts of markers on the map. Markers that are close to each other are displayed as one annotation and can be unfolded by zooming in. It is also possible to customize clustered markers.

It uses a quadtree approach, so the complexity of clustering is linear. This makes it easy to deal with large amounts of data. The module also takes care of markers that are outside the boundaries of view.

screenshot

Installation gitTio

Download the latest distribution ZIP-file and consult the Titanium Documentation on how install it, or simply use the gitTio CLI:

$ gittio install net.bican.mapannotationcluster

Quick Start

In tiapp.xml, add the ti.map module.

In alloy.js, require the map module:

Alloy.Globals.Map = require('ti.map');

Create your view:

<Alloy>
  <Window class="container" id="container">
    <View id="mapView" module="ti.map" onRegionchanged="regionChanged" method="createView"/>
  </Window>
</Alloy>

In your controller, define the module and the regionChanged function:

var CMA = require('ti-mapannotationcluster');

var regionChanged = function(e) {
  $.mapView.setAnnotations(CMA.fill({
    map : Alloy.Globals.Map,
    points : pts,
    latitude : e.latitude,
    longitude : e.longitude,
    latitudeDelta : e.latitudeDelta,
    longitudeDelta : e.longitudeDelta,
    singleAnnotationCaller : singleAnnotationCaller,
    multipleAnnotationCaller : multipleAnnotationCaller
  }));
};

singleAnnotationCaller and multipleAnnotationCaller are optional, but if you don't use them, all markers will look the same. So, also define them in the controller:

var singleAnnotationCaller = function(point) {
  return Alloy.Globals.Map.createAnnotation({
    pincolor : theMap.ANNOTATION_GREEN,
    title : point.offset + ": " + point.latitude.toFixed(2) + "," + point.longitude.toFixed(2),
    latitude : point.latitude,
    longitude : point.longitude,
  });
  return point;
};

var multipleAnnotationCaller = function(point, annotations) {
  return Alloy.Globals.Map.createAnnotation({
    pincolor : theMap.ANNOTATION_PURPLE,
    title : annotations.length + " more locations around here",
    latitude : point.latitude,
    longitude : point.longitude,
  });
  return point;
};

The point argument is the object that points to latitude and longitude of the location, and the annotations argument is the array of markers that are represented by this annotation.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].