Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-24375

iOS: Implement "Peek & Pop" for Map view Annotation

    Details

    • Type: New Feature
    • Status: Closed
    • Priority: Medium
    • Resolution: Fixed
    • Affects Version/s: Release 6.0.1
    • Fix Version/s: Release 6.2.0
    • Component/s: iOS
    • Labels:
      None
    • Environment:

      iOS 10.2

      Description

      Issue Description

      When the user "force touch" on the map view annotation right image, we should catch the peek event listener for that annotation view and display a custom view with some actions like show direction, call etc.

      Usecase:
      In the application, customer is showing the addresses of the doctors available with in 25 km radius of the user selected location on a map view.

      There can be 25 pins near by the user selected location, all these locations are shown as annotations. when the user taps on a particular annotation the info should be displayed as title and subtitle of the annotation.

      Also there will be a right image in the annotation, below are the events expected to be performed on tap or force touch of the annotation.

      Steps to Reproduce
      1. Create a new classic app mobile project
      2. Paste the code

        var MapModule = require('ti.map');
        var win = Ti.UI.createWindow();
         
         
        var left = Ti.UI.createView({
        height: Ti.UI.SIZE,//90,
        width: Ti.UI.SIZE,//200,
        isCustom:true
        //layout: 'vertical'
        });
        var img1= Ti.UI.createImageView({
        image:'KS_nav_views.png'
        });
        var button = Ti.UI.createLabel({
        height: 30,
        width: Ti.UI.SIZE,
        text: 'Button 1'
        });
        var button1 = Ti.UI.createLabel({
        height: 10,
         
        width: Ti.UI.SIZE,
        text: 'Button 2'
        });
        var button2 = Ti.UI.createLabel({
        height: 20,
         
        width: Ti.UI.SIZE,
        text: 'Button 3',
        bottom: 10
        });
         left.add(img1);
        //left.add(button);
         //left.add(button1);
         //left.add(button2);
         
        var mainView=Ti.UI.createImageView({
          height: 70,
        width: 200,
        //image: left.toImage() // uncommenting this line will render the UI correctly even though we are nopt adding this view any where
        });
         //mainView.backgroundImage = left.toImage();
        var pin = MapModule.createAnnotation({
            latitude:37.390749,
            longitude:-122.081651,
            title:"Title1 ",
            //subtitle:'Mountain View, CA',
            pincolor:MapModule.ANNOTATION_RED,
            animate:true,
           // leftView: left,//mainView,
           rightView:left
            //rightButton : 'KS_nav_views.png'
        }); 
         
        var mapview = MapModule.createView({
            mapType: MapModule.NORMAL_TYPE,
            animate:true,
            regionFit:true,
            userLocation: false,
            annotations: [pin]
        }); 
         
        win.add(mapview);
        left.previewContext = Ti.UI.iOS.createPreviewContext({
        actions:[],
        preview:Ti.UI.createView({
        width:120,
        height:120,
        backgroundColor:'red',
        custom : left.isCustom,
        myAnnotation:pin
        })
        }); 
         
          left.previewContext.addEventListener("peek", function(e) {
                Ti.API.warn("The view was peeked - Update the preview here if you want to");
                alert("info>>>>>>"+JSON.stringify(e));
            });
         
           left.previewContext.addEventListener("pop", function() {
                Ti.API.warn("The view was popped - Open the full context here");
            });
        win.open();
        
        

      3. Run
      4. Try The "Peek & pop"
      Expected Results

      1. When the user taps (click event of the map view annotation) on the annotation we should be displaying a view or optional dialog with different options like directions, call and profile.
      2.When the user "force touch" the map annotation on the devices which supports the peek & pop functionality (iPhone 6s and above), we should catch the peek event and display a custom preview view with options call, directions and profile.

      A. Tapping on the directions option should take the user to google maps with route plotted between the user current selected location and the doctor location.
      B. Tapping on the call option will place a call to doctors phone number.
      C . Tapping on the profile take the user where more detailed information of the doctor is shown.

      Limitations or Problems:

      1. There is no " Preview Context" property for the annotation directly.
      2. There is "Preview context" property for the map view, but we want to implement this feature only on the force touch of right image in annotation.
      3. Applying "Preview Context" for map view does not suffice our requirement as we are not getting the source in the map view peek event.
      4. Tried achieving this adding a custom right view to the annotation. But the right view is not rendered properly, there are some limitations. Below are some:

      a) Unable to add a label or button or image view as right view to annotation.
      b) able to add only a plain view to the annotation right view. if we are creating a view and adding label, button or image view to that view and setting the view as right view of annotation, right view is not rendered.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                vijaysingh Vijay Singh
                Reporter:
                rramirez Ricardo Ramirez
                Reviewer:
                Hans Knöchel
              • Watchers:
                5 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Source Code