We Keep Coding

Explorer 11 can't remove USE element - javascript

I'm use snapsvg library; Remove <use> element in IE11 doesn't work; How i can fix it?
c = Snap(400, 620);
c.rect(0, 0, 400, 620).attr({
fill : 'white',
stroke : 'black'
});
var pattern25x25;
var createDiodePattern = function () {
var p = c.group(),
selectedColor = "#ff6900",
fillColor = "#b7b7b7";
p.add(c.circle(12, 12, 30, 30).attr({fill: '#FFFFFF', stroke: '#FFFFFF', 'stroke-with': '1', opacity: '0.1'}));
p.add(c.rect(0, 0, 25, 25).attr({fill: fillColor, stroke: '#000000', 'stroke-with': '2'}));
p.add(c.rect(3, 5, 5, 2).attr({fill: '#FFDE00', stroke: '#000000', 'stroke-with': '1'}));
p.add(c.rect(16, 5, 5, 2).attr({fill: '#FFDE00', stroke: '#000000', 'stroke-with': '1'}));
p.add(c.circle(12, 12, 3, 3).attr({fill: '#FFFFFF', stroke: '#000000', 'stroke-with': '1'}));
pattern25x25 = p.toDefs();
};
createDiodePattern();
var items = [];
for(var i = 0; i< 10; i++){
var el = pattern25x25.use().attr({
x: i * 30,
y: i * 30
});
c.append(el);
items.push(el);
}
items.map(function(el){
el.click(function(){
el.remove();
});
})
Live Copy

Related

