I'm building a dynamic graph with cytoscape.js over a world map generated with jVectorMap.
Starting with coordinates in LAT / LON format from json data, I can convert them in point.x / point.y over the generated map with:
var nodePoint = theMap.latLngToPoint(node.data.lat, node.data.lon)
and then I can add the new node in the graph with:
cy.add({
group: "nodes",
position: { x: nodePoint.x, y: nodePoint.y },
style: {
'background-color': node.color
},
data: {
id: node.id,
name: node.label,
customData: node.data,
}
})
This part works, but when json returns multiple nodes with the same coordinates, I would like to spread these nodes around the point with the common LAT / LON information.
I'm able to identify these nodes and apply a dedicated layout to them, but the resulting layount is located in the center of the screen / div of graph.
What I want to know is if there is a simple way to apply a Circle Layout with specific center point.
(I would like to avoid implementing the solution that I'm evaluating... i.e to build a bounding box around the center point and see what happens, (with the bounding box size that grows along with node number in the same point))
In the Wine and cheese example included in the documentation they use the bounding box to force a concentric layout around a selected node ( http://js.cytoscape.org/demos/cde4db55e581d10405f5/ ).
While you indicate you would like to avoid this solution it seems a straightforward solution. The implementation in the example is rather elegant.
Related
I am using cytoscape with bezier curves but edges are disappearing when having a node with longer label or just moving source node next to target node.
Video: https://www.screencast.com/t/N2f5eZ5M7
Runnable sample: https://stackblitz.com/edit/web-platform-vpl72r?file=index.html
I have already seen "Edge xxxxx has invalid endpoints and so it is impossible to draw" warning and searched corresponding threads but couldn't find a solution.
Does anyone know how to handle that ?
I see some warnings on the console
The style value of label is deprecated for width
The style value of label is deprecated for height
After I deleted 'width': 'label', 'height':'label', I no longer observe such problem.
--- Update 1.1 ---
but I'd like to have node's dimensions based on label's dimensions.
To do this I think you should write a function style. See the below example. In the example, you can see that we are setting the size of the nodes dynamically based on their name length. I assumed name is a string that stores labels.
cy.style().selector('node').style({
'width': (x) => { return x.data('name').length + 'px;' }
'height': (x) => { return x.data('name').length + 'px;' }
}).update();
I am using ArcGIS API v4.8 and the drawing tools to draw circle on my map.
1 issue I notice is when I draw a circle, the center of the circle moves when I move my mouse resizing the circle rather than fixed at the point of the 1st mouse click starts:
How do I fix the center regardless of how I move the radius of the circle? What is missing in my code?
const options = {view, layer: tempGraphicsLayer, pointSymbol, polylineSymbol, polygonSymbol}
let sketchViewModel = new SketchViewModel(options)
let drawCircleButton = document.getElementById('circleButton')
drawCircleButton.onclick = function () {
clear()
isDrawLine = false
sketchViewModel.create('polygon', {mode: 'click'})
sketchViewModel.create('circle')
}
EDIT:
I have found a similar sample, choose the Draw Circle tool, start drawing a circle on the map, you will notice that the center of the circle moves when you move your mouse, I want it to fix the center instead.
The problem when the center moves along with your mouse move is that the circle drawn is not accurate, as I want to start with the center of the circle I want, the circle can expand outward but the center should not move.
That is because the circle, in the given example, is being draw inside the square object. Basically your start and end point are representing corners, not the center point and outer layer of the circle. So every time you expand circle object, it expands from one corner, while the rest is dragging along your mouse.
Visual example:
There are workarounds for this of course. I've made a small sample code of one of the possible ways to draw a circle from a fixed center point.
https://jsfiddle.net/wLd46g8k/9/
Basically I used an ArcGis JS API 4.x constructor called Circle, where you pass a starting point and radius. In my example I've calculated the radius from these two points.
function drawCircle(){//draws the circle
graphicsLayer.graphics.removeAll();
var graphic = new Graphic({
geometry: new Circle({//circle constructor
center: startPoint,//pass the pointer-down event X Y as a starting point
radius: Math.floor(Math.sqrt(Math.pow(startPoint.x - endPoint.x, 2) + Math.pow(startPoint.y - endPoint.y, 2)))
}), //calculates endpoint distance from the startpoint and pass it as a radius
symbol: {//circle design
type: "simple-fill",
color: "orange",
style: "solid",
outline:{
color:"darkorange",
width:4
}
}
});
graphicsLayer.graphics.add(graphic);//adds the circle
};
So I have this body that is a circle collider
and it has sometimes a big velocity
the problem is that the tiled map of the boundaries is made of small tiles
and at high velocity the body goes through it
here is my config of all bodies:
const config = {
inertia: Infinity, // do not spin
friction: 0, // X*100% stop on hit
frictionAir: 0, // X*100% slow on move
restitution: 0.5, // bounce X*100% on hit
collisionFilter: this.level.getCollisionFilter(), // default collision filter
isStatic
}
...
getCollisionFilter (key = null) {
switch (key) {
case 'fly':
return {
category: 0x0008,
mask: 0xFFFFFFF1,
group: -1
}
case 'items':
return {
category: 0x0004,
mask: 0xFFFFFFF1,
group: -1
}
case 'woda':
return {
category: 0x0002,
mask: 0xFFFFFFFF,
group: -1
}
default:
return {
category: 0x0001,
mask: 0xFFFFFFFF,
group: 0
}
}
}
```
woda means water if it's of any relevance
this is between the default and woda
The problem is that matter.js you are using has no continuous collision detection. It has been a feature request for a few years. Now that doesn't mean there is nothing you can do. There is some code in the issue description itself which is probably the cheapest way of fixing issue with going through rectangular boundaries:
It detects if a body is outside the world bounds and then reverses the velocity and translates the body back
Alternatively, this post gives a few ideas.
If you want to implement something yourself, I'll try to explain continuous collision detection algorithm.
Basically, for each moving object in your scene you have to calculate moment of next collision within the fraction of the frame 0<t0<1, then advance positions to this moment t0 within the frame, update velocities due to collision and proceed further to the next collision t0<t1<1, until you reach time of tn=1 (end of frame), making sure you don't get stuck in a the middle of the frame due to rounding of calculation or "cornered" objects. For spherical colliders, that is usually done by using capsule vs capsule (for pairs of objects) intersection and capsule vs box for the boundaries.
You can also cheat by having multiple hidden frames at a slower speed:
take highest object velocity
take smallest object collider radius
divide highest velocity by smallest radius of your colliders and get 'slowdown scale' rounded it to an integer
slow down all the objects in the scene by that integer 'slowdown scale' and update scene 'slowdown scale' times, without redrawing the screen
redraw the screen only once with result of 'slowdown scale' updates and you should get same positions as without slowdown, but respecting collisions
Good luck colliding!
I have been trying to plot a bubble chart using zingchart library. I did not find any option by which we can make bubble radius value independent of y-axis scale. For example in googlecharts bubble radius does not depend on y-axis scale (observe that in given example fertility rate is in single digits where as population(bubble size) is in millions). If we try the same example on zingchart, chart will be flooded since bubble size considers y-axis scale. How to achieve this feature in zingchart?
I'm on the team here at ZingChart. There is an attribute you can use to adjust the bubble radius that is not dependent on "scale-y":{}. Here is some code that will be helpful.
{
"type":"bubble",
"plot":{
"max-size":200 */the "max-size": attribute accepts numeric values and will adjust the radius of the bubbles independently from the y axis values/*
},
"scale-y":{
"values":"0:20:5",
},
"series":[
{
"values":[[1,15,4],
[2,4,2],
[5,10,1],
[6,7,3],
[3,6,2],
[7,15,1],
[8,2,4],
[1,7,3],
[2,12,3],
[4,4,4],
[5,1,2],
[6,3,1],
[8,16,2]]
},
{
"values":[[3,5,1],
[2,17,2],
[8,8,3],
[4,6,2],
[7,3,4],
[2,12,1],
[1,4,1],
[6,2,2],
[4,10,3],
[6,14,2],
[2,6,2]]
},
{
"values":[[3,11,4],
[6,7,4],
[8,14,3],
[3,2,3],
[5,5,2],
[7,10,2],
[2,1,1],
[7,4,1],
[6,16,2],
[1,8,3],
[5,14,1]]
}
]
}
I want to create a local map for my city where people can cover area with polygons and get their latitude and longitude
For Example there is a world map and someone come and he wanted to cover us then he can simply cover it and get its latitude and longitude of corners or borders
Is there any way or example i searched about it on google and Site both but didn't get Anything
Sorry I've no Codes i want idea, code or something helpful.
A simple search yielded http://www.the-di-lab.com/polygon/ and you can find a lot more samples at http://code.google.com/apis/maps/documentation/javascript/demogallery.html.
Unfortunately the above demo is a minified js. But the essential part of drawing a polygon (area) on google maps is to
1. load the map
2. trap the click events and the position (lat/lon)
3. draw lines
4. Finally when a double click is received, close the polygon
I unfortunately do not have a ready made sample in hand.
The answers here are quite outdated.
Google Maps now have a drawing library, This library allows the user to insert markers, circles, polygons and other types as well.
You can find an example on it here. And the library reference here.
And the documentation here.
It seems there is a simpler solution now. From the same demo gallery link that Muthu shared earlier look for user editable shapes. Below is a sample code from this link that draws a rectangle and allows user to edit the shape further
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 44.5452, lng: -78.5389},
zoom: 9
});
var bounds = {
north: 44.599,
south: 44.490,
east: -78.443,
west: -78.649
};
// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true
});
rectangle.setMap(map);
}
Also here is an example on jsfiddle that extends above to generalized polygon and below is the code from the link
var editablePolygon = new google.maps.Polygon({
paths: coords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
editable: true });
Attached is a screenshot (after dragging one midpoint node in the triangle)
I think you need to use GeoChart
https://developers.google.com/chart/interactive/docs/gallery/geochart?csw=1. It can cover certain regions or areas