Quantcast
Channel: Appcelerator Developer Center Q&A Unanswered Questions 20
Viewing all articles
Browse latest Browse all 8068

adjusting radius of circle based on slider change event

$
0
0

I am using the google maps for iOS module version 1.7.2 and Titanium classic 3.4.1.

I have a map with a marker containing a user's current position.

I then have a slider, which will control a radius view which I have added to the map.

The bit I am having trouble with is equating the radius width with actual miles on the visible map.

I currently have a slider which adjust the width, height and borderWidth of the view but I need to figure out the exact formula for that adjustment.

The bit which may be tricky is adjusting the circle view when the user zooms in on the map.

Code so far:

var Longitude_post;
    var Latitude_post;
    var Annotation;
    var Radius_view;
 
    Titanium.Geolocation.getCurrentPosition(function(e) {   
 
        if(!e.success || e.error) {
            Longitude_post=-7.689989;
            Latitude_post=53.455798;
            console.log(e.error);
            zoomVar=5;//the zoomVar property may be needed for the formula?
 
        }
        else{
            Longitude_post=e.coords.longitude;
            Latitude_post=e.coords.latitude;
            console.log(e.coords.longitude);
            zoomVar=8;
 
        }
 
        Map_view.setCamera ({
            latitude: Latitude_post,
            longitude: Longitude_post, 
            zoom:zoomVar,
            zoomGestures: true,
            scrollGestures:true,
            bearing:-7,
            viewingAngle:0,
            mapX:200,
            mapY:0
        });
 
        Annotation = googlemaps.createMarker({
            title:"Drag me to your desired location",
            location:{latitude: Latitude_post, longitude: Longitude_post},
            draggable:true
        });
 
        Radius_view=Ti.UI.createView({
            width:100,
            height:100,
            backgroundColor:'#09ccfd',
            borderRadius:50,
            opacity:0.5
        });
 
        Map_view.add(Radius_view);
        Map_view.addMarker(Annotation);
    });
    var Update_slider=Ti.UI.createSlider({
        bottom:'5%',
        width:'100%',
        min: 50,//50m
        max: 20000,//20000m i.e. 20k
        value: 9975,    
    });
 
    Update_slider.addEventListener('change', function(e){
        Radius_view.setWidth(e.value/10);//not sure what I should be doing here
        Radius_view.setHeight(e.value/10);
        Radius_view.setBorderRadius(e.value/20);//this must be double whatever we divide by above
    });
Any help appreciated!

Viewing all articles
Browse latest Browse all 8068

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>