Cannot add mapkey icon to L.easyButton in Leaflet - javascript

I am trying to add an icon from mapkey to L.easyButton using the following code, but I am getting the error below.
var menuButton = L.easyButton({
states: [{
stateName: 'show-menu',
icon: L.icon.mapkey({icon:"bars",color:'#000000',background: false,size:25}),
title: 'Show Menu',
onClick: function (btn, map) {
menu.options.button = btn;
menu.show();
btn.state('hide-menu');
}
},{
stateName: 'hide-menu',
icon: 'fa-star',
title: 'Hide Menu',
onClick: function (btn, map) {
menu.hide();
btn.state('show-menu');
}
}],
id: 'styles-menu',
});
menuButton.addTo(map);
Error:
TypeError: ambiguousIconString.match is not a function
Do I need to add another type of icon or something?

L.easyButton accepts a range of options for icons, but an L.icon object is not one of them. L.icon objects are for defining marker icons in Leaflet. It does not appear that you are defining a marker icon.
I would try using the actual icon class in a <span> for the icon property. For example:
var menuButton = L.easyButton({
states: [{
stateName: 'show-menu',
icon: "<span class='mki mki-bars'></span>",
title: 'Show Menu',
/* ... your other code below ... */
}]
});
Here's an example using JSFiddle. You can see the menu button beneath the +/- buttons on the top left of the map.
Note that I did not build a menu, so clicking the menu button will throw an error.

L.easyButton doesn't take a L.icon argument. Your second use is correct, it can take a Font Awesome icon name. A plain HTML icon could work for you here - see http://danielmontague.com/projects/easyButton.js/v2/examples/#icon-options

Related

Legend in openlayers with HTML tag

I'm using the following code to create the legends in Openlayers http://viglino.github.io/ol-ext/examples/legend/map.control.legendstat.html.
A question, I would like to insert html tag, for example, the link to a page. It's possible?
You can inspect the code of the example on the site. You will see the following
legend.addItem({ title:'2.600.000', properties: { pop: 2600000 }, typeGeom: 'Point'});
The added row's fire a select event, so you could add a title and your href link to the properties and open that link on select.
Here is a better example of this component:
https://viglino.github.io/ol-ext/examples/legend/map.control.legend.html
EDIT:
const legend = new ol.legend.Legend({
title: 'Legend',
})
const legendCtrl = new ol.control.Legend({
legend: legend,
collapsed: false
});
legend.addItem({ title: 'Google', properties: {link: 'http://www.google.com'} });
legend.addItem({ title: 'Apple', properties: {link: 'http://www.apple.com'} });
legend.on('select', function(event) {
window.open(event.item.get('properties').link);
});

How do I remove the “Cancel” option from the Draw button on the Leaflet.draw plugin?

As seen in the image below, I’d like to remove the option to cancel a drawing. Here’s my code:
With that code you can remove the "cancel" button on all shapes:
L.DrawToolbar.prototype.getActions = function (handler) {
return [
{
enabled: handler.completeShape,
title: L.drawLocal.draw.toolbar.finish.title,
text: L.drawLocal.draw.toolbar.finish.text,
callback: handler.completeShape,
context: handler
},
{
enabled: handler.deleteLastVertex,
title: L.drawLocal.draw.toolbar.undo.title,
text: L.drawLocal.draw.toolbar.undo.text,
callback: handler.deleteLastVertex,
context: handler
}
];
}
Original code: Doc
Also you can allow the cancel button for handlers when you add a if and test if the correct handler is passed.
PS: For a newer "leaflet-draw" you can use Leaflet-Geoman

Adding multiple buttons in TinyMce in a loop doesn't work

