Documentation

# Quick example of how to use the module, showing all the variations of overlays
#
# Complete documentation is included inside the module, or available online here

var nfm = require('netfunctional.mapoverlay');

// create base window
//
var win1 = Titanium.UI.createWindow({
	title : 'MapOverlay Example',
	backgroundColor : '#fff'
});

//#First create an object defining the properties of our overlay for a circle
var circleOverlayDef2 = {
	name : "broadcastRange2",
	type : "circle",
	center : {
		latitude : 42.814243,
		longitude : -73.939569
	},
	radius : 160000, //approximates 1000 miles
	strokeColor : "red",
	strokeAlpha : 0.9,
	fillColor : "orange",
	fillAlpha : 0.5,
	width : 1
};

var polyOverlayDef = {
	name : "pOverlay1",
	type : "polygon",
	points : [
		{latitude : 32.259265, longitude : -64.863281},
		{latitude : 18.354526, longitude : -66.049805},
		{latitude : 25.839449, longitude : -80.244141}],
	strokeColor : "purple",
	strokeAlpha : 0.9,
	fillColor : "blue",
	fillAlpha : 0.5
};

var polyLineOverlayDef = {
	name: "polyLine",
	points : [
		{longitude:-73.939569, latitude : 42.814243},
		{longitude:-74.970703, latitude :39.842286},
		{longitude:-74.970703, latitude :38.548165},
		{longitude:-74.355469, latitude :36.809285},
		{longitude:-73.916016, latitude :35.173808},
		{longitude:-73.300781, latitude :33.28462},
		{longitude:-73.212891, latitude :31.877558},
		{longitude:-72.421875, latitude :29.53523},
		{longitude:-71.542969, latitude :28.767659},
		{longitude:-71.191406, latitude :27.371767}],
	color : "purple",
	width:3,
	alpha:0.9
};

var mapView = nfm.createMapView({
	mapType : Titanium.Map.STANDARD_TYPE,
	region : {
		latitude : 34.814243,
		longitude :-73.939569,
		latitudeDelta : 8,
		longitudeDelta : 8
	},
	animate : true,
	regionFit : true,
	userLocation : true
});

// buttons to demonstrate creating and removing overlays
var button01 = Ti.UI.createButton({
	title : 'Circle',
	width : 60,
	height : 40,
	left : 10,
	top : 20,
	isON : false
});

button01.addEventListener('click', function() {
	if(button01.isON) {
		mapView.removeOverlay(circleOverlayDef2);
		button01.isON = false;
	} else {
		mapView.addOverlay(circleOverlayDef2);
		button01.isON = true;
	}
});

var button02 = Ti.UI.createButton({
	title : 'Image',
	width : 70,
	height : 40,
	left:80,
	top : 20,
	isON : false
});

button02.addEventListener('click', function(){

	if(button02.isON) {
		mapView.removeOverlay({
			name : 'floridaWeatherMap',
			type : 'image',
			northWestCoord : {latitude : 30,longitude : -85},
			southEastCoord : {latitude : 27.5,longitude : -80},
			alpha : 0.9,
			img : 'data/mapImageOverlay.png'
		});
		button02.isON = false;
	}
	else{
		mapView.addOverlay({
			name : 'floridaWeatherMap',
			type : 'image',
			northWestCoord : {latitude : 30,longitude : -85},
			southEastCoord : {latitude : 27.5,longitude : -80},
			alpha : 0.9,
			img : 'data/mapImageOverlay.png'
		});
		button02.isON = true;
	}

});

var button03 = Ti.UI.createButton({
	title : 'Polygon',
	width : 70,
	height : 40,
	right : 80,
	top : 20,
	isON : false
});

button03.addEventListener('click', function() {
	if(button03.isON) {
		mapView.removeOverlay(polyOverlayDef);
		button03.isON = false;

	} else {
		mapView.addOverlay(polyOverlayDef);
		button03.isON = true;
	}
});

var button04 = Ti.UI.createButton({
	title : 'Route',
	width : 60,
	height : 40,
	right : 10,
	top : 20,
	isON : false
});

button04.addEventListener('click', function() {
	if(button04.isON) {
		mapView.removePolyline(polyLineOverlayDef);
		button04.isON = false;

	} else {
		mapView.addPolyline(polyLineOverlayDef);
		button04.isON = true;
	}
});

win1.add(mapView);
win1.add(button02);
win1.add(button01);
win1.add(button03);
win1.add(button04);

//Note:  can alternatively use nfm.createAnnotation
var broadcastInfo = Titanium.Map.createAnnotation({
	latitude : 42.814243,
	longitude : -73.939569,
	title : "First College Radio Station",
	subtitle : '~1000 mile broadcast range, Oct 1947 Union College, NY',
	pincolor : Titanium.Map.ANNOTATION_GREEN,
	animate : true,
});

mapView.addAnnotation(broadcastInfo);

//Note:  can alternatively use nfm.createAnnotation
var bermTriWarning = Titanium.Map.createAnnotation({
	latitude : 27.293689,
	longitude : -68.730469,
	title : "Bermuda Triangle",
	subtitle : '(Here be dragons!)',
	pincolor : Titanium.Map.ANNOTATION_GREEN,
	animate : true,
});
mapView.addAnnotation(bermTriWarning);

win1.open();