I'm using OpenLayers 6 and ol:ext FontSymbol & free FontAwesome for creating the marker.
I need to put number char into the center of the marker,
It's working fine for 0-9 char only but for more than 1 chars it's not working and showing only "1" like the glyph only accept 1 char.
This is my style :
var styles = new ol.style.Style({
image: new ol.style.FontSymbol({
glyph: number.toString(),
form: 'marker',
radius: 20,
fontSize: 0.2,
fontStyle: 'sans-serif',
rotation: 0,
rotateWithView: false,
color: 'white',
fill: new ol.style.Fill({
color: colorparam.toString(),
})
}),
});
Am I doing it wrong ? or is there any better way to do it ?
I tried to add original style - text after image but the char for all markers shown above all of the marker itself.
var styles = new ol.style.Style({
image: new ol.style.FontSymbol({
glyph: '',
form: 'marker',
radius: 20,
fontSize: 0.2,
fontStyle: 'sans-serif',
rotation: 0,
rotateWithView: false,
color: 'white',
fill: new ol.style.Fill({
color: colorparam.toString(),
})
}),
text: new ol.style.Text({
text: number.toString(),
scale: 1.2,
fill: new ol.style.Fill({
color: "#fff"
}),
}),
});
I choose to use font instead render image / icon file since I think font source will be loaded once and lighter than image.
ol-ext FontSymbol is designed to display font icon and only draw the first char of he string your are giving to it... The symbol itself is displayed as an image and thus is drawn under ol text style.
You can ask for a new feature at ol-ext (https://github.com/Viglino/ol-ext/issues) to display full text string instead of char in the symbol.
Related
I've created my vector layers with a style function; they all have unique symbology and text; I want to be able to turn the text on/off with a switch, however using code such as
layer.getStyle().getText().setText()
does not work as the style returns the code for the style function; anyone has any ideas
below is the style of code
var vector = new VectorLayer({
visible: vl.visible,
title: vl.title,
source: vectorSource,
style: generateStyleFunction(vl, config, legend),
declutter: false
});
style function
return (function styleFunction(feature) {
let layerStyle = new Style({
image: symbol,
fill: new Fill({
color: vl.featureStyle.colour.colour,
}),
stroke: new Stroke({
color: vl.featureStyle.colour.colour,
width: vl.featureStyle.symbol.width
}),
text: new Text({
overflow: true,
offsetY: 15,
offsetX: 15,
stroke: new Stroke({
color: 'rgb(218, 225, 235)',
width: 3
}),
text: textFunction(feature)
})
let textFunction = function (feature) {
var label = vl.labels.propertyName;
let labelContent = feature.get(label);
return labelContent;
}
}
When I used this function to get features, I found that:
If the 'Style' (like image and text) of a 'Feature' is within 100 pixels of the feature's coordinate, I can get the feature by using the pixels within the 'Style';
But If the 'Style' is too far (more than 100 pixels), I cannot get the 'Feature' by using the pixels of the 'Style'.
e.g. adding the 'ol/style/Text' into a Style of a feature.
new Text({
font: '15px Microsoft YaHei',
text: '',
fill: new Fill({
color: '#222'
}),
backgroundStroke: new Stroke({
color: 'rgba(0,0,0,0.5)',
width: 1
}),
backgroundFill: new Fill({
color: 'rgba(0,250,154,0.3)'
}),
textAlign: 'middle',
textBaseline: 'middle',
offsetX: 200,
offsetY: 200
})
I have found solution in github:
By default, OpenLayers only considers an area of 100 pixels around a feature for hit detection. When you use an offset of 200 pixels. you are outside of that region. To fix it, configure your layer with a renderBuffer with an appropriate size.
I am using Joint Js for my custom drawing tool.
And I have some problems with drawing the element on the picture below, i think it should be the Circle element with custom border, but i don't know how to do border like this.
Does anyone have any ideas how to solve this problem?
Needed Element
It is quite easy.
You just need a shape of type: basic.Image
I created and the base64 picture that you need.
Just paste this code to your Stencil and you are done.
new joint.shapes.basic.Image({
attrs: {
image: { width: 50, height: 50, 'xlink:href': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB0VBMVEUAAADVACvYACfYACfYACfYACfYACfYACfVACrYACfYACfYACfYACfYACfYACfYACfZACbbACTYACfYACfZACbYACfVACvYACf/AADZACbWACnYACfVACvXACjYACfZACbXACjYACfYACfYACfYACfYACfYACfZACbXACjYACfYACfWACnZACbYACfMADPYACfbACTXACjaACbYACfaACXcACPZACbYACfYACfYACfYACfYACfWACnYACfZACbVACvXACjYACfXACjXACjXACjXACjYACfYACfWACnbACTXACjYACfYACfZACbYACfYACfYACfZACa/AEDXACjYACffACDXACjZACbXACjZACbYACfXACjYACfZACbYACfXACjYACfbACTYACfYACfbACTYACfZACbZACbYACfYACf/AADYACfbACTXACjZACbZACbZACbYACfjABzYACfYACfZACbYACffACDYACfZACbVACvYACfXACjaACXYACfbACTYACfYACfXACjXACj/AADZACbYACfaACXXACjYACfYACfZACbYACfTACzYACfYACfXACjXACjYACfYACfYACfYACfYACfYACfYACfYACcAAABaMEySAAAAmXRSTlMABqiXIbD7oytU7e7s6+rp6BX+rzVjGIQCZRm4EmbeL2ca9lu8iWkbP/p7HzbKCs8cbUTvNx0o373wJ/FF/UkeTMt0elOutcMlKhP8m59c+JiZBEbzCHOttIxibKU9vibWDvfFI6w8k57jAecxM35/cuUJ5nfbDRB8hQz5OT5vB+HMzmAD1MkpTXXiZKoX2c2BOjuC9C6Q8tGPRJElAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+IFBxY1HGz05tsAAAM6SURBVFjDpZd7WxJBFMaPmjdE0K3I0ii1EMTQ8JLiLdOyJLVIMM1MMzPtZhJmaiF5T0sLRefbtoJnZheWZfbp/DXnPef3srMzzO4CcEcaf6typGec+T+DTJKVnaNcytXl5el0Or0+P99gMBoLCgqVDQgRzp5TdDgvEFmYkhmIFheKlIoX5Q6XkhsQUlyiVL0scBsQ8xWl8lWpQ6mqASkrV6pf4zcg5Hpi2SKdQkUqA2KJr1ptKQ0qpZO0WeVFu4GkNICqG5IWg11aclTL90GNogEU3cxiPdUOSSWbcBkAOGtZUzaT65haEJ1ofTIDaLjFeuuo2ki1JpdFUDWAhmba3IhaC5Va28T1FB3akxvA7Vba3nIqdVDlTnRHCKoG0EnbO2JCFxXuxgSLYFczgHsU6Irm3Zhm3T/tsKheATygk+g+SXvcmD4EzuhFwt0jZn2Y9dfzGrT3I9MnZumYPOLlAR4jkw7goXvrCb9BGzK1HrDieEDDue8tQ8oKPhwO8vMAT5HywRAOh7UYPENqCEZw+FyLgROpERjF4QstBjlIjcIYDse1GJQgNQa4ii+18AC4lWoBF6RJmwGeCmVgxovxauEdSJlhAod2LQavkJqASRxWaTF4jdQkTMkPB84oR2qKHVAZWgzeINXJDrRpDfzMW3bd4zYcv+M3eI+MTdx+dC9/4Df4yHYywCwmn+Z4eYcfmVkxc2ESeyrwxGeKuE7SAGb583z8lzwkAtF8gWi8C18psBDNF+nLxdIyD/+NrpthMaZ8p44FNan5dvYy8/1UCq5QKZRyJeZ+0OaVIIqrVCODQXU+OMh6V6m6ts7UjVI1vnSDda6vMX2TvXYQv8qdXPazvuZNaWVL8g64tJ1kGt7tJdYlbMmLlUQSP4fXEnHPzrS0pzK+viutkrHhX/Kyaee3rGE34Qcce7IGInTs/zFFvy2KTH/3Q3FfJHuOxEuczyQJ4faHQn53op6p+K+ZCQuEK4TwTJJVyj3g4Q9yk6/zoTk1bz5U22len14d1/tSPcHGwwPJ8YEwzzO8MHKkjB9FCjnwk0hzRgLxdCDi1Pb17fL1Fh8bxYUVjMfFvT6XJpiFp6LCo97xD9G9KT8fiyixAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTA1LTA3VDIyOjUzOjI4KzAyOjAwwNjrNgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wNS0wN1QyMjo1MzoyOCswMjowMLGFU4oAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC' },
text: { text: 'Circle Shape', fill: '#000000', 'font-size': 12, stroke: '#000000', 'stroke-width': 1}
}
})
How to set size of shapes in vis js which can have label inside?
e.g.
Code1:
shape: 'circle',
color: {
border: 'black',
background: 'white'
},
borderWidth: 1,
borderWidthSelected: 2,
in above Code1, if there is nothing in label to put in shape circle, then how i can increase/decrease the size of same. If shape is anything for which label is put outside we can increase and decrease the size of icons. e.g.
Code2:
shape: 'icon',
icon: {
face: 'FontAwesome',
code: '\uf1db',
size: 100,
color: '#000000'
}
As in above Code2 for icon 'size' option is available.Is there any way to use 'size' option in Code1?
The documentation states
"...The size is used to determine the size of node shapes that do not
have the label inside of them. These shapes are: image, circularImage,
diamond, dot, star, triangle, triangleDown, square and icon..."
So the answer is no. (Details can be found here https://visjs.github.io/vis-network/docs/network/nodes.html)
But as an workaround you could do something like this:
shape: 'circle',
scaling: {
label: {
enabled: true,
min: 50,
max: 50
}
},
value: 1
Where as with the scaling.label.min and scaling.label.max property, you could, change the size of the node. (but you will need a value, for the node) I hope this helps.
I am having some trouble in adding text from an input box into my canvas, I have successfully added another layer, however my text doesn't seem to add to the canvas and I am baffled as to why not.
I have included a JSfiddle link,
Any help would be greatly appreciated,
Melissa
$("#addbutton").click(function () {
// simple label
var label = new Kinetic.Label({
x: 20,
y: 20,
draggable: true
});
label.add(new Kinetic.Tag({
fill: 'green'
}));
label.add(new Kinetic.Text({
text: $("#newtext").val(),
fontFamily: 'Verdana',
fontSize: 18,
padding: 10,
fill: 'white'
}));
textLayer.add(label);
textLayer.draw();
});