New to Cytoscape.js. I exported a network file in the .cyjs format from Cytoscape but would like to visualize it in Cytoscape.js now.I've goten stuck in integrating the .cyjs file into my javascript. I've made the following template from the Cytoscape.js tutorial provided online:
<!doctype html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Tutorial 1: Getting Started</title>
<script src="cytoscape.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
//nodes
//edges
],
style: [
{
selector: 'node',
style: {
shape: 'circle',
'background-color': 'blue',
label: 'data(id)'
}
}]
});
cy.layout({
name: 'circle'
});
</script>
</body>
</html>
Cytoscape desktop erroneously names the exported file with the extension .cyjs. It's just a JSON file, so rename it to .json. Just point Cytoscape.js to the particular parts of the JSON you want to use (when you call cytoscape( myOptions ).
Related
I'm running it in vscode and when I run my site, the spot where the javascript should be, is just a blank area. I tried a console.log message to test it and that isn't coming through either.
Here's where I'm trying to add a progress bar.
<p class="infoBox">
<h3>Skills</h3>
<h4>Computer Languages</h4>
Java <div id="container"></div></br>
Python</br>
Here's my javascript.
<script type="text/javascript" src="/require.js">
console.log("Hello World!"); // a test for js and it's not showing up in chrome's console
var ProgressBar = require('progressbar.js');
var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'}
});
bar.animate(1.0);
</script>
Here's my css.
#container {
margin: 20px;
width: 400px;
height: 8px;
}
Here's what's coming up when I run it.
You mixed something up. if you use <script src=""></script> you tell the browser to import a js library (in your case require.js). The contents between <script> and </script> are then ignored.
If you want to execute javascript code you have two options.
Option 1: Inline Javascript like this:
<script src="require.js"></script>
<script>
console.log("test")
</script>
Option 2: Create your own .js file and extract the code there:
<script src="require.js"></script>
<script src="your_own_js_file.js"></script>
If src is in the tag it will not read its contents. Simply remove the src and it should work.
According to your source variable container is undefined, so you try to set the progress bar to an empty container. So either assign value '#container' to your variable or just replace new ProgressBar.Line(container, with new ProgressBar.Line("#container",
And yes, you need to split and your script like
<script src="/require.js"/>
<script>
Your script here
</script>
Since you are using the id of the div element to render the progress bar, you need to load the javascript code after the window is loaded.
index.js
window.onload = function onLoad() {
var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: { width: '100%', height: '100%' },
});
bar.animate(1.0);
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ProgressBar.js - Minimal Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#container {
margin: 20px;
width: 400px;
height: 8px;
}
</style>
</head>
<body>
<p class="infoBox"></p>
<h3>Skills</h3>
<h4>Computer Languages</h4>
<p>Java</p>
<div id="container"></div>
<p>Python</p>
<script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/0.5.6/dist/progressbar.js"></script>
<script src="index.js"></script>
</body>
</html>
I need to change the language of the mapbox in javascript, I only see the below code in the documentation
map.setLayoutProperty('country-label', 'text-field', ['get', 'name_de'])
but this line of code will only change the country names but I need everything ( city, town, ...etc)
Based on your mapbox style, there will be different text layers. For dark-v9, these are the available text layers.
country-label
state-label
settlement-label
settlement-subdivision-label
airport-label
poi-label
water-point-label
water-line-label
natural-point-label
natural-line-label
waterway-label
road-label
Using the code snippet that you mentioned in the question on the above layers, you should be able to change the language.
map.setLayoutProperty('country-label', 'text-field', ['get', 'name_de'])
Or you can use mapbox-language-plugin to change the language of all the possible layers. Here is the working example of the plugin.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Change a map's language</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.10.1/mapbox-gl-language.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#buttons {
width: 90%;
margin: 0 auto;
}
.button {
display: inline-block;
position: relative;
cursor: pointer;
width: 20%;
padding: 8px;
border-radius: 3px;
margin-top: 10px;
font-size: 12px;
text-align: center;
color: #fff;
background: #ee8a65;
font-family: sans-serif;
font-weight: bold;
}
</style>
<div id='map'></div>
<ul id="buttons">
<li id='button-fr' class='button'>French</li>
<li id='button-ru' class='button'>Russian</li>
<li id='button-de' class='button'>German</li>
<li id='button-es' class='button'>Spanish</li>
</ul>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibXVyYWxpcHJhamFwYXRpIiwiYSI6ImNrMHA1d3VjYzBna3gzbG50ZjR5b2Zkb20ifQ.guBaIUcqkTdYHX1R6CM6FQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9',
center: [16.05, 48],
zoom: 2.9
});
mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');
var mapboxLanguage = new MapboxLanguage({
defaultLanguage: 'en'
});
map.addControl(mapboxLanguage);
document.getElementById('buttons').addEventListener('click', function(event) {
var language = event.target.id.substr('button-'.length);
map.setStyle(mapboxLanguage.setLanguage(map.getStyle(), language));
});
</script>
</body>
</html>
Ref: https://blog.mapbox.com/how-to-localize-your-maps-in-mapbox-gl-js-da4cc6749f47
Here is a code I have found helpful for me from github mapbox here
map.getStyle().layers.forEach(function(thisLayer){
if(thisLayer.type == 'symbol'){
map.setLayoutProperty(thisLayer.id, 'text-field', ['get','name_ja'])
}
})
I have modified it to
map.getStyle().layers.forEach(function(thisLayer){
console.log(thisLayer);
if(thisLayer.id.indexOf('-label')>0){
console.log('change '+thisLayer.id);
map.setLayoutProperty(thisLayer.id, 'text-field', ['get','name_fr'])
}
});
But otherwise you'll have to change the different labels yourself as mentionned by murli-prajapati
Of course, change 'name_xx' by your own language
such as:
map.setLayoutProperty('country-label', 'text-field', ['get','name_fr']);
map.setLayoutProperty('state-label', 'text-field', ['get','name_fr']);
map.setLayoutProperty('settlement-label', 'text-field', ['get','name_fr']);
map.setLayoutProperty('settlement-subdivision-label', 'text-field', ['get','name_fr']);
The only thing that helped me is a cycle placed in load event:
map.on('load', function() {
let labels = [ 'country-label', 'state-label',
'settlement-label', 'settlement-subdivision-label',
'airport-label', 'poi-label', 'water-point-label',
'water-line-label', 'natural-point-label',
'natural-line-label', 'waterway-label', 'road-label' ];
labels.forEach(label => {
map.setLayoutProperty(label, 'text-field', 'get','name_ru']);
});
})
Language plugin and other stuff didn't work.
Belatedly, you could use this plugin to change the display language according to the user locale.
https://github.com/mapbox/mapbox-gl-language
For example:
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: [-77.0259, 38.9010],
zoom: 9
});
const language = new MapboxLanguage();
map.addControl(language);
After trying all the solutions in this thread with streets-v12 I found non of them gave me what I needed.
The plug-in doesn’t work at all, and #Mike & #honey59 solutions semi-work, I still found many components not translated.
What did work best for me was to use Mapbox’s studio to create custom map and change the language there to all the components & layers (guide: https://docs.mapbox.com/help/troubleshooting/change-language/).
And on my site I know when user is viewing the page on a specific language, so I just needed to map the languages to their custom maps URLs.
I know it’s not the most “technical” dynamic solution, but I found it to be the most complete one
I am trying to initialize a text/code editor using Microsoft Monaco. I would like to use core JavaScript or even jQuery but no NodeJS dependency. Is that possible?
Some relevant examples:
Get the value of Monaco Editor
Example in jsFiddle
I have the following code, which is not working:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<script type="text/javascript" src="https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
window.editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
});
function save() {
// get the value of the data
var value = window.editor.getValue()
saveValueSomewhere(value);
}
</script>
</body>
</html>
Can anyone help?
I've added a working example below. Regarding your other question:
I would like to use core JavaScript or even jQuery but no NodeJS dependency. Is that possible?
monaco-editor IS written in JavaScript (TypeScript compiled to JavaScript) and does not use jQuery. Node is not really relevant in the context you've described.
Please let me know if this helps.
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor#latest/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
let proxy = URL.createObjectURL(new Blob([`
self.MonacoEnvironment = {
baseUrl: 'https://unpkg.com/monaco-editor#latest/min/'
};
importScripts('https://unpkg.com/monaco-editor#latest/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));
require(["vs/editor/editor.main"], function () {
let editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript',
theme: 'vs-dark'
});
});
html, body, #container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
<script src="https://unpkg.com/monaco-editor#latest/min/vs/loader.js"></script>
<div id="container"></div>
You can also add editor as simple js code without requirejs.
Download repo from monaco-editor
Build monaco-editor for browser
cd monaco-editor && npm run build-website
You can copy module from website/node_modules/monaco-editor folder created after build,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link
rel="stylesheet"
data-name="vs/editor/editor.main"
href="../node_modules/monaco-editor/min/vs/editor/editor.main.css"
/>
</head>
<body>
<h2>Monaco Editor Sync Loading Sample</h2>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<script>
var require = { paths: { vs: '../node_modules/monaco-editor/min/vs' } };
</script>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
<script src="../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
<script>
var editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript'
});
</script>
</body>
</html>
I want to display a polyline underground in cesium.js. But I have no idea about this.
It seems that cesium has not provided official underground function for the reason that cesium cameral can not be placed undergroud,but the underground effect can be gained by an alternative way--translucent terrain.
According How to display underground entity? in Cesium-dev google group,I have achieved a barely satisfactory approach to showing the entity(including gltf models) underground.The displaying effect is as what the GIF file shows.This appoach contains mainly 3 steps.
For gif, see here.
1.change only one line code in cesium source code;get the cesium source code,then find the file named GlobeSurfaceTileProvider.js,change
command.pass = Pass.GLOBE;
to
command.pass = Pass.TRANSLUCENT;
2.generate the cesium release code with gulp tool;use your CLI to execute gulp release. PS： You may need set your node environment and install the dependency node modules and install gulp tool.
3.Implemention code.PS: note the following snippet can run only if you have changed the cesium source code which is illustrated in step one.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
#import url(../Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
.tools {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div id="cesiumContainer">
</div>
<div class="tools">
Opacity: <input id="btnImageryAlpha" type="range" min="0" max="10" value="10" oninput="change()" />
</div>
</div>
<script>
function change() {
var value = document.getElementById("btnImageryAlpha").value;
if (viewer.imageryLayers) {
for (var i = 0; i < viewer.imageryLayers.length; i++) {
viewer.imageryLayers.get(i).alpha = value / 10;
}
}
console.log(value);
}
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
requestVertexNormals: true
});
var viewer = new Cesium.Viewer('cesiumContainer', {
//skyAtmosphere: false,
//orderIndependentTranslucency: false,
baseLayerPicker: false,
terrainProvider: terrainProvider
});
//viewer.scene.globe.depthTestAgainstTerrain = false;
//change the ugly blue color to black
viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);
//default is 1
//viewer.scene.globe.imageryLayers.get(0).alpha = 0.5;
var blueBox = viewer.entities.add({
name: 'Blue box',
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 5),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE
}
});
viewer.zoomTo(blueBox);
</script>
</body>
</html>
Yes, this is supported in cesium. It can be hard to see sometimes since the camera cannot go bellow the ellipsoid.
var viewer = new Cesium.Viewer('cesiumContainer');
var purpleArrow = viewer.entities.add({
name : 'Purple straight arrow at height',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, -200000,
-90, 43, -200000]),
width : 10,
followSurface : false,
material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
}
});
viewer.zoomTo(viewer.entities);
Live
I'm trying to wrap the ion.rangeSlider inside a Polymer element but I'm having trouble getting it working in a jsBin.
Here is the documentation.
Here is a working jsFiddle.
Here is my non-working jsBin.
Please show me how to get this working in a jsBin.
http://jsbin.com/dopanumada/1/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css">
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css">
</head>
<body>
<dom-module id="x-element">
<template>
<style>
/** /
References:
http://jsfiddle.net/IonDen/qv6yrjrv/
https://github.com/IonDen/ion.rangeSlider#experiments-playground
/**/
body {
margin: 40px 15px;
font-family: Arial, sans-serif;
font-size: 12px;
}
.range-slider {
position: relative;
height: 80px;
}
.extra-controls {
position: relative;
border-top: 3px solid #000;
padding: 10px 0 0;
}
</style>
<div class="range-slider">
<input type="text" class="js-range-slider" value="" />
</div>
<div class="extra-controls">
Placeholder for some buttons to change slider behavior
</div>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
}
});
})();
</script>
<script>
$(document).ready(function () {
var $range = $(".js-range-slider");
$range.ionRangeSlider({
type: "double",
min: 100,
max: 1000,
from: 300,
to: 800
});
});
</script>
</dom-module>
<x-element></x-element>
</body>
Update: It partially works as shown here when I do the following.
Move the second <script> tag outside the Polymer element template and into the main document body (light DOM).
Add the jQuery library resource in the <head>.
Remove the $(document).ready(function(){
But I still need to get it to work with the javascript inside the Polymer element template.
You were close with your partially working example, where you called the ionRangeSlider function in ready. However, you first need to call the jQuery function $() with the slider input as an argument.
ready: function(){
$(this.$.slider).ionRangeSlider({
type: "double",
min: 100,
max: 1000,
from: 300,
to: 800
});
}
Here's a working jsBin