2D Canvas Simple Polylines
View this example full screen.
CoString of 2D Canvas Simple Polylines
View this example in sandbox :
o,109.72328593151204,214.0909703111111&z,14&e,6,ef1568,1,4,153.72328593151204,23.090970311111107,146.72328593151204,63.09097031111111,159.72328593151204,97.0909703111111,156.72328593151204,113.0909703111111
JavaScript of 2D Canvas Simple Polylines
function initialize()
{
var oMapOptions = {
coStrType: zhupiter.CoStr.CoStrType.CANVAS2D,
center: new zhupiter.CoStr.Point2D(214.0909703111111, 109.72328593151204),
zoom: 14
};
var oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions);
var oPath = [
//@ Format: zhupiter.CoStr.Point2D(x, y)
new zhupiter.CoStr.Point2D(23.090970311111107, 153.72328593151204),
new zhupiter.CoStr.Point2D(63.09097031111111, 146.72328593151204),
new zhupiter.CoStr.Point2D(97.0909703111111, 159.72328593151204),
new zhupiter.CoStr.Point2D(113.0909703111111, 156.72328593151204)
];
var oPolyline = new zhupiter.CoStr.Polyline({
//@ In this example, the coStrMap is not given in options.
//coStrMap: oCoStrMap,
path: oPath,
strokeWeight: 6,
strokeColor: '#ef1568',
strokeOpacity: 1.0
});
//@ Notice: The CoString type information of this oPolyline is getting form the oCoStrMap
//@ in the first time of setMap() call.
oPolyline.setMap(oCoStrMap);
}
zhupiter.CoStr.event.addDomListener(window, 'load', initialize);
JavaScript + HTML of 2D Canvas Simple Polylines
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
<meta charset='utf-8'>
<title>2D Canvas Simple Polylines</title>
<style>
html, body, #map_canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src='//costr.zhupiter.com/js/'></script>
<script>
function initialize()
{
var oMapOptions = {
coStrType: zhupiter.CoStr.CoStrType.CANVAS2D,
center: new zhupiter.CoStr.Point2D(214.0909703111111, 109.72328593151204),
zoom: 14
};
var oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions);
var oPath = [
//@ Format: zhupiter.CoStr.Point2D(x, y)
new zhupiter.CoStr.Point2D(23.090970311111107, 153.72328593151204),
new zhupiter.CoStr.Point2D(63.09097031111111, 146.72328593151204),
new zhupiter.CoStr.Point2D(97.0909703111111, 159.72328593151204),
new zhupiter.CoStr.Point2D(113.0909703111111, 156.72328593151204)
];
var oPolyline = new zhupiter.CoStr.Polyline({
//@ In this example, the coStrMap is not given in options.
//coStrMap: oCoStrMap,
path: oPath,
strokeWeight: 6,
strokeColor: '#ef1568',
strokeOpacity: 1.0
});
//@ Notice: The CoString type information of this oPolyline is getting form the oCoStrMap
//@ in the first time of setMap() call.
oPolyline.setMap(oCoStrMap);
}
zhupiter.CoStr.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>