Develop Reference

How to add an onclick event on clusters? - Flutter MapBox

I've been trying pretty hard to add an onClick function on my clusters that zooms a bit on the map, but I can't figure out how to do so, and I can't find any help on the documentation.
I've been trying to work with controller.onCircleTappedand controller.onFeatureTapped but I don't understand how it's working, or how to link the callback to a particular cluster.
Thank you all!
Here's my current code:
`
Future<void> addGeojsonCluster() async {
var geojson = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "pois" } },
"features": [
for(var marker in markers){
"type" : "Feature", "properties" : {"id" : marker.title}, "geometry": {"type" : "Point", "coordinates" : [marker.longitude, marker.latitude] }
},
]
};
await controller.addSource(
"poi",
GeojsonSourceProperties(
data: geojson,
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius:
50, // Radius of each cluster when clustering points (defaults to 50)
)
);
await controller.addLayer(
"poi",
"poi-circles",
const CircleLayerProperties(
circleColor: [
Expressions.step,
[Expressions.get, 'point_count'],
'#51bbd6', //blue
100,
'#f1f075', //yellow
750,
'#f28cb1' //pink
],
circleRadius: [
Expressions.step,
[Expressions.get, 'point_count'],
20,
100,
30,
750,
40
]),
);
await controller.addSymbolLayer(
"poi",
"unclustered-point",
const SymbolLayerProperties(
textField: [Expressions.get, "id"],
textHaloWidth: 1,
textSize: 12.5,
textHaloColor: '#ffffff',
textOffset: [
Expressions.literal,
[0, 2]
],
iconImage: "images/mapbox_circle_marker.png",
iconSize: 2,
iconAllowOverlap: true,
textAllowOverlap: true,
textColor: '#000000',
textHaloBlur: 1,
),
filter: [
'!',
['has', 'point_count']
],
enableInteraction: true,
);
await controller.addLayer(
"poi",
"poi-count",
const SymbolLayerProperties(
textField: [Expressions.get, 'point_count_abbreviated'],
textFont: ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
textSize: 12,
));
}
`

You need to register a OnTapListener on the whole map and query all the features on the map.
MapWidget(
onTapListener: _clickMap,
)
And in _clickMap you query for everything displayed on the map and decide depending on the return what to do. Here I zoom in to the next cluster step. Keep in mind, that there is currently a confirmed bug in the sdk. OnTapListener is not return ScreenCoordinates but geographical coordinates. So you need to convert them first with pixelForCoordinate.
void _clickMap(ScreenCoordinate coordinate) async {
ScreenCoordinate coordin = await mapboxMap!.pixelForCoordinate({
"coordinates": [coordinate.y, coordinate.x]
});
List<QueriedFeature?> features = await mapboxMap!.queryRenderedFeatures(
RenderedQueryGeometry(
type: Type.SCREEN_COORDINATE, value: json.encode(coordin.encode())),
RenderedQueryOptions(
layerIds: ['clusters', "unclustered-point"], filter: null));
if (features.isNotEmpty) {
if ((features[0]!.feature["properties"] as Map)['cluster'] != null) {
FeatureExtensionValue cluster = await mapboxMap!
.getGeoJsonClusterExpansionZoom(
'earthquakes', features[0]!.feature);
mapboxMap?.easeTo(
CameraOptions(
center: Point(
coordinates: Position(
(features[0]!.feature['geometry'] as Map)["coordinates"][0],
(features[0]!.feature['geometry'] as Map)["coordinates"][1],
)).toJson(),
zoom: double.parse(cluster.value!),
bearing: 0,
pitch: 0),
MapAnimationOptions(duration: 500, startDelay: 0));
}}}
Hope that helps :)

Sencha Touch and Phonegap (Media Plugin)

in my project using Sencha Touch and Phonegap. I have tried to use Phonegap Media Plugin in Sencha Touch for reproduce a local file audio, but does not works.
This is my code:
Ext.application({ name: 'ApplicationName',
requires: ['Ext.MessageBox'],
launch: function() {
console.log("launch");
this.launched = true;
this.mainLaunch();
},
mainLaunch: function() {
//console.log('Device name: ' + device.name);
if (!this.launched) {return;}
Ext.fly('appLoadingIndicator').destroy();
Ext.create('Ext.Container', {
fullscreen: true,
layout: {
type: 'vbox',
pack: 'center'
},
items: [
{
xtype : 'toolbar',
docked: 'top',
title : 'Ext.Audio'
},
{
xtype: 'toolbar',
docked: 'bottom',
defaults: {
xtype: 'button',
handler: this.playAndroidNativeSound
},
items: [
{ text: 'Play', flex: 1 }
]
}
]
});
},
playAndroidNativeSound: function() {
var src = '/android_asset/www/src/crash.mp3';
var media = new Media(src);
media.play();
}});
Any idea?
Thanks

