first commit

master
Reza Ashrafi 4 years ago
parent d6614a8a71
commit 3652207124
  1. 22
      src/InteractiveIranMap/IranMap.js
  2. 312
      src/InteractiveIranMap/constants/iransIslands.js
  3. 48
      src/InteractiveIranMap/constants/iransSeas.js
  4. 11
      src/InteractiveIranMap/index.js
  5. 11332
      yarn.lock

@ -13,8 +13,8 @@ const InteractiveIranMap = (props) => {
return ( return (
<div <div
style={{ style={{
height: props.height, height: '100%',
width: props.height * (1070.6 / 980), width: '100%',
backgroundColor: props.backgroundColor, backgroundColor: props.backgroundColor,
}} }}
> >
@ -56,7 +56,7 @@ const InteractiveIranMap = (props) => {
fill={ fill={
props.selectedArea === iranSea.name props.selectedArea === iranSea.name
? props.selectedAreaColor ? props.selectedAreaColor
: "#00BDFF" : "white"
} }
stroke="#9B9B9B" stroke="#9B9B9B"
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
@ -75,8 +75,8 @@ const InteractiveIranMap = (props) => {
data-for={`${iranIsland.name}Tooltip`} data-for={`${iranIsland.name}Tooltip`}
fill={ fill={
props.selectedArea === iranIsland.name props.selectedArea === iranIsland.name
? props.selectedAreaColor ? 'white'
: props.defaultAreasColor : 'white'
} }
stroke="#9B9B9B" stroke="#9B9B9B"
points={iranIsland.points} points={iranIsland.points}
@ -100,7 +100,7 @@ const InteractiveIranMap = (props) => {
data-tip={`${iranState.persianName}`} data-tip={`${iranState.persianName}`}
data-for={`${iranState.name}Tooltip`} data-for={`${iranState.name}Tooltip`}
> >
{iranState.persianNickName} {/* {iranState.persianNickName} */}
</text> </text>
))} ))}
@ -121,12 +121,12 @@ const InteractiveIranMap = (props) => {
data-tip={`${iranSea.persianName}`} data-tip={`${iranSea.persianName}`}
data-for={`${iranSea.name}Tooltip`} data-for={`${iranSea.name}Tooltip`}
> >
{iranSea.persianNickName} {/* {iranSea.persianNickName} */}
</text> </text>
))} ))}
</svg> </svg>
{iransStatesProperties.map((state, index) => ( {/* {iransStatesProperties.map((state, index) => (
<ReactTooltip <ReactTooltip
key={index} key={index}
id={`${state.name}Tooltip`} id={`${state.name}Tooltip`}
@ -151,7 +151,7 @@ const InteractiveIranMap = (props) => {
textColor="#000000FF" textColor="#000000FF"
backgroundColor="#FFFFFFFF" backgroundColor="#FFFFFFFF"
/> />
))} ))} */}
</div> </div>
); );
}; };
@ -167,8 +167,8 @@ InteractiveIranMap.propTypes = {
}; };
InteractiveIranMap.defaultProps = { InteractiveIranMap.defaultProps = {
defaultAreasColor: "#fff", defaultAreasColor: "#D6D6D6",
selectedAreaColor: "red", selectedAreaColor: "yellow",
backgroundColor: "white", backgroundColor: "white",
useTestData: false, useTestData: false,
}; };

