I am referring an example provided in, https://developers.arcgis.com/documentation/core-concepts/features-and-geometries/#polygons for drawing a polygon and move the map to that location. The example is working fine. But when I use my custom details such as the rings values and WKID, the polygon is drawing in the location but the map appears completely zoom out such that all the continents are appearing (Please check the image attached). It is required to zoom to the location by click on the '+' widget. Please find the code below.
enter image description here
I have commented the example wkid and ring values.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body,
#mapDiv,
.map .container {
padding: 0;
margin: 0;
height: 100%;
width: 100vw !important;
}
</style>
</head>
<body>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/geometry/Polygon",
"esri/Graphic",
"esri/symbols/SimpleFillSymbol",
"esri/geometry/support/webMercatorUtils",
"dojo/domReady!"
], function(
Map,
MapView,
FeatureLayer,
Polygon,
Graphic,
SimpleFillSymbol,
webMercatorUtils
) {
var map = new Map({
basemap: "streets-navigation-vector"
});
// 102704 - Custom WKID
// 4326 - Example WKID
var poly = new Polygon({
spatialReference: {
wkid: 102704
},
rings: [
// [
// [-118.38516, 34.0127],
// [-118.38827, 34.01489],
// [-118.38813, 34.01602],
// [-118.38797, 34.01648],
// [-118.3876, 34.01712],
// [-118.38733, 34.01696],
// [-118.38696, 34.01749],
// [-118.38662, 34.01789],
// [-118.38689, 34.01805],
// [-118.38683, 34.01812],
// [-118.38295, 34.01592],
// [-118.38516, 34.0127]
// ],
// [
// [-118.38661, 34.01486],
// [-118.38634, 34.01498],
// [-118.38652, 34.01563],
// [-118.3867, 34.01559],
// [-118.38679, 34.01595],
// [-118.38699, 34.01591],
// [-118.38707, 34.01507],
// [-118.38661, 34.01486]
// ]
[
[
2744913.4668447226,
541568.06113781035
],
[
2744917.4038447142,
541499.65215389431
],
[
2744864.2454864681,
541496.82210706174
],
[
2744813.6648789644,
541494.12952713668
],
[
2744810.2104895562,
541563.64283956587
],
[
2744860.4905727208,
541565.79441006482
],
[
2744913.4668447226,
541568.06113781035
]
]
]
});
var view = new MapView({
container: "mapDiv",
map: map,
// zoom: 18,
// minZoom: 13,
basemap: "satellite",
// extent: webMercatorUtils.geographicToWebMercator(poly.extent.expand(3))
});
var symbol = new SimpleFillSymbol({
style: "solid",
color: [4, 121, 193, 0.5],
outline: {
width: 2,
color: [2, 94, 149, 1]
}
});
var graphic = new Graphic({
geometry: poly,
symbol: symbol
});
view.on("mouse-wheel", function(event) {
event.stopPropagation();
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
window.scroll(0, top + event.deltaY);
});
view.graphics.add(graphic);
});
</script>
<div style="" id="mapDiv"></div>
<mat-button-toggle-group [multiple]="true" name="fontStyle" aria-label="Font Style">
<button id="parcels" value="bold">Parcels</button>
<button id="housenumbers" value="italic">House Numbers</button>
<button id="said" value="underline">Sample Area IDs</button>
</mat-button-toggle-group>
</body>
</html>
The problem is that you need to reproject your custom coordinates (assume we call custom to other coordinate rather than WebMercator 3857 or 102100 and Geographics 4326). In order to do so,
you can use the GeometryService to interact with a geometry service of an ArcGIS Server,
or you could try pojection module to do it in the client.
Here you have a working example base on your code, that uses GeometryService.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body,
#mapDiv,
.map .container {
padding: 0;
margin: 0;
height: 100%;
width: 100vw !important;
}
</style>
</head>
<body>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Polygon",
"esri/geometry/SpatialReference",
"esri/Graphic",
"esri/tasks/GeometryService",
"esri/tasks/support/ProjectParameters",
"dojo/domReady!"
], function (
Map,
MapView,
Polygon,
SpatialReference,
Graphic,
GeometryService,
ProjectParameters
) {
const map = new Map({
basemap: "streets"
});
const view = new MapView({
container: "mapDiv",
map: map
});
// 102704 - Custom WKID
const originalPoly = new Polygon({
spatialReference: {
wkid: 102704
},
rings: [
[
[
2744913.4668447226,
541568.06113781035
],
[
2744917.4038447142,
541499.65215389431
],
[
2744864.2454864681,
541496.82210706174
],
[
2744813.6648789644,
541494.12952713668
],
[
2744810.2104895562,
541563.64283956587
],
[
2744860.4905727208,
541565.79441006482
],
[
2744913.4668447226,
541568.06113781035
]
]
]
});
console.log(`Original Polygon: ${JSON.stringify(originalPoly.toJSON())}`);
const geomSer = new GeometryService(
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer"
);
const outSpatialReference = new SpatialReference({ wkid: 102100 });
const params = new ProjectParameters({
geometries: [originalPoly],
outSpatialReference
});
geomSer.project(params).then(function(result) {
const projectedPoly = result[0];
if (!projectedPoly) {
return;
}
console.log(`Projected Polygon: ${JSON.stringify(projectedPoly.toJSON())}`);
view.graphics.add(new Graphic({
geometry: projectedPoly,
symbol: {
type: "simple-fill",
style: "solid",
color: [255, 0, 0, 0.1],
outline: {
width: 2,
color: [255, 0, 0, 1]
}
}
}));
view.extent = projectedPoly.extent.clone().expand(3);
});
});
</script>
<div id="mapDiv"></div>
</body>
</html>
ArcGIS API - GeometryService
ArcGIS API - projection
Related
I am using ArcGIS API for Javascript in a Nuxt application and I would like to find the max and min values of a field in a feature layer hosted on ArcGIS. How to do that ?? Here is the code. The values for the stops for the visualVariables are hard coded and I would like them to be dynamic and take the min and max values of the field.
buildRenderer(fieldName) {
this.renderer = {
type: 'simple', // autocasts as new SimpleRenderer()
symbol: {
type: 'simple-line', // autocasts as new SimpleFillSymbol()
width: '1px',
},
label: 'GIMM',
visualVariables: [
{
type: 'color',
valueExpression: `$feature.${fieldName}`,
legendOptions: {
title: '% KBA stuff',
},
stops: [
{
value: 10,
color: '#bef264',
label: 'minimum',
},
{
value: 600000,
color: '#881337',
label: 'maximum',
},
],
},
],
}
You can make an statistic query requesting min and max of the field you need.
Look at this example I put for you,
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.23
</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/rest/support/Query"
], (
Map,
MapView,
FeatureLayer,
Query
) => {
const featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/subway_tcl_stations_center_wgs84/FeatureServer/0"
});
const minXCoord = {
onStatisticField: "XCoord",
outStatisticFieldName: "minXCoord",
statisticType: "min"
};
const maxXCoord = {
onStatisticField: "XCoord",
outStatisticFieldName: "maxXCoord",
statisticType: "max"
};
let query = featureLayer.createQuery();
query.outStatistics = [ minXCoord, maxXCoord ];
featureLayer.queryFeatures(query)
.then(function (response) {
const stats = response.features[0].attributes;
console.log(stats);
document.getElementById("response").innerText =
`X Coord (min, max): ${stats.minXCoord}, ${stats.maxXCoord}`;
});
});
</script>
</head>
<body>
<div id="response"></div>
</body>
</html>
I am new to Arcgis maps and using ArcGIS Javascript 4.2 library. Currently the features are showing up on the map and I am trying to go to feature and open it's popup programmatically. below is my code to query the features which is working fine.
var query = layer.createQuery();
query.where = "key= " + dataItem.key+ "";
query.returnGeometry = true;
query.returnCentroid = true;
query.returnQueryGeometry = true;
layer.queryFeatures(query).then(function (results) {
//I am getting the feature results here.
//trying to navigate to feature and open popup
});
Note: I tried using the following code from documentation which is working fine but I don't have the center as the features are polylines in my case.
view.goTo({center: [-126, 49]})
First, View goTo method has several options, including just using a geometry wich I think would be a better option for your case, zoom to a polyline.
Second to open the popup you just need to use the open method and you can pass there the features to show.
Check this example I put for you, has both suggestions,
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Hello World App</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#selectDiv {
height: 30px;
width: 100%;
margin: 5px;
}
#cableNameSelect {
height: 30px;
width: 300px;
}
#cableGoToButton {
height: 30px;
width: 100px;
}
#viewDiv {
height: 500px;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
</head>
<body>
<div id="selectDiv">
<select id="cableNameSelect"></select>
<button id="cableGoToButton">GO TO</button>
</div>
<div id="viewDiv">
</div>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer'
], function (Map, MapView, FeatureLayer) {
const cableNameSelect = document.getElementById("cableNameSelect");
const cableGoToButton = document.getElementById("cableGoToButton");
const map = new Map({
basemap: 'hybrid'
});
const view = new MapView({
container: 'viewDiv',
map: map,
zoom: 10,
center: {
latitude: 47.4452,
longitude: -121.4234
}
});
view.popup.set("dockOptions", {
buttonEnabled: false,
position: "top-right"
});
const layer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/cables/FeatureServer/0",
popupTemplate: {
title: "{NAME}",
outFields: ["*"],
content: [{
type: 'fields',
fieldInfos: [
{
fieldName: "length"
},
{
fieldName: "owners"
},
{
fieldName: "rfs"
}
]
}],
}
});
map.add(layer);
layer.queryFeatures({
where: "1=1",
outFields: ["Name"],
returnGeometry: false
}).then(function(results) {
for(const graphic of results.features) {
cableNameSelect.appendChild(new Option(graphic.attributes.Name, graphic.attributes.Name));
}
});
cableGoToButton.onclick = function() {
if (!cableNameSelect.value) {
return;
}
cableGoToButton.disabled = true;
layer.queryFeatures({
where: `Name='${cableNameSelect.value}'`,
outFields: ["*"],
returnGeometry: true
}).then(function (results) {
cableGoToButton.disabled = false;
if (!results.features) {
return;
}
view.goTo(results.features[0].geometry);
view.popup.open({
features: [results.features[0]]
})
})
};
});
</script>
</body>
</html>
I have the following code that is currently working. I have been looking all over and cannot find how to change the icon way from the tiny dot that defaults on the location. The code below is set to a specific address on page load.
I have tried PictureMarkerSymbol as you'll see I have that loaded into the function, but I'm not getting the right logic.
I figured this would be the easy part of using arcgis, but it's proving to be difficult.
thanks!
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<title>ArcGIS API for JavaScript</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.20/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require([
'esri/config',
'esri/Map',
'esri/views/MapView',
'esri/symbols/PictureMarkerSymbol',
'esri/widgets/Search',
'esri/layers/FeatureLayer',
], function (
esriConfig,
Map,
MapView,
PictureMarkerSymbol,
Search,
FeatureLayer
) {
esriConfig.apiKey =
'API-KEY';
const map = new Map({
basemap: 'arcgis-navigation',
});
const view = new MapView({
container: 'viewDiv',
map: map,
center: [-77.050636, 38.889248],
zoom: 13,
});
const search = new Search({
//Add Search widget
view: view,
});
view.ui.add(search, 'top-right'); //Add to the map
searchWidget = new Search({
view: view,
searchTerm: '43 Valley Oak Ct',
popupEnabled: false,
});
view.ui.add(searchWidget, 'bottom-right');
view.when(() => {
searchWidget.search();
});
});
</script>
It looks as the search widget resultGraphic is readonly, but it looks like you can specify a collection of SearchSource and provide it a symbol. You can almost use the default setting provided in an example under sources in documentation. Below is an example. You can use this tool for creating symbols.
<!--
To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developer dashboard.
Sign up for a free account and get an API key.
https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Search widget with multiple sources | Sample | ArcGIS API for JavaScript 4.20</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Search", "esri/tasks/Locator", "esri/symbols/SimpleMarkerSymbol"], (
Map,
MapView,
FeatureLayer,
Search,
Locator,
SimpleMarkerSymbol,
) => {
const map = new Map({
basemap: "dark-gray-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-97, 38], // lon, lat
scale: 10000000
});
var marker = new SimpleMarkerSymbol({ color: [203, 52, 52, 0.93] });
const searchWidget = new Search({
view: view,
searchTerm: '43 Valley Oak Ct',
popupEnabled: false,
sources: [
{
locator: new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),
singleLineFieldName: "SingleLine",
outFields: ["Addr_type", "Match_addr", "StAddr", "City"],
name: "ArcGIS World Geocoding Service",
placeholder: "Find address or place",
resultSymbol: marker,
}
]
});
searchWidget.viewModel.includeDefaultSources = false;
// Add the search widget to the top left corner of the view
view.ui.add(searchWidget, {
position: "top-right"
});
view.when(() => {
searchWidget.search();
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
I have a problem with this plugin. I want to double click on nodes and the id of nodes should be displayed in console. I added the link of this extension from https://github.com/fixpoint/cytoscape-dblclick and followed by this post Cytoscape js - Call a function whenever a node is clicked, but still is not working.
Is anybody have any idea why it is not working, it would be nice if you share it.
You can see my code:
$(function() {
var elements = {
nodes: [
],
edges: [
]
};
function randomNumber(a) {
return Math.floor(Math.random() * (a));
}
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
ready: function() {},
style: [{
selector: "node", //edge
style: {
content: "data(id)",
shape: "roundrectangle", //square, circle
"text-valign": "center",
"text-halign": "center",
height: "60px", //new
width: "100px", //new
//padding: "10px", //new
"text-wrap": 'wrap', //new
color: "#fff",
"background-color": "#11479e",
// "background-color": "data(faveColor)"
}
},
{
//arrows
selector: "edge",
style: {
"curve-style": "taxi",
//'background-color': '#008000',
width: 4,
"target-arrow-shape": "triangle",
"line-color": "#9dbaea",
"target-arrow-color": "#9dbaea"
}
}
],
});
cy.dblclick();
cy.on('dblclick', function(evt) {
console.log('dblclick');
cy.animate({
fit: {
eles: evt.target,
padding: 10,
},
});
});
cy.on('dblclick:timeout', function(evt) {
console.log('dblclick:timeout');
});
var ab = 12;
for (var i = 0; i < ab; i++) {
//elements.nodes.push({ "data": { "id": i } });
cy.add([{
group: "nodes",
data: {
id: i
}
}
])
}
var cb = 20;
for (var i = 0; i < cb; i++) {
cy.add([{
group: "edges",
data: {
source: randomNumber(ab),
target: randomNumber(ab)
}
}])
}
cy.layout({
name: "dagre", //dagre, grid
directed: true,
nodeDimensionsIncludeLabels: true,
boxSelectionEnabled: true,
autounselectify: true,
zoomingEnabled: true,
userZoomingEnabled: true,
styleEnabled: true
}).run();
cy.elements().qtip({
content: function() {
return 'Text, Test ' + this.id()
},
position: {
my: 'center left', //top center
at: 'center right' //bottom center
},
style: {
classes: 'qtip-bootstrap', //qtip-dark
tip: {
width: 16,
height: 10
}
}
});
// });
}); //end
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
<!DOCTYPE>
<html>
<head>
<title>cytoscape-panzoom.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link href="cytoscape.js-panzoom.css" rel="stylesheet" type="text/css" />
<link href="font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!-- partial -->
<script src="https://js.cytoscape.org/js/cytoscape.min.js"></script>
<script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
<!-- qtip Links -->
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!-- <script src="../cytoscape.js/build/cytoscape.js"></script> -->
<script src="https://unpkg.com/cytoscape-dblclick/dist/index.js"></script>
<script src="cytoscape-panzoom.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Just follow the post you already linked and log the node information instead of fitting the graph to the clicked node. Also, your demo had some static scripts in the header, I removed them for that reason. That way, the qtip works again too:
$(function() {
var elements = {
nodes: [
],
edges: [
]
};
function randomNumber(a) {
return Math.floor(Math.random() * (a));
}
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
ready: function() {},
style: [{
selector: "node", //edge
style: {
content: "data(id)",
shape: "roundrectangle", //square, circle
"text-valign": "center",
"text-halign": "center",
height: "60px", //new
width: "100px", //new
//padding: "10px", //new
"text-wrap": 'wrap', //new
color: "#fff",
"background-color": "#11479e",
// "background-color": "data(faveColor)"
}
},
{
//arrows
selector: "edge",
style: {
"curve-style": "taxi",
//'background-color': '#008000',
width: 4,
"target-arrow-shape": "triangle",
"line-color": "#9dbaea",
"target-arrow-color": "#9dbaea"
}
}
],
});
cy.dblclick();
cy.on('dblclick', function(evt) {
console.log(evt.target.id());
});
var ab = 12;
for (var i = 0; i < ab; i++) {
//elements.nodes.push({ "data": { "id": i } });
cy.add([{
group: "nodes",
data: {
id: i
}
}
])
}
var cb = 20;
for (var i = 0; i < cb; i++) {
cy.add([{
group: "edges",
data: {
source: randomNumber(ab),
target: randomNumber(ab)
}
}])
}
cy.layout({
name: "dagre", //dagre, grid
directed: true,
nodeDimensionsIncludeLabels: true,
boxSelectionEnabled: true,
autounselectify: true,
zoomingEnabled: true,
userZoomingEnabled: true,
styleEnabled: true
}).run();
cy.elements().qtip({
content: function() {
return 'Text, Test ' + this.id()
},
position: {
my: 'center left', //top center
at: 'center right' //bottom center
},
style: {
classes: 'qtip-bootstrap', //qtip-dark
tip: {
width: 16,
height: 10
}
}
});
// });
}); //end
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
<!DOCTYPE>
<html>
<head>
<title>cytoscape-panzoom.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<!--<link href="cytoscape.js-panzoom.css" rel="stylesheet" type="text/css" />-->
<!--<link href="font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css" />-->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!-- partial -->
<script src="https://js.cytoscape.org/js/cytoscape.min.js"></script>
<script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
<!-- qtip Links -->
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!-- <script src="../cytoscape.js/build/cytoscape.js"></script> -->
<script src="https://unpkg.com/cytoscape-dblclick/dist/index.js"></script>
<!--<script src="cytoscape-panzoom.js"></script>-->
</head>
<body>
<div id="cy"></div>
</body>
</html>
How to use dagre layout in cytoscape.js to draw a simple tree. I am putting layout{ name: ‘dagre’} and added dagre.js but not works.With arbor.js it works but I would like to use dagre to see the tree results. I'm newbie with javascript. Many thanks and sorry for my Englihs! My code:
<!DOCTYPE html>
<!--
-->
<meta name="robots" content="noindex">
<html>
<head>
<meta name="description" content="[An example of getting started with Cytoscape.js]" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Cytoscape.js initialisation</title>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/arbor.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/springy.js"></script>
<script src="C:/Users/USER/Downloads/dagre.js"></script>
<style id="jsbin-css">
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="cy"></div>
<script id="jsbin-javascript">
var options = {
name: 'dagre',
// dagre algo options, uses default value on undefined
nodeSep: undefined, // the separation between adjacent nodes in the same rank
edgeSep: undefined, // the separation between adjacent edges in the same rank
rankSep: undefined, // the separation between adjacent nodes in the same rank
rankDir: undefined, // 'TB' for top to bottom flow, 'LR' for left to right
minLen: function( edge ){ return 1; }, // number of ranks to keep between the source and target of the edge
edgeWeight: function( edge ){ return 1; }, // higher weight edges are generally made shorter and straighter than lower weight edges
// general layout options
fit: true, // whether to fit to viewport
padding: 30, // fit padding
animate: false, // whether to transition the node positions
animationDuration: 500, // duration of animation in ms if enabled
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
ready: function(){}, // on layoutready
stop: function(){} // on layoutstop
};
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'text-outline-color': '#888'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [
{ data: { id:'job.000.174.479.001.sh', name: '479' } },
{ data: { id:'job.000.174.822.001.sh', name: '822' } },
..............
] ,
edges: [
{ data: { source: 'DUM_DWH_000_VANTIVE', target: 'job.000.174.773.001.sh' } },
{ data: { source: 'job.000.174.800.001.sh', target: 'job.000.174.806.001.sh' } },
............
]
},
ready: function(){
window.cy = this;
// giddy up...
cy.elements().unselectify();
cy.layout( options );
cy.on('tap', 'node', function(e){
var node = e.cyTarget;
var neighborhood = node.neighborhood().add(node);
cy.elements().addClass('faded');
neighborhood.removeClass('faded');
});
cy.on('tap', function(e){
if( e.cyTarget === cy ){
cy.elements().removeClass('faded');
}
});
}
});
</script>
</body>
</html>
(1) You shouldn't reference your JS file from your local drive. Use a http:// or https:// URL.
(2) You haven't specified 'dagre' to run at init. Set layout: { ... }.