Skip to content

Instantly share code, notes, and snippets.

@kettleio kettleio/app.js
Last active May 13, 2016

Embed
What would you like to do?
Map Controller - Cordova Watch App
.factory('Location', function() {
var position = {
lat: '',
lng: ''
};
var get = function(){
return position;
}
var save = function(latitude, longitude){
position = {
lat: latitude,
lng: longitude
};
console.log(position);
}
return {
get: get,
save: save
};
})
.controller('mapCtrl', function($scope, $ionicPlatform, $state, Location) {
$scope.ifValidAddress = false;
$scope.disableTap = function(){
container = document.getElementsByClassName('pac-container');
angular.element(container).attr('data-tap-disabled', 'true');
angular.element(container).on("click", function(){
document.getElementById('search-place').blur();
});
};
$scope.openCompass = function(){
$state.go('compass');
};
$scope.initWatchGlance = function(){
var payload = {
'label2': {'value': 'Table with a colors. ' + new Date(), 'color': '#FFFFFF'},
'table': { // don't add selectable rows to a glance since glances are read-only
'rows': [
{
'type': 'OneColumnRowType', // available types are specified in ObjC
'group': {
'backgroundColor': '#1884C4',
'cornerRadius': 8
},
'label': {'value': ' images!'}, // unlike HTML, multiple spaces have effect
'imageLeft': {'src': 'www/img/ionic.png', 'width': 25, 'height': 30},
'imageRight': {'src': 'www/img/ionic.png', 'width': 25, 'height': 30}
},
{
'type': 'OneColumnRowType',
'group': {
'backgroundColor': '#7884C4',
'cornerRadius': 8
},
'label': {'value': '2nd row, no img'}
}
]
}
};
applewatch.loadGlance(payload);
console.log('loading first glance');
};
$scope.mapWatchGlance = function(){
$scope.location = Location.get();
var payload = {
'label': {
'value': "Kettle's Locator",
'color': '#FFFFFF',
'font': {
'size': 12
}
},
'label2': {
'value': "We have a new location. @" + new Date(),
'color': '#FFFFFF',
'font': {
'size': 10
}
},
'map': {
'center': {
// Amersfoort, The Netherlands
'lat': $scope.location.lat,
'lng': $scope.location.lng
},
'zoom': 2, // 0.001 is streetlevel, 4 fits the entire Netherlands
'annotations': [ // up to 5 annotations (custom pins), any more are ignored (play with the zoom value to make them all fit)
{
'pinColor': 'green', // green | red | purple
'lat': $scope.location.lat,
'lng': $scope.location.lng
}
]
}
};
applewatch.loadGlance(payload);
console.log('loading map glance');
};
document.addEventListener('deviceready', function(){
console.log('device ready');
// Apple Watch load Glance
applewatch.callback.onLoadGlanceRequest = $scope.initWatchGlance();
//applewatch.callback.onLoadAppDetailRequest = $scope.initWatchAppPage();
console.log('end device ready');
}, false);
$ionicPlatform.ready(function() {
/*
applewatch.callback.onError = function (message) {
console.log("Error: " + message);
};
*/
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create the search box and link it to the UI element.
var input = document.getElementById('search-place');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
$scope.ifValidAddress = false;
$scope.$apply();
console.log($scope.ifValidAddress);
return;
}
$scope.ifValidAddress = true;
$scope.$apply();
console.log($scope.ifValidAddress);
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
Location.save(place.geometry.location.lat(), place.geometry.location.lng());
$scope.mapWatchGlance();
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
});
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.