I want to add some text on the rectangle on here maps. I`ve already tried this:
var obj = new H.map.Rect(boundingBox, {
style: {
fillColor: 'rgba(0,0,0,0.2)',
strokeColor: 'rgba(0,0,0,1)',
lineWidth: 3,
content: 'fsd'
},
});
but 'content' property in this case does nothing. Is it possible to add text or content on rectangle in HERE maps?
For this case we would recommend to use H.map.Overlay (https://developer.here.com/documentation/maps/topics_api/h-map-overlay.html) object that gives you option to put arbitrary bitmap within the given bounding box. So you can use the HTML canvas to draw text and then H.map.Overlay to put it on the map.
Related
I have created a HighChart in a Ag data grid cell. On hovering over the Line chart, I need to display a tooltip with few details. I am able to show the tooltip within the cell, but as the tooltip is displayed within the cell, the content gets hidden in the cell. I need to display the tooltip in such a way that it can overlap and display the tooltip over another cell.
I tried setting the z-index to 99999 & position as relative/absolute of highchart tooltip. But it does not reflect.
Tried to override the css class .highcharts-tooltip by adding z index
Please can some css expert help me identify the issue?
There is no need to modify the CSS of the highchart tooltip.I followed the properties used in the below URL & it worked for me:
https://www.highcharts.com/demo/sparkline
I had missed out adding below chart options:
tooltip: {
outside: true,
}
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
}
}
I'm using leaflet to draw layers of circles (so there are several layers, each consisting of several circles) on a map.
I've saved all the layers on a featuregroup:
this.globalLayer = L.featureGroup();
I'm adding new circles to it by creating a new featuregroup of the circles, and adding the featuregroup to the globalLayer:
let circleLayer: L.featureGroup();
let point1 = L.circle([pos_lat, pos_long], {color: color, opacity: 1,
radius: radius});
let point2 = L.circle([pos_lat, pos_long], {color: color, opacity: 1,
radius: radius});
circleLayer.addLayer(point1);
circleLayer.addLayer(point2);
// etc.
this.globalLayer.addLayer(circleLayer);
Now I want to add a css class to some of the layers:
for (let cssLayer of cssLayers) { // cssLayers is a L.featureGroup[]
this.globalLayer.removeLayer(cssLayer);
cssLayer.setStyle({className: 'animate'});
this.globalLayer.addLayer(cssLayer);
}
This works, but since the layers contain a lot of circles, this takes a while to compute. Is there a way to just add a css Class without removing and adding them again?
I've tried
this.globalLayer.eachLayer(layer => {
layer.setStyle({className: 'animate'})
});
But setStyle() does not exist on type L.Layer
JsFiddle with my current, workaround solution
You will need to add a class to the corresponding layer before you add it to other labels, like
circleLayer1.setStyle({className: 'myListener'});
and then you can find this class anytime you want:
$('#blink').click(function() {
$(".myListener").addClass("blink");
});
Fiddle.
I'm not sure if this is the best practice but I found that you can use the layer's _path attribute:
this.globalLayer.eachLayer(layer => {
layer._path.classList.add('animate')
});
I am following bing map concave example from this link
http://blogs.bing.com/maps/2013/04/10/html5-canvas-pushpins-in-javascript/
I am wondering if it is possible to add a text inside concave pushpin? I have tried with
context.font = "15px Arial";
context.fillText("33", 5, 50);
but it shows text underneath the pin not inside the pin.
I can add text to normal push pin but not sure if it is possible with concave;
var offset = new Microsoft.Maps.Point(0, 5);
var pushpinOptions = { text : '1', visible: true, textOffset: offset};
You have to draw the text on the canvas. The HTML5 canvas pushpin class overrides the default template for pushpins and replaces it with an HTML5 canvas. Anything you want to display on the pushpin has to be drawn on the canvas. Here is a simple example:
context.font = "30px Arial";
context.fillText("Hello World",10,50);
In paperjs I can not find a way to re size the text item pointText. I would like my users to be able to click to select the text item, then when the handles appear be able to drag to re size the text (keeping the aspect ratio). No where in the docs is it clear or doable. I have a feeling that I'm missing something or its not possible.
You could do a hitTest only on the bounds of PointText items.
var text = new PointText({
point: [50, 50],
content: 'The contents of the point text',
fillColor: 'black',
fontSize: 25,
selected: true
});
function onMouseDown(event){
text.res = project.hitTest(event.point, {
type: 'PointText',
bounds:true
}
);
console.log(text.res.name);
}
Then parse the result to make sure it's a corner and perform a scale centered on the opposite corner on the next onMouseUp.
Pardon my noobishness, but, although I've seen this issue discussed, I haven't found an answer. I am trying to draw concentric circles on a Google Map using the API v3, making each clickable as on a bullseye target, but always the largest one ends up on top, which means it is the only clickable one.
The following uses an array called "subjects" that consists of increasing radii and various fillcolors.
for (i=0;i<subjects.length;i++) {
radi = subjects[i][0];
fillcolr = subjects[i][1];
zindx = subjects.length - i;
newcircle = new google.maps.Circle({
radius: radi,
center: centerPoint,
strokeWidth: 1,
fillOpacity: 1.0,
fillColor: fillcolr,
zIndex: zindx
});
// display it
newcircle.setMap(map);
// make outer circle clickable
google.maps.event.addListener(newcircle, 'click', function() {
circleClickedInfo(i);
});
The circles are there, the zIndex is set, but the biggest circle is always on top. I have tried setting zIndex on a pass afterwards, boosting each zIndex by 10000, reversing the order in which I create the circles, not setting the zIndex explicitly, etc. I'm sure I am missing something obvious (see the aforementioned noobishness), but I can't figure out what it is. TIA for any pointers...
Try this for every shape you need:
selectedShape.setOptions({zIndex:0});