How to use font-awesome icon in Symbol Layer of Mapbox? - javascript

I want to use font-awesome icons into symbol layer of Mapbox. I have tried to use text-font of layer
https://github.com/openmaptiles/fonts/pull/9
map.on('load', function() {
map.addSource('markers', {
type: 'geojson',
data: './data/data.geojson'
});
map.addLayer({
'id': 'markers',
"interactive": true,
"type": "symbol",
"source": "markers",
"layout": {
'text-line-height': 1, // this is to avoid any padding around the "icon"
'text-padding': 0,
'text-anchor': 'center',
'text-allow-overlap': true,
'text-field': String.fromCharCode(62405),
'icon-optional': true, // since we're not using an icon, only text.
'text-font': ['Font Awesome 5 Free Solid'],
'text-size': 25
},
"paint": {
'text-translate-anchor': 'viewport', // up to you to change this -- see the docs
'text-color': '#67A48E' // whatever you want -- can even be data driven using a `{featureProperty}`,
}
});
});
I use but font-awesome fonts are not available for me.
I am not sure. where I am doing the wrong thing.

Related

Trail mode of hovering events doesnt work in tsParticles(similar to particlejs)

I have got two queries, I am implementing tsParticles in my React application.
First one:.
<Particles
id="tsparticles"
options={{
background: {
color: {
value: "black",
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "window",
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "trail",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color:{
animation:{
enable:true,
speed:50,
},
value:"#f00"
},
links: {
shadow:{
blur:true,
color:"#00ff00"
},
triangles:{
frequency: 1
},
color: "random",
distance: 150,
enable: true,
frequency:1,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
angle:{
offset: 45,
value: 90
},
attract:{
rotate:{
x:3000,
y:3000
}
},
gravity:{
acceleration: 9.81,
enable:false,
maxSpeed:1
},
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
value_area: 1000,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
}}
/>
There is a section of onHover and key value of mode in it. There are like 8 different modes to it, can be viewed in https://particles.matteobruni.it/ .
All other modes work fine but the trail mode when I use this code, am I missing some other properties to the Particles component?
Second one:
Also,
I have got two divs, one for the particle and the other for the text to display on top of it. I have achieved this using z-index and positions.
I need the canvas height to be dynamic that is occupy 100% height of its parent whatever the screen size is. I have tried doing this by including Particles component inside a div and keeping its height to 100% but the canvas height decreases with the decrease in the screen size.
Kindly help me, thank you :)
Wow, there's a lot to answer here, but I try to do my best.
First point, the config and mouse trail
The mouse trail needs more configuration, in the modes section of interactivity you have to configure the trail section.
You can see a sample here: https://codepen.io/matteobruni/pen/abdpbBY
If you need more documentation checkout the right section in documentation: https://particles.js.org/interfaces/_options_interfaces_interactivity_modes_itrail_.itrail.html
Second point, the canvas size
If you need a dynamic canvas size the best solution is to use the backgroundMode in the options root object
You can see a sample here: https://codepen.io/matteobruni/pen/MWeqxNL
The background mode if enabled sets the canvas style with a fixed position and the desired zIndex
You can see the documentation here: https://particles.js.org/interfaces/_options_interfaces_backgroundmode_ibackgroundmode_.ibackgroundmode.html
If you are using the backgroundMode, the better results are obtained without setting any style to the containing div (the tsParticles target/container)

FabricJs reset custom controls for a specific object

I am using the fabricjs extension - fabricjs-customise-controls-extension in my project. I am using the following code to set the controls for all objects:
fabric.Object.prototype.customiseCornerIcons({
settings: {
cornerSize: 40,
cornerShape: 'circle',
borderColor: "rgba(173,173,173,1)"
},
tl: {
icon: '/images/icon/rotate-rounded.png'
},
tr: {
icon: '/images/icon/resize-rounded.png'
},
br: {
icon: '/images/icon/delete-rounded.png'
}
});
I am able to change the icons of the custom controls for a specific object using the following code:
specificObject.customiseCornerIcons({
settings: {
cornerSize: 40,
cornerShape: 'circle',
borderColor: "rgba(173,173,173,1)"
},
tl: {
icon: '/images/icon/resize-rounded.png'
},
tr: {
icon: '/images/icon/resize-rounded.png'
}
}, function () {
canvas.renderAll();
});
Is it possible to remove the custom controls for a specific object and reset to the default fabric js controls?
JsFiddle URL: https://jsfiddle.net/arunnambissan/sffq2zc4/4/

Highchart.js: use bootstrap glyphicons instead of symbols on contextbutton

How can i use bootstrap glyphicons instead of "regular" symbols in the contextbuttons of Highcharts. Going to exporting > buttons > contextButton.
I have added some glyphicon in the className propery, but the symbol shows up instead. Is there any way to override this?
Here is an example JSON object for Highcharts:
{
"chart": {
"type": "column",
"renderTo": "periodChart"
},
"title": {
"text": "Verkoop per periode"
},
"xAxis": {
"categories": ["2015", "2016", "2017"]
},
"yAxis": {
"title": {
"text": "Aantal verkochte producten"
}
},
"exporting": {
"buttons": {
"contextButton": {
"align": "right",
"symbol": "menu",
"height": 22,
"width": 24,
"y": 0,
"x": 0,
"className": "glyphicon glyphicon-print",
"enabled": true
}
}
},
"series": [{
"borderColor": "#555",
"data": [{
"name": "2015",
"y": 6121.0
}, {
"name": "2016",
"y": 6172.0
}, {
"name": "2017",
"y": 4943.0
}],
"name": "Aantallen per jaar (P/s)"
}]
}
I have added the following packages to my html, along with bootstrap and jquery:
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
Edit: when i leave the symbol property empty ("") then nothing shows up. Not using the property at all will result in the default "menu" symbol.
EDIT
The post before the edit contained only the information how to add a regular image as a background to the context button which wasn't the actual answer for this question.
Here I used glyphicon as a charcter in the text of te button: http://jsfiddle.net/kkulig/LoLtm8bn/
I haven't found a way to completely disable the symbol in the context button. The workaround for this is to hide it but the space reserved for it still remains there.
I ended up using the approach from Full text button example in this API record: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.text (contextButton disabled, exportButton used instead).
Live demo: http://jsfiddle.net/kkulig/np80zf58/
END OF EDIT
Context button is an SVG element so you need to use defspattern for this:
JS:
events: {
load: function() {
var chart = this,
renderer = chart.renderer;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: 1,
id: "image1",
patternContentUnits: 'userSpaceOnUse'
});
renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 0, 0, 24, 24).add(pattern);
}
}
CSS:
// hide the default symbol
.highcharts-button-symbol {
display: none
}
// use a new one
.highcharts-button-box {
fill: url(#image1)
}
Live working example: http://jsfiddle.net/kkulig/2cpvuydd/
SO related question: Fill SVG path element with a background-image
Highcharts docs reference: https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
Highcharts API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

echarts Media queries not working with Bootstrap (carousel)

I have a bootstrap carousel with 2 slides. Both the slides uses bootstrap grids of 2x2 to display charts on them. They are working fine , however I am trying to implement responsive media queries and can't seem to make it work. I used baseOptions and media options to define but the charts do not load up and the console doesn't show any error.
I have tried to define the <div> container with inline style width and height i.e. style="width: 100%;height:400px;" and I have also tried to define the width and height in CSS like so-
.mychart {
width: 100%;
height: 400px;
}
The javascript looks like below.
<div id="chart1" style="width: 100%;height:400px;"></div> //with inline style
<div id="chart1" class="mychart"></div> //with CSS class
var myChart1 = echarts.init(document.getElementById('chart1'));
var lpnArr = [101, 43, 10, 250];
option = {
title : {
text: 'My data Pie',
subtext: 'Data as of last batch',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['Processed','Unprocessed','In RIB','Errors']
},
color: ['#4bc14f','#ff7f50','#da70d6','#d8316f'],
toolbox: {
show : true,
feature : {
mark : {show: false},
dataView : {show: false},
magicType : { show: false},
dataZoom : { show : false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'Processed',
type:'pie',
radius : ['50%', '70%'],
startAngle : 230,
center: ['35%', '50%'],
itemStyle : labelFormatter, //custom formatter
data: lpnArr //load chart with data array lpnArr
}
]
}
var mediaQuery = [
{
option: {
series: [
{
radius: ['50%', '70%'],
center: ['35%', '50%']
}
]
}
},
{
query: {
minAspectRatio: 1
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['35%', '50%']
}
]
}
},
{
query: {
maxAspectRatio: 1
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['50%', '35%']
}
]
}
},
{
query: {
maxWidth: 500
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['50%', '35%']
}
]
}
}
];
myChart1.setOption({baseOption : option,
media : mediaQuery});
if I use it without the media query it works just fine. like this
myChart1.setOption(option);
Using the media query, as per the documentation along with baseOptions and media, the charts simply don't load and it doesn't show me any error in the console as well, so I am not sure if I am using it correctly or not.
By the way, I also have this in the end of the script to be able to resize the charts when the window is resized but then I realized that this is not truly responsive -
$(window).on('resize', function(){
myChart1.resize();
});
The bootstrap chart elements are <div> elements within other div with a class of BS container-fluid. The carousel code can be found in this JSFiddle.
Media query was introduced in echarts version 3, whereas I have been using version 2 and thus it wasn't working. It's extremely odd that using media with version 2 doesn't show any kind of error, neither does baseOption show any error so I was left scratching my head. Documentation isn't clear enough to say that media queries is only supported in version 3. So after scouring through the code and GitHub threads for hours and trying out all their js versions I came to this conclusion.
The downside of using version 3 echarts is that it is missing the "Tree" chart type and it's a lot more pickier than any prior version. Also, it's twice as much slower than version 2.

