I have a problem with custom onClick function on doughnut chart.
The only thing I need is to override default legend onClick function calling the original one + my custom code.
Following their official documentation and this suggestion on github page I wrote this js
var defaultLegendClickHandler = Chart.defaults.doughnut.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
console.log(legendItem);
defaultLegendClickHandler.call(this, e, legendItem);
};
Then I associate it to the onClick option (JSfiddle here) but it is not working. It seems that the legendItem variable is always an empty array so the default click function does nothing.
Your JSfiddle looks fine except that the newLegendClickHandler is defined at the wrong place inside options. You should define it inside legend as follows.
legend: {
position: 'top',
onClick: newLegendClickHandler
},
Please also check Custom On Click Actions from Chart.js
documentation
The click handler was set to the chart itself and not the legend. Move the new onClick handler inside of the legend options.
var options = {
cutoutPercentage: 20,
responsive: true,
legend: {
position: 'top',
onClick: newLegendClickHandler,
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
};
I am already using one tooltip() function.
L.tooltip({
permanent: true,
direction: 'center',
className: 'text'
})
.setContent(feature.properties.text)
.setLatLng(layer.getLatLng()).addTo(map);
And now I need to create a new tooltip. For example with the name tooltip2().
How can I do this?
You can actually go ahead and use this function multiple times!
L.tooltip({
permanent: true,
direction: 'center',
className: 'text'
})
.setContent("Hello")
.setLatLng([38.8, -77.1])
.addTo(map);
L.tooltip({
permanent: true,
direction: 'center',
className: 'text'
})
.setContent("World")
.setLatLng([38.7, -77.1])
.addTo(map);
However, it looks like you might be looping through geojson data since you are using feature and layers within your tooltip. In that case you can just write it once:
L.geoJSON(geojson, {
onEachFeature: (feature, layer) => {
L.tooltip({
permanent: true,
direction: 'center',
className: 'text'
})
.setContent(feature.properties.name)
.setLatLng(layer.getLatLng())
.addTo(map);
}
}).addTo(map);
If you are asking about naming the tooltips or feature layer in order to use them again later in your code, you can just set it: const featureLayer = L.geoJSON... and const text = L.tooltip...
Here is a working example of adding popups, tooltips, feature layers to the map and adjusting popup & tooltip css, including the directional triangle:
https://repl.it/repls/NeighboringConventionalPhp
So I'm making use of the plugin ImageMapster and I'm making use of the tooltips.
Problem:
The problem I have with this plugin is when I use the tooltip it relocate completely different as you can see here below
As you see i hover over the dark orange section and the tooltip is right in the middle of the image with the text "Te huur".
Here is a example of the section i hover:
And the javascript:
$('#finder-image').mapster({
fill: true,
fillColor: 'ffffff',
fillOpacity: 0,
strokeWidth: 3,
singleSelect: false,
isSelectable: false,
scaleMap: true,
altImage: '{{asset('images/map2.svg')}}',
selected: true,
showToolTip: true,
toolTipContainer: '<div class="tooltip-wrapper"></div>',
mapKey: 'name',
render_highlight: {
fillOpacity: 1
},
onMouseover: function (options) {
$("#finder-" + options.key).children().css('color', "#EF8000");
$("#finder-" + options.key).children().css('font-weight', "bold");
},
onMouseout: function (options) {
$("#finder-" + options.key).children().css('color', "black");
$("#finder-" + options.key).children().css('font-weight', "normal");
},
areas: [
{
key: '21',
toolTip: '<img src
{{asset('/images/finder/icon_huur_1.png')}}" class="img-responsive pop-image">'
}
]
});
Pointing out:
Sometimes when I hover on the sections I get a error. The error is as follows :
Uncaught TypeError: Cannot read property '0' of undefined
at showToolTip (jquery.imagemapster.js:4467)
at m.AreaData.showToolTip (jquery.imagemapster.js:4559)
at m.AreaData.<anonymous> (jquery.imagemapster.js:2733)
at Function.each (jquery.js:374)
at HTMLAreaElement.mouseover (jquery.imagemapster.js:2731)
at HTMLAreaElement.me.mouseover (jquery.imagemapster.js:2925)
at HTMLAreaElement.dispatch (jquery.js:4435)
at HTMLAreaElement.r.handle (jquery.js:4121)
This is a error in the ImageMapster js itself, it says that variable corners/the tooltip isn't set.
Jquery.imagemapster.js:
As for the Uncaught TypeError: Cannot read property '0' of undefined error
The image inside the tooltip is not loaded on initial page load. This means that the image is being loaded as soon as you hover the tooltip (for the first time).
Because the image is not loaded as soon as the area is hovered the plugin can't define a height/width based on the data inside the toolTipContainer.
If you add an element with an initial size (which has no http request loading time such as text) inside the tooltip it will work.
For example
{
key: '1',
toolTip: '<img src="{{asset('/images/finder/icon_kaart_0.png')}}" class="img-responsive pop-image"><div style="visibility: hidden;">Area</div>'
},
I am building a map with multiple geojsons in Leaflet and it has worked well on a normal size computer screen. It doesn't however work on smaller screens or Apple products and so I am attemting to move my code over to Smap-responsive https://github.com/getsmap/smap-responsive .
I have added a geojson following the given example and styled it based upon attributes, it looks how I want it to and the pop ups work how I want them to. The problem comes when I try to add a second geojson. When I click points on the first layer it works as it should but when I turn off that layer and turn on the second layer the popups don’t work on the second layer. If I refresh the page and try the second layer first, those popups work but then they don’t work on the first layer. The error i get is:
“Uncaught TypeError: Cannot read property 'properties' of undefined”
Here is the code:
var config = {
// These params are default and can be overridden by calling the map with e.g. http://mymap?center=13.1,55.6&zoom=17
params: {
// The map's centering from start. Coordinates should be in WGS 84 and given like [easting, northing] i.e. [longitude, latitude]
center: [14.0, 55.52],
// The initial zoom of the map, In this example I zoom out slightly if the screen is smaller than given number of pixels
zoom: $(window).width() < 600 ? 11 : 11
},
// Optional configuration object for the Leaflet map object. You can use all options specified here: http://leafletjs.com/reference.html#map-class
// mapConfig: {
// maxBounds: [ // Optional. Limit panning of the map. Given as [[north, west], [south, east]]
// [55.71628170645908, 12.6507568359375],
// [55.42589636057864, 13.34564208984375]
// ],
// minZoom: 11, // Optional. Limit how much you can zoom out. 0 is maximum zoomed out.
// maxZoom: 18 // Optional. Limit how much you can zoom in. 18 is usually the maximum zoom.
// },
smapOptions: {
// The text of the <title>-tag
title: "webbkartan",
// The favicon to be used
favIcon: "//assets-cdn.github.com/favicon.ico"
},
// -- Baselayers (background layers) --
bl: [
// -- An openstreetmap layer. Note that all layer types used as overlays can also be used as baselayers, and vice versa (see more layers below). --
{
init: "L.TileLayer",
url: '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
options: {
layerId: "osm",
displayName: "OSM",
attribution: '<span>© OpenStreetMap contributors</span> | <span>Tiles Courtesy of MapQuest <img src="//developer.mapquest.com/content/osm/mq_logo.png"></span>',
maxZoom: 18
}
}
],
// -- Overlays --
ol: [
{
init: "L.GeoJSON.WFS",
url: document.URL.search(/dev.html?/) > 0 ? "examples/data/recipient.geojson" : "../examples/data/recipient.geojson",
options: {
displayName: "Totalkväve halt",
category: ["Status"],
layerId: "kvave",
attribution: "",
inputCrs: "EPSG:4326",
uniqueKey: "Nr",
selectable: true,
reverseAxis: false,
reverseAxisBbox: true,
geomType: "POINT",
legend:"examples/data/legend/kvave_legend.jpg",
popup:
'<h4>Punkt ${Nr} </h4>'+
'<br><img src="examples/data/diagram/' + '${Ar_kvav}' + '"/ width=400>'+
'<img src="examples/data/diagram/' + '${Man_kvav}' + '"/ width=400>'+
'<p><font size=2>'+ '${Plats}'+
'<br><b> Frekvens: </b>${frekvens_g}/år'+
'<br><b> Senast provtagning: </b> ${sist_anv}'+
'<br><b> Nuvarande status: </b> ${Status_fos} status'+
'<br><b> Senaste uppdaterad: </b> ${uppdaterad}</p>',
style:function(feature){
switch (feature.properties.Status_kva){
case "Extremt hög halt" : return {color: '#FF000D'};
case "Mycket hög halt": return {color: '#FFBB00'};
case null: return {color: '#8C8C89'};
};
}
}
},
{
init: "L.GeoJSON.WFS",
url: document.URL.search(/dev.html?/) > 0 ? "examples/data/recipient.geojson" : "../examples/data/recipient.geojson",
options: {
displayName: "Totalfosfor status",
category: ["Status"],
layerId: "fosfor",
attribution: "",
inputCrs: "EPSG:4326",
uniqueKey: "OBJECTID",
selectable: true,
reverseAxis: false,
reverseAxisBbox: true,
geomType: "POINT",
legend:"examples/data/legend/fos_legend.jpg",
popup:
'<h4>Punkt ${Nr} </h4>'+
'<br><img src="examples/data/diagram/' + '${Ar_fos}' + '"/ width=400>'+
'<img src="examples/data/diagram/' + '${Man_fos}' + '"/ width=400>'+
'<p><font size=2>'+ '${Plats}'+
'<br><b> Frekvens: </b>${frekvens_g}/år'+
'<br><b> Senast provtagning: </b> ${sist_anv}'+
'<br><b> Nuvarande status: </b> ${Status_fos} status'+
'<br><b> Senaste uppdaterad: </b> ${uppdaterad}</p>',
style:function(feature){
switch (feature.properties.Status_fos){
case "Hög" : return {color:'#02A0F5', fillColor: '#02A0F5', fillOpacity:1};
case "God" : return {color:'#29D637', fillColor: '#29D637', fillOpacity:1};
case "Otillfredsställande" : return {color: '#F5AA07', fillColor: '#F5AA07', fillOpacity:1};
case "Dålig": return {color:'#FC0000', fillColor: '#FC0000', fillOpacity:1};
case null: return {color:'#8C8C89', fillColor: '#8C8C89',fillOpacity:1 };
};
}
}
},
],
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// Plugins are Leaflet controls. The options of a control
// given here, will override the options in the control.
// Thereby, you can manage everything the control lets
// you manage from this config file – without having to
// edit the plugin itself.
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
plugins: [
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// Scale is Leaflet's in-built scale bar control. See options: http://leafletjs.com/reference.html#control-scale
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
{
init: "L.Control.Scale",
options: {
imperial: false
}
},
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// LayerSwitcher is a responsive layer menu for both overlays and baselayers.
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
{
init: "L.Control.LayerSwitcher",
options: {
toggleSubLayersOnClick: false, // If true, all layers below this header will be turned on when expanding it.
unfoldOnClick: true, // If true, clicking anywhere on a header will unfold it. If false, user has to click on the icon next the header text.
unfoldAll: false, // If true, all subheaders will be unfolded when unfolding a header.
olFirst: false, // If true, the overlays panel is shown at the top
pxDesktop: 992, // Breakpoint for switching between mobile and desktop switcher
btnHide: true, // Show a hide button at the top header
catIconClass: "fa fa-chevron-right" // Icon class for foldable headers
}
},
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// Zoombar creates a custom zoombar with [+] and [-] buttons.
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
{
init: "L.Control.Zoombar",
options: {}
},
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// Geolocate shows the users position. Based on the HTML5 geolocation API.
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
{
init: "L.Control.Geolocate",
options: {
position: 'bottomright', // Button's position
locateOptions: {
maxZoom: 17, // Maximum auto-zoom after finding location
enableHighAccuracy: true // true: Will turn on GPS if installed (better accuracy but uses more battery)
}
}
},
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// SelectVector is needed to make WMS layers selectable
// using getfeatureinfo requests.
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
{
init: "L.Control.SelectWMS",
options: {
wmsVersion: "1.3.0", // The WMS version to use in the getfeatureinfo request
info_format: "text/plain", // The fallback info format to fetch from the WMS service. Overridden by layer's info_format in layer's selectOptions.
maxFeatures: 20, // Max features to fetch on click
buffer: 12, // Buffer around click (a larger number makes it easier to click on lines and points)
useProxy: false // If you want call the URL with a prepended proxy URL (defined in ws above)
}
},
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// SelectVector is needed in order to make vector (e.g. WFS) layers selectable.
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
{
init: "L.Control.SelectVector",
options: {
// The select style.
selectStyle: {
weight: 5,
color: '#00FFFF',
fillColor: '#00FFFF',
opacity: 1,
fillOpacity: .5
}
}
},
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// Search connects to a autocomplete and geolocate service and places a marker
// at the geolocated location.
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
{
init: "L.Control.Search",
options: {
_lang: {
// Watermark/placeholder for text entry. Language dependent.
"en": {search: "Search address or place"}, // english
"sv": {search: "Sök adress eller plats"} // swedish
},
gui: true, // If false, entry is not shown but the plugin can still take the POI URL parameter
whitespace: "%20", // How to encode whitespace.
wsOrgProj: "EPSG:3008", // The projection of the returned coordinates from the web service
useProxy: false, // If you want call the URL with a prepended proxy URL (defined in ws above)
wsAcUrl: "//kartor.malmo.se/api/v1/addresses/autocomplete/", // Required. Autocomplete service.
wsLocateUrl: "//kartor.malmo.se/api/v1/addresses/geolocate/", // Required. Geolocate service.
acOptions: { // typeahead options (Bootstrap's autocomplete library)
items: 100 // Number of options to display on autocomplete
}
}
},
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// Print creates a downloadable image server-side. Requires Geoserver and the plugin "Mapfish print".
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// {
// init: "L.Control.Print",
// options: {
// printUrl: "//kartor.malmo.se/print-servlet/leaflet_print/", // The print service URL
// position: "topright" // Button's position
// }
// },
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// ShareLink adds a button which, on click, will create a
// URL which recreates the map, more or less how it looked like.
// It is up to other plugins to add and receive URL parameters by
// listening to the events:
// - Create params: "smap.core.createparams"
// - Apply params: "smap.core.beforeapplyparams" or "smap.core.applyparams"
// For instance:
//
// smap.event.on("smap.core.createparams", function(e, paramsObject) {
// paramsObject.myparameter = 3;
// });
// smap.event.on("smap.core.applyparams", function(e, paramsObject) {
// alert(paramsObject.myparameter);
// });
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
{
init: "L.Control.ShareLink",
options: {
position: "topright",
root: location.protocol + "//malmo.se/karta?" // location.protocol + "//kartor.malmo.se/init/?appid=stadsatlas-v1&" // Link to malmo.se instead of directly to map
}
},
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// RedirectClick opens a new browser tab when the user clicks on the map.
// The easting ${x} and northing ${y} is sent along to the url. See example below.
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
{
init : "L.Control.RedirectClick", // Pictometry
options: {
position: "topright", // Button's position
url: "http://kartor.malmo.se/urbex/index.htm?p=true&xy=${x};${y}", // Malmö pictometry
btnClass: "fa fa-plane", // Button's icon class
cursor: "crosshair" // Cursor shown in map before click
}
},
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// Info simply creates a toggleable Bootstrap modal which you can fill with any info below.
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
{
init: "L.Control.Info",
options: {
addToMenu: false, // Create toggle button or not
position: "topright", // Button's position (requires addToMenu == true)
autoActivate: false, // Open from start
// Here follows the content of the modal – language dependent!
_lang: {
"en": {
titleInfo: "<h4>A header</h4>",
bodyContent:
'<p>Some content</p>'
},
"sv": {
titleInfo: "<h4>En rubrik</h4>",
bodyContent:
'<p>Lite innehåll</p>'
}
}
}
},
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// MeasureDraw is a combined measure and drawing tool. The created
// markers, lines or polygons can be shared with others
// (geometries and attributes sent along as a URL parameter).
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
{
init: "L.Control.MeasureDraw",
options: {
position: "topright", // Button's position
saveMode: "url", // So far url is the only option
layerName: "measurelayer", // The internal layerId for the draw layer
stylePolygon: { // Draw style for polygons
color: '#0077e2',
weight: 3
},
stylePolyline: { // Draw style for polylines
color: '#0077e2',
weight: 9
}
}
},
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// ToolHandler takes care of making all buttons inside the top-right div responsive.
// When the screen width is smaller than the defined breakpoint, the buttons are contained
// within a Bootstrap popover which can be toggled by a single button.
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
{
init: "L.Control.ToolHandler",
options: {
showPopoverTitle: false // Show title (header) in the popover
}
}
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// Add2HomeScreen creates a popover on iOS devices supporting
// "Add To Homescreen", which advices the user to add the website
// to the homescreen, making it look almost like a native app.
// <><><><><><><><><><><><><><><><><><><><><><><><><><>
// {
// init: "L.Control.Add2HomeScreen",
// options: {}
// }
]
};
The error points to "feature.properties." in the function that sets the colors of the first layer I turn on and it comes when I click to get a pop up on the second layer I have turned on. I haven't had this problem when using Leaflet without smap-resonsive.
I have tried moving the function out to an external js. file, defining the functions with "var something =". I have tried calling the colors direct from an attribute also but all give the same error.
I am new to Leaflet and Javascript, any help appreciated!
The error was caused by bug which meant that only the uppermost layer was selectable. Described here:
https://github.com/getsmap/smap-responsive/issues/198
Thanks to Johan Lahti for a quick reposonse in solving the problem!
Hi I have a twitter feed using the following code:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 195,
height: 300,
theme: {
shell: {
background: '#999999',
color: '#D6E03D'
},
tweets: {
background: '#f3f3f3',
color: '#999999',
links: '#5a5a5a'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('louise').start();
</script>
and this is linked to the widget.js file. I need the default twitter to be blue not white so I tried downloading the js file and hosting it from my server and changing the code to my image using this code:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
this adds the blue image in ok but it messes up some of the links that should be different colours within the feed, therefore I think I need to stick to linking to this version:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
is there a way I can link to this but override the twitter image that they are using with my own twitter logo?
Any help would be greatly appreciated, thanks
Louise
I guess the solution might be one of these:
CSS hack - hide image and use background-image CSS property instead
Detect image on load and replace it then
Write a custom widget. Example.