Titanium JIRA Archive
Appcelerator Modules (MOD)

[MOD-2145] Ti.Map: iOS - Support Image Overlays

GitHub Issuen/a
TypeNew Feature
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2018-05-03T07:41:47.000+0000
Affected Version/sn/a
Fix Version/sTi.Map iOS 3.1.0
ComponentsMap
Labelsios, mapView
ReporterJoseph Sachs
AssigneeVijay Singh
Created2015-05-28T11:36:04.000+0000
Updated2018-08-06T17:49:33.000+0000

Description

Attachments

FileDateSize
image2.jpg2018-05-03T06:21:20.000+0000264143
imageOverlay.png2015-05-28T11:33:26.000+0000123472
overlay_park.png2018-05-03T06:21:21.000+0000618195
overlay_park@2x.png2018-05-03T06:21:21.000+00001118741

Comments

  1. Hans Knöchel 2017-10-12

    If someone can help with the Android part, I am willing to expose the iOS part for the next release.
  2. Vijay Singh 2018-04-23

    APIs for this in iOS and android can be like below. [~gmathews] [~jquick] Can you please confirm on this with help of https://developer.android.com/reference/com/google/android/gms/maps/model/GroundOverlay.html-
       1. Creating image overlay -
            var imageOverlay = Map.createImageOverlay({
                                                 boundsCoordinate: {
                                                   topLeft:{ latitude: 34.4311, longitude: -118.6012 },
                                                   bottomRight:{ latitude: 34.4194, longitude: -118.5912 },
                                                 },
                                     image: 'overlay_park.png',
                                     });
       
       2. Add single image overlay -
              mapview.addImageOverlays(imageOverlay);
       
       3. Add multiple image overlay -
            mapview.addImageOverlays([imageOverlay1, imageOverlay2]);
       
       4. Remove single image overlay -
              mapview.removeImageOverlay(imageOverlay);
       
       5. Remove all image overlays -
            mapview.removeAllImageOverlays();
       
       
    Complete test case -
       var Map = require('ti.map');
       var win = Titanium.UI.createWindow();
       
       var mountainView = Map.createAnnotation({
           latitude:34.4448,
           longitude:-118.5971,
           title:"Appcelerator Headquarters",
           subtitle:'Mountain View, CA',
           pincolor:Map.ANNOTATION_RED,
           myid:1 // Custom property to uniquely identify this annotation.
       });
       
       var mapview = Map.createView({
           mapType: Map.STANDARD_TYPE,
           region: {latitude:34.4248, longitude: -118.5971,
                   latitudeDelta:0.01, longitudeDelta:0.01},
           animate:true,
           regionFit:true,
           userLocation:true,
           annotations:[mountainView]
       });
       
       var imageOverlay = Map.createImageOverlay({
                                                 boundsCoordinate: {
                                                   topLeft:{ latitude: 34.4311, longitude: -118.6012 },
                                                   bottomRight:{ latitude: 34.4194, longitude: -118.5912 },
                                                 },
                                     image: 'overlay_park.png',
                                     });
       
       var imageOverlay1 = Map.createImageOverlay({
                                                 boundsCoordinate: {
                                                 topLeft:{ latitude: 34.4511, longitude: -118.6012 },
                                                 bottomRight:{ latitude: 34.4394, longitude: -118.5912 },
                                                 },
                                                 image: 'image2.jpg',
                                                 });
       
       mapview.addImageOverlays([imageOverlay, imageOverlay1]);
       //mapview.addImageOverlay(imageOverlay);
        setTimeout(function(e){
        Ti.API.info("inside timer");
        //mapview.removeAllImageOverlays();
       mapview.removeImageOverlay(imageOverlay);
        }, 5000);
       
       win.add(mapview);
       // Handle click events on any annotations on this map.
       mapview.addEventListener('click', function(evt) {
           Ti.API.info("Clicked " + evt.clicksource + " on " + evt.latitude + "," + evt.longitude);
       });
       win.open();
       
       
  3. Vijay Singh 2018-04-24

    PR (iOS) : https://github.com/appcelerator-modules/ti.map/pull/227
  4. Hans Knöchel 2018-05-03

    iOS has just been merged and released as Ti.Map iOS 3.1.0. Android parity will be tracked in MOD-2416.
  5. Eric Merriman 2018-08-06

    Cleaning up older fixed issues. If this issue should not have been closed as fixed, please reopen.

JSON Source