amCharts - document.getElementsByClassName(...)[0] is undefined

I'm using amCharts to display a map. I'm aiming to change the color of a specify country using Javascript.
I do use the following line to change the color inside my web browser :
document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
But when I use it inside my html page, this does not work.
Here is the full html page :
<!DOCTYPE html>
<html>
<head>
<title>map created with amCharts | amCharts</title>
<meta name="description" content="map created using amCharts pixel map generator" />
<!--
This map was created using Pixel Map Generator by amCharts and is licensed under the Creative Commons Attribution 4.0 International License.
You may use this map the way you see fit as long as proper attribution to the name of amCharts is given in the form of link to http://pixelmap.amcharts.com/
To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
If you would like to use this map without any attribution, you can acquire a commercial license for the JavaScript Maps - a tool that was used to produce this map.
To do so, visit amCharts Online Store: http://www.amcharts.com/online-store/
-->
<!-- amCharts javascript sources -->
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("map",{
"type": "map",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"addClassNames": true,
"fontSize": 15,
"color": "#FFFFFF",
"backgroundAlpha": 1,
"backgroundColor": "rgba(80,80,80,1)",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"images": [
{
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
}
]
},
"balloon": {
"horizontalPadding": 15,
"borderAlpha": 0,
"borderThickness": 1,
"verticalPadding": 15
},
"areasSettings": {
"color": "rgba(129,129,129,1)",
"outlineColor": "rgba(80,80,80,1)",
"rollOverOutlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true,
"unlistedAreasAlpha": 0,
"unlistedAreasOutlineAlpha": 0
},
"imagesSettings": {
"alpha": 1,
"color": "rgba(129,129,129,1)",
"outlineAlpha": 0,
"rollOverOutlineAlpha": 0,
"outlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true
},
"linesSettings": {
"color": "rgba(129,129,129,1)",
"selectable": true,
"rollOverBrightness": 20,
"selectedBrightness": 20
},
"zoomControl": {
"zoomControlEnabled": true,
"homeButtonEnabled": false,
"panControlEnabled": false,
"right": 38,
"bottom": 30,
"minZoomLevel": 0.25,
"gridHeight": 100,
"gridAlpha": 0.1,
"gridBackgroundAlpha": 0,
"gridColor": "#FFFFFF",
"draggerAlpha": 1,
"buttonCornerRadius": 2
}
});
</script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "document loaded" );
color = "#000000";
document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
}
);
$( window ).load(function() {
console.log( "window loaded" );
});
</script>
</head>
<body style="margin: 0;background-color: rgba(80,80,80,1);">
<div id="map" style="width: 100%; height: 767px;"></div>
</body>
</html>
Hope this problem can be solved !
Thanks !
Your code to manipulate fill color of the area is correct. However, it executes immediately on page load. At that point the map is still initializing, meaning there's no such element yet, hence it not working.
There are a number of ways to go about it.
If you just need to load the map with certain areas (countries) colored, you could do that with map's config:
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"areas": [ {
"id": "FR",
"color": "#00FF00"
} ],
"images": [ {
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
} ]
}
If that is not acceptable, or if you need to manipulate the map after it's built, I suggest you use map's API functions (getObjectById() to get area object, then validate() to refresh it) to manipulate area colors, rather than CSS.
You would also need to ensure that map is initialized before doing so. We can use init event for that.
Consider the following code:
AmCharts.makeChart("map", {
"type": "map",
// ...
"listeners": [{
"event": "init",
"method": function(event) {
var area = event.chart.getObjectById("FR");
area.color = "#000000";
area.validate();
}
}]
});
Here's a working example.
You could use the same event to manipulate color of the area using your CSS code, however I strongly suggest using API functions. While manipulating CSS directly may work, the changes might be reset when there's something going on on the map, such as when you hover the area.

Categories