Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25076] iOS 11: Add new MapKit API's

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2017-10-02T13:45:03.000+0000
Affected Version/sn/a
Fix Version/sRelease 6.3.0
ComponentsiOS
Labelsn/a
ReporterHans Knöchel
AssigneeVijay Singh
Created2017-08-08T19:56:19.000+0000
Updated2017-11-08T19:28:02.000+0000

Description

MapKit in iOS 11 adds support for marker-annotations, annotation-clustering and more. We should add those API's to our existing Ti.Map module. Here are some important API's to cover: - Marker annotations (MKMarkerAnnotationView) - We need to find a way to integrate these into the current ti.map logic. What I thought about is to integrate a "type" property into our annotations, so that custom annotation, image annotations, pin-annotations, marker annotations (iOS 11 only) and cluster-annotations (iOS 11 only) have their specific types to identify - Expose all related properties like glyphText, glyphTintColor and glyphImage - Annotation clustering - Includes many components: MKClusterAnnotation, MKAnnotationViewCollisionMode, MKMapViewDefaultClusterAnnotationViewReuseIdentifier, MKFeature*, etc - Need to work out, what components are used in which context and how we can expose them in a clean and easy way to the developer - New map-type! MKMapTypeMutedStandard - Should be exposed as constant (does Android have something similar?), e.g. MAP_TYPE_MUTED_STANDARD

Comments

  1. Vijay Singh 2017-09-06

    Major map apis, which will be expose to developer are - 1. MarkerAnnotation - showMarker : true/false (whether to show marker, if customview is not there) markerColor: TiColor (set tint color of marker) markerGlyphText: String (set marker's glyph text) markerGlyphColor:TiColor (set marker glyph tint color) markerGlyphImage: Image (set glyphImage) markerSelectedGlyphImage: Image (set selected glyph image) markerAnimatesWhenAdded : Bool markerTitleVisibility: markerSubtitleVisibility: FEATURE_VISIBILITY_ADAPTIVE FEATURE_VISIBILITY_HIDDEN FEATURE_VISIBILITY_VISIBLE 2. Annotation clusterIdentifier: String (set cluster identifier, which will be used in creating cluster) annotationDisplayPriority: FEATURE_DISPLAY_PRIORITY_REQUIRED FEATURE_DISPLAY_PRIORITY_DEFAULT_HIGH FEATURE_DISPLAY_PRIORITY_DEFAULT_LOW collisionMode: ANNOTATION_VIEW_COLLISION_MODE_RECTANGLE ANNOTATION_VIEW_COLLISION_MODE_CIRCLE 3.Map MUTED_STANDARD_TYPE (new map type) 4. MKClusterAnnotation setClusterAnnotation({ annotation:param2, memberAnnotations:param1}) (available for TiMapView) param1 : array of annotations for those cluster annotation is created. param2 : annotation to show cluster For giving custom view to cluster annotation, “clusterannotations” event should be implemented by developer.This will get array of member annotations proxy and map proxy. From this event setClusterView() can be called to set cluster annotation view. 5. Event- "clusteringstarted"
  2. Vijay Singh 2017-09-12

    PR- https://github.com/appcelerator-modules/ti.map/pull/212
        var Map = require('ti.map');
       
       var win = Titanium.UI.createWindow({
         fullscreen: true,
       });
       var createMapIcon = function createMapIconFn(number) {
       
         var image = Ti.UI.createView({
           height: Ti.UI.SIZE,
           width: Ti.UI.SIZE,
           backgroundColor: 'transparent',
       
         });
         var imageBack = Ti.UI.createView({
           height: 34,
           width: 34,
           borderRadius: 17,
           backgroundColor: 'white',
           borderColor: 'black',
           top: 0,
         });
       
         imageBack.add(Ti.UI.createLabel({
           text: number,
           color: 'black',
           width: Ti.UI.SIZE,
           height: Ti.UI.SIZE,
           top: 5
       
         }));
         image.add(imageBack);
         return image;
       };
       
       var ann = [];
       
       for (var i = 0; i < 10; i++) {
       
         ann.push(Map.createAnnotation({
           clusterIdentifier: 'abc',
           collisionMode: Map.ANNOTATION_VIEW_COLLISION_MODE_RECTANGLE,
           showMarker: true,
           markerGlyphText: i.toString(),
           markerColor: 'blue',
           markerGlyphColor: 'green',
           title: 'Title',
           subtitle: 'subtitle',
           markerTitleVisibility: Map.FEATURE_VISIBILITY_VISIBLE,
           markerSubtitleVisibility: Map.FEATURE_VISIBILITY_HIDDEN,
           markerGlyphImage: 'Flag.png',
           markerSelectedGlyphImage: 'social-facebook-icon.png',
           annotationDisplayPriority: Map.FEATURE_DISPLAY_PRIORITY_DEFAULT_LOW,
           draggable: true,
           latitude: Math.random() * 10 + 40,
           longitude: Math.random() * 10,
         }));
       }
       
       var mapview = Map.createView({
         annotations: ann,
         bottom: 0,
         right: 0,
         width: Ti.UI.FILL,
         height: Ti.UI.FILL,
         rotateEnabled: true,
         compassEnabled: true,
         showsScale: false,
         mapType: Map.MUTED_STANDARD_TYPE,
         showsPointsOfInterest: false,
         userLocation: true,
       
       });
       
       mapview.addEventListener('clusteringstarted', function(e) {
         Ti.API.info('clustering started');
         var clusterAnnotation = Map.createAnnotation({
           customView: createMapIcon(e.memberAnnotations.length),
           // showMarker:true,
           //markerText:e.memberAnns.length.toString(),
           title: 'Title1',
           subtitle: 'subtitle1',
         });
         mapview.setClusterAnnotation({
           annotation: clusterAnnotation,
           memberAnnotations: e.memberAnnotations
         });
       });
       win.add(mapview);
       win.open();
       
  3. Hans Knöchel 2017-10-02

    Reopening because of the build-crashes seen in MOD-2365.
  4. Hans Knöchel 2017-10-02

    Resolving as *Fixed* again: I bumped Ti.Map to 3.0.0, made an own release for the selected annotation fix (2.12.2) and updated the 6_3_X and master modules.json to include the 3.0.0 version as part of our iOS 11 release in 6.3.0. cc [~eharris]
  5. Abir Mukherjee 2017-11-08

    Validated the Map is displayed on iOS 11 device. I also checked that the changes are seen in SDK 6.3.0. Closing ticket.

JSON Source