Axes Range change dynamically - range

Does anybody know how can I change axis range in plotly's scatter3D via button click. I use relayout but it doesn't work
function updatet() {
Plotly.relayout(‘myDiv’, ‘zaxis.range’, [[0, 100]]);
}
Nothing happens (my range is still [0,1800])

For 3D plots zaxis.range needs to be inside scene in order to work.
Note: Your ticks look like some copy&paste/autoformat problem.
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv', function(err, rows) {
function unpack(rows, key) {
return rows.map(function(row) {
return row[key];
});
}
var trace1 = {
x: unpack(rows, 'x1'),
y: unpack(rows, 'y1'),
z: unpack(rows, 'z1'),
mode: 'markers',
marker: {
size: 12,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5
},
opacity: 0.8
},
type: 'scatter3d'
};
var trace2 = {
x: unpack(rows, 'x2'),
y: unpack(rows, 'y2'),
z: unpack(rows, 'z2'),
mode: 'markers',
marker: {
color: 'rgb(127, 127, 127)',
size: 12,
symbol: 'circle',
line: {
color: 'rgb(204, 204, 204)',
width: 1
},
opacity: 0.9
},
type: 'scatter3d'
};
var data = [trace1, trace2];
var layout = {
margin: {
l: 0,
r: 0,
b: 0,
t: 0,
}
};
Plotly.newPlot('myDiv', data, layout);
});
document.getElementById('updateButton').addEventListener('click', function() {
Plotly.relayout('myDiv', 'scene.zaxis.range', [0, 10 * Math.random()]);
});
<script src="https://cdn.plot.ly/plotly-latest.min.js">
</script>
<div id="myDiv" style="width:100%;height:100%"></div>
<button id='updateButton'>Change axis
</button>

Related

ol4 + ol-ext problem with ol.featureAnimation.Zoom and ol.layer.AnimatedCluster

When I clicked over cluster, the features not show correctly, I tried stopping the animation but it didn't work. Is another option to show animation for each feature?
// Cluster Source
clusterSource = new ol.source.Cluster({
distance: distanceFt,
source: new ol.source.Vector()
});
// Animated cluster layer
clusterLayer = new ol.layer.AnimatedCluster({
name: 'Cluster',
source: clusterSource,
animationDuration: 700, //$("#animatecluster").prop('checked') ? 700 : 0,
// Cluster style
style: getStyle
});
// Transparent style to handle click on animation
var transparent = [0, 0, 0, 0.01];
var filltransparent = [0, 0, 0, 0];
var transparentStyle =
[new ol.style.Style(
{
image: new ol.style.RegularShape({ radius: 10, radius2: 5, points: 5, fill: new ol.style.Fill({ color: transparent }) }),
stroke: new ol.style.Stroke({ color: transparent, width: 2 }),
fill: new ol.style.Fill({ color: filltransparent })
})
];
// animation
var animacion = new ol.featureAnimation.Zoom({
fade: ol.easing.easeOut,
duration: 2000,
easing: ol.easing["easeOut"],
repeat: 100,
hiddenStyle: transparentStyle
});
ft_animados[idx] = vector_anim.animateFeature(anim_ft[i], animacion(anim_ft[i]));
I have two function:
function ft_animacion(f) {
//var style = f.getStyle();
var efecto = new ol.style.Style({
image: new ol.style["Circle"]({
radius: 30,
points: 4,
stroke: new ol.style.Stroke({ color: 'red', width: 2 })
})
});
f.setStyle(efecto);
return f;
}
function addFeatures(ffs, centrar) {
// some code lines
for (var i = 0; i < ffs.length; i++) {
features[i] = new ol.Feature();
features[i].setProperties(ffs[i]);
var geometry = new ol.geom.Point(transform([parseFloat(ffs[i].lon), parseFloat(ffs[i].lat)]));
features[i].setGeometry(geometry);
if (ffs[i].content.ind) {
if (ffs[i].content.ind.includes("Pendiente")) {
anim_ft.push(ft_animacion(features[i]));
}
}
}
// some code lines
}
I resolve my problem using feature.clone().
So edit the line anim_ft.push(ft_animacion(features[i])) to anim_ft.push(ft_animacion(features[i].clone()))
I dont noticed that when I use the function ft_animacion I was overwriting the style of feature.

