Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-5769] Android: Add the ability to add multiple polygons to the MapView

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2015-05-28T07:14:03.000+0000
Affected Version/sRelease 1.7.2
Fix Version/sRelease 4.1.0
ComponentsAndroid
LabelsSupportTeam, module_androidmapv2, qe-manualtest, qe-testadded
ReporterEduardo Gomez
AssigneeAshraf Abu
Created2011-10-17T08:04:06.000+0000
Updated2015-06-10T19:04:20.000+0000

Description

Feature Request

To add routes and allow for multiple polygons to be added to the MapView as well as have fill, opacity and color properties.

Utilities

That would allow developers to implement geofencing (see http://en.wikipedia.org/wiki/Geo-fence) a common technique for Android apps.

Customer notes

"We'd like to be able to hook into the events when a user enters and leaves a geo-fenced polygon or a radius around a geolocated point."

Attachments

FileDateSize
geofence01.jpg2011-10-17T08:04:06.000+000047052
geofence02.jpg2011-10-17T08:04:06.000+0000151942
MapsIMG_0255.PNG2013-02-07T01:15:13.000+0000227808
ti.map-android-2.3.1.zip2015-05-06T08:37:31.000+00003525184

Comments

  1. Ingo Muschenetz 2013-02-08

    Can be fixed on Android Maps v2
  2. Ashraf Abu 2015-05-06

    Test code app.js for PR that will be added here:
       Titanium.UI.setBackgroundColor('#000');
       
       Ti.Map = require('ti.map');
       
       var self = Ti.UI.createWindow({
       	backgroundColor : '#800'
       });
       
       // create UI components
       var view = Ti.UI.createView({
       	backgroundColor : '#800',
       });
       
       var mapview;
       
       // add map after window opens
       self.addEventListener('open', function() {
       	// Make sure we only add the map once
       	if (mapview !== undefined) {
       		return;
       	}
       
       	mapview = Titanium.Map.createView({
       		mapType : Titanium.Map.NORMAL_TYPE,
       		region : {
       			latitude : 37.389569,
       			longitude : -122.050212,
       			latitudeDelta : 0.1,
       			longitudeDelta : 0.1
       		},
       		animate : true,
       		regionFit : true,
       		userLocation : false,
       		top : '70dp'
       	});
       
       	// Handle all map annotation clicks
       	mapview.addEventListener('click', function(e) {
       		if (e.annotation && (e.clicksource === 'leftButton' || e.clicksource == 'leftPane')) {
       			mapview.removeAnnotation(e.annotation);
       		}
       	});
       
       	var appc = Ti.Map.createAnnotation({
       		latitude : 37.389569,
       		longitude : -122.050212,
       		title : 'Appcelerator HQ',
       		subtitle : 'Mountain View, CA',
       		pincolor : Ti.Map.ANNOTATION_GREEN
       	});
       
       	var randLoc = Ti.Map.createAnnotation({
       		latitude : 37.389569,
       		longitude : -122.0855498,
       		title : 'Random Location',
       		subtitle : 'Mountain View, CA',
       		pincolor : Ti.Map.ANNOTATION_ORANGE
       	});
       
       	var apple = Ti.Map.createAnnotation({
       		latitude : 37.331689,
       		longitude : -122.030731,
       		title : 'Apple HQ',
       		subtitle : 'Cupertino, CA',
       		pincolor : Ti.Map.ANNOTATION_RED
       	});
       	var google = Ti.Map.createAnnotation({
       		latitude : 37.422502,
       		longitude : -122.0855498,
       		title : 'Google HQ',
       		subtitle : 'Mountain View, CA',
       		pincolor : Ti.Map.ANNOTATION_VIOLET
       	});
       	var route = Ti.Map.createRoute({
       		width : 4,
       		color : '#f00',
       		points : [{
       			latitude : google.latitude,
       			longitude : google.longitude
       		}, {
       			latitude : appc.latitude,
       			longitude : appc.longitude
       		}, {
       			latitude : apple.latitude,
       			longitude : apple.longitude
       		}, {
       			latitude : randLoc.latitude,
       			longitude : randLoc.longitude
       		}]
       	});
       
       	var polygon = Ti.Map.createPolygon({
       		fillColor : '#30f0',
       		points : [{
       			latitude : google.latitude,
       			longitude : google.longitude
       		}, {
       			latitude : appc.latitude,
       			longitude : appc.longitude
       		}, {
       			latitude : apple.latitude,
       			longitude : apple.longitude
       		}, {
       			latitude : randLoc.latitude,
       			longitude : randLoc.longitude
       		}]
       	});
       
       	var circle = Ti.Map.createCircle({
       		center : {
       			latitude : google.latitude,
       			longitude : google.longitude
       		},
       		radius : 3000,
       		fillColor : '#3f00'
       	});
       
       	var mapview = Ti.Map.createView({
       		mapType : Ti.Map.NORMAL_TYPE,
       		region : {
       			latitude : 37.389569,
       			longitude : -122.050212,
       			latitudeDelta : 0.2,
       			longitudeDelta : 0.2
       		},
       		annotations : [google, appc, apple, randLoc]
       	});
       
       	mapview.addPolygon(polygon);
       	mapview.addCircle(circle);
       
       	self.add(mapview);
       });
       
       
       self.add(view);
       
       self.open();
       
    tiapp.xml that was used (for android map api key):
       <?xml version="1.0" encoding="UTF-8"?>
       <ti:app xmlns:ti="http://ti.appcelerator.org">
           <id>com.testmap</id>
           <name>TestMap</name>
           <version>1.0</version>
           <publisher>msamah</publisher>
           <url>http://</url>
           <description/>
           <copyright>2015 by msamah</copyright>
           <icon>appicon.png</icon>
           <fullscreen>false</fullscreen>
           <navbar-hidden>false</navbar-hidden>
           <analytics>true</analytics>
           <guid>bb886494-8822-4437-9ccc-869476a2f16d</guid>
           <property name="ti.ui.defaultunit" type="string">dp</property>
           <ios>
               <plist>
                   <dict>
                       <key>UISupportedInterfaceOrientations~iphone</key>
                       <array>
                           <string>UIInterfaceOrientationPortrait</string>
                       </array>
                       <key>UISupportedInterfaceOrientations~ipad</key>
                       <array>
                           <string>UIInterfaceOrientationPortrait</string>
                           <string>UIInterfaceOrientationPortraitUpsideDown</string>
                           <string>UIInterfaceOrientationLandscapeLeft</string>
                           <string>UIInterfaceOrientationLandscapeRight</string>
                       </array>
                       <key>UIRequiresPersistentWiFi</key>
                       <false/>
                       <key>UIPrerenderedIcon</key>
                       <false/>
                       <key>UIStatusBarHidden</key>
                       <false/>
                       <key>UIStatusBarStyle</key>
                       <string>UIStatusBarStyleDefault</string>
                   </dict>
               </plist>
           </ios>
           <android xmlns:android="http://schemas.android.com/apk/res/android">
               <manifest>
                   <uses-sdk android:targetSdkVersion="21"/>
                   <!-- Allows the API to download data from Google Map servers -->
                   <uses-permission android:name="android.permission.INTERNET"/>
                   <!-- Allows the API to cache data -->
                   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
                   <!-- Use GPS for device location -->
                   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
                   <!-- Use Wi-Fi or mobile connection for device location -->
                   <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
                   <!-- Allows the API to access Google web-based services -->
                   <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>
                   <!-- Specify OpenGL ES 2.0 as a requirement -->
                   <uses-feature android:glEsVersion="0x00020000" android:required="true"/>
                   <uses-permission android:name="com.appcelerator.sample.mapping.permission.MAPS_RECEIVE"/>
                   <permission
                       android:name="com.appcelerator.sample.mapping.permission.MAPS_RECEIVE" android:protectionLevel="signature"/>
                   <application>
                       <meta-data
                           android:name="com.google.android.maps.v2.API_KEY" android:value="AIzaSyBDHDIaKMqiLg6ntGv0snXFW32NDDEXgbc"/>
                   </application>
               </manifest>
           </android>
           <mobileweb>
               <precache/>
               <splash>
                   <enabled>true</enabled>
                   <inline-css-images>true</inline-css-images>
               </splash>
               <theme>default</theme>
           </mobileweb>
           <modules>
               <module platform="iphone">ti.map</module>
               <module platform="android" version="2.3.1">ti.map</module>
           </modules>
           <deployment-targets>
               <target device="android">true</target>
               <target device="ipad">true</target>
               <target device="iphone">true</target>
               <target device="mobileweb">true</target>
           </deployment-targets>
           <sdk-version>4.0.0.v20150429154210</sdk-version>
           <property name="appc-app-id" type="string">55499a092284ff862dbcfd92</property>
       </ti:app>
       
  3. Ashraf Abu 2015-05-06

    PR: https://github.com/appcelerator-modules/ti.map/pull/93
  4. Ashraf Abu 2015-05-07

    Closed PR 93 in favor of https://github.com/appcelerator-modules/ti.map/pull/86. Will be reviewing this PR.
  5. Ashraf Abu 2015-05-27

    Update: New PR: https://github.com/appcelerator-modules/ti.map/pull/99 https://github.com/appcelerator-modules/ti.map/pull/86 is closed. Everything in PR86 was merged into 1 commit in PR99.
  6. Ashraf Abu 2015-05-28

    Binary update PR: https://github.com/appcelerator/titanium_mobile/pull/6881
  7. Lokesh Choudhary 2015-06-10

    Verified the feature. We can add ploygon's & circle's on to mapview. Closing. Environment: Appc Studio : 4.1.0.201505071004 Ti SDK : 4.1.0.v20150610043614 Ti CLI : 4.0.1 Alloy : 1.6.0 MAC Yosemite : 10.10.3 Appc npm : 4.0.0 Appc CLI : 4.0.2-rc2 Node: v0.10.37 Nexus 5 - Android 5.1.1 Map Module: 2.3.1

JSON Source