Titanium JIRA Archive
Appcelerator Community (AC)

[AC-840] ti.map module doesn't show anything or can be blurry in Android if mapType is SATELLITE_TYPE or HYBRID_TYPE

GitHub Issuen/a
TypeBug
Priorityn/a
StatusResolved
ResolutionCannot Reproduce
Resolution Date2015-09-28T15:47:50.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsAlloy, Appcelerator Modules, Titanium SDK & CLI
Labelsandroid, android-4.2.2, mapsv2, maptype, module, titanium
ReporterJune Rockwell
AssigneeShak Hossain
Created2014-10-08T18:38:57.000+0000
Updated2016-03-08T07:37:07.000+0000

Description

-Ti.Map renders the normal map view in both iOS and Android. But when switching to Satellite view, iOS renders everything including annotation and routes. But Android only displays annotation and no routes or any satellite view. Google play services are installed and it's been verified (see attachment). I didn't do anything different for Android as you can see in one of the attachments, iOS renders the routes, the satellite view and the annotation no problem.- Ti.Map renders all types of maps for iOS. But some of them are blurry for Android and sometimes they don't appear at all. Like if view is zoomed-in or close enough that user would most likely see cross streets and houses, satellite or hybrid view is empty. While still in the same amount of zoom, you move to the left or right or up or down in the map and some satellite view appears but it's blurry. If you zoom out enough, map has all satellite or hybrid view but is blurry. So when user needs to get an idea where this location is and how this route really looks like, they zoom in but that doesn't really help because satellite or hybrid just disappears. Normal map doesn't give that determination sometimes. I followed the Titanium documentation for troubleshooting http://docs.appcelerator.com/titanium/3.0/#!/guide/Google_Maps_v2_for_Android-section-36739898_GoogleMapsv2forAndroid-Mapappearsblurry The map module is not contained in a window that is a modal and android:anyDensity attribute in the element is not included in AndroidManifest.xml. When I zoom out of the map, map is not empty but the satellite view is blurry. But zooming in, only annotation and routes (if there's any) appears. Thanks in advance to anyone who can fix this in Appcelerator.

Attachments

FileDateSize
first_time_map_loads_nozooming.png2014-10-14T16:58:01.000+0000430289
googleplayservicesinstalled.jpg2014-10-08T18:38:57.000+000022850
moving_map_more_to_right.png2014-10-14T16:58:01.000+0000923037
satelliteview_in_ios8.jpg2014-10-08T18:38:57.000+0000111671
satelliteview.jpg2014-10-08T18:38:57.000+000033812
zoomingout1.png2014-10-14T16:58:01.000+00001181278
zoomingout2.png2014-10-14T16:58:01.000+00001382958
zoomout_alittle_then_move_map.png2014-10-14T16:58:01.000+0000607360

