NativeScript + Mapbox pluggin: mapbox.show() error - mapbox

After a lot of try and error, trying to find a solution to this, I understood thanks to help of Eddy Verbruggen that there two unique way to add markers to mapbox map: by code inside of onMapReady() or programmatically.
But now, I find something that I can not solve: using exactly code indicated Declaring a map programmatically, when run the app appears errors originated in "TypeError: mapbox.show is not a function".
The code is:
`var mapbox = require("nativescript-mapbox");
var platform = require("platform");
var isIOS = platform.device.os === platform.platformNames.ios;
mapbox.show({
accessToken: 'here i wrote my own API ACCESS TOKEN',
style: street,
margins: {
left: 40, // default 0
right: 40, // default 0
top: 450, // default 0
bottom: isIOS ? 50: 0
},
center: { // optional without a default
lat: 52.3702160,
lng: 4.8951680
},
zoomLevel: 9.25,
showUserLocation: true,
hideAttribution: false,
hideLogo: false,
hideCompass: false,
disableRotation: false,
disableScroll: false,
disableZoom: false,
markers: [
{
id: 1,
lat: 52.3732160,
lng: 4.8941680,
title: 'Nice location',
subtitle: 'Really really nice location',
icon: 'res://cool_marker',
selected: true,
onTap: function(marker) { console.log("This marker was tapped"); },
onCalloutTap: function(marker) { console.log("marker was tapped"); }
}
]
}).then(
function(showResult) {
console.log("Mapbox show done for " + (showResult.ios ? "iOS" :
"Android") + ", native object received: " + (showResult.ios ?
showResult.ios : showResult.android));
},
function(error) {
console.log("mapbox show error: " + error);
}
)`
To clarify, the app is build from "tns create my-app-name --template tns-template-blank". I only added nativescript-mapbox plugin and insert code indicate in "Declaring a map programmatically" inside on home.js file.
I can't understand why appear that error, I'm sure that plugin was correctly installed. The app uses NS version 3.4.1 and nativescript-mapbox version 3.3.0, on Android.

Related

How can i prevent popup to be closed when i have fitSelectedRoutes:true options selected in the routingControl

I am using leaflet and leaflet routing machine control libraries.
When i am creating some route path i have the folllowing code:
this.routingControl = L['Routing'].control({
router: L['Routing'].osrmv1({
serviceUrl: `http://router.project-osrm.org/route/v1/`,
language: 'en',
profile: 'car'
}),
showAlternatives: false,
lineOptions: { styles: [{ color: '#4caf50', weight: 7 }] },
fitSelectedRoutes: true,
altLineOptions: { styles: [{ color: '#ed6852', weight: 7 }] },
show: false,
routeWhileDragging: true,
addWaypoints: false,
waypoints: [
L.latLng(clickedLat, clickedLng),
L.latLng(this.selectedCityZipCodeObject.longitude, this.selectedCityZipCodeObject.latitude)
],
createMarker: function (i: number, waypoint: any, n: number) {
return null;
}
});
Note: if i have
fitSelectedRoutes:false
then when i click on some marker,which should make route path until other marker the pop up is showed.
But if i have
fitSelectedRoutes:true
then when i click on the marker it show the popup. but the map zoom is changed to fit the route path in the center between the markers and i have smaller zoom which is done automatic from the library.
And then my pop up is closed when the zoom is automatically changed . How can i prevent this from happening ?
I found that everytime this code is triggered on the map it self when there are movements
this.map.on('zoomend', function(){
thatt.lastEvent.target.unbindPopup()
.bindPopup(`
<div><b>Dispatcher:</b></div>
`).openPopup();
});
i tried to get the last marker and to open the pop up and without success.
I also tried
that.lastEvent.target
.unbindPopup()
.bindPopup(`
<div><b>Dispatcher:</b> ${truckLocationObj?.dispatcher}</div>
<div><b>Dispatcher Email:</b> ${truckLocationObj?.dispatcher_email}</div>
<div><b>Truck #:</b> ${truckLocationObj?.truck}</div>
<div><b>ZIP</b> ${truckLocationObj?.available_zip} </div>
<div><b>City:</b> ${truckLocationObj?.available_city}</div>
<div class='red'><b>Distance:</b> ${distance} km to ${that.selectedCityZipCodeObject.city}, time: ${getHm}</div>
<div><b>Available on:</b> ${truckLocationObj?.available_date}</div>
`, {closePopupOnClick: false, autoClose: false, closeOnClick:false, autopanstart:false}).openPopup();
with addiional options on the pop up itself but also without success.
So fitSelectedRoutes - true makes something like fitting bounds of the two markers.
var corner1 = L.latLng(0,0);
var corner2 = L.latLng(39.310, -84.432);
let bounds = L.latLngBounds(corner1, corner2);
map.fitBounds(bounds, { padding: [50, 50] });
with this answer here the problem will be solved.
https://stackoverflow.com/questions/51953050/leaflet-markercluster-exempt-marker-from-clustering
https://jsfiddle.net/sghL4z96/65/

