I'm a c# programmer, my JS skills are weak. I've been trying all manners and syntax to get a custom icon image to appear based on query parameters from a Fusion table. I always get a default red dot icon. I'm using SetOptions as follows:
Note that the other markers do work, just not the custom image.
Many thanks for any help.
layerl0.setOptions({
query:
{
select: 'col3',
from: '1RqmLYAIdL9mvV3zAMVdnEjncXiiX0ZXJAwL92PY'
},
styles: [
{ where: "'Category' = 'Hotel'", markerOptions: { iconName: "rec_lodging" } },
{ where: "'Category' = 'Restaurant'", markerOptions: { iconName: "dining" } },
{ where: "'Category' = 'Do'", markerOptions: { icon: new google.maps.MarkerImage("http://m.inbocas.com/Content/icons/surfing.png")} },
{ where: "'Category' = 'Shop'", markerOptions: { iconName: "grocery" } },
{ where: "'Category' = 'Party'", markerOptions: { iconName: "bars" } },
]
});
Do you have the constructor for your MarkerImage?
MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
Related
$('#container').highcharts('Map', {
title : {
text : 'Highmaps basic demo'
},
subtitle : {
text : 'Source map: Africa'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series : [{
data : data,
mapData: Highcharts.maps['custom/africa'],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
http://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/custom/africa
I am using this fiddle and I want to get the country name on click event on the country. Anybody can help me with the example or link to the API of this? I read the API but could not find, I guess I am missing some point.
thanks in advance
Pretty simple, just add this:
plotOptions:{
series:{
point:{
events:{
click: function(){
alert(this.name);
}
}
}
}
}
The this in the point scope represents the clicked point, therfore you have access to it's properties.
http://jsfiddle.net/farz5vq2/
I've been trying to make sure that the load event in the Rally.ui.grid.Grid is firing since I have a problem because my Grid is not filtering. I tried calling the methods myStore.setFilter() and myStore.load(), these two are firing, but I can't be sure the Grid is working properly since the first time, when it all loads, it does the filtering right, but then when I change the dropdown or combobox it doesn't.
This is how I load myStore:
this.myStore=Ext.create("Rally.data.wsapi.Store",{
model:"Task",
autoLoad:true,
filters: myFilters,
listeners:{
load:function(myStore,myData,success){
if(!this.myGrid) //IT CREATES THE GRID FOR THE FIRST TIME
{
this._loadGrid(myStore)
console.log('Grid Created!');
// this.myStore.setFilter();
// this.myStore.load();
}
else
{
this.myStore.setFilter();
//this.myStore.load();
console.log('Grid reloaded!');
console.log(myFilters);
}
},
scope:this
},
fetch:["FormattedID","State","Iteration", "Release"]
}
)
}
And this is how I load myGrid:
_loadGrid:function(myStoryStore){
this.myGrid = Ext.create("Rally.ui.grid.Grid",{
store:myStoryStore,
columnCfgs:["FormattedID","State","Iteration", "Release"],
listeners: {
load: function(myGridy){
console.log('myGrid did load!');
},
scope:this
}
});
this.add(this.myGrid);
}
Here is an example by David Thomas from his videos on building Rally apps that uses reconfigure method to which a store is passed: _myGrid.reconfigure(myStore)
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var relComboBox = Ext.create('Rally.ui.combobox.ReleaseComboBox',{
listeners:{
ready: function(combobox){
//console.log('loaded release name', combobox.getRecord().get('Name')); //getRecord() returns currently selected item
var releaseRef = combobox.getRecord().get('_ref');
this._loadStories(releaseRef);
//console.log('what is this', this);
},
select: function(combobox){
var releaseRef = combobox.getRecord().get('_ref');
this._loadStories(releaseRef);
},
scope: this
}
});
this.add(relComboBox);
},
_loadStories: function(releaseRef){
console.log('loading stories for ', releaseRef);
var myStore = Ext.create('Rally.data.WsapiDataStore',{
model: 'User Story',
autoLoad:true,
fetch: ['Name','ScheduleState','FormattedID'],
filters:[
{
property : 'Release',
operator : '=',
value : releaseRef
}
],
listeners: {
load: function(store,records,success){
console.log("loaded %i records", records.length);
this._updateGrid(myStore);
},
scope:this
}
});
},
_createGrid: function(myStore){
console.log("load grid", myStore);
this._myGrid = Ext.create('Ext.grid.Panel', {
title: 'Stories by Release',
store: myStore,
columns: [
{text: 'ID', dataIndex: 'FormattedID', flex: 1},
{text: 'Story Name', dataIndex: 'Name', flex: 2},
{text: 'Schedule State', dataIndex: 'ScheduleState', flex: 2}
],
height: 400
});
this.add(this._myGrid);
},
_updateGrid: function(myStore){
if(this._myGrid === undefined){
this._createGrid(myStore);
}
else{
this._myGrid.reconfigure(myStore);
}
}
});
I have a Highcharts pie chart here: http://jsfiddle.net/6PbbR/52/
$(function () {
var chart;
$(document).ready(function() {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color]
]
};
});
// Build the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
shadow: true,
},
tooltip: {
enabled: false
},
title: {
text: ""
},
plotOptions: {
pie: {
allowPointSelect: true,
size:'68%',
cursor: 'pointer',
shadow: true,
dataLabels: {
enabled: true,
distance: -40,
style: {
width: '100px'
},
color: '#fff',
connectorColor: '#000000',
formatter: function() {
return '<b style="font-family:arial;font-size:10px;font-weight:bold">'+ this.point.name +'</b> ';
}
}
}
},
series: [{
type: 'pie',
name: 'Income Investments',
data: [
['FLOATING RATE FUNDS', 16.667],
{
name: 'Corporate Capital Trust',
y: 16.667,
sliced: true,
selected: true
},
['BONDS', 16.667],
['ANNUITIES', 16.667],
['REITs', 16.667],
['CDs', 16.667]
]
}],
colors: [
'#83a3c6',
'#98012e',
'#19699b',
'#ae9e8e',
'#5283b0',
'#958370'
],
});
});
});
Two questions:
1) I'm not happy with how I inserted inline style in plotOptions{pie{formatter. Where is a better place to do this using the API, instead of brute-forcing inline style?
2) I would like to change the font-family for the red wedge (and possibly tweak fix its positioning/margins). What's the best way of doing this?
Edit: Ideally, I can accomplish my needs without needing to go outside the above function. Is it possible to attach style to just one data point using the API?
It's a simple html, so you can add a class or id and then style using css.
js
formatter: function() {
return '<b id="myTooltipId">'+ this.point.name +'</b> ';
}
css
#myTooltipId {
font-family: arial;
font-size: 10px;
font-weight:bold
}
Update:
Inside formatter you can get the slice properties using this.
So you just have to check if the slice is the one you want.
formatter: function() {
// key is the slice name
if (this.key == 'CDs') {
return '<b id="myTooltipId">'+ this.point.name +'</b> ';
} else {
return this.value;
}
}
I'm quite new to sencha touch. The goal is to create an app which has a TabPanel containing four Tabs, one of them should be a map (the others are a NestedList and two Panels working like a charm). I've tried to make the map card like
NPApp.views.Mapcard = Ext.extend(Ext.Map, { ...
where I ended up with getting really strange results like some views are overlapping and no map is shown.
The second try was to creating a Panel, embed it into the TabPanel and add a map to the panel, where I get this error:
Uncaught TypeError: Cannot read property 'ROADMAP' of undefined;
sencha-touch-debug.js:24840
I've already tried to change the mapType to google.map.MapTypeID like mentioned in the Google Map API V3, no success there.
I just can't get the hang on it, hope you can give me some hints!
The App:
NPApp = new Ext.Application({
name: "NPApp",
title: "NextPuff",
icon: 'images/icon.png',
tabletStartupScreen: 'images/index_default.jpg',
phoneStartupScreen: 'images/index_default.jpg',
launch: function() {
this.views.viewport = new this.views.Viewport();
this.views.homecard = this.views.viewport.getComponent('navi');
}
});
The Viewport:
NPApp.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
store: NPApp.npstore,
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'homecard', stretch: true},
{ xtype: 'searchcard', id: 'navi' },
{ xtype: 'mapcard' },
{ xtype: 'morecard' }
]
});
NPApp.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
The Mapcard:
NPApp.views.Mapcard = Ext.extend(Ext.Panel, {
title: "Map",
iconCls: "map",
initComponent: function() {
var npMap = new Ext.Map({
title: 'Map',
useCurrentLocation: true,
listeners: {
centerchange : function(comp, map){
// refreshMap(map);
}
},
mapOptions : {
mapTypeControl : false,
navigationControl : false,
streetViewControl : false,
backgroundColor: 'transparent',
disableDoubleClickZoom: true,
zoom: 17,
draggable: false,
keyboardShortcuts: false,
scrollwheel: false
}
});
Ext.apply(this, {
defaults: {
styleHtmlContent: true
},
items: [npMap]
});
NPApp.views.Homecard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('mapcard', NPApp.views.Mapcard);
Sencha 1.1.0; Google JavaScript Maps API V3; Safari 5.1
I have a similar application running. Your tabpanel is perfect. All you need to alter is your map code.... Try this instead :
var map = new Ext.Map({
mapOptions : {
center : center,
zoom : 20,
mapTypeId : google.maps.MapTypeId.HYBRID,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners : {
maprender : function(comp, map){
var marker = new google.maps.Marker({
position: center,
//title : 'Sencha HQ',
map: map
});
setTimeout( function(){map.panTo (center);} , 1000);
}
},
geo:new Ext.util.GeoLocation({
autoUpdate:true,
maximumAge: 0,
timeout:2000,
listeners:{
locationupdate: function(geo) {
center = new google.maps.LatLng(geo.latitude, geo.longitude);
if (map.rendered)
map.update(center)
else
map.on('activate', map.onUpdate, map, {single: true, data: center});
},
locationerror: function ( geo,
bTimeout,
bPermissionDenied,
bLocationUnavailable,
message) {
if(bLocationUnavailable){
alert('Your Current Location is Unavailable on this device');
}
else{
alert('Error occurred.');
}
}
}
})
});
This creates the map object and sets the center to ur current location. Now you need to dock this object inside an Ext.extend(Ext.Panel({}) object. Ive tried directly creating the map object but it needs a panel to display on.
So you're panel code should go something like so:
NPApp.views.Mapcard = new Ext.extend(Ext.Panel({
iconCls : 'map',
title : 'Map',
layout: 'card',
ui: 'light',
items: [map],
listeners:{
}
});
)
It took me ages of going thru a dozen or more examples to make the current location work. This is a combination of several codes and a bunch of stuff in the Google API.
Lemme know if you have any more questions about Google Maps or directions.
Cheers :)
Sasha
how can i change the button-text ("Done" and "Cancel") in the selectfield to german or in any text i like?
xtype: 'selectfield',
name: 'sector',
width: 150,
prependText: 'Sector:',
options: [
{text: 'Alle Termine', value: 'alldates'},
]
one easy possibilty would be to override the defaults of the picker, e.g.:
Ext.override(Ext.Picker, {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
});
You can extend Ext.form.Select to allow you to apply your own configuration to the picker it uses.
Ext.ns('MySite.ux.form');
MySite.ux.form.Select = Ext.extend(Ext.form.Select , {
getPicker: function() {
if (!this.picker) {
this.picker = new Ext.Picker(Ext.apply({
slots: [{
align : 'center',
name : this.name,
valueField : this.valueField,
displayField: this.displayField,
value : this.getValue(),
store : this.store
}],
listeners: {
change: this.onPickerChange,
scope: this
}
}, this.pickerConfig));
}
return this.picker;
}
});
Ext.reg('myselectfield', MySite.ux.form.Select);
And your selectfield configuration might look like this:
{
xtype: 'myselectfield',
name: 'sector',
label: 'Sector',
pickerConfig: {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
}
}