Custom styling Google bar chart

Is there a possibility to accomplish a Google barchart to look like this?
The end of each bar with custom styling
Annotation comes below the line (GOAL 10.3)
you can use the chart layout method to add an icon, or any element, to the end of the bar.
// add icon to bar
var barBounds = layout.getBoundingBox('bar#0#0');
var icon = chart.getContainer().appendChild(document.createElement('span'));
icon.className = 'icon';
icon.style.top = (barBounds.top + containerBounds.top - 3) + 'px';
icon.style.left = (barBounds.left + containerBounds.left + (barBounds.width) - 24) + 'px';
icon.innerHTML = '<i class="fas fa-arrow-alt-circle-right"></i>';
also, instead of drawing the annotation and trying to prevent the chart from moving it,
we can leave it out and add our own custom annotation...
// add annotation
var labelCopy = svg.getElementsByTagName('text')[0];
var annotation = labelCopy.cloneNode(true);
svg.appendChild(annotation);
annotation.setAttribute('text-anchor', 'middle');
annotation.textContent = data.getValue(0, data.getNumberOfColumns() -1);
annotation.setAttribute('x', xLoc);
annotation.setAttribute('y',
layout.getYLocation(0) + (parseInt(annotation.getAttribute('font-size')) * 3)
);
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(drawHorizontalChart_portal_name_stella_york_horz_month_points);
function drawHorizontalChart_portal_name_stella_york_horz_month_points() {
var data = google.visualization.arrayToDataTable([
["", "Goal Achieved", {role: 'style'}, "GOAL 13.1 points", {role: 'style'}, {role: 'annotation'}],
[1, 1.5, "opacity: .75;", 13.1, "opacity: 0;", "GOAL 13.1 points"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 3, 4]);
var options = {
title: '',
width: '100%',
height: 132,
chartArea: {
height: '100%',
width: '100%',
top: 36,
left: 18,
right: 18,
bottom: 48
},
hAxis: {
title: '',
minValue: 0,
gridlines: {
count: 6
},
format: '0'
},
bar: {
groupWidth: "60%"
},
legend: {
position: "top"
},
series: {
0: {
color: '#70b5c5',
visibleInLegend: false
}, // Goal Achieved
1: {
color: '#000000',
type: 'line',
annotations: {
textStyle: {
color: '#000000'
},
stem: {
color: 'transparent',
length: -128
},
vertical: true
}
} // Target Goal
},
vAxis: {
gridlines: {
color: 'transparent'
},
ticks: [{v: 1, f: ''}]
}
};
var chart = new google.visualization.BarChart(document.getElementById("portal-name-stella-york-horz-month-points"));
google.visualization.events.addListener(chart, 'click', function(e) {
console.log(JSON.stringify(e));
});
google.visualization.events.addListener(chart, 'ready', function () {
// init variables
var layout = chart.getChartLayoutInterface();
var containerBounds = chart.getContainer().getBoundingClientRect();
var svg = chart.getContainer().getElementsByTagName('svg')[0];
var svgNS = svg.namespaceURI;
var xLoc = drawVAxisLine(chart, layout, data.getValue(0, 3));
// add image to bar
var barBounds = layout.getBoundingBox('bar#0#0');
var icon = chart.getContainer().appendChild(document.createElement('span'));
icon.className = 'icon';
icon.style.top = (barBounds.top + containerBounds.top - 3) + 'px';
icon.style.left = (barBounds.left + containerBounds.left + (barBounds.width) - 24) + 'px';
icon.innerHTML = '<i class="fas fa-arrow-alt-circle-right"></i>';
// add annotation
var labelCopy = svg.getElementsByTagName('text')[0];
var annotation = labelCopy.cloneNode(true);
svg.appendChild(annotation);
annotation.setAttribute('text-anchor', 'middle');
annotation.textContent = data.getValue(0, data.getNumberOfColumns() -1);
annotation.setAttribute('x', xLoc);
annotation.setAttribute('y',
layout.getYLocation(0) + (parseInt(annotation.getAttribute('font-size')) * 3)
);
});
chart.draw(view, options);
}
jQuery(window).resize(function() {
drawHorizontalChart_portal_name_stella_york_horz_month_points();
});
function drawVAxisLine(chart, layout, value) {
var chartArea = layout.getChartAreaBoundingBox();
var svg = chart.getContainer().getElementsByTagName('svg')[0];
var xLoc = layout.getXLocation(value)
svg.appendChild(createLine(xLoc, chartArea.top + chartArea.height, xLoc, chartArea.top, '#000000', 2)); // axis line
return xLoc;
}
function createLine(x1, y1, x2, y2, color, w) {
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', x1);
line.setAttribute('y1', y1);
line.setAttribute('x2', x2);
line.setAttribute('y2', y2);
line.setAttribute('stroke', color);
line.setAttribute('stroke-width', w);
return line;
}
.icon {
font-size: 32px;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="portal-name-stella-york-horz-month-points"></div>

Leaflet/OpenLayers3 change size animation with velocity.js

I'm trying to make an animation with velocity.js of a map. I tried 2 different libraries: leaflet, and openlayers3.
Here are the jsfiddles: leaflet, openlayers3
The leaflet animation is smooth on my chrome, but not on firefox, edge, or even qt webview.
I know that invalidateSize()/updateSize() just change the position of the tiles and download new ones but I want them to produce a smooth animation.
wish somebody have seen this kind of animation. Or know how could I solve the issue, thanks.
leaflet
$(document).ready(function() {
var position = {
lat: 43.180176,
lng: 13.792964,
zoomLevel: 4
};
var swBound = L.latLng(-90, -180);
var neBound = L.latLng(90, 180);
var maxBounds = L.latLngBounds(swBound, neBound);
var entityMap = L.map($("#smallMapContainer")[0], {
minZoom: 2,
maxBounds: maxBounds,
zoomControl: false
});
var streetMapURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
L.tileLayer(streetMapURL, {
maxZoom: 18
}).addTo(entityMap);
//entityMap.fitWorld();
entityMap.setView(L.latLng(position.lat, position.lng), position.zoomLevel);
var nextIndexes = 0;
var aaa = function() {
var smallMapPosition = $("#smallMapContainer").position();
var newW = $("body").width() - 90;
var newH = $("body").height() - 90;
var newX = smallMapPosition.top + newH / 2 - 100;
var newY = smallMapPosition.left + newW / 2 - 150;
$("#smallMapContainer").velocity({
top: newX,
left: newY
}, {
duration: 500,
complete: function() {
$("#smallMapContainer").velocity({
width: newW,
height: newH,
top: smallMapPosition.top,
left: smallMapPosition.left
}, {
duration: 1000,
progress: function() {
entityMap.invalidateSize();
},
complete: function() {
if (nextIndexes++ % 2 == 0) { // with animation
entityMap.setView(L.latLng(55.751674, 37.637059), position.zoomLevel);
} else {
entityMap.setView(L.latLng(43.180176, 13.792964), position.zoomLevel);
}
$("#smallMapContainer").velocity({
width: 300,
height: 200,
top: newX,
left: newY
}, {
delay: 1000,
duration: 1000,
progress: function() {
entityMap.invalidateSize();
},
complete: function() {
$("#smallMapContainer").velocity({
top: smallMapPosition.top,
left: smallMapPosition.left
}, {
duration: 1000
});
}
});
}
});
}
});
}
aaa();
setTimeout(function() {
aaa();
}, 10000);});
openlayers
$(document).ready(function() {
var view = new ol.View({
// the view's initial state
center: ol.proj.fromLonLat([13.792964, 43.180176]),
zoom: 4
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
preload: 4,
source: new ol.source.OSM()
})
],
loadTilesWhileAnimating: true,
target: 'smallMapContainer',
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
view: view
});
nextIndexes = 0;
var animateMap = function() {
var smallMapPosition = $("#smallMapContainer").position();
var newW = $("body").width() - 90;
var newH = $("body").height() - 90;
var newX = smallMapPosition.top + newH / 2 - 100;
var newY = smallMapPosition.left + newW / 2 - 150;
$("#smallMapContainer").velocity({
top: newX,
left: newY
}, {
duration: 500,
complete: function() {
$("#smallMapContainer").velocity({
width: newW,
height: newH,
top: smallMapPosition.top,
left: smallMapPosition.left
}, {
duration: 1000,
progress: function() {
map.updateSize();
},
complete: function() {
if (nextIndexes++ % 2 == 0) {
var pan = ol.animation.pan({
duration: 1000,
source: /** #type {ol.Coordinate} */ (view.getCenter())
});
map.beforeRender(pan);
view.setCenter(ol.proj.fromLonLat([37.637059, 55.751674]));
} else {
var pan = ol.animation.pan({
duration: 1000,
source: /** #type {ol.Coordinate} */ (view.getCenter())
});
map.beforeRender(pan);
view.setCenter(ol.proj.fromLonLat([13.792964, 43.180176]));
}
$("#smallMapContainer").velocity({
width: 300,
height: 200,
top: newX,
left: newY
}, {
delay: 1000,
duration: 1000,
progress: function() {
map.updateSize();
},
complete: function() {
$("#smallMapContainer").velocity({
top: smallMapPosition.top,
left: smallMapPosition.left
}, {
duration: 1000
});
}
});
}
});
}
});
}
animateMap();});
Disclaimer: If you're adament on using Velocity this is in no means a validate answer but i thought i'de throw it in here because i think it's unnecessary to pull in an entire animation library to accomplish something that can easily be done with standard CSS.
You can accomplish the same effect by using CSS keyframe animation, it will run much smoother than using an external animation library:
#leaflet {
width: 300px;
height: 200px;
position: absolute;
top: 55px;
left: 45px;
animation-name: move;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: linear;
}
#keyframes move {
0% {
top: 55px;
left: 45px;
}
25% {
top: calc(50% - (200px / 2));
left: calc(50% - (300px / 2));
width: 300px;
height: 200px;
}
50% {
top: calc(5%);
left: calc(5%);
width: 90%;
height: 90%;
}
75% {
top: calc(50% - (200px / 2));
left: calc(50% - (300px / 2));
width: 300px;
height: 200px;
}
100% {
top: 55px;
left: 45px;
}
}
The only drawback/problem is that somehow (got to look further into this, but i'm low on time at the moment) L.Map's 'resize' event doesn't seem to fire when resizing the map container through CSS animation. So i've used ResizeSensor from CSS Element Queries to be able to call invalidateSize on the map instance when the container gets resized.
Here's a working example on Plunker: http://plnkr.co/edit/EyQFbm?p=preview

Google barchart side label cuts off

Right so I have my chart set up but the side labels or bar titles are cut off if they don't fit in the div of the graph, so my question is, is there anyway to overflow the bar titles of the graph(the font size is getting too small to read so I can't make it any smaller) or even wrap the text.
Well seeing as I don't think the code will help I'll show it regardless, mind you I have limited space and I am showing 2 graphs in that space. All I need is the side labels to have overflow: show(so if the specific bar label overflows the area it displays..
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
</head>
<body>
<div>
<div id="myChart" style="width:50%"></div>
</div>
<script type="text/javascript">
$(function(){
var id = "myChart";
var chartData= [["The big label that is the issue in this case we need this to display its overflow","74","",""],["Louise","71","",""],["Louise.v.2","0","",""],["member1","72","",""],["member3","67","",""]];
var defaultColors = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
"#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262",
"#5574a6", "#3b3eac", "#b77322", "#16d620", "#b91383", "#f4359e", "#9c5935", "#a9c413", "#2a778d", "#668d1c",
"#bea413", "#0c5922", "#743411"];
var counter = 0;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', '');
data.addColumn({ type: 'string', role: "style" });
data.addColumn({ type: 'string', role: 'annotation' });
if (chartData[0][3].length > 0) {
data.addColumn('number', '');
}
data.addRows(chartData.length + 1);
for (var i = 0; i < chartData.length; i++) {
var thisItem = chartData[i];
data.setCell(i, 0, thisItem[0]);
data.setCell(i, 1, thisItem[1]);
if (thisItem[2].length > 0) {
data.setCell(i, 2, "color: #000000");
} else {
data.setCell(i, 2, "color: " + defaultColors[counter]);
}
data.setCell(i, 3, thisItem[1] + "%");
if (thisItem[3].length > 0) {
data.setCell(i, 4, thisItem[3]);
}
counter = counter + 1;
if (counter == 31) {
counter = 0;
}
}
var barChart = null;
var options = null;
barChart = new google.visualization.ComboChart(document.getElementById(id));
var fullHeight = ((chartData.length + 1) * 20) + 50;
var minHieght = 200;
options = {
height: fullHeight,
tooltip: { isHtml: true },
max: 100,
label: 'value',
orientation: 'vertical',
fontSize: 15,
width: (((($(window).width() / 3) * 2) / 5) * 3),
legend: { position: 'none' },
bar: { groupWidth: 15, width: 20 },
chartArea: { height: fullHeight - 50, width: "47%", left: "50%", top: 0 },
backgroundColor: 'transparent',
enableInteractivity: false,
legend: 'none',
seriesType: 'bars',
series: { 1: { type: 'line', lineWidth: 5, enableInteractivity: false, color: 'grey' } },
annotations: {
alwaysOutside: true
}
};
barChart.draw(data, options);
});
</script>
</body>
</html>