Why is my page not rendering EnhancedGrid

Good day to all, while studying dojo, I ran into a problem that I do not draw an EnhancedGrid on my page. this error appears in the browser console:
dojo.js.uncompressed.js:1321 Uncaught TypeError: Cannot read property 'get' of null
at Object.getFeatures (ObjectStore.js.uncompressed.js:241)
at Object._setStore (DataGrid.js.uncompressed.js:14511)
at Object.advice (dojo.js.uncompressed.js:8428)
at Object.c [as _setStore] (dojo.js.uncompressed.js:8408)
at Object.postCreate (DataGrid.js.uncompressed.js:14351)
at Object.l (dojo.js.uncompressed.js:10753)
at Object.postCreate (EnhancedGrid.js.uncompressed.js:90)
at Object.create (DataGrid.js.uncompressed.js:4330)
at Object.postscript (DataGrid.js.uncompressed.js:4243)
at new <anonymous> (dojo.js.uncompressed.js:10950)
the grid drawing script looks like this:
var blogStore;
/**
* Creates Dojo Store.
*/
require(["dojo/store/JsonRest",
"dojo/data/ObjectStore"
], function (JsonRest, ObjectStore) {
blogJsonStore = new JsonRest({
handleAs: 'json',
target: 'http://localhost:8080/myservice'
});
var data = {
identifier: 'id',
items: []
};
blogJsonStore.query({
start: 0,
count: 10
}).then(function (results) {
var res =[];
res = results;
if (0 === res.length){
data.items.push("There are no entries in this blog. Create a post!!!")
}else {
data.items.push(results)
}
});
blogStore = new ObjectStore({data: data});
});
/**
* Creates Dojo EnhancedGrid.
*/
require(["dojox/grid/EnhancedGrid",
"dojox/grid/enhanced/plugins/Filter",
"dojox/grid/enhanced/plugins/NestedSorting",
"dojox/grid/enhanced/plugins/Pagination",
"dojo/domReady!"
], function (EnhancedGrid) {
Grid = new EnhancedGrid({
id: 'grid',
store: blogStore,
structure: [
{ name: 'Message', field: 'text', datatype: 'string',
width: 'auto', autoComplete: true }
],
rowsPerPage: 5,
rowSelector: "20px",
selectionMode: "single",
plugins: {
nestedSorting: true,
pagination: {
description: true,
pageStepper: true,
sizeSwitch: true,
pageSizes: ["5","10","15","All"],
maxPageStep: 4,
position: "bottom"
}
}
});
Grid.placeAt('resultDiv');
Grid.startup();
});
if you remove the blog "Creates Dojo Store." it renders normally
Help me solve the problem. Thank you in advance for any help

ExtJS MultiSelect Edit - Not working for multi value selection

I have a GridEditPanel where the 1st column is a combobox with multiSelect. The values are being loaded correctly from the DB and is being written in the DB correctly as well. In the event where the the combobox has a single value, the drop-down highlights the value correctly as well.
The issue is when the combobox has multiple values, it displays the values correctly, however during edit the multiple values are not selected.
Model:
extend: 'Ext.data.Model',
idProperty: 'contactTypeID',
fields: [
{
name: 'contactTypeID',
type: 'string'
},
{
name: 'contactType',
type: 'string'
}
],
View GridEditPanel
emptyText: "There are no contacts.",
insertErrorText: 'Please finish editing the current contact before inserting a new record',
addButtonText: 'Add Contact',
itemId: 'contacts',
viewConfig: {
deferEmptyText: false
},
minHeight: 130,
initComponent: function () {
var me = this,
contactTypes;
// Creating store to be referenced by column renderer
contactTypes = Ext.create('Ext.data.Store', {
model: '********',
autoLoad: true,
listeners: {
load: function () {
me.getView().refresh();
}
}
});
this.columns = [
{
text: 'Contact Role',
dataIndex: 'contactRoleID',
flex: 1,
renderer: function (value) {
// Lookup contact type to get display value
//If a contact has multiple roles, use split by ',' to find display values.
if (value.includes(',')) {
var a = value.split(','), i, contTypeIds = [];
var contTypes = new Array();
for (i = 0; i < a.length; i++) {
contTypeIds.push(a[i]);
contTypes.push(contactTypes.findRecord('contactTypeID', a[i], 0, false, false, true).get('contactType'));
}
console.log('Multi Render Return Value: ' + contTypes);
return contTypes;
}
else {//if not a contact will only have one role.
var rec = contactTypes.findRecord('contactTypeID', value, 0, false, false, true); // exact match
console.log('Single Render Return Value: ' + rec.get('contactType'));
return rec ? rec.get('contactType') : '<span class="colselecttext">Required</span>';
}
},
align: 'center',
autoSizeColumn: true,
editor: {
xtype: 'combobox',
store: contactTypes,
multiSelect: true,
delimiter: ',',
forceSelection: true,
queryMode: 'local',
displayField: 'contactType',
valueField: 'contactTypeID',
allowBlank: false
}
},
I cannot see the model of GridEditPanel, but I assume you are using the wrong field type, string instead of array (Have a look at the converter function, maybe it will help you to fix the problem). I wrote a small post in my blog about multiSelect combobox editor in editable grid. The sample works with v4.2
Hope it will help you to fix the bug.

EXTJS 5 Chart ToolTip Using "sencha-charts" on require[] not working

Im currently using ExtJs5 MVVM architecture and I require "sencha-chart" than "ext-chart" on the app.json file, Charts works fine but adding tooltip on the bar series im using doesn't work. No error logs.
I also check their example on sencha chart kitchensink (which chart tooltip is working) found out that they require "ext-chart" for that. My code for bar series with tooltip config:
series: [{
type: 'bar',
xField: 'name',
yField: ['data1'],
style: {
opacity: 0.80
},
highlight: {
fill: '#000',
'stroke-width': 20,
stroke: '#fff'
},
tips: {
trackMouse: true,
style: 'background: #FFF',
height: 20,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + '%');
}
}
}]
Is there something wrong with my codes?
Thanks
Your code needs one small change "tips" for EXTjs 5 becomes "tooltip."
tooltip: {
trackMouse: true,
style: 'background: #FFF',
height: 20,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + '%');
}
}
However, there are a lot of bugs with the EXTjs 5 charts. I had this same issue, and submitted a bug to Sencha:
http://www.sencha.com/forum/showthread.php?289313-Sencha-EXTjs-5-Charts-Broken-Tooltips
tooltip: {
trackMouse: true,
style: 'background: #FFF',
height: 20,
renderer: function(storeItem, item) {
this.setHtml(storeItem.get('name') + ': ' + storeItem.get('data1') + '%');
}
}
I used tooltip inplace of tips and this.setHtml() in place of this.setTitle() ,and it worked for me.

