Have looked into lots of questions about replacing substrings, but none of the examples has been working for me. I have a string in geojson (feature.properties.openingHours), this properties has "Mon, Fri, Sat, Sun" together with times "00:00-24:00 Mon-Sun" etc. I need to change the weekdays to local language for the popup when a "click" occur on a point in the Leaflet map. The string can hold several opening hours like "00:00-20:00 Mon-Fri 08:00-20:00 Sat 08:00-18:00 Sun"
This is the latest I have tried and I get the error "days not defined", is this wrong way doing it, or what is missing?
Result should be from "00:00-24:00 Mon-Sun" => "00:00-24:00 Mån-Sön"
function openingHours(feature, latlng){
var days = feature.properties.openingHours
days = days.replace(/Mon/g, 'Mån')
days = days.replace(/Fri/g, 'Fre')
days = days.replace(/Sat/g, 'Lör')
days = days.replace(/Sun/g, 'Sön');
};
geoLayer = L.geoJson(json, {
pointToLayer: function (feature, latlng) {
return new L.shapeMarker(latlng, {radius: 7, color: '#b30000', fillOpacity: 0.7, weight: 2, shape: 'square'})
},
onEachFeature: function(feature, layer) {
var popupText = '';
popupText += (feature.properties.openingHours) ? '<br></b><i>Öppettider:</i>': '';
popupText += (feature.properties.openingHours) ? '<br></b><i>' + openingHours(days) + '</i><br>': '';
You pass to the openingHours function a undefined variable.
Change your code to:
function openingHours(feature){
var days = feature.properties.openingHours
days = days.replace(/Mon/g, 'Mån')
days = days.replace(/Fri/g, 'Fre')
days = days.replace(/Sat/g, 'Lör')
days = days.replace(/Sun/g, 'Sön');
return days;
};
geoLayer = L.geoJson(json, {
pointToLayer: function (feature, latlng) {
return new L.shapeMarker(latlng, {radius: 7, color: '#b30000', fillOpacity: 0.7, weight: 2, shape: 'square'})
},
onEachFeature: function(feature, layer) {
var popupText = '';
popupText += (feature.properties.openingHours) ? '<br></b><i>Öppettider:</i>': '';
popupText += (feature.properties.openingHours) ? '<br></b><i>' + openingHours(feature) + '</i><br>': '';
}
});
Related
I am working on google column chart. I have created 3 columns while generating charts. Here are those columns.
var dtblData = new google.visualization.DataTable();
dtblData.addColumn('string', 'Names');
dtblData.addColumn('datetime', 'Intime');
dtblData.addColumn('datetime', 'Outtime');
I am using following data to show on graph.
[{"display_name":"Aditi Badurkar
","in_time":{"year":2017,"month":6,"day":22,"hours":11,"minutes":7,"seconds":8,"miliseconds":470},"out_time":{"year":2017,"month":6,"day":22,"hours":12,"minutes":45,"seconds":44,"miliseconds":237}}]
Here is my code :-
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var chartDiv = document.getElementById('chart_div');
var dtblData = new google.visualization.DataTable();
dtblData.addColumn('string', 'Names');
dtblData.addColumn('datetime', 'Intime');
dtblData.addColumn('datetime', 'Outtime');
for (var i = 0; i < data.length; i++) {
if (data[i].out_time.year == 0) {
dtblData.addRow([data[i].display_name, new Date(data[i].in_time.year, data[i].in_time.month, data[i].in_time.day, data[i].in_time.hours, data[i].in_time.minutes, data[i].in_time.seconds, data[i].in_time.miliseconds), null]);
}
else {
dtblData.addRow([data[i].display_name, new Date(data[i].in_time.year, data[i].in_time.month, data[i].in_time.day, data[i].in_time.hours, data[i].in_time.minutes, data[i].in_time.seconds, data[i].in_time.miliseconds), new Date(data[i].out_time.year, data[i].out_time.month, data[i].out_time.day, data[i].out_time.hours, data[i].out_time.minutes, data[i].out_time.seconds, data[i].out_time.miliseconds)]);
}
}
var dateinFormat = new google.visualization.DateFormat({ formatType: 'long', pattern: "dd/MM/yyyy HH:mm:ss ZZZZ" });
dateinFormat.format(dtblData, 1);
var dateOutFormat = new google.visualization.DateFormat({ formatType: 'long', pattern: "dd/MM/yyyy HH:mm:ss ZZZZ" });
dateOutFormat.format(dtblData, 2);
var materialOptions = {
//width: 900,
chart: {
title: '',
subtitle: 'Intime, Outime of your kids or staff'
},
series: {
0: { axis: 'In Time' }, // Bind series 0 to an axis named 'In Time'.
1: { axis: 'Out time' } // Bind series 1 to an axis named 'Out Time'.
},
axes: {
y: {
distance: { label: 'In Time' }, // Left y-axis.
brightness: { side: 'right', label: 'Out Time' }, // Right y-axis.
}
},
};
function drawMaterialChart() {
var materialChart = new google.charts.Bar(chartDiv);
materialChart.draw(dtblData, google.charts.Bar.convertOptions(materialOptions));
}
drawMaterialChart();
}
My problem is, on graph it is showing month as July but in data it is June. I am not getting why it is showing wrong month when I scroll mouse pointer on bar? Can someone help me to solve this? I think it might be time zone issue.
Please see screenshot.
The Month in JavaScript is Zero Based, so ranges from 0 to 11 (0 meaning January and 11 meaning December).
For your code, you may decrement the month value by 1 to solve this.
Something that may be useful:
Why does the month argument range from 0 to 11 in JavaScript's Date constructor?
I have a requirement to render a set of time series data of contiguous blocks.
I need to describe a series of bars which could span many hours, or just minutes, with their own Y value.
I'm not sure if ChartJS is what I should be using for this, but I have looked at extending the Bar type, but it seems very hard coded for each bar to be the same width. The Scale Class internally is used for labels, chart width etc, not just the bars themselves.
I am trying to achieve something like this that works in Excel: http://peltiertech.com/variable-width-column-charts/
Has anyone else had to come up with something similar?
I found I needed to do this and the answer by #potatopeelings was great, but out of date for version 2 of Chartjs. I did something similar by creating my own controller/chart type via extending bar:
//controller.barw.js
module.exports = function(Chart) {
var helpers = Chart.helpers;
Chart.defaults.barw = {
hover: {
mode: 'label'
},
scales: {
xAxes: [{
type: 'category',
// Specific to Bar Controller
categoryPercentage: 0.8,
barPercentage: 0.9,
// grid line settings
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
type: 'linear'
}]
}
};
Chart.controllers.barw = Chart.controllers.bar.extend({
/**
* #private
*/
getRuler: function() {
var me = this;
var scale = me.getIndexScale();
var options = scale.options;
var stackCount = me.getStackCount();
var fullSize = scale.isHorizontal()? scale.width : scale.height;
var tickSize = fullSize / scale.ticks.length;
var categorySize = tickSize * options.categoryPercentage;
var fullBarSize = categorySize / stackCount;
var barSize = fullBarSize * options.barPercentage;
barSize = Math.min(
helpers.getValueOrDefault(options.barThickness, barSize),
helpers.getValueOrDefault(options.maxBarThickness, Infinity));
return {
fullSize: fullSize,
stackCount: stackCount,
tickSize: tickSize,
categorySize: categorySize,
categorySpacing: tickSize - categorySize,
fullBarSize: fullBarSize,
barSize: barSize,
barSpacing: fullBarSize - barSize,
scale: scale
};
},
/**
* #private
*/
calculateBarIndexPixels: function(datasetIndex, index, ruler) {
var me = this;
var scale = ruler.scale;
var options = scale.options;
var isCombo = me.chart.isCombo;
var stackIndex = me.getStackIndex(datasetIndex);
var base = scale.getPixelForValue(null, index, datasetIndex, isCombo);
var size = ruler.barSize;
var dataset = me.chart.data.datasets[datasetIndex];
if(dataset.weights) {
var total = dataset.weights.reduce((m, x) => m + x, 0);
var perc = dataset.weights[index] / total;
var offset = 0;
for(var i = 0; i < index; i++) {
offset += dataset.weights[i] / total;
}
var pixelOffset = Math.round(ruler.fullSize * offset);
var base = scale.isHorizontal() ? scale.left : scale.top;
base += pixelOffset;
size = Math.round(ruler.fullSize * perc);
size -= ruler.categorySpacing;
size -= ruler.barSpacing;
}
base -= isCombo? ruler.tickSize / 2 : 0;
base += ruler.fullBarSize * stackIndex;
base += ruler.categorySpacing / 2;
base += ruler.barSpacing / 2;
return {
size: size,
base: base,
head: base + size,
center: base + size / 2
};
},
});
};
Then you need to add it to your chartjs instance like this:
import Chart from 'chart.js'
import barw from 'controller.barw'
barw(Chart); //add plugin to chartjs
and finally, similar to the other answer, the weights of the bar widths need to be added to the data set:
var data = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.7)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 30, 56, 65, 40],
weights: [1, 0.9, 1, 2, 1, 4, 0.3]
},
]
};
This will hopefully get someone onto the right track. What I have certainly isn't perfect, but if you make sure you have the right number of weight to data points, you should be right.
Best of luck.
This is based on the #Shane's code, I just posted to help, since is a common question.
calculateBarIndexPixels: function (datasetIndex, index, ruler) {
const options = ruler.scale.options;
const range = options.barThickness === 'flex' ? computeFlexCategoryTraits(index, ruler, options) : computeFitCategoryTraits(index, ruler, options);
const barSize = range.chunk;
const stackIndex = this.getStackIndex(datasetIndex, this.getMeta().stack);
let center = range.start + range.chunk * stackIndex + range.chunk / 2;
let size = range.chunk * range.ratio;
let start = range.start;
const dataset = this.chart.data.datasets[datasetIndex];
if (dataset.weights) {
//the max weight should be one
size = barSize * dataset.weights[index];
const meta = this.chart.controller.getDatasetMeta(0);
const lastModel = index > 0 ? meta.data[index - 1]._model : null;
//last column takes the full bar
if (lastModel) {
//start could be last center plus half of last column width
start = lastModel.x + lastModel.width / 2;
}
center = start + size * stackIndex + size / 2;
}
return {
size: size,
base: center - size / 2,
head: center + size / 2,
center: center
};
}
For Chart.js you can create a new extension based on the bar class to do this. It's a bit involved though - however most of it is a copy paste of the bar type library code
Chart.types.Bar.extend({
name: "BarAlt",
// all blocks that don't have a comment are a direct copy paste of the Chart.js library code
initialize: function (data) {
// the sum of all widths
var widthSum = data.datasets[0].data2.reduce(function (a, b) { return a + b }, 0);
// cumulative sum of all preceding widths
var cumulativeSum = [ 0 ];
data.datasets[0].data2.forEach(function (e, i, arr) {
cumulativeSum.push(cumulativeSum[i] + e);
})
var options = this.options;
// completely rewrite this class to calculate the x position and bar width's based on data2
this.ScaleClass = Chart.Scale.extend({
offsetGridLines: true,
calculateBarX: function (barIndex) {
var xSpan = this.width - this.xScalePaddingLeft;
var x = this.xScalePaddingLeft + (cumulativeSum[barIndex] / widthSum * xSpan) - this.calculateBarWidth(barIndex) / 2;
return x + this.calculateBarWidth(barIndex);
},
calculateBarWidth: function (index) {
var xSpan = this.width - this.xScalePaddingLeft;
return (xSpan * data.datasets[0].data2[index] / widthSum);
}
});
this.datasets = [];
if (this.options.showTooltips) {
Chart.helpers.bindEvents(this, this.options.tooltipEvents, function (evt) {
var activeBars = (evt.type !== 'mouseout') ? this.getBarsAtEvent(evt) : [];
this.eachBars(function (bar) {
bar.restore(['fillColor', 'strokeColor']);
});
Chart.helpers.each(activeBars, function (activeBar) {
activeBar.fillColor = activeBar.highlightFill;
activeBar.strokeColor = activeBar.highlightStroke;
});
this.showTooltip(activeBars);
});
}
this.BarClass = Chart.Rectangle.extend({
strokeWidth: this.options.barStrokeWidth,
showStroke: this.options.barShowStroke,
ctx: this.chart.ctx
});
Chart.helpers.each(data.datasets, function (dataset, datasetIndex) {
var datasetObject = {
label: dataset.label || null,
fillColor: dataset.fillColor,
strokeColor: dataset.strokeColor,
bars: []
};
this.datasets.push(datasetObject);
Chart.helpers.each(dataset.data, function (dataPoint, index) {
datasetObject.bars.push(new this.BarClass({
value: dataPoint,
label: data.labels[index],
datasetLabel: dataset.label,
strokeColor: dataset.strokeColor,
fillColor: dataset.fillColor,
highlightFill: dataset.highlightFill || dataset.fillColor,
highlightStroke: dataset.highlightStroke || dataset.strokeColor
}));
}, this);
}, this);
this.buildScale(data.labels);
// remove the labels - they won't be positioned correctly anyway
this.scale.xLabels.forEach(function (e, i, arr) {
arr[i] = '';
})
this.BarClass.prototype.base = this.scale.endPoint;
this.eachBars(function (bar, index, datasetIndex) {
// change the way the x and width functions are called
Chart.helpers.extend(bar, {
width: this.scale.calculateBarWidth(index),
x: this.scale.calculateBarX(index),
y: this.scale.endPoint
});
bar.save();
}, this);
this.render();
},
draw: function (ease) {
var easingDecimal = ease || 1;
this.clear();
var ctx = this.chart.ctx;
this.scale.draw(1);
Chart.helpers.each(this.datasets, function (dataset, datasetIndex) {
Chart.helpers.each(dataset.bars, function (bar, index) {
if (bar.hasValue()) {
bar.base = this.scale.endPoint;
// change the way the x and width functions are called
bar.transition({
x: this.scale.calculateBarX(index),
y: this.scale.calculateY(bar.value),
width: this.scale.calculateBarWidth(index)
}, easingDecimal).draw();
}
}, this);
}, this);
}
});
You pass in the widths like below
var data = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.7)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 30, 56, 65, 40],
data2: [10, 20, 30, 20, 10, 40, 10]
},
]
};
and you call it like so
var ctx = document.getElementById('canvas').getContext('2d');
var myLineChart = new Chart(ctx).BarAlt(data);
Fiddle - http://jsfiddle.net/moye0cp4/
I wanted to move the model dynamically using keyboard shortcuts. I could not find relevant article on that.
So for now, I'm trying to move the model on click. When click on the model. The model has to move in one direction (increment the value 1 on tick). Find below the sandcastle code for that.
var selectedMesh; var i=0;
var viewer = new Cesium.Viewer('cesiumContainer', {
infoBox: false,
selectionIndicator: false
});
var handle = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
function createModel(url, height) {
viewer.entities.removeAll();
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
var heading = Cesium.Math.toRadians(135);
var pitch = 0;
var roll = 0;
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
var entity = viewer.entities.add({
name: url,
position: position,
orientation: orientation,
model: {
uri: url,
minimumPixelSize: 128
}
});
viewer.trackedEntity = entity;
viewer.clock.onTick.addEventListener(function () {
if (selectedMesh) {
console.log("Before 0 : " + selectedMesh.primitive.modelMatrix[12]);
selectedMesh.primitive.modelMatrix[12] = selectedMesh.primitive.modelMatrix[12] + 1;
console.log("After 0 : " + selectedMesh.primitive.modelMatrix[12]);
}
});
}
handle.setInputAction(function (movement) {
console.log("LEFT CLICK");
var pick = viewer.scene.pick(movement.position);
if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {
if (!selectedMesh) {
selectedMesh = pick;
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
var options = [{
text: 'Aircraft',
onselect: function () {
createModel('../../SampleData/models/CesiumAir/Cesium_Air.bgltf', 5000.0);
}
}, {
text: 'Ground vehicle',
onselect: function () {
createModel('../../SampleData/models/CesiumGround/Cesium_Ground.bgltf', 0);
}
}, {
text: 'Milk truck',
onselect: function () {
createModel('../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.bgltf', 0);
}
}, {
text: 'Skinned character',
onselect: function () {
createModel('../../SampleData/models/CesiumMan/Cesium_Man.bgltf', 0);
}
}];
Sandcastle.addToolbarMenu(options);
When I click, the model is moving for the first time. After that, It stays on the same place. I've printed the value in the console. It seems the value is not changing. I'm not sure about the problem here. or I'm implementing the transformation wrongly.
If you keep track of the current lat and lon of the entity, and adjust that lat and lon based on user input, all you need to do is update the orientation of the entity.
var lon = // the updated lon
var lat = // updated lat
var position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
var heading = Cesium.Math.toRadians(135);
var pitch = 0;
var roll = 0;
// create an orientation based on the new position
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
Then you just need to update the orientation of the entity.
entity.orientation = orientation;
By changing the value, the models orientation, and therefore position will get updated.
I have trouble to parse and show events from Bands in Town´s API in my appcelerator mobile app. (iOS)
This is my bands event that i want to show in a table.
http://api.bandsintown.com/artists/Lucy%20Seven/events.json?api_version=2.0&app_id=LucySeven
And this is the code that i have for showing it
var win = Ti.UI.currentWindow;
win.hideNavBar();
Ti.UI.backgroundColor = '#050505';
var url = "http://api.bandsintown.com/artists/Lucy%20Seven/events.json? api_version=2.0&app_id=LucySeven"
var table = Ti.UI.createTableView({
backgroundColor: '#050505',
separatorColor:'#110000',
});
var tableData = [];
var json, artists, name, picture, title, description;
var xhr = Ti.Network.createHTTPClient({
onload: function() {
// Ti.API.debug(this.responseText);
json = JSON.parse(this.responseText);
for (i = 0; i < json.data.length; i++) {
data = json.data[i];
row = Ti.UI.createTableViewRow({
height:'100dp',
backgroundColor: '#050505',
separatorColor:'#110000',
});
var name = Ti.UI.createLabel({
text: title,
font:{
fontSize:'17dp',
fontWeight:'bold'
},
height:'auto',
left:'90dp',
top:'20dp',
color:'#eee',
touchEnabled:true
});
row.add(name);
var start = Ti.UI.createLabel({
text: description,
font:{
fontSize:'12dp'
},
height:'auto',
left:'90dp',
bottom:'20dp',
color:'#eee',
touchEnabled:true
});
row.add(start);
// Avatar
var img = Ti.UI.createImageView({
image : thumb_url ,
width : 70,
height : 70,
top : 5,
bottom : 5,
borderRadius: 5,
borderColor: '#eee',
left : 5
});
row.add(img);
tableData.push(row);
}
table.setData(tableData);
},
onerror: function(e) {
Ti.API.debug("STATUS: " + this.status);
Ti.API.debug("TEXT: " + this.responseText);
Ti.API.debug("ERROR: " + e.error);
alert('There was an error retrieving the remote data. Try again.');
},
timeout:5000
});
xhr.open("GET", url);
xhr.send();
There is a API responses for json here:
http://www.bandsintown.com/api/responses#events-json
I really cant see what is wrong... Maybe im to blind to see what i have missed?
I would appreciate if someone could point me in the right direction on this.
i have tried with: data.title data.artists.title title artists.titel and so on but nothing have shown up in my tableview.....
Thanx
//R
What's the value of this.responseText and what's the value of json after JSON.parse? In the JSON response I don't see a data property so I'm not sure what json.data is supposed to be. Also in Ti.UI.createLabel you give test: title but title is never given a value.
I suspect what you really want in your for loop is this:
json = JSON.parse( this.responseText ); // `json` will be an array of objects
for (i = 0; i < json.length; i++) {
data = json[ i ];
// ...
var name = Ti.UI.createLabel( {
text: data.title,
// ...
} );
}
The key to debugging this is the same as debugging many things—find out what data you have at each step (I've never used Titanium but it must have something like console.log at the very least) and figure out how it differs from what you expect.
I have a map that pans from point to point around a map as markers are dropped on the map. The issue I'm having is that the panning is too fast. Is there any way to slow down the panTo function?
Thanks,
Chris
Sadly, no, you cannot change the speed of the panTo animation.
The function only takes a single latlng argument. Details here: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
I write my own implementation of panTo. Using class "EasingAnimator".
var EasingAnimator = function(opt){
opt = opt || {};
this.easingInterval = opt.easingInterval;
this.duration = opt.duration || 1000;
this.step = opt.step || 50;
this.easingFn = opt.easingFn || function easeInOutElastic(t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
};
this.callBack = opt.callBack || function(){};
};
EasingAnimator.makeFromCallback = function(callBack){
return new EasingAnimator({
callBack: callBack
});
};
EasingAnimator.prototype.easeProp = function(obj, propDict){
propDict = propDict || {};
var self = this,
t = 0,
out_vals = JSON.parse(JSON.stringify(obj));
clearInterval(self.easingInterval);
self.easingInterval = setInterval(function(){
t+= self.step;
if (t >= self.duration) {
clearInterval(self.easingInterval);
self.callBack(propDict);
return;
}
var percent = self.easingFn(t, 0, 1, self.duration);
Object.keys(propDict).forEach(function(key, i) {
var old_val = obj[key];
out_vals[key] = old_val - percent*(old_val - propDict[key]);
});
self.callBack(out_vals);
}, self.step);
};
Now you can control everything including duration, steps and of course the easing function. Here are some nice examples of it http://easings.net/. And now you can use it some like this:
dom_elem.addEventListener('click', function(event){
var point = map.getCenter();
easingAnimator.easeProp({
lat: point.lat(),
lng: point.lng()
}, points[i]);
});
Here you can find live demo of how it works
http://codepen.io/ErDmKo/pen/Jdpmzv
I wrote a function to implement a "slow pan" with Google Maps API v3. It uses small pan steps as well as the previous answer, though I think the implementation is a bit simpler. You may use an easing function for f_timeout().
Parameters
map: your google.maps.Map object
endPosition: desired location to pan to, google.maps.LatLng
n_intervals: number of pan intervals, the more the smoother the transition but the less performant
T_msec: the total time interval for the slow pan to complete (milliseconds)
var slowPanTo = function(map, endPosition, n_intervals, T_msec) {
var f_timeout, getStep, i, j, lat_array, lat_delta, lat_step, lng_array, lng_delta, lng_step, pan, ref, startPosition;
getStep = function(delta) {
return parseFloat(delta) / n_intervals;
};
startPosition = map.getCenter();
lat_delta = endPosition.lat() - startPosition.lat();
lng_delta = endPosition.lng() - startPosition.lng();
lat_step = getStep(lat_delta);
lng_step = getStep(lng_delta);
lat_array = [];
lng_array = [];
for (i = j = 1, ref = n_intervals; j <= ref; i = j += +1) {
lat_array.push(map.getCenter().lat() + i * lat_step);
lng_array.push(map.getCenter().lng() + i * lng_step);
}
f_timeout = function(i, i_min, i_max) {
return parseFloat(T_msec) / n_intervals;
};
pan = function(i) {
if (i < lat_array.length) {
return setTimeout(function() {
map.panTo(new google.maps.LatLng({
lat: lat_array[i],
lng: lng_array[i]
}));
return pan(i + 1);
}, f_timeout(i, 0, lat_array.length - 1));
}
};
return pan(0);
};