KineticJS dynamically change the position of an object when other object is moved

I have a vertical and a horizontal lines and a circle on my stage, trying to keep the circle centered on the corssoing of the two lines when I move either line, here is my script that does not work:
var cy = 512;
var cx = 512;
var gy = 0;
var gx = 0;
var stage1 = new Kinetic.Stage({
container: 'container',
width: 1024,
height: 1024
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({
x: cx + gx,
y: cy + gy,
radius: 140,
stroke: '#00ffff',
strokeWidth: 4,
opacity: 0.5
});
circle.add(circle1);
var GreenLine1 = new Kinetic.Line({
points: [0, 512, 1024, 512],
stroke: 'green',
strokeWidth: 4,
lineCap: 'round',
lineJoin: 'round',
opacity: 0.3
});
var BlueLine1 = new Kinetic.Line({
points: [512, 0, 512, 1024],
stroke: '#0080c0',
strokeWidth: 4,
lineCap: 'round',
lineJoin: 'round',
opacity: 0.5
});
var bgroup1 = new Kinetic.Group({
draggable: true,
dragBoundFunc: function (pos) {
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
var ggroup1 = new Kinetic.Group({
draggable: true,
dragBoundFunc: function (pos) {
return {
x: this.getAbsolutePosition().x,
y: pos.y
}
}
});
bgroup1.add(BlueLine1);
ggroup1.add(GreenLine1);
layer.add(bgroup1);
layer.add(ggroup1);
stage1.add(circle);
stage1.add(layer);
BlueLine1.on('mouseover', function () {
document.body.style.cursor = 'e-resize';
});
BlueLine1.on('mouseout', function () {
document.body.style.cursor = 'default';
});
GreenLine1.on('mouseover', function () {
document.body.style.cursor = 'n-resize';
});
GreenLine1.on('mouseout', function () {
document.body.style.cursor = 'default';
});
ggroup1.on('dragend', function (event) {
var gy = ggroup1.getPosition().y;
circle.draw();
});
ggroup1.on('dragstart', function (event) {
circle1.moveTo(ggroup1);
});
bgroup1.on('dragstart', function (event) {
circle1.moveTo(bgroup1);
});
bgroup1.on('dragend', function (event) {
var gx = bgroup1.getPosition().x;
circle.draw();
});
I would appreciate your suggetions, thanks in advance
Keeping your circle in your crosshairs
May I suggest a simpler version of your code?
Instead of maintaining 2 groups and moving the circle between the 2 groups, how about just coding the circle to automatically redraw itself at the intersection of the 2 lines.
So when the user moves your GreenLine1 or BlueLine1, just move your circle1 to the intersection of your “crosshairs”.
First, add a custom drawFunc to your circle1 that causes it to always draw in the crosshairs:
drawFunc: function(canvas) {
var context = canvas.getContext();
var centerX=BlueLine1.getPosition().x;
var centerY=GreenLine1.getPosition().y;
context.beginPath();
context.arc(centerX, centerY, this.getRadius(), 0, 2 * Math.PI, false);
context.lineWidth = this.getStrokeWidth();
context.strokeStyle = this.getStroke();
context.stroke();
},
Then, whenever the user drags either line, just trigger circle1 to redraw itself:
// keep circle in center of crosshairs
stage1.getDragLayer().afterDraw(function() {
layer.draw();
});
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/cgF8y/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
</style>
<script>
$(function(){
function init(){
var cy = 512/2;
var cx = 512/2;
var gy = 0;
var gx = 0;
var stage1 = new Kinetic.Stage({
container: 'container',
width: 1024/2,
height: 1024/2
});
var layer = new Kinetic.Layer();
stage1.add(layer);
var circle1 = new Kinetic.Circle({
drawFunc: function(canvas) {
var context = canvas.getContext();
var centerX=BlueLine1.getPosition().x;
var centerY=GreenLine1.getPosition().y;
context.beginPath();
context.arc(centerX, centerY, this.getRadius(), 0, 2 * Math.PI, false);
context.lineWidth = this.getStrokeWidth();
context.strokeStyle = this.getStroke();
context.stroke();
},
x: cx + gx,
y: cy + gy,
radius: 140/2,
stroke: '#00ffff',
strokeWidth: 4,
opacity: 0.5
});
layer.add(circle1);
var GreenLine1 = new Kinetic.Line({
points: [0, 512/2, 1024/2, 512/2],
stroke: 'green',
strokeWidth: 4,
lineCap: 'round',
lineJoin: 'round',
opacity: 0.3,
draggable:true
});
layer.add(GreenLine1);
var BlueLine1 = new Kinetic.Line({
points: [512/2, 0, 512/2, 1024/2],
stroke: '#0080c0',
strokeWidth: 4,
lineCap: 'round',
lineJoin: 'round',
opacity: 0.5,
draggable:true
});
layer.add(BlueLine1);
// keep circle in center of crosshairs
stage1.getDragLayer().afterDraw(function() {
layer.draw();
});
BlueLine1.on('mouseover', function () {
document.body.style.cursor = 'e-resize';
});
BlueLine1.on('mouseout', function () {
document.body.style.cursor = 'default';
});
GreenLine1.on('mouseover', function () {
document.body.style.cursor = 'n-resize';
});
GreenLine1.on('mouseout', function () {
document.body.style.cursor = 'default';
});
layer.draw();
} // end init();
init();
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>