Sencha Touch 2 - Carousel initialize event firing in Chrome but not on Android-smartphone

In my ST2-app i create a panel which contains a carousel-element.
This carousel has to be filled dynamically with images from my store.
My problem is that the code shown below works fine in Chrome, but when i package my app and install it on my Galaxy S2, the initialize-event wont fire.
Has anyone a suggestion what could be the problem here?
I thought the browser androis is using is based on googles chrome-browser, so it should work the same.
Code:
createPanelBalloonSelect: function() {
panelBalloonSelect = Ext.Viewport.add({
xtype: 'panel',
centered: true,
styleHtmlContent: true,
width: '90%',
height: '70%',
modal: true,
scope: this,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'toolbar',
title: 'Auswahl Ballon',
docked: 'top'
},
{
xtype: 'carousel',
id: 'myCarousel',
flex: 1,
items: [],
config: {
initialize: function() {
console.log('ich initialisiere!');
drawingsStore = Ext.getStore('drawingsStore');
data = drawingsStore.getRange();
console.log('data: ' + data);
for(var i=0;i<data.length;i++){
console.log('ich adde');
this.add({
xtype: 'image',
src: data[i].data.canvasData,
cls: 'card'
});
}
}
},
defaults: {
listeners: {
activate: function(newActive, self, oldActive, opt) {
choosenBalloon = self.getActiveIndex();
console.log(choosenBalloon);
}
}
}
},
{
xtype: 'button',
text: 'OK',
name: 'btnAcceptTemplate',
scope: this,
handler: function() {
this.setBalloonSrc(data[choosenBalloon].data.canvasData);
//this.drawBalloon();
this.initSzeneryCanvas();
panelBalloonSelect.destroy();
}
}
]
});
},

Not getting the text box value for tabpanel?

