I am using a 2d line graph of vis.js (http://visjs.org/graph2d_examples.html ). Is there any way to add a tooltip to the data points so that when you mouse over or click you see the value in a pop up or somewhere else?
This is a feature they plan on adding.. the closest thing I see is this comment on trying to tackle the issue themselves:
https://github.com/almende/vis/issues/282#issuecomment-65728474
This solution is rather simpe:
Add label to points, eg.
var point = {
x: ...,
y: ...,
label: {
content: POINT_LABEL
}
};
points.push(point);
var dataset = new vis.DataSet(points);
Reference:
https://github.com/almende/vis/issues/282#issuecomment-217528166
Related
I'm Juyeong.
I want use arrows option in polyline.
I found need setting map engine p2d for use arrows option in document.
But there didn't show how setting map engine.
I try use arrows option, but failed.
var style = function(feature){
var areaLightGrade = feature.data.area_light_grade;
feature.setStyle({
strokeColor: '#ffffffff',
fillColor: chooseLightGradeColor(areaLightGrade),
lineWidth: 1
});
};
// Create reader object initializing it with a document:
var reader = new H.data.geojson.Reader('http://127.0.0.1:8887/area_20180707.geojson', {style: style, disableLegacyMode: true});
Could you please tell me how can I use arrows option?
I'll looking forward your reply.
Thanks.
I found what is wrong.
I didn't set "disableLegacyMode" option.
When set that option, multipolygon did working.
Trying to make a click to move game in Babylon.js, so I'm trying to get the position on the plane that is being clicked on.
myGround.actionManager = new BABYLON.ActionManager(scene)
myGround.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) {
console.log(evt)
}));
This code does not seem to tell me the point on the parent mesh that was clicked. Is it possible to get this data?
Of course, you can use the picking collision to find the screen and world coordinates of the point you clicked on.
The simplest code can be found here:
https://www.babylonjs-playground.com/#NU4F6Y
You can also use the event from scene.onPointerObservable :
cene.onPointerObservable.add((evt) => {
if(evt.type === BABYLON.PointerEventTypes.POINTERPICK) {
console.log(evt.pickInfo.pickedPoint)
}
})
More info about picking info can be found here:
https://doc.babylonjs.com/babylon101/picking_collisions
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')
});
There is one option in openlayers selecting features under the box. But, I want to select the features when I draw line (draw with shift key down-free hand drawing). In my script I already implemented drawing and selecting options. I can draw line and select (multiple) features independently. Now, I want to merge this two. I want to select those features data which are touched by my drawn line. Is there any sample example available?
Here, I have given sample code -
//Selection property---------------------------------------
var selectControl = new OpenLayers.Control.SelectFeature(
[vectorLayer],
{
clickout: true, toggle: true,
multiple: true, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
}
);
map.addControl(selectControl);
selectControl.activate();
var draw = new OpenLayers.Control.DrawFeature(
vectorLayer, OpenLayers.Handler.Path,
{displayClass: "olControlDrawFeaturePoint", title: "Draw Features", handlerOptions: {holeModifier: "altKey"}}
);
Thanks, in advance.
You have to register event "sketchcomplete" that will run over all features in layer-bo-be-selected and check if it has shared geometry with line sketched.
Something like this, unfortunately I can't test it now.
vectorLayer.events.register('sketchcomplete', vectorLayer, sketchCompleteFunc);
function sketchCompleteFunc(obj) {
for (var i=0;i<layer-to-be-selected.features.length;i++) {
if (layer-to-be-selected.features[i].geometry.intersects(obj.geometry)) {
selectControl.select(layer-to-be-selected.features[i])
}
}
}
I have a sample fusion table map here http://jsfiddle.net/qEGpz/
I want to set the marker to red_stars based on temperature >75 degree. But my code doesn't work correctly. Link to my fusion table is here https://www.google.com/fusiontables/DataSource?snapid=S567077W7iF Anyone please help. Thank you in advance.
With regards,
Pradeep Shankar M
Your example seems to be working fine. What is the problem? Note: the red_stars icon is fairly subtle. Looks like a standard Google Maps red marker with a black center star vs. black center circle.
Here's the list of the allowed Fusion Table iconNames. Choose Visualize -> Map to see what they look like. Perhaps you need to use "capital_small_highlight".
Took another look and another guess as what your problem is. Try this:
layer8 = new google.maps.FusionTablesLayer({
query: {
select: 'Geometry',
from: '4080901',
where: "Temp >= 75"
},
styles: [ {
where: "Temp >= '75'",
markerOptions: {
iconName: "red_stars",
}
}]
});
layer8.setMap(map);