Sencha touch 2.0 and iphone : add element to panel dynamically and setActiveItem

I am trying to add dinamically a panel item to a main panel with a card layout which has initially one panel in it.
After one event (a tap) i build dinamically a new panel and I add it to the main panel, after this i try to set the new panel item like the active one via setActiveItem
Things work ok on Android but not on iphone.
Exactly i have this app.js:
Ext.Loader.setConfig({enabled: true});
Ext.setup({
viewport: {
autoMaximize: false
},
onReady: function() {
var app = new Ext.Application({
name: 'rpc',
appFolder: 'app',
controllers: ['Home'],
autoCreateViewport: false,
launch: function () {
Ext.create('Ext.Panel',{
fullscreen: true,
layout: {
type : 'card',
animation:{
type:'slide'
,duration :3000
}
},
defaults: { /*definisce le caratteristiche di default degli elementi contenuti..??*/
flex: 1
},
items:[{
title: 'Compose',
xtype: 'griglia'
}]
});
}
});
}
});
In a controller i have
.....
.....
var grigliaPan=button.up('griglia');
var mainPan=grigliaPan.up('panel');
var html=
'<img src="img/'+segnoScelto+'_big.png" />'
+'<h1>'+segnoScelto+'</h1>'
+'<p>'+previsione+'</p>'
+'</br></br>';
if (typeof mainPan.getComponent(1) == 'undefined'){
var previsioPan = Ext.widget('previsio');
previsioPan.setHtml(html);
//here i create a button for going home panel
var backButton=new Ext.Button({
ui : 'decline',
alias: 'widget.backbutton',
text: 'Home Page',
width : 150,
height:100
})
previsioPan.add(backButton);
var it=mainPan.getItems();
alert (it['keys']); //this prints : ext-griglia-1
mainPan.add(previsioPan);
var it=mainPan.getItems();
alert (it['keys']); //this prints : ext-griglia-1,ext-previsio-1
//
}
mainPan.getLayout().setAnimation({type: 'slide', direction: 'left', duration:1000});
//mainPan.setActiveItem(1);
var pree=mainPan.getAt(1);
//pree.show();
//mainPan.setActiveItemm(pree);
mainPan.setActiveItem('ext-previsio-1');
The three form of setActiveItem() are ok for Android and falls with iPhone. Can somebody please show me what is the right way to set the new active item added dinamically on the iphone ?
The problem should not be with the add() function cause i can see the new item via the getItems() added in main panel after the add().
by following code you can understand that thisCell is added later after creation of thisRow.
var thisRow = new Ext.Panel({
layout: { type: 'hbox', align: 'stretch', pack: 'center' },
id: 'row' + (rowCount + 1),
defaults: { flex: 1 }
});
// Now we need to add the cells to the above Panel:
var thisCell = new Ext.Panel({
cls: 'dashboardButton',
layout: { type: 'vbox', align: 'center', pack: 'center' },
items: [{
xtype: 'image',
src: 'some image url',
height: '70px',
width: '100px',
}]
});
thisRow.add(thisCell);
hope this will help you to achieve your desired output...