So this is my first time working with Appcelerator's Map module and and I could use some advice on trying to make annotations appear on my map for every location I have identified. The dbArray is being passed in from another module and I have verified that there is data in the array, however I am not sure how to get it to be processed in the loop. Can anyone make any suggestions to help guide me?
var buildSecUI = function(dbArray){ //dbArray from data.js read function
console.log("---buildSecUI is activated---");
console.log(dbArray);
var secWin = Ti.UI.createWindow({
layout: "vertical",
backgroundColor: "#ffffff"
});
//building the map
var Map = require('ti.map');
var mapView = Map.createView({
mapType: Map.NORMAL_TYPE,
region: {latitude:25.2867, longitude:51.5333,
latitudeDelta:0.05, longitudeDelta:0.05},
animate:true,
regionFit:true,
userLocation:true
});
//array for annotations (pins for maps)
var annotations = [];
for ( var i = 0 ; i < dbArray.length; i++ ) {
// this section will create annotations and add them on the mapView
var pin = Map.createAnnotation({
latitude: this.dbArray[i].lat,
longitude: this.dbArray[i].lng,
title: this.dbArray[i].name,
animate:true,
pincolor:Map.ANNOTATION_PURPLE
});
annotations[i] = pin;
//annotations.push(pin);
mapView.addAnnotation(annotations[i]); // adds annotations
} //for loop closure
secWin.add(mapView);
navWin.openWindow(secWin); }; //closure for buildSecUI
In your loop you are referring to "this.dbArray[i]", it should be just "dbArray[i]". "this.dbArray" is probably undefined.
Related
Im using AnyGantt, but Im having problems setting it up correctly.
Here is the full code:
var endpoint = '/api/chart/data/'
var label = []
var start = []
var end = []
var werk = []
$.ajax({
method: 'GET',
url: endpoint,
success: function(data){
labels = data.label
start = data.start
end = data.end
uplant = data.werk
var obj = {}
var finalArray = []
for (var i = 1; i <= start.length; i++) {
var first = { id: i, name: uplant[i] }
obj = { ...obj, ...first }
var periods = { id: labels[i], start: start[i - 1], end: end[i - 1] }
if (obj.periods) {
obj.periods.push(periods)
} else {
obj.periods = [periods]
}
finalArray.push(obj)
}
anychart.onDocumentReady(function () {
var data = finalArray;
var treeData = anychart.data.tree(data, "asTable");
chart = anychart.ganttResource();
chart.data(treeData);
chart.getTimeline().scale().minimum("2018-01-01");
chart.getTimeline().scale().maximum("2020-01-01");
var dataGrid = chart.dataGrid();
dataGrid.column(0)
.title('#')
.width(30)
.cellTextSettings({hAlign: 'center'});
dataGrid.column(1)
.title('Werk')
.width(60)
.cellTextSettings({hAlign: 'left'})
.format(function () {
return this.name;
});
chart.getTimeline().horizontalScrollBar().enabled(true);
/* chart.getTimeline().periods().edit(true); */
chart.getTimeline().edit(true);
chart.getTimeline().tooltip(false);
chart.getTimeline().elements().labels(false);
chart.container("containerx");
chart.draw();
chart.fitAll();
});
},
error:function(error_data){
console.log("error")
console.log(error_data)
}});
I can't click and move the periods (tasks) and I cant scroll.
Thank you very much for any suggestions
Please find below a screenshot of the chart:
Please find below a screenshot of the chart:
Scale range
You are applying the scale min/max correctly:
chart.getTimeline().scale().minimum("2018-01-01");
chart.getTimeline().scale().maximum("2020-01-01");
But then you override the default scale and it drops the min/max settings:
var dateTimeScale = anychart.scales.dateTime();
var dateTimeTicks = dateTimeScale.ticks();
chart.xScale(dateTimeScale);
There's no need to do this! The default Gantt Chart is already a dateTime type. Solution - simply remove those three lines above from your code.
LiveEdit
Your line chart.getTimeline().periods().edit(true); is correct, but due to a little bug in the current version 8.7.0 (Aug 2019) this setter doesn't work for types of elements. To avoid it replace this line with the following line chart.getTimeline().edit(true);.
Scrollers
The Gantt chart doesn't support x/yScrollers, only simple scroll bars.
The following methods the Gantt chart doesn't support:
chart.xScroller(true);
chart.yScroller(true);
For zooming, you can use one of the API functions. This subject is described in detail in the Gantt zooming article.
Some time ago, the map.layers.clear() method would not remove the polyline from the map, but now, after some Bing update, the polyline is being removed when map.layers.clear() is called. How can I solve this?
Map initialize
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(47.606209, -122.332071),
zoom: 12
});
Here add pushpins
// Add pushpins
function addPushpins() {
// Generate an array of 10 random pushpins within current map bounds
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds());
var layer = new Microsoft.Maps.Layer();
layer.add(pushpins);
map.layers.insert(layer);
}
Here is update direction callback
// On update directions callback
function onUpdateDirections() {
map.layers.clear();
}
Call addPushpins function
addPushpins();
Here is the Bing Maps Direction Manager sample code
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function() {
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Set Route Mode to driving
directionsManager.setRequestOptions({
routeMode: Microsoft.Maps.Directions.RouteMode.driving
});
// Callback for on update directions
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', onUpdateDirections);
var waypoint1 = new Microsoft.Maps.Directions.Waypoint({
address: 'Redmond',
location: new Microsoft.Maps.Location(47.67683029174805, -122.1099624633789)
});
var waypoint2 = new Microsoft.Maps.Directions.Waypoint({
address: 'Seattle',
location: new Microsoft.Maps.Location(47.59977722167969, -122.33458709716797)
});
directionsManager.addWaypoint(waypoint1);
directionsManager.addWaypoint(waypoint2);
// Set the element in which the itinerary will be rendered
directionsManager.setRenderOptions({
itineraryContainer: document.getElementById('printoutPanel')
});
directionsManager.calculateDirections();
});
UPDATE - Removes partials pushpins
// Map initialize
var map, pushpins, layer;
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(47.606209, -122.332071),
zoom: 12
});
// Here is the Bing Maps Direction Manager sample code
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function() {
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Set Route Mode to driving
directionsManager.setRequestOptions({
routeMode: Microsoft.Maps.Directions.RouteMode.driving
});
var waypoint1 = new Microsoft.Maps.Directions.Waypoint({
address: 'Redmond',
location: new Microsoft.Maps.Location(47.67683029174805, -122.1099624633789)
});
var waypoint2 = new Microsoft.Maps.Directions.Waypoint({
address: 'Seattle',
location: new Microsoft.Maps.Location(47.59977722167969, -122.33458709716797)
});
directionsManager.addWaypoint(waypoint1);
directionsManager.addWaypoint(waypoint2);
// Callback for on update directions
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', onUpdateDirections);
directionsManager.calculateDirections();
});
// On update directions callback
function onUpdateDirections() {
clearLayers();
window.setTimeout(function() {
addPushpins();
}, 2000);
}
// Add pushpins
function addPushpins() {
// Generate an array of 10 random pushpins within current map bounds
pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds());
layer = new Microsoft.Maps.Layer();
layer.add(pushpins);
map.layers.insert(layer);
}
// Clear layers
function clearLayers() {
// map.layers.clear();
if (layer !== undefined) {
var currentPrimitives = layer.getPrimitives();
/* remove those that are Pushpins */
for (var i = 0; i < currentPrimitives.length; i++) {
var entity = currentPrimitives[i];
if (entity instanceof Microsoft.Maps.Pushpin){
layer.remove(entity);
}
}
}
}
This is to be expected. It not clearing in the past would have been considered a bug. If you want to clear your layers, but leave the directions you have two options. Clear the layers before calculating the directions, or clear the individual layer rather than all layers in the map.
You could examine your layer, get the primitives from it and remove only the pins. Something like the following:
var currentPrimitives = layer.getPrimitives();
/* remove those that are Pushpins */
for (var i = 0; i < currentPrimitives.length; i++) {
var entity = currentPrimitives[i];
if (entity instanceof Microsoft.Maps.Pushpin){
layer.remove(entity);
}
}
http://plnkr.co/edit/Zd9GwG?p=preview
I am working on this google map + angular.js example . I want to change the location center dynamically depend on the variable .i.e. I want to make it dynamic center. Please suggest how to do this ?
I want to do some thing Like this.
// Code goes here
//Add the requried module 'angular-ui' as a dependency
angular.module('maptesting', ['ui.directives']);
function MapCtrl($scope) {
$scope.lat = 35.120922 ;
$scope.long = -89.97731 ;
var ll = new google.maps.LatLng($scope.lat, $scope.long);
$scope.mapOptions = {
center: ll,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Markers should be added after map is loaded
$scope.onMapIdle = function() {
//alert("DF");
if ($scope.myMarkers === undefined){
var marker = new google.maps.Marker({
map: $scope.myMap,
position: ll
});
$scope.myMarkers = [marker, ];
}
};
$scope.showMarkerInfo = function(marker) {
$scope.myInfoWindow.open($scope.myMap, marker);
};
$scope.changeval = function(){
$scope.lat = 13.0810 ;
$scope.long = 80.2740 ;
};
}
You need to watch for changes in the scope in order to refresh the map.
Demo Plunkr
(just use the input fields above the map to change the center of the map in real time)
The important part is $scope.$watch:
var updateCenter = function() {
var ll = new google.maps.LatLng($scope.lat, $scope.long);
$scope.myMap.panTo(ll);
// eventually more stuff
}
$scope.$watch('lat', updateCenter);
$scope.$watch('long', updateCenter);
I am having an issue with losing data within an array when i try to assign it to a new array.
My object im using is as follows:
$scope.shops = [
{
name: "Kroger",
items: [ { itemName: "Chips"} ]
}
];
This is the code for the functions im using, it may be a callback issue? or something? Im losing the items info for the shop.
$scope.addItem = function(newItem, newShop){
var x = findShop(newShop);
x.items.push(newItem);
$scope.shops.push(x);
};
findShop = function(shopTag){
var old = angular.copy($scope.shops);
var tar = {
name: shopTag,
items: []
};
$scope.shops = [];
angular.forEach(old, function(shop, key){
if(shop.name === shopTag) {
tar.items = angular.copy(shop.items);
}
else {
$scope.shops.push(shop);
}
});
return tar;
};
the goal is to have the findShop function return a shop with the correct name, with empty items if there wasnt a shop previously, or with items full of the items if the shop was already created. then the addItem will push the item into the shop.items array and push the shop into the $scope
Any help is greatly appreciated!!!
You are right , it is this line which is causing the problem ,
tar.items = shop.items;
Try using it like this ,
tar.items = angular.copy(shop.items);
var old = $scope.shops; // old and $scope.shops point to the same place
..........
$scope.shops = []; // you assigned a new array that overrides the data
............
angular.forEach(old, function(shop, key){ // for each on an empty array????
If you dont want to point to the same reference use:
var copiedObject = angular.copy(objToCopy);
I guess the array is getting empty even before for loop.
Var old is reference to shops array, which you are making empty before foreach.. effectively making old empty...
I'm rattling my brains here and cannot figure out why this is not working
var lat = Math.round(top_location.geometry.location.lat() * 1000000)/1000000;
var lng = Math.round(top_location.geometry.location.lng() * 1000000)/1000000;
geocode_results[i]['lat'] = lat;
geocode_results[i]['lng'] = lng;
geocode_results[i]['l_type'] = top_location.geometry.location_type;
marker = new google.maps.Marker({
icon: mapIcon,
position: new google.maps.LatLng(lat,lng),
map: map
});
markersArray.push(top_location.address_components[0].long_name);
Using the above created my marker(s) and plots them on my map.
Using the following code to remove the markers from the map
$scope.removemarkers = function() {
console.log($scope);
console.log(markersArray);
if (markersArray && markersArray.length) {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray = [];
}
};
I get the following error in console.log()
TypeError: Object AB42 2DL has no method 'setMap'at
Object.$scope.removemarkers
AB42 2DL being a random postcode used when plotting a marker
markersArray doesn't contain markers, it contains strings.
Try this:
markersArray.push(marker);