I have a config list for buttons like this:
var config = [{
name: 'first',
insertionConfig: {
title: 'first button',
onsubmit: function(){
// do sth
}
}
},{
name: 'second',
insertionConfig: {
title: 'second button',
onsubmit: function(){
// do sth
}
}
}
]
and in my TinyMce plugin I want to add all buttons according to their config. So it would end up like this:
tinymce.PluginManager.add('myPlugin', function(editor, url) {
for (var i in config) {
item = config[i];
editor.addButton(item.name, {
text: item.name,
onclick: function() {
editor.windowManager.open({
title: item.insertionConfig.title,
onsubmit: item.insertionConfig.onsubmit
}
};
}
});
but when I click on first button, it shows the second button's title. all configs of buttons refer to last added button. I know problem is something about the 'item' in the loop (all buttons refer to same item object which is the last one) but I don't know how to fix it.
Try creating a locally scoped variable for item inside the onclick function:
The issue you are running into is how variables are managed in JavaScript at the time the function is actually run. The click function is not actually run until you click an item and at that time item is pointing to the last item in the array.
EDIT: Check out this TinyMCE Fiddle for how this may happen: http://fiddle.tinymce.com/REfaab/1

Ext JS - create a tool with dynamic tooltip on a panel

I have a panel and that panel has a load of tools.
these are defined in an array,
eg:
myPanel.tools = [
{
type : 'down',
tooltip : 'Down',
},
{
type : 'up',
tooltip : 'Up',
},
{
type : 'help',
tooltip : 'Blah Blah',
}
]
But the above is fine if the tooltip is static, but I would like it to be updated whenever the user mouses over it.
Can you pass a function to the config to call when moused over or right before its shown? Is there another way.
tooltip excepts an config object where you can add a listener:
tooltip: {
listeners: {
'render': function(comp){
comp.tooltip = "enter your tooltip";
}
}
}
now you can modify the component like you want.

Sencha Touch 2: How to override back button on Navigation View

I was wondering how to ovverride the back button on a navigation view. I tried using onBackButtonTap but it doesnt seem to work http://www.senchafiddle.com/#8zaXf
var view = Ext.Viewport.add({
xtype: 'navigationview',
onBackButtonTap: function () {
alert('Back Button Pressed');
},
//we only give it one item by default, which will be the only item in the 'stack' when it loads
items: [
{
//items can have titles
title: 'Navigation View',
padding: 10,
//inside this first item we are going to add a button
items: [
{
xtype: 'button',
text: 'Push another view!',
handler: function() {
//when someone taps this button, it will push another view into stack
view.push({
//this one also has a title
title: 'Second View',
padding: 10,
//once again, this view has one button
items: [
{
xtype: 'button',
text: 'Pop this view!',
handler: function() {
//and when you press this button, it will pop the current view (this) out of the stack
view.pop();
}
}
]
});
The fiddle you've mentioned works well in my local project on my machine. For some reason, it doesn't work on fiddle site. Try running it on your local project.
Still instead of using onBackButtonTap config, it's good to extend Ext.navigation.View class and override onBackButtonTap method. That way you'll have more control over whole components. You'd also like to override other configs as well. Here's what I'd use -
Ext.namespace('Ext.ux.so');
Ext.define('Ext.ux.so.CustomNav',{
extend:'Ext.navigation.View',
xtype:'customnav',
config:{
},
onBackButtonTap:function(){
this.callParent(arguments);
alert('back button pressed');
}
});
the line this.callParent(arguments) will allow component to behave in default way + the way to wanted it to behave. And if you want to completely override the back button behavior you can remove this line. Try doing both ways.
To use this custom component, you can use -
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
var view = Ext.create('Ext.ux.so.CustomNav', {
fullscreen: true,
items: [{
title: 'First',
items: [{
xtype: 'button',
text: 'Push a new view!',
handler: function() {
//use the push() method to push another view. It works much like
//add() or setActiveItem(). it accepts a view instance, or you can give it
//a view config.
view.push({
title: 'Second',
html: 'Second view!'
});
}
}]
}]
});
}
Give this a shot. It'll work for you yoo.

Categories