Comments

  1. Harish Mridha 2014-10-14

    Hi, We tried to reproduce this issue with a sample test code. It’s not a valid bug. Map SATELLITE_TYPE is working fine for both Ti Classic and Alloy. Screenshot Link: http://oi61.tinypic.com/jgku82.jpg

    TESTING ENVIRONMENT:

    Ti SDK 3.4.0.GA Ti CLI 3.4.0 Alloy 1.5.1 Mac OS X 10.9.5 Android 4.4.2

    TEST CODE ALLOY:

    alloy.js
     
       Alloy.Globals.Map = require('ti.map');
       
    index.xml
     
       <Alloy>
           <Window>
               <Module id="mapview" module="ti.map" method="createView" onClick="report">
                   <!-- Starting with Alloy 1.4.0, use the Annotation tag to define an annotation -->
                   <!-- Prior to Alloy 1.4.0, create annotations in the controller -->
                   <Annotation id='appcHQ' myid='1' />
               </Module>
           </Window>
       </Alloy>
       
    index.tss
     
       "#mapview" : {
       	mapType: Alloy.Globals.Map.SATELLITE_TYPE,
           region : {
               latitude:33.74511,
               longitude:-84.38993,
               latitudeDelta:0.01,
               longitudeDelta:0.01
           }
       },
       "#appcHQ" : {
           latitude: 37.390749,
           longitude: -122.081651,
           title: "Appcelerator Headquarters",
           subtitle: "Mountain View, CA",
           pincolor: Alloy.Globals.Map.ANNOTATION_GREEN
       }
       
    index.js
     
       function report(evt) {
           Ti.API.info("Annotation " + evt.title + " clicked, id: " + evt.annotation.myid);
       }
       
       $.index.open();
       

    TEST CODE CLASSIC:

       var Map = require('ti.map');
       var win = Ti.UI.createWindow();
       
       var annotations = [
       	Map.createAnnotation({
       		latitude: 37.389569,
       		longitude: -122.050212,
       		title: 'Appcelerator HQ',
       		subtitle: 'Mountain View, CA',
       		animate: true,
       		pincolor: Map.ANNOTATION_GREEN,
       	}),
       ];
       var mapview = Map.createView({
           mapType: Map.SATELLITE_TYPE,
           region: {
           	latitude:37.389569,
           	longitude:-122.050212,
               latitudeDelta:.05,
               longitudeDelta:.05
           },
           animate:true,
           regionFit:true,
           userLocation:false,
           annotations: annotations
       });
       
       win.add(mapview);
       win.open();
       

    STEPS TO TEST:

    - Create a simple alloy project. - Update project with test code - Run on android device

    EXPECTED RESULT:

    It’s working as expected. Thanks
  2. Mauro Parra-Miranda 2014-10-14

    Hello [~jhrockwell]! Can you please take a look into the test case provided above? Let me know if works for you as well. Best Regards
  3. June Rockwell 2014-10-14

    I've solved the problem for the routes. But satellite map either doesn't show up or it's blurry.
  4. June Rockwell 2014-10-14

    Hi Mauro, I've used the same code Harish Mridha provided before I started my project. I basically copied and pasted this code which is from the Titanium Map Module documentations to my current project. I only changed the region and annotation's latitude and longitude. The coordinates I used for region and annotation are same. My region's latitudeDelta and longitudeDelta are both 0.018. What I'm trying to say is that it still doesn't work. Maybe the map and these coordinates you guys are testing on are cached so they load. I'm going to provide more HTC One (2013 model) screenshots. When you zoom out of the map, the map isn't grey and empty anymore and satellite view appears *but* it's burry. When you move around the map, *some parts that have satellite are blurry and some parts are empty.* I'm not sure what's wrong and why your tests and replications work *but mine doesn't*. Could you guys please try these coordinates: latitude: 36.138828, longitude: -115.238204 for region and annotation? This is what I did:
       var map = makeMapView();
       makeRoute(map);
       $.win.add(map);
       
       function makeMapView() {
       	var mapview = Alloy.Globals.Map.createView({
       		mapType : Alloy.Globals.Map.HYBRID_TYPE,
       		region : makeRegion(),
       		animate : true,
       		regionFit : true,
       		userLocation : true,
       		annotations : [makeAnnotation()],
       		
       	});
       
       	return mapview;
       }
       
       function makeAnnotation() {
       	/* Create the Annotation here */
       	var annotation;
       	if (data) {
       
       		annotation = Alloy.Globals.Map.createAnnotation({
       			// latitude : 42.334537,
       			// longitude : -71.170101,
       			// title : "Boston College",
       			// subtitle : 'Newton Campus, Chestnut Hill, MA',
       			// animate : true,
       
       			latitude : /*36.18123, //*/
       			data.latitude,
       			longitude : /*-115.187969, //*/
       			data.longitude,
       			title : data.trail_name,
       			// subtitle : 'Mountain View, CA',
       			pincolor : Alloy.Globals.Map.ANNOTATION_RED,
       			myid : 1
       		});
       	}
       
       	return annotation;
       }
       
       function makeRegion() {
       	/* We make a region so that Ti.Map knows where in the map
       	 we need to view the routes and the annotation. */
       	var region;
       
       	if (data) {
       		region = {
       			latitude : /*36.18123, // */
       			parseFloat(data.latitude),
       			longitude : /* -115.187969,*/
       			parseFloat(data.longitude),
       			latitudeDelta : 0.018,
       			longitudeDelta : 0.018
       		};
       	}
       	return region;
       }
       
    *variable data is not empty.* If it's empty, there wouldn't be annotation or routes on my latest uploaded screenshots. I've retraced all my steps that titanium has advised developer in working with Map.Module for Android for a few days now. I even went back to google developer console to check if I have my api keys right and the app id's right. I have internet connection via wifi on this HTC One phone. For now, I'm going to use the Titanium WebView using either a googlemap for javascript or the a jQuery plugin because I've done everything Titanium documentation has stated and searched on google and nothing fixes the blurry-ness or empty-ness of the Map.Module for Android.
  5. Harish Mridha 2015-09-07

    Hi , I tested the issue you reported. It looks like the feature "*mapType is SATELLITE_TYPE or HYBRID_TYPE*" in Appcelerator Studio is working fine for me. Coordinates with latitude: 36.138828, longitude: -115.238204 for region and annotation is also working as expected. I tested this using the *studio build: 4.1.1.201507141126 , TiSDK 4.1.0GA,alloy -v 1.6.2 and ti.map 2.3.1* *Tested Android Devices*
       Nexus 7
         ID                          = 07b926cf
         SDK Version                 = 5.1.1 (android-22)
         ABIs                        = armeabi-v7a, armeabi, armeabi-v7a,armeabi, armeabi-v7a,armeabi, 
       
    I recommend you upgrade studio and ti.map module to the latest build and let us know if you get the error again. I will mark this ticket as "resolved" since I can't reproduce it. However, feel free to reopen with additional information if you notice otherwise. Thanks

JSON Source