@ -1,158 +1,158 @@
export const iransIslandsProperties = [ export const iransIslandsProperties = [
{ // {
id: "b34", // id: "b34",
parentId: "a1", // parentId: "a1",
name: "khark", // name: "khark",
persianName: "خارک", // persianName: "خارک",
persianNickName: "خارک", // persianNickName: "خارک",
ltrRotate: "", // ltrRotate: "",
ltrX: "", // ltrX: "",
ltrY: "", // ltrY: "",
points: // points:
"407.2,756.3 406.5,754 406.3,751.2 408.7,751.7 408.8,751.8 409.9,750.7 410.8,753.5 410.6,755.1 410.4,756.6 409.3,759.7 ", // "407.2,756.3 406.5,754 406.3,751.2 408.7,751.7 408.8,751.8 409.9,750.7 410.8,753.5 410.6,755.1 410.4,756.6 409.3,759.7 ",
}, // },
{ // {
id: "b35", // id: "b35",
parentId: "a1", // parentId: "a1",
name: "kish", // name: "kish",
persianName: "کیش", // persianName: "کیش",
persianNickName: "کیش", // persianNickName: "کیش",
ltrRotate: "", // ltrRotate: "",
ltrX: "", // ltrX: "",
ltrY: "", // ltrY: "",
points: // points:
"621.2,946 618.8,944.8 617.2,942 618.2,940.3 619.4,939.4 620.7,939 622.2,939.1 623.3,939.4 625.4,939.7 626.9,940.3 627.1,941.4 627.1,942 627.2,942 627.3,942.2 628,942.9 628.2,944.2 627.7,945.6 626.5,946.3 ", // "621.2,946 618.8,944.8 617.2,942 618.2,940.3 619.4,939.4 620.7,939 622.2,939.1 623.3,939.4 625.4,939.7 626.9,940.3 627.1,941.4 627.1,942 627.2,942 627.3,942.2 628,942.9 628.2,944.2 627.7,945.6 626.5,946.3 ",
}, // },
{ // {
id: "b36", // id: "b36",
parentId: "a1", // parentId: "a1",
name: "hormoz", // name: "hormoz",
persianName: "هرمز", // persianName: "هرمز",
persianNickName: "هرمز", // persianNickName: "هرمز",
ltrRotate: "", // ltrRotate: "",
ltrX: "", // ltrX: "",
ltrY: "", // ltrY: "",
points: // points:
"765.5,906.9 765.8,904 767.2,902.1 769.1,901.5 769.9,902.2 770.7,902.4 771.5,903.3 772,904.8 771.7,906.2 770.8,907.1 769.7,907.8 768.3,907.9 ", // "765.5,906.9 765.8,904 767.2,902.1 769.1,901.5 769.9,902.2 770.7,902.4 771.5,903.3 772,904.8 771.7,906.2 770.8,907.1 769.7,907.8 768.3,907.9 ",
}, // },
{ // {
id: "b37", // id: "b37",
parentId: "a1", // parentId: "a1",
name: "gheshm", // name: "gheshm",
persianName: "قشم", // persianName: "قشم",
persianNickName: "قشم", // persianNickName: "قشم",
ltrRotate: "", // ltrRotate: "",
ltrX: "", // ltrX: "",
ltrY: "", // ltrY: "",
points: // points:
"698.8,941.7 698.4,940.6 698,938.5 698.5,937.2 698.5,937 698.4,936.8 697.5,933.9 699,932.2 701.9,933.4 702.5,933 703.1,933.2 705.9,931.6 713.9,928.8 715,928.7 715.8,928.3 718.4,926.7 719.6,925.7 723.7,923.9 724.6,923.9 725.7,924 726,924 726.2,923.9 726.7,923.5 726.4,922.8 727.5,921.6 727.6,920.7 727.4,917.9 727,917 726.1,916.1 725.2,915.3 724.2,913.7 726.8,912 735.2,915.4 736.9,914.9 743.1,910.7 751.1,908.8 753.6,908.8 755,909.1 756.8,909.9 758.4,911.2 759.1,913.4 756.6,915.1 752.9,916.1 752,917 750.7,920 750,921.3 747.6,923.9 747.2,924.7 746.5,925.6 744.3,926.8 743.8,927.4 743.3,927.7 740.4,930.7 738.1,932 736.2,931.2 734.7,929.7 733.8,928.9 730.6,930.6 729.6,931.6 728.1,932.5 726.6,932.5 724,932.1 723.1,932.3 722.1,932.9 718.9,935.2 715.6,936.7 713.6,938.3 712.3,938.9 708.6,939.4 706.3,940 705.3,940.7 704.4,941.2 703.4,941 703.1,940.8 702.7,941.5 701.8,942.1 700.9,942.4 699.7,942.6 ", // "698.8,941.7 698.4,940.6 698,938.5 698.5,937.2 698.5,937 698.4,936.8 697.5,933.9 699,932.2 701.9,933.4 702.5,933 703.1,933.2 705.9,931.6 713.9,928.8 715,928.7 715.8,928.3 718.4,926.7 719.6,925.7 723.7,923.9 724.6,923.9 725.7,924 726,924 726.2,923.9 726.7,923.5 726.4,922.8 727.5,921.6 727.6,920.7 727.4,917.9 727,917 726.1,916.1 725.2,915.3 724.2,913.7 726.8,912 735.2,915.4 736.9,914.9 743.1,910.7 751.1,908.8 753.6,908.8 755,909.1 756.8,909.9 758.4,911.2 759.1,913.4 756.6,915.1 752.9,916.1 752,917 750.7,920 750,921.3 747.6,923.9 747.2,924.7 746.5,925.6 744.3,926.8 743.8,927.4 743.3,927.7 740.4,930.7 738.1,932 736.2,931.2 734.7,929.7 733.8,928.9 730.6,930.6 729.6,931.6 728.1,932.5 726.6,932.5 724,932.1 723.1,932.3 722.1,932.9 718.9,935.2 715.6,936.7 713.6,938.3 712.3,938.9 708.6,939.4 706.3,940 705.3,940.7 704.4,941.2 703.4,941 703.1,940.8 702.7,941.5 701.8,942.1 700.9,942.4 699.7,942.6 ",
}, // },
{ // {
id: "b38", // id: "b38",
parentId: "a1", // parentId: "a1",
name: "lark", // name: "lark",
persianName: "لارک", // persianName: "لارک",
persianNickName: "لارک", // persianNickName: "لارک",
ltrRotate: "", // ltrRotate: "",
ltrX: "", // ltrX: "",
ltrY: "", // ltrY: "",
points: // points:
"759,922 759.3,919.1 760.5,917.5 762.4,916.6 765.7,916.2 766.2,919.9 763.9,922 761.1,923 ", // "759,922 759.3,919.1 760.5,917.5 762.4,916.6 765.7,916.2 766.2,919.9 763.9,922 761.1,923 ",
}, // },
{ // {
id: "b39", // id: "b39",
parentId: "a1", // parentId: "a1",
name: "lavan", // name: "lavan",
persianName: "لاوان", // persianName: "لاوان",
persianNickName: "لاوان", // persianNickName: "لاوان",
ltrRotate: "", // ltrRotate: "",
ltrX: "", // ltrX: "",
ltrY: "", // ltrY: "",
points: // points:
"581.9,925.4 578.2,924.8 577,924.2 576,923.5 574.2,921.9 572.8,920.5 574,919.3 574.6,919.2 575.2,919 576,918.8 581.1,920.4 585.6,920.8 587.2,921.6 590,924.2 587.1,924.8 584.9,924.6 584.5,924.7 583.3,925.4 ", // "581.9,925.4 578.2,924.8 577,924.2 576,923.5 574.2,921.9 572.8,920.5 574,919.3 574.6,919.2 575.2,919 576,918.8 581.1,920.4 585.6,920.8 587.2,921.6 590,924.2 587.1,924.8 584.9,924.6 584.5,924.7 583.3,925.4 ",
}, // },
{ // {
id: "b40", // id: "b40",
parentId: "a1", // parentId: "a1",
name: "faror", // name: "faror",
persianName: "فارور", // persianName: "فارور",
persianNickName: "فارور", // persianNickName: "فارور",
ltrRotate: "", // ltrRotate: "",
ltrX: "", // ltrX: "",
ltrY: "", // ltrY: "",
points: // points:
"653.4,962.4 652.6,961.9 651.8,961.1 651.8,960 651.6,959.3 651.6,958.3 651.9,957.2 652.6,956.4 653.6,955.7 654.9,956.2 655.5,956.8 655.8,957 656.4,957.4 656.8,958 657.2,959.1 655.6,962.4 654.6,962.8 ", // "653.4,962.4 652.6,961.9 651.8,961.1 651.8,960 651.6,959.3 651.6,958.3 651.9,957.2 652.6,956.4 653.6,955.7 654.9,956.2 655.5,956.8 655.8,957 656.4,957.4 656.8,958 657.2,959.1 655.6,962.4 654.6,962.8 ",
}, // },
{ // {
id: "b41", // id: "b41",
parentId: "a1", // parentId: "a1",
name: "hendorabi", // name: "hendorabi",
persianName: "هندورابی", // persianName: "هندورابی",
persianNickName: "هندورابی", // persianNickName: "هندورابی",
ltrRotate: "", // ltrRotate: "",
ltrX: "", // ltrX: "",
ltrY: "", // ltrY: "",
points: // points:
"602,934.5 600.7,933.7 599.5,932.2 600.7,930.3 602.5,930.3 603.3,930.6 604.4,931 605.4,933 603.7,934.7 ", // "602,934.5 600.7,933.7 599.5,932.2 600.7,930.3 602.5,930.3 603.3,930.6 604.4,931 605.4,933 603.7,934.7 ",
}, // },
{ // {
id: "b42", // id: "b42",
parentId: "a1", // parentId: "a1",
name: "hengam", // name: "hengam",
persianName: "هنگام", // persianName: "هنگام",
persianNickName: "هنگام", // persianNickName: "هنگام",
ltrRotate: "", // ltrRotate: "",
ltrX: "", // ltrX: "",
ltrY: "", // ltrY: "",
points: // points:
"731.5,936.7 731.7,934.2 732.6,932.4 733.9,931.3 735.4,931 736.4,932.5 736.6,934.8 735.4,936.6 733.6,937.9 ", // "731.5,936.7 731.7,934.2 732.6,932.4 733.9,931.3 735.4,931 736.4,932.5 736.6,934.8 735.4,936.6 733.6,937.9 ",
}, // },
{ // {
id: "b43", // id: "b43",
parentId: "a1", // parentId: "a1",
name: "siri", // name: "siri",
persianName: "سیری", // persianName: "سیری",
persianNickName: "سیری", // persianNickName: "سیری",
ltrRotate: "", // ltrRotate: "",
ltrX: "", // ltrX: "",
ltrY: "", // ltrY: "",
points: // points:
"654.7,987.2 653.3,986.5 652.8,984.6 654.2,983.6 656.6,982.9 657.3,984.4 657.5,986.4 656.1,987.5 ", // "654.7,987.2 653.3,986.5 652.8,984.6 654.2,983.6 656.6,982.9 657.3,984.4 657.5,986.4 656.1,987.5 ",
}, // },
{ // {
id: "b44", // id: "b44",
parentId: "a1", // parentId: "a1",
name: "abumusa", // name: "abumusa",
persianName: "ابوموسی", // persianName: "ابوموسی",
persianNickName: "ابوموسی", // persianNickName: "ابوموسی",
ltrRotate: "", // ltrRotate: "",
ltrX: "", // ltrX: "",
ltrY: "", // ltrY: "",
points: // points:
"687.5,986.8 688.8,986 690.7,986.5 690.8,988.2 690.2,990.6 688.5,990.5 686.8,989.6 686.5,987.9 ", // "687.5,986.8 688.8,986 690.7,986.5 690.8,988.2 690.2,990.6 688.5,990.5 686.8,989.6 686.5,987.9 ",
}, // },
{ // {
id: "b45", // id: "b45",
parentId: "a1", // parentId: "a1",
name: "tonbebozorg", // name: "tonbebozorg",
persianName: "تنب بزرگ", // persianName: "تنب بزرگ",
persianNickName: "تنب بزرگ", // persianNickName: "تنب بزرگ",
ltrRotate: "", // ltrRotate: "",
ltrX: "", // ltrX: "",
ltrY: "", // ltrY: "",
points: // points:
"704,961.8 703.6,962.7 702.3,962.9 701.7,962 701.3,960.4 702.3,960 703.6,959.9 704.3,960.9 ", // "704,961.8 703.6,962.7 702.3,962.9 701.7,962 701.3,960.4 702.3,960 703.6,959.9 704.3,960.9 ",
}, // },
{ // {
id: "b46", // id: "b46",
parentId: "a1", // parentId: "a1",
name: "tonbekuchak", // name: "tonbekuchak",
persianName: "تنب کوچک", // persianName: "تنب کوچک",
persianNickName: "تنب کوچک", // persianNickName: "تنب کوچک",
ltrRotate: "", // ltrRotate: "",
ltrX: "", // ltrX: "",
ltrY: "", // ltrY: "",
points: // points:
"693.7,963.1 693.5,963.4 693,963.5 692.8,963.2 692.6,962.6 693,962.4 693.5,962.3 693.8,962.7 ", // "693.7,963.1 693.5,963.4 693,963.5 692.8,963.2 692.6,962.6 693,962.4 693.5,962.3 693.8,962.7 ",
}, // },
]; ];

File diff suppressed because one or more lines are too long

@ -1,15 +1,20 @@
// InteractiveIranMap.js // InteractiveIranMap.js
import React from "react"; import React from "react";
import IranMap from "./IranMap"; import IranMap from "./IranMap";
const InteractiveIranMap = () => { const InteractiveIranMap = (props) => {
const [state, setState] = React.useState({ selectedArea: "tehran" }); const [state, setState] = React.useState({ selectedArea: "tehran" });
const selectAreaHandler = (area) => { const selectAreaHandler = (area) => {
setState((prevState) => ({ ...prevState, selectedArea: area.name })); let id = area.id.slice(1, 3);
if (id < 32) {
setState((prevState) => ({ ...prevState, selectedArea: area.name }));
props.onChange(id);
} else {
return;
}
}; };
return ( return (
<div> <div>
<IranMap <IranMap
height={600}
onClick={selectAreaHandler} onClick={selectAreaHandler}
selectedArea={state.selectedArea} selectedArea={state.selectedArea}
useTestData={true} useTestData={true}

11332
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save