In my application, i have a tab panel in the bottom of the screen. The three tabs are Home, Add Wishlog and Add Feedback. Now when i am clicking the home tab, it is showing me some icons. In Add Wishlog and Add Feedback tab, i added some text boxes and some buttons. I added the addwishlog tabs like below in the screen
{
xtype : 'addwishlog',
styleHtmlContent : true,
title : '+ Wishlog',
iconCls : 'favorites',
},
Here is the addwishlog.js file:::
Ext.define('MyApp.view.AddtoWishlog', {
extend : 'Ext.Container',
xtype : 'addwishlog',
config : {
ui : 'light',
scrollable: {
direction: 'vertical',
directionLock: true
},
items : [
{
xtype : 'container',
id : 'LoginScreen',
docked : 'top',
items : [
{
xtype : 'image',
docked : 'left',
height : 92,
id : 'Logoimage',
ui : '',
width : 120,
src : 'app/images/small_logo.png'
},
{
xtype : 'titlebar',
cls : 'mytitlebar',
docked : 'top',
height : 80,
ui : 'blue',
items : [ {
xtype : 'label',
height : 36,
html : 'Add to Wishlog',
id : 'title',
margin : 20,
style : 'font: normal Bold 20px droid sans; color:#AB3951',
} ]
} ]
},
{
xtype : 'panel',
autoHeight: true,
items: [{
xtype : 'container',
id : 'dashboardiconcontainer',
height: 400,
layout: 'vbox',
items : [
{
xtype : 'container',
id : 'topitembox',
layout : {
type : 'hbox'
},
margin : '10 0 0 10',
height : 50,
items : [ {
xtype : 'textfield',
id : 'itemname',
labelWidth : '40%',
label : 'Name of the item',
width : 320
}, {
xtype : 'textfield',
id : 'barcodetextfield',
width : 300,
// value: 'test',
margin : '0 0 0 10',
labelWidth : '40%',
label : 'Enter Barcode'
}, {
xtype : 'button',
height : 40,
scope: this,
margin : '0 0 0 10',
id : 'scanbutton',
ui : 'orange',
width : '80',
text : 'scan barcode'
} ]
},
{
xtype : 'container',
height : 160,
id : 'cameraimagecontainer',
margin : '10 0 0 10',
layout : {
type : 'hbox'
},
items : [
{
html : '<img style="width:180px; height:150px;display:none;" id="capturedimage" src="" />'
},
{
xtype : 'container',
id : 'btncontainer',
width : 120,
margin : '0 0 0 10',
layout : {
type : 'vbox'
},
items : [
{
xtype : 'button',
height : 73,
cls : 'capturebtn',
id : 'capturebtn',
width : 100
},
{
xtype : 'button',
height : 73,
margin : '10 0 0 0',
cls : 'choosephotobtn',
id : 'selectphoto',
width : 100
} ]
},
{
xtype : 'container',
id : 'additionalinfo',
margin : '10 0 0 10',
width : 400,
layout : {
type : 'vbox'
},
items : [
{
xtype : 'textareafield',
height : 80,
width : 380,
id : 'additionalinfo',
label : 'Add Additiona Details',
labelWidth : '40%',
placeHolder : ''
},
{
xtype : 'selectfield',
margin : '5 0 0 0',
width : 300,
label : 'Select Category',
options : [
{
text : 'Food',
value : 'first'
},
{
text : 'Sports',
value : 'second'
},
{
text : 'Electronics',
value : 'third'
} ],
labelWidth : '40%'
},
{
xtype : 'textareafield',
id : 'Addmoretag',
margin : '10 0 0 0',
width : 320,
placeHolder : 'Add any other tags you want '
},
{
xtype : 'button',
height : 54,
id : 'Addwishlog',
margin : '10 0 0 0',
ui : 'orange',
width : 250,
text : 'Add to my wishlog'
}
]
} ]
} ]
}]
} ]
}
});
The same way i am doing for addFeedback also. Now while i am trying to fetch the value of any of the text field from the addWislog screen, I am getting the error. Some time it is telling the getValue() method is not for this object..while trying to do using
this.getIDofTextbox().getValue();
although i took the correct reference in the controller. If i am trying using getCmp(), i am getting null value.
I am literally confused, because for other screen, i am getting the value from text boxes. The problem i am getting only in this tabpanel js files.
Here is my app.js file:
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
views : ['dashboardpanel', 'TitlePanel', 'wishlogsummary', 'ConsumerSignup', 'FeedbackSummary', 'ConsumerSignin', 'AddFeedback'],
models : [ 'MyModel', 'wishlistmodel', 'feedbacksummarymodel' , 'loginmodel'],
stores : [ 'name', 'wishlistsummarystore', 'feedbacksummarystore' ],
name : 'MyApp',
controllers : [ 'MyController' ],
requires:['Ext.ux.touch.Rating'],
fullscreen: true,
launch : function() {
var Login = {
xtype: 'login'
}
var Dashboard = {
xtype: 'dashboard'
}
var Wishlogsummary = {
xtype: 'wishlogsummarylist'
}
var AddtoWishlog = {
xtype: 'addwishlog'
}
var Consumersignup = {
xtype: 'consumersignup'
}
var FeedbackSummaryList = {
xtype: 'feedbacksummarylist'
}
var Consumersignin = {
xtype: 'Consumersignin'
}
Ext.Viewport.add([Login,Dashboard,Wishlogsummary, FeedbackSummaryList,Consumersignup,Consumersignin]);
}
});
Did i have to change something in the application architecture??
Please help as i am stuck in this issue for a long while and not able to find out the solution..

Actually, there is some problem in my architecture. Now i able to fixed it.

Select options in sencha touch is not working for android

I have an application where i am using sencha touch JS API for UI rendering. The UI works fine in chrome browser but not working in Android or iPhone device.
i have used the following code.
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var store1 = new Ext.data.JsonStore({
model : 'Contact',
autoLoad : true,
autoDestroy : true,
data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
});
new Ext.Application({
launch: function() {
var panel = new Ext.Panel({
fullscreen: true,
id:'thePanel',
layout: 'auto',
style: 'background-color:darkblue',
scroll:'vertical'
});
//do this in your dynamically called function
var list = new Ext.List({
id :'theList',
itemTpl : '{firstName} {lastName}',
store: store1,
width: '100%',
scroll:false
});
var stateList = new Ext.form.Select({
label : 'State',
widht: '100%',
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
],
autoLoad : true,
autoDestroy : true
});
panel.items.add(list);
panel.items.add(stateList);
panel.doLayout();
}
});
It gives the UI like as shown in the image. But the select control is not working for (State list in not populating). please help me.

Each form field needs to have a name property, i.e. the name of the parameter to be send when the form is submitted. Updated your stateList object like this:
var stateList = new Ext.form.Select({
label : 'State',
name: 'selectField',
width: '100%',
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
],
autoLoad : true,
autoDestroy : true
});