I am trying to draw lines around polygon, It should draw different colour of line from one point to the next, I am stuck on attaching line to the last point of polygon, There are also red circles which are being created successfully on polygon corners, Lines are being drawn when box is moved with mouse, using 'modified' event
JSFiddle here
The issue is here:
var lastPoint = (i=>polygon.points.length)?0:i+1;
var fromX = transformedPoints[lastPoint].x;
var fromY = transformedPoints[lastPoint].y;
return new fabric.Line([p.x, p.y, 25, fromX],{
JS code
var canvas = new fabric.Canvas("c", {
selection: false
});
var polygon = new fabric.Polygon([
new fabric.Point(150, 50),
new fabric.Point(250, 50),
new fabric.Point(250, 150),
new fabric.Point(150, 150)
]);
polygon.on("modified", function() {
document.getElementById("p").innerHTML = JSON.stringify(this);
var matrix = this.calcTransformMatrix();
var transformedPoints = this.get("points")
.map(function(p) {
return new fabric.Point(
p.x - polygon.pathOffset.x,
p.y - polygon.pathOffset.y);
})
.map(function(p) {
return fabric.util.transformPoint(p, matrix);
});
var circles = transformedPoints.map(function(p) {
return new fabric.Circle({
left: p.x,
top: p.y,
radius: 3,
fill: "red",
originX: "center",
originY: "center",
hasControls: false,
hasBorders: false,
selectable: false
});
});
document.getElementById("l").innerHTML = JSON.stringify(transformedPoints);
var colors = ['#E5097F', '#00A0E3', '#009846', '#FECC00', '#000', '#000', '#000'];
var lines = transformedPoints.map(function(p, i) {
document.getElementById("r").innerHTML = JSON.stringify(p);
var lastPoint = (i => polygon.points.length) ? 0 : i + 1;
var fromX = transformedPoints[lastPoint].x;
var fromY = transformedPoints[lastPoint].y;
document.getElementById("r").innerHTML = fromX + ' - > ' + fromY;
return new fabric.Line([p.x, p.y, 25, fromX], {
stroke: colors[i],
strokeWidth: 10,
hasBorders: false,
strokeDashArray: [8, 13]
});
});
side_a = new fabric.Line([150, 0, 50, 0], {
stroke: "red",
strokeWidth: 10,
hasBorders: false
});
this.canvas.clear().add(this).add(side_a).add.apply(this.canvas, lines).add.apply(this.canvas, circles).setActiveObject(this).renderAll();
});
canvas.add(polygon).renderAll();
UPDATE:
I am able to generate those lines by providing static values, for demo. before 'modified' event happens I have included some lines where it should go:
side_a = new fabric.Line([250, 50, 150, 50], {
stroke: "red",
strokeWidth: 10,
hasBorders: false
});
side_b = new fabric.Line([150, 150, 150, 50], {
stroke: "green",
strokeWidth: 10,
hasBorders: false
});
side_c = new fabric.Line([250, 150, 250, 50], {
stroke: "blue",
strokeWidth: 10,
hasBorders: false
});
side_d = new fabric.Line([150, 150, 260, 150], {
stroke: "green",
strokeWidth: 10,
hasBorders: false
});
canvas.add(polygon).add(side_a).add(side_b).add(side_c).add(side_d).renderAll();
Now just need to figure out how to create those dynamically. new JSFIDDLE HERE
UPDATE:
finally I was able to solve it by running in loop.

I was able to solve it using looping through the points and than generating lines:
var fromX = transformedPoints[i].x;
var fromY = transformedPoints[i].y;
return new fabric.Line([p.x, p.y , fromX, fromY], {
stroke: colors[i],
strokeWidth: 10,
hasBorders: true,
strokeDashArray: [20, 5]
});

I'm using Raphael to create an interactive pie chart. Onclick on mobile seem to be laggy. What would be the appropriate way to change the below to a "touch" based solution that isn't so slow?
I also noticed that in IE11 that the function myHoverOut isn't activating. I'm not entirely sure why. Works fine in Chrome, Firefox and Safari.
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var w = 330;
var h = 330;
var R = Raphael("paper");
R.setViewBox(0,0,w,h,true);
var svg = document.querySelector("svg");
svg.removeAttribute("width");
svg.removeAttribute("height");
// Setting preserveAspectRatio to 'none' lets you stretch the SVG
R.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet');
var iconStyle = {
fill: "#fff",
stroke: "",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyle = {
fill: "#1b2833",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStylePeople = {
fill: "#005190",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleMoney = {
fill: "#0f5086",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleIP = {
fill: "#0d4b7c",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleScience = {
fill: "#0f4873",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleEndors = {
fill: "#0f436a",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleLegislator = {
fill: "#144162",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleChain = {
fill: "#173c59",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStylevaluePrice = {
fill: "#1d3853",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStylemarketNeed = {
fill: "#20364b",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleAssets = {
fill: "#223343",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleLeadEnt = {
fill: "#252d38",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var wheel = {};
wheel.people = R.path("M205.1,84.2c-0.8-0.4-1.6-0.7-2.5-1.1c-0.1-0.1-0.3-0.1-0.5-0.2c-5.4-2.2-11-3.9-16.6-5 c-0.2,0-0.3-0.1-0.5-0.1c-5.7-1.1-11.5-1.7-17.3-1.7h-0.5c-4.7,0-9.4,0.4-14,1.1l-4.7-6.5l-0.8-1.1v0l-40.8-57 c9.1-3.5,18.4-6.2,27.9-8.1c0.2-0.1,0.3-0.1,0.5-0.1c10.5-2.1,21.2-3.1,31.9-3.1h0.5c10.7,0,21.4,1.1,31.9,3.1 c0.2,0,0.4,0.1,0.5,0.1c0.3,0.1,0.7,0.1,1,0.2l3.6,72v0l0.1,1.2v0L205.1,84.2z").attr(segmentStylePeople);
wheel.leadEntrepreneur = R.path("M285,50l-0.3,0.6l-35.6,62l-0.6,1l-3.3,5.8c-0.5-0.8-1-1.7-1.6-2.5c-0.1-0.1-0.2-0.3-0.3-0.4 c-3.2-4.7-6.9-9.2-11-13.4c0,0-0.1-0.1-0.1-0.1c-0.1-0.1-0.2-0.2-0.3-0.3c-4.2-4.1-8.7-7.8-13.4-11c-0.1-0.1-0.3-0.2-0.4-0.3 c-4.1-2.7-8.5-5.1-12.9-7.1l-0.3-6.2v0l-0.1-1.2v0l-3.6-72c10.1,2.1,20.1,5.1,29.7,9.1c0.2,0.1,0.3,0.1,0.5,0.2 c9.8,4.1,19.3,9.1,28.3,15.1c0.1,0.1,0.3,0.2,0.4,0.3c8.7,5.9,17,12.7,24.8,20.4C284.8,49.8,284.9,49.9,285,50L285,50z").attr(segmentStyleLeadEnt);
wheel.assets = R.path("M330.4,134.2l-1.8,0.9l0,0l-1.7,0.8l0,0l-60.1,31.2l-1,0.5l-7,3.6c0-1.2,0.1-2.4,0.1-3.6c0-0.2,0-0.4,0-0.5 c0-5.8-0.6-11.6-1.7-17.3c0-0.2,0-0.3-0.1-0.5c-1.1-5.7-2.8-11.2-5.1-16.7c0-0.2-0.1-0.3-0.2-0.5c-1.8-4.4-4-8.7-6.6-12.8l3.3-5.8 l0.6-1l35.6-62L285,50c0,0,0.1,0.1,0.1,0.1c7.7,7.7,14.5,16,20.4,24.8c0.1,0.1,0.2,0.3,0.3,0.4c6,9,11.1,18.5,15.1,28.3 c0.1,0.2,0.1,0.3,0.2,0.5C325.2,113.9,328.3,124,330.4,134.2").attr(segmentStyleAssets);
wheel.marketNeed = R.path("M333.7,167.2v0.5c0,10.7-1,21.4-3.1,31.9c0,0.2-0.1,0.4-0.1,0.5c-2,9.9-4.8,19.6-8.6,29l-6.3-0.6h0l-1.8-0.2h0 l-63.6-5.9l-1.1-0.1l-7.9-0.7c0.7-1,1.5-2.1,2.2-3.1c0.1-0.1,0.2-0.3,0.3-0.4c3.3-4.9,6-10,8.2-15.4c0.1-0.2,0.1-0.3,0.2-0.5 c2.3-5.4,3.9-11,5-16.7c0-0.2,0.1-0.4,0.1-0.5c0.9-4.5,1.4-9.1,1.6-13.7l7-3.6l1-0.5l60.1-31.2l0,0l1.7-0.8l0,0l1.8-0.9 c0,0.2,0.1,0.4,0.1,0.6c0,0.2,0.1,0.3,0.1,0.5C332.7,145.8,333.7,156.5,333.7,167.2").attr(segmentStylemarketNeed);
wheel.valuePrice = R.path("M322,229.2c-0.2,0.6-0.5,1.2-0.7,1.7c0,0.2-0.1,0.3-0.2,0.5c-4.1,9.8-9.1,19.3-15.1,28.3 c-0.1,0.1-0.2,0.3-0.3,0.4v0c-5.9,8.8-12.7,17-20.4,24.8c-0.1,0.1-0.1,0.2-0.2,0.3c0,0-0.1,0.1-0.1,0.1 c-6.7,6.7-13.9,12.8-21.4,18.1l-10.3-8.1h0l-1.3-1.1l0,0l-46.7-36.5l-0.8-0.7l-4.8-3.8c0.9-0.3,1.9-0.7,2.8-1.1 c0.1-0.1,0.3-0.1,0.5-0.2c5.3-2.2,10.5-4.9,15.4-8.2c0.1-0.1,0.3-0.2,0.4-0.3c4.7-3.2,9.3-6.9,13.4-11.1c0,0,0.1-0.1,0.1-0.1 c0.1-0.1,0.2-0.2,0.3-0.3c3.2-3.3,6.2-6.8,8.9-10.4l7.9,0.7l1.1,0.1l63.6,5.9h0l1.8,0.2h0L322,229.2z").attr(segmentStylevaluePrice);
wheel.supplyChain = R.path("M263.5,303.5c-1.1,0.8-2.2,1.6-3.4,2.3c-0.1,0.1-0.3,0.2-0.4,0.3c-9,6-18.5,11.1-28.3,15.2 c-0.1,0.1-0.3,0.1-0.5,0.2c-10,4.1-20.3,7.2-30.7,9.3c-0.2,0-0.3,0.1-0.5,0.1c-8.1,1.6-16.3,2.6-24.5,3l-7.5-21.4l-0.5-1.5 l-17.8-51.1l-0.4-1l-0.6-1.7c0.3,0.1,0.6,0.1,0.9,0.2c0.2,0.1,0.4,0.1,0.5,0.1c5.7,1.1,11.5,1.7,17.3,1.7h0.5 c5.8,0,11.6-0.6,17.3-1.7h0c0.2,0,0.3-0.1,0.5-0.1c4.7-1,9.3-2.3,13.9-4l4.8,3.8l0.9,0.7l46.7,36.5l0,0l1.3,1.1h0L263.5,303.5z").attr(segmentStyleChain);
wheel.legislatorsRegulators = R.path("M175.1,333.8c-2.5,0.1-5,0.2-7.5,0.2h-0.5c-10.7,0-21.4-1.1-32-3.1c-0.2,0-0.4-0.1-0.5-0.1 c-10.5-2.1-20.7-5.2-30.7-9.3c-0.2,0-0.3-0.1-0.5-0.2c-6.2-2.6-12.3-5.5-18.2-8.9l8-33.3l0.4-1.5l10.5-43.8c3.8,3.7,7.9,7,12.2,9.8 c0.1,0.1,0.3,0.2,0.4,0.3c4.9,3.3,10,6,15.4,8.2c0.1,0.1,0.3,0.2,0.5,0.2c5.1,2.1,10.4,3.7,15.8,4.9l0.6,1.7l0.4,1l17.8,51.1 l0.5,1.5L175.1,333.8z").attr(segmentStyleLegislator);
wheel.independantEndorsement = R.path("M104.1,233.7l-10.5,43.8l-0.4,1.5l-8,33.3c-3.4-2-6.8-4-10.1-6.2c-0.1-0.1-0.3-0.2-0.4-0.3 c-8.8-5.9-17.1-12.7-24.8-20.4l-0.4-0.4c-7.7-7.7-14.5-16-20.4-24.8c-0.1-0.1-0.2-0.3-0.3-0.4c-2.8-4.3-5.5-8.6-7.9-13.1l33.4-32 l1.1-1l23.5-22.5c1,3.8,2.3,7.5,3.8,11.2c0,0.1,0.1,0.3,0.2,0.5c2.2,5.3,5,10.5,8.2,15.4c0.1,0.1,0.2,0.3,0.3,0.4 c3.2,4.7,6.9,9.3,11.1,13.5c0.1,0.1,0.1,0.2,0.2,0.3l0.1,0.1C103.2,232.9,103.6,233.3,104.1,233.7").attr(segmentStyleEndors);
wheel.underpinningScience = R.path("M77.7,185.6c0.4,1.8,0.8,3.6,1.3,5.4l-23.5,22.5l-1.1,1l-33.4,32c-2.7-5-5.1-10-7.2-15.2 c-0.1-0.2-0.1-0.3-0.2-0.5c-4.1-10-7.2-20.3-9.3-30.7c-0.1-0.2-0.1-0.3-0.1-0.5C2,189.1,1,178.4,1,167.8v-0.5 c0-3.5,0.1-6.9,0.4-10.4l55.9-10.9h0l1.4-0.3h0l21-4.1c-0.8,2.6-1.4,5.2-2,7.9c0,0.2-0.1,0.3-0.1,0.5c-1.1,5.7-1.7,11.5-1.7,17.3 v0.5c0,5.8,0.6,11.6,1.7,17.3C77.6,185.3,77.6,185.4,77.7,185.6").attr(segmentStyleScience);
wheel.intellectualProperty = R.path("M106.7,99.2c-1.3,1.1-2.5,2.3-3.7,3.5l-0.4,0.4c-4.2,4.2-7.9,8.7-11,13.4c-0.1,0.1-0.2,0.3-0.3,0.4 c-3.3,4.9-6,10-8.2,15.3c-0.1,0.1-0.1,0.3-0.2,0.5c-1.2,2.9-2.2,5.8-3.1,8.8l-21,4.1h0l-1.4,0.3h0L1.4,156.8 c0.5-7.2,1.4-14.4,2.8-21.5c0-0.2,0.1-0.3,0.1-0.5c2.1-10.5,5.2-20.7,9.3-30.7c0.1-0.2,0.1-0.3,0.2-0.5c4.1-9.8,9.1-19.2,15.1-28.3 c0.1-0.1,0.2-0.3,0.3-0.4c1.2-1.7,2.4-3.4,3.6-5.1l60.6,24.1l1.3,0.5L106.7,99.2z").attr(segmentStyleIP);
wheel.money = R.path("M148.4,70.7l-0.8-1.1v0l-40.8-57c-0.9,0.4-1.9,0.7-2.8,1.1v0c-0.2,0-0.3,0.1-0.5,0.2 c-9.8,4.1-19.3,9.1-28.3,15.1c-0.1,0.1-0.3,0.2-0.4,0.3C66,35.2,57.7,42,50,49.7c-0.1,0.1-0.2,0.2-0.3,0.3l-0.1,0.1 c-6.2,6.2-11.8,12.8-16.8,19.7l60.6,24.1l1.3,0.5l12,4.8c3.1-2.8,6.3-5.2,9.7-7.5c0.1-0.1,0.3-0.2,0.4-0.3c4.9-3.3,10-6,15.4-8.2 c0.1-0.1,0.3-0.1,0.5-0.2c5.4-2.2,11-3.9,16.6-5c0.2-0.1,0.3-0.1,0.5-0.1c1.1-0.2,2.2-0.4,3.3-0.6L148.4,70.7z").attr(segmentStyleMoney);
var icon = {};
icon.people = R.path("M178.1,40.9l0-1.2c1.7,0.2,5.1-1,5.1-1c-1.2-1.2-1.4-2.6-2.2-8s-5.5-5.4-5.8-5.4c-0.4,0-5.1-0.1-5.8,5.4 c-0.8,5.4-1,6.8-2.2,8c0,0,3.4,1.2,5.1,1l0,1.2c-0.9,0.9-1.9,1.7-2.9,2.3c0.3,0.2,0.7,0.4,1,0.5c2.3,1.2,4.4,2.4,4.4,4.8v2.6h10.6 c0.4,0,0.7-0.3,0.7-0.7v-3C186,44.7,181,44.1,178.1,40.9 M164.8,41.2L164.8,41.2v-1c0.9-1,1.5-2.2,2-3.5c0.1-0.2,0.1-0.4,0.2-0.6c0.5-0.2,0.8-0.8,0.9-1.6 c0-0.3,0-0.5,0-0.7c-0.1-0.4-0.2-0.7-0.4-0.9c0-0.7,0-1.5,0-2.3c0-0.6-0.1-1.3-0.1-1.9c0-0.2,0-0.3-0.1-0.5 c-0.7-3.9-4.2-4.3-5.5-4.3c-0.1,0-1,0-1,0c-1.3,0-4.9,0.4-5.5,4.3c0,0.2,0,0.3-0.1,0.5c-0.1,0.7-0.1,1.3-0.1,1.9 c0,0.8,0,1.6,0,2.3c-0.2,0.2-0.3,0.5-0.4,0.9c0,0.2,0,0.5,0,0.7c0.1,0.8,0.5,1.4,0.9,1.6c0.1,0.4,0.2,0.8,0.4,1.2 c0.4,1.1,1,2.1,1.8,3v1c-3.3,3.6-8.8,4.3-8.8,7.3v3.3c0,0.4,0.3,0.7,0.7,0.7h23.4c0.4,0,0.7-0.3,0.7-0.7v-3.3 C173.6,45.5,168.1,44.8,164.8,41.2").attr(iconStyle);
icon.leadEntrepreneur = R.path("M237.7,43.1c9.4,0,17,7.6,17,17c0,3.7-1.2,7.1-3.2,9.9c-0.2-3.5-2-4.8-2-4.8c-0.7-1.7-5.3-3.1-5.3-3.1 c-1.7-0.6-2.2-1.2-2.4-1.5c0,0,0-0.1,0-0.1v0c0,0,0,0,0-0.1v0c-0.1-0.2-0.2-0.8-0.2-1c0,0,0,0,0,0.1c0-0.1,0-0.3,0-0.5c0,0,0,0,0,0 c0.6-0.7,1-1.5,1.3-2.4c0.5-0.5,0.8-1.8,0.8-1.8c0.3-1,0.2-1.5,0.1-1.7c0-0.1,0.9-2.7-0.3-4.7c0,0-0.4-1.9-2.6-2.7 c-2-1.2-5-0.5-5-0.5c-3.7,0.6-4.5,4.9-4.5,4.9c-0.2,2,0.3,3.2,0.3,3.3c-0.2,0.5,0.2,1.7,0.2,1.7c0.1,0.7,0.5,1,0.6,1 c0.3,0.9,0.7,1.8,1.3,2.6c0,0,0,0,0,0c0,0,0.1,0.3,0,0.7c0,0,0-0.1,0-0.1c0,0.2-0.2,0.8-0.2,0.9c0,0,0,0,0,0 c-0.2,0.2-0.3,0.4-0.5,0.6c-1.4,1.1-4.7,2.1-4.7,2.1c-1.4,0.6-2,1.4-2,1.4c-1.5,2.2-2.1,4.4-2.3,5.5c-2.1-2.8-3.3-6.3-3.3-10 C220.7,50.7,228.3,43.1,237.7,43.1 M237.7,41.5c-10.3,0-18.6,8.3-18.6,18.6c0,10.3,8.3,18.6,18.6,18.6c10.3,0,18.6-8.3,18.6-18.6 C256.3,49.9,248,41.5,237.7,41.5").attr(iconStyle);
icon.assets = R.path("M286.8,125.6c-3.4,0-6.2-2.8-6.2-6.2c0-3.4,2.8-6.2,6.2-6.2c3.4,0,6.2,2.8,6.2,6.2 C293,122.8,290.2,125.6,286.8,125.6 M304.9,117.1c-0.1-0.5-0.6-1-1.1-1l-2.3-0.1c-0.5,0-1.1-0.5-1.2-0.9l-0.8-2.1 c-0.2-0.5-0.1-1.2,0.2-1.5l1.5-1.7c0.3-0.4,0.4-1,0-1.4l-3.3-3.3c-0.4-0.3-1-0.3-1.4,0l-1.7,1.5c-0.4,0.3-1.1,0.4-1.5,0.2l-2.1-0.8 c-0.5-0.2-0.9-0.7-0.9-1.2l-0.1-2.3c0-0.5-0.5-1-1-1.1c0,0-1.2-0.2-2.3-0.2c-1.1,0-2.3,0.2-2.3,0.2c-0.5,0.1-1,0.6-1,1.1l-0.1,2.3 c0,0.5-0.5,1.1-0.9,1.2l-2.1,0.8c-0.5,0.2-1.2,0.1-1.5-0.2l-1.7-1.5c-0.4-0.3-1-0.4-1.4,0l-3.3,3.3c-0.3,0.4-0.3,1,0,1.4l1.5,1.7 c0.3,0.4,0.4,1.1,0.2,1.5l-0.8,2.1c-0.2,0.5-0.7,0.9-1.2,0.9l-2.3,0.1c-0.5,0-1,0.5-1.1,1c0,0-0.2,1.2-0.2,2.3s0.2,2.3,0.2,2.3 c0.1,0.5,0.6,1,1.1,1l2.3,0.1c0.5,0,1.1,0.5,1.2,0.9l0.8,2.1c0.2,0.5,0.1,1.2-0.2,1.5l-1.5,1.7c-0.3,0.4-0.4,1,0,1.4l3.3,3.3 c0.4,0.3,1,0.3,1.4,0l1.7-1.5c0.4-0.3,1.1-0.4,1.5-0.2l2.1,0.8c0.5,0.2,0.9,0.7,0.9,1.2l0.1,2.3c0,0.5,0.5,1,1,1.1 c0,0,1.2,0.2,2.3,0.2c1.1,0,2.3-0.2,2.3-0.2c0.5-0.1,1-0.6,1-1.1l0.1-2.3c0-0.5,0.5-1.1,0.9-1.2l2.1-0.8c0.5-0.2,1.2-0.1,1.5,0.2 l1.7,1.5c0.4,0.3,1,0.4,1.4,0l3.3-3.3c0.3-0.4,0.3-1,0-1.4l-1.5-1.7c-0.3-0.4-0.4-1.1-0.2-1.5l0.8-2.1c0.2-0.5,0.7-0.9,1.2-0.9 l2.3-0.1c0.5,0,1-0.5,1.1-1c0,0,0.2-1.2,0.2-2.3S304.9,117.1,304.9,117.1").attr(iconStyle);
icon.marketNeed = R.path("M312.6,187.5c-0.3-0.4-0.7-0.5-1.1-0.5h-9.2c-0.6-4-3-9.8-9-9.8s-8.4,5.8-9,9.8h-9.1c-0.4,0-0.9,0.1-1.1,0.5 c-0.3,0.4-0.3,0.8-0.2,1.2l6.1,18.5c0.2,0.6,0.7,0.8,1.3,0.8h24.1c0.6,0,1.1-0.3,1.3-0.8l6.1-18.6 C313,188.2,312.9,187.8,312.6,187.5z M303,195h4.8l-1.6,5H303V195z M278.9,195h5.1v5h-3.5L278.9,195z M293,190v4h-8v-4H293z M293,195v5h-8v-5H293z M285,201h8v4h-8V201z M294,201h7v4h-7V201z M294,200v-5h7v5H294z M294,194v-4h7v4H294z M293.3,180 c4.3,0,5.7,4,6.2,7h-12.4C287.6,184,289,180,293.3,180z M284,190v4h-5.6l-1.3-4H284z M280.9,201h3.1v4h-1.7L280.9,201z M304.4,205 H303v-4h2.7L304.4,205z M308.2,194H303v-4h6.6L308.2,194z").attr(iconStyle);
icon.valuePrice = R.path("M271.8,251v12.3h-4.2L271.8,251z M273.3,251l4.2,12.3h-4.2V251z M250.1,263.3V251l4.2,12.3H250.1z M248.6,251 v12.3h-4.2L248.6,251z M273.7,247.7h0.3c0.6,0,1.1-0.5,1.1-1.1c0-0.6-0.5-1.1-1.1-1.1h-11.9l-0.1-4c0-0.6-0.5-1.1-1.1-1.1 c-0.6,0-1.1,0.5-1.1,1.1l-0.1,4h-11.9c-0.6,0-1.1,0.5-1.1,1.1c0,0.6,0.5,1.1,1.1,1.1h0.3l-5.4,15.6c0,0,0,3.6,6.5,3.6 s6.5-3.6,6.5-3.6l-5.4-15.6h9.2l0,0.8c-0.6,0.4-0.9,1-0.9,1.8c0,0.7,0.3,1.3,0.8,1.7l-0.4,17.9c-6.9,0.5-6.9,3.6-6.9,3.6h17.4 c0,0,0-3.1-6.9-3.6l-0.4-17.9c0.5-0.4,0.8-1,0.8-1.7c0-0.7-0.4-1.4-0.9-1.8l0-0.8h9.2l-5.4,15.6c0,0,0,3.6,6.5,3.6 c6.5,0,6.5-3.6,6.5-3.6L273.7,247.7z").attr(iconStyle);
icon.supplyChain = R.path("M187.5,290.5l-6.4,6.4h4.3v5.4c0,0.8,0.3,1.7,0.9,2.3c0.6,0.6,1.5,0.9,2.3,0.9h19.3c0.8,0,1.7-0.3,2.3-0.9 c0.6-0.6,0.9-1.5,0.9-2.3v-5.4h-4.3v4.3h-17.2v-4.3h4.3L187.5,290.5L187.5,290.5z M188.6,279.8c-0.8,0-1.7,0.3-2.3,0.9 c-0.6,0.6-0.9,1.5-0.9,2.3v5.4h4.3v-4.3h17.1v4.3h-4.3l6.4,6.4l6.4-6.4h-4.3V283c0-0.8-0.3-1.7-0.9-2.3c-0.6-0.6-1.5-0.9-2.3-0.9 H188.6L188.6,279.8z").attr(iconStyle);
icon.legislatorsRegulators = R.path("M132.2,300.3c-0.1,0.1-0.2,0.2-0.3,0.3v1.9c0,0.5-0.4,0.9-0.9,0.9h-19.4c-0.5,0-0.9-0.4-0.9-0.9v-24.9 c0-0.5,0.4-0.9,0.9-0.9H131c0.5,0,0.9,0.4,0.9,0.9v7.2l2.8-3.5v-4.5c0-1.7-1.4-3.1-3.1-3.1H111c-1.7,0-3.1,1.4-3.1,3.1v26.4 c0,1.7,1.4,3.1,3.1,3.1h20.6c1.7,0,3.1-1.4,3.1-3.1v-6.1L132.2,300.3z M128.3,299.7c-0.7,0-1.4-0.3-1.9-0.9l-4.6-5.3c-0.9-1-0.8-2.6,0.3-3.5c1-0.9,2.6-0.8,3.5,0.3l2.6,3l9.5-12 c0.8-1.1,2.4-1.2,3.5-0.4c1.1,0.8,1.2,2.4,0.4,3.5l-11.4,14.3C129.8,299.3,129.1,299.6,128.3,299.7L128.3,299.7z").attr(iconStyle);
icon.independantEndorsement = R.path("M74.1,246l-4.5-0.7l-2.4-3.9c-0.5-0.8-1.2-0.8-1.7,0l-2.6,3.9l-4.3,0.5c-0.9,0.1-1.2,0.8-0.7,1.6l2.7,4.4 l-0.5,4.5c-0.1,0.9,0.5,1.4,1.3,1.1l4.9-1.6l4.8,1.7c0.8,0.3,1.4-0.2,1.4-1.1l-0.4-4.6l2.9-4.3C75.3,246.8,75,246.1,74.1,246 M66.3,266c-3.4,0-6.6-1.1-9.3-2.9l-6,0.7c-1,0.1-1.6-0.6-1.3-1.5l1.8-5.6c-1-2.2-1.6-4.6-1.6-7.2c0-9.1,7.3-16.4,16.4-16.4 s16.4,7.3,16.4,16.4S75.4,266,66.3,266").attr(iconStyle);
icon.underpinningScience = R.path("M54.2,178.3c-0.6,0-1.1-0.5-1.1-1.1s0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1S54.9,178.3,54.2,178.3 M44,188.6 c-0.6,0-1.1-0.5-1.1-1.1s0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1S44.6,188.6,44,188.6 M32.1,186.9c-0.6,0-1.1-0.5-1.1-1.1 c0-0.6,0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1C33.2,186.4,32.7,186.9,32.1,186.9 M24.4,194.8c-0.6,0-1.1-0.5-1.1-1.1 c0-0.6,0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1C25.5,194.3,25,194.8,24.4,194.8 M54.2,173.7c-1.9,0-3.5,1.6-3.5,3.5 c0,0.6,0.2,1.2,0.5,1.8l-5.5,5.5c-0.5-0.3-1.1-0.4-1.7-0.4c-1.4,0-2.6,0.8-3.2,2l-5.4-1c-0.4-1.5-1.7-2.7-3.4-2.7 c-1.9,0-3.5,1.6-3.5,3.5c0,0.6,0.1,1.1,0.4,1.6l-3.2,3.2c-0.4-0.2-0.9-0.3-1.5-0.3c-1.9,0-3.5,1.6-3.5,3.5c0,1.9,1.6,3.5,3.5,3.5 c1.9,0,3.5-1.6,3.5-3.5c0-0.5-0.1-1-0.3-1.5l3.2-3.2c0.4,0.2,0.9,0.3,1.3,0.3c1.3,0,2.5-0.8,3.1-1.9l5.5,1.1 c0.4,1.5,1.8,2.5,3.3,2.5c1.9,0,3.5-1.6,3.5-3.5c0-0.4-0.1-0.9-0.2-1.3l5.8-5.8c0.4,0.1,0.8,0.2,1.2,0.2c1.9,0,3.5-1.6,3.5-3.5 C57.7,175.2,56.2,173.7,54.2,173.7").attr(iconStyle);
icon.intellectualProperty = R.path("M45.4,132c0.7,1.3,2.1,2.2,3.7,2.2s3-0.9,3.7-2.2H45.4z M53.2,125c0.7,0,1.5-0.7,1.5-1.5c0-6.3,5.5-7.1,5.5-15.1c0-6.1-5-11.1-11.1-11.1c-6.1,0-11.1,5-11.1,11.1 c0,8,5.5,8.9,5.5,15.1c0,0.7,0.7,1.5,1.5,1.5H53.2z M54,127c0,0.5-0.4,0.9-0.9,0.9h-7.8c-0.5,0-0.9-0.4-0.9-0.9c0-0.5,0.4-0.9,0.9-0.9H53 C53.5,126.1,54,126.5,54,127 M54,130c0,0.5-0.4,0.9-0.9,0.9h-7.8c-0.5,0-0.9-0.4-0.9-0.9c0-0.5,0.4-0.9,0.9-0.9H53 C53.5,129.1,54,129.5,54,130").attr(iconStyle);
icon.money = R.path("M92.2,50.1c-2-3-4-5-1.3-5.5c0.4-0.1,2.2-0.3,2.7-0.2c0.6,0.1,1.1,0.4,1.7,0.6c0.7,0.3,1.5,0.3,2.2,0.4 c0.8,0,1.7-0.2,2.4-0.4c0.5-0.2,1.1-0.4,1.6-0.6c0.6-0.1,2.2,0.3,2.5,0.3c0.4,0.1,0.8,0.2,1,0.6c0.2,0.6-0.3,1.4-0.6,1.8 c-0.6,1-1.3,1.9-2,2.9l-0.8,1.1H93L92.2,50.1z M101.4,71.9h-8.2v-1.3l0.1-0.1c1.2-0.6,2-1.8,2-3.1c0-0.3,0-0.7-0.1-1.1h-1.9v-1.7H95 c-0.1-0.5-0.2-1.1-0.2-1.8c0-2.3,1.6-3.9,3.8-3.9c1.2,0,1.9,0.3,2.2,0.5l0.1,0.1l-0.5,1.7l-0.3-0.1c-0.2-0.1-0.7-0.4-1.6-0.4 c-1.5,0-1.8,1.1-1.8,2.1c0,0.7,0.1,1.3,0.2,1.7h2.7v1.7h-2.5c0,0.7,0,1.3-0.1,1.9c-0.2,0.7-0.5,1.2-1,1.7h5.2V71.9z M112.1,67 c-2.2-5.1-6.2-10.7-10.5-13.4h-8.7c-4.2,2.7-8.2,8.3-10.5,13.4c-2.2,5.1,0.4,10.2,5.5,10.2h18.6C111.6,77.2,114.3,72.2,112.1,67").attr(iconStyle);
var current = null;
for (var segment in wheel) {
(function (st, segment) {
st[0].onmouseover = function () {
current && wheel[current].animate() && (document.getElementById(current).style.display = "");
document.getElementById(segment).style.display = "block";
current = segment;
};
if (segment == "people") {
st[0].onmouseover();
wheel.people.animate({ fill: '#005190', transform: 's1.05' }, 200);
wheel.people.toFront();
icon.people.animate({ fill: '#FFFFFF', transform: 's1.2' }, 200);
icon.people.toFront();
var bounce = Raphael.animation({transform: 's1.2'}, 500, "bounce").repeat(Infinity);
icon.people.animate(bounce);
icon.people.toFront();
}
})(wheel[segment], segment);
(function (st, segment) {
st[0].onclick = function () {
current && wheel[current].animate() && (document.getElementById(current).style.display = "");
document.getElementById(segment).style.display = "block";
current = segment;
};
})(wheel[segment], segment);
wheel[segment].color = "#005190";
wheel[segment].mouseover( myHover.bind(null, segment) )
icon[segment].mouseover( myHover.bind(null, segment) )
wheel[segment].mouseout( myHoverOut.bind(null, segment) )
icon[segment].mouseout( myHoverOut.bind(null, segment) )
wheel[segment].mousedown( myHover.bind(null, segment) )
icon[segment].mousedown( myHover.bind(null, segment) )
wheel[segment].touchstart( myHover.bind(null, segment) )
icon[segment].touchstart( myHover.bind(null, segment) )
wheel[segment].mouseout( myHoverOut.bind(null, segment) )
icon[segment].mouseout( myHoverOut.bind(null, segment) )
wheel[segment].touchend( myHoverOut.bind(null, segment) )
icon[segment].touchend( myHoverOut.bind(null, segment) )
}
function myHover( type ) {
icon.people.stop();
icon.people.animate({ fill: '#FFFFFF', transform: 's1' }, 200);
wheel[ type ].animate({ fill: '#005190', transform: 's1.05' }, 200);
icon[ type ].animate({ fill: '#FFFFFF', transform: 's1.2' }, 200);
wheel[ type ].toFront();
icon[ type ].toFront();
}
function myHoverOut( type ) {
wheel[ type ].animate({ fill: '#1b2833', transform: 's1' }, 200);
icon[ type ].animate({ fill: '#FFFFFF', transform: 's1' }, 200);
icon.people.animate({ fill: '#FFFFFF', transform: 's1' }, 200);
wheel.people.animate({ fill: '#005190', transform: 's1' }, 200);
wheel.leadEntrepreneur.animate({ fill: '#252d38', transform: 's1' }, 200);
wheel.assets.animate({ fill: '#223343', transform: 's1' }, 200);
wheel.marketNeed.animate({ fill: '#20364b', transform: 's1' }, 200);
wheel.valuePrice.animate({ fill: '#1d3853', transform: 's1' }, 200);
wheel.supplyChain.animate({ fill: '#173c59', transform: 's1' }, 200);
wheel.legislatorsRegulators.animate({ fill: '#144162', transform: 's1' }, 200);
wheel.independantEndorsement.animate({ fill: '#0f436a', transform: 's1' }, 200);
wheel.underpinningScience.animate({ fill: '#0f4873', transform: 's1' }, 200);
wheel.intellectualProperty.animate({ fill: '#0d4b7c', transform: 's1' }, 200);
wheel.money.animate({ fill: '#0f5086', transform: 's1' }, 200);
}
};
</script>

It is slow because you are making too many dom access. Try reducing the use of document.getElementById in the click function. You can achieve this by either of the following:
Use the 'this' keyword inside the onclick function.
Send the dom element as parameter to the click function when it is declared.
PS: I do not know your complete application so there can be other ways too to reduce dom interaction.

First problem: When I put a hover event on a raphael path, the effect is apply on every diffrent path. So, when I pass over the path, it changes the fill of that single path, after mouseout it should stay filled with an active color. If I put a hover event on another path "last hovered path" must be filled with default color.
Second problem: When i put hover event on text - back path not fills with color.
This is my code.
var paths = {
part_1: {
name: 'part_1',
path: 'M194 139c-21,35 -33,76 -33,119 0,6 0,12 1,18l-125 10c-1,-9 -1,-18 -1,-28 0,-51 11,-99 30,-142 41,10 84,17 129,23z',
img: 'images/pol.png',
desc: "Теплые\nполы"
},
part_2: {
name: 'part_1',
path: 'M209 400l-97 78c-41,-52 -69,-116 -75,-186l125 -11c5,44 22,85 48,118z',
img: 'images/rad.png',
desc: 'Котлы\nи радиаторы'
},
part_3: {
name: 'part_1',
path: 'M116 483l97 -79c5,5 9,11 14,16 25,25 57,45 92,56l-36 120c-55,-18 -104,-48 -144,-87 -8,-8 -16,-17 -23,-26l0 0z',
img: 'images/lam.png',
desc: 'Светодиодное\n освещение'
},
part_4: {
name: 'part_1',
path: 'M454 478l36 120c-32,10 -66,15 -101,15 -35,0 -68,-5 -101,-14l36 -120c20,6 42,9 64,9 22,0 44,-3 64,-9z',
img: 'images/pol.png',
desc: 'Натяжные\nпотолки,\nаксессуары '
},
part_5: {
name: 'part_1',
path: 'M565 405l97 79c-7,9 -15,17 -23,25 -40,39 -89,70 -144,87l-36 -120c35,-11 66,-31 92,-56 5,-5 10,-10 14,-16l0 0z',
img: 'images/camera.png',
desc: 'Системы\nбезопасности'
},
part_6: {
name: 'part_1',
path: 'M666 479l-97 -80c26,-33 42,-72 47,-116l125 10c-7,70 -34,134 -75,186z',
img: 'images/vent.png',
desc: 'Вентиля-\nционные\nсистемы'
},
part_7: {
name: 'part_1',
path: 'M742 286l-125 -10c0,-6 1,-12 1,-18 0,-44 -12,-84 -33,-119 45,-6 88,-13 129,-23 19,44 30,92 30,142 0,10 0,19 -1,28z',
img: 'images/auto.png',
desc: 'Гаражные\nворота,\nрольставни'
}
}
function labelPath( pathObj, text, textattr )
{
if ( textattr == undefined )
textattr = { 'font-size': 18, fill: '#722d00', stroke: '#393738', cursor: 'pointer', 'stroke-width': 0, "text-anchor":"start", 'stroke-linejoin': 'round', 'font-family': 'Arial,Helvetica,sans-serif', 'font-weight': 'bold' };
var bbox = pathObj.getBBox();
var textObj = pathObj.paper.text( bbox.x + bbox.width / 4, bbox.y + bbox.height / 2, text ).attr( textattr );
return textObj;
}
$(function(){
var r = Raphael('map', 750, 625),
attributes = {
fill: '#FFC000',
stroke: '#393738',
'stroke-width': 0,
'stroke-linejoin': 'round',
cursor: 'pointer'
},
attributes_circle = {
fill: '#fff',
stroke: '#393738',
'stroke-width': 0,
'stroke-linejoin': 'round'
},
attributes_line = {
fill: '#fff',
stroke: '#fff',
'stroke-width': 7,
'stroke-linejoin': 'round'
},
attributes_min_circle = {
fill: '#fff',
stroke: '#fff',
'stroke-width': 0,
'stroke-linejoin': 'round'
},
icon = {
fill: '#FFC000',
stroke: '#393738',
'stroke-width': 0,
'stroke-linejoin': 'round'
},
icon_inner = {
fill: '#fff',
stroke: '#393738',
'stroke-width': 0,
'stroke-linejoin': 'round'
}
arr = new Array();
var id = 23;
var a = 1;
for (var country in paths) {
var obj = r.path(paths[country].path);
//Init text
if(a <= 7){
var path_a = r.path(paths['part_' + a].path);
path_a.node.setAttribute("class","black_bor")
var sst = String(paths['part_' + a].desc);
labelPath( path_a, sst);
}
a++;
//Fill stroke
if(paths[country].name=='circle'){
obj.attr(attributes_circle);
}else if(paths[country].name=='line'){
obj.attr(attributes_line);
}else if(paths[country].name=='min_circle'){
obj.attr(attributes_min_circle);
}else if(paths[country].name=='icon_inner'){
obj.attr(icon_inner);
}else if(paths[country].name=='icon'){
obj.attr(icon);
}
else{
obj.attr(attributes);
}
arr[obj.id] = country;
//Hover on element
obj
.hover(function(){
if(paths[arr[this.id]].name=='part_1'){
textattrs = { 'font-size': 18, fill: '#fff', stroke: '#393738', 'stroke-width': 0, "text-anchor":"start", 'stroke-linejoin': 'round', 'font-family': 'Arial,Helvetica,sans-serif', cursor: 'pointer', 'font-weight': 'bold' };
var path_a = r.path(paths[arr[this.id]].path);
path_a.node.setAttribute("class","black_bor")
var sst = String(paths[arr[this.id]].desc);
labelPath( path_a, sst, textattrs);
this.animate({
fill: '#F3811E'
}, 0);
$(".img_behind").attr("src", paths[arr[this.id]].img);
}
}, function(){
if(paths[arr[this.id]].name=='part_1'){
var path_a = r.path(paths[arr[this.id]].path);
path_a.node.setAttribute("class","black_bor")
var sst = String(paths[arr[this.id]].desc);
labelPath( path_a, sst);
this.animate({
fill: attributes.fill
}, 0);
}
})
}
});
Any ideas on how can I solve this problems?
Here is my work.
Whole work on jsFiddle.

I don't understand the first problem, you may need to reexplain it a bit, which part isn't working ?
For the 2nd part, you need to add pointer-events: none to stop it stealing the event..
text { pointer-events: none; }
jsfiddle
If I'm understanding the first bit correct, I think you will need to remove the hoverout, and just change the hover to remove any existing hover effects ?

In kintic JS of HTML5 I am trying to vanish lines on mouse over it works fine when I am doing it with variables:
http://jsfiddle.net/Vbwta/
var layer = new Kinetic.Layer();
lines0= new Kinetic.Line({
points: [73+10, 70+10, 340+10, 23+10],
stroke: 'red',
strokeWidth: 7,
});
lines0.on('mouseover', function() {
lines0.hide();
layer.draw();;
});
lines1= new Kinetic.Line({
points: [53, 50, 320, 03],
stroke: 'red',
strokeWidth: 7,
});
lines1.on('mouseover', function() {
//document.body.style.cursor = 'pointer';
lines1.hide();
layer.draw();;
});
But the same thing does not work properly when I am using array:
http://jsfiddle.net/uNak5/
var lines= new Array();
lines[0]= new Kinetic.Line({
points: [73+10, 70+10, 340+10, 23+10],
stroke: 'red',
strokeWidth: 7,
});
lines[0].on('mouseover', function() {
lines[a].hide();
layer.draw();;
});
lines[1]= new Kinetic.Line({
points: [53, 50, 320, 03],
stroke: 'red',
strokeWidth: 7,
});
lines[1].on('mouseover', function() {
//document.body.style.cursor = 'pointer';
lines[1].hide();
layer.draw();;
});
layer.add(lines[0]);
layer.add(lines[1]);

http://jsfiddle.net/uNak5/1/
I updated the code, you had the reference to your array item set to
lines[a]
rather that
lines[0]
in your listener
.on('mouseover', function());

As in example http://openlayers.org/dev/examples/graphic-name.html ...
I tried drawing my feature geometry as a flag but I realized that OpenLayers always uses the centroid of the geometry to place the feature at the specified point(latitude/longitude), whereas I wish the base of the flag to be placed at the specified point. Changing the value of Renderer.symbol did not make any effect neither did the graphicXOffset/graphicYOffset.
//my flag geometry
OpenLayers.Renderer.symbol.flag = [0, 0, 0, 140, 120, 140, 120, 60, 4, 60, 4, 0, 0, 0];
//create vector layer with default and select styles
myVectorLayer = new OpenLayers.Layer.Vector("Flag Geometry", {
renderers: renderer,
isBaseLayer: true,
graphicName: flag,
rotation: 180,
pointRadius: 15,
projection: new OpenLayers.Projection("EPSG:900913"),
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
fillColor: "red",
strokeColor: "gray",
label: "${label}",
fontColor: "${favColor}",
fontSize: "12px",
fontFamily: "Courier New, monospace",
fontWeight: "bold",
labelYOffset: 2 //for flag
}, OpenLayers.Feature.Vector.style["default"])),
"select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
}, OpenLayers.Feature.Vector.style["select"]))
})
});
var flag = new OpenLayers.Geometry.Point(latitude, longitude);
var flagFeature = new OpenLayers.Feature.Vector(flag);
myVectorLayer.addFeatures([flagFeature]);

To overcome this base point problem I changed the drawing method as follows:
myVectorLayer = new OpenLayers.Layer.Vector("Flag Geometry", {
renderers: renderer,
isBaseLayer: true,
projection: new OpenLayers.Projection("EPSG:900913"),
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
fillColor: "red",
strokeColor: "gray",
label: "${label}",
fontColor: "${favColor}",
fontSize: "12px",
fontFamily: "Courier New, monospace",
fontWeight: "bold",
labelYOffset: 2 //for flag
}, OpenLayers.Feature.Vector.style["default"])),
"select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
}, OpenLayers.Feature.Vector.style["select"]))
})
});
var pointList = [];
var xs = [0, 0, 240, 240, 8, 8, 0];
var ys = [0, 280, 280, 120, 120, 0, 0];
for(var p=0; p<6; ++p) {
var newPoint = new OpenLayers.Geometry.Point(camera.get('latitude') + xs[p],
camera.get('longitude') + ys[p]);
pointList.push(newPoint);
}
pointList.push(pointList[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
var flagVector = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([linearRing]));
flagVector.attributes= {
label: 'label',
favColor: 'blue', //favorite color
align: "cm"
};
myVectorLayer.addFeatures([flagVector]);
This though will make the geometry zoom with map zoom not as the previous way.