react-leaflet#Tooltip JavaScript Examples
The following examples show how to use
react-leaflet#Tooltip.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ZipCodeGeoJson.js From landlord with MIT License | 6 votes |
|
function ZipCodeGeoJson({feature}) {
const map = useMap()
const pathOptions = {
weight: 2,
opacity: 1,
color: 'green',
fillOpacity: 0.1,
fillColor: 'transparent',
}
const resetHighlight = (e) => {
const layer = e.target;
layer.setStyle(pathOptions);
layer.unbindTooltip()
layer.bindTooltip(feature.properties.ZIP, {permanent: true, opacity: 0.5});
// layer.bindTooltip(feature.properties.ZIP, {className: 'normalTooltip', permanent: true, opacity: 0.5});
}
const highlight = (e) => {
const layer = e.target;
layer.setStyle({
fillOpacity: .5,
fillColor: 'yellow',
});
layer.unbindTooltip()
layer.bindTooltip(feature.properties.ZIP, {permanent: true, opacity: 1});
// layer.bindTooltip(feature.properties.ZIP, {className: 'highlightedTooltip', permanent: true, opacity: 1});
}
const zoomToFeature = (e) => {
map.fitBounds(e.target.getBounds());
}
return <GeoJSON key={feature.properties.ZIP}
data={feature} style={pathOptions}
eventHandlers={{
click: zoomToFeature,
mouseout: resetHighlight,
mouseover: (e) => highlight(e, feature.properties.ZIP)
}}>
<Tooltip permanent={true} opacity={.5}>{feature.properties.ZIP}</Tooltip>
</GeoJSON>
}
Example #2
| Source File: food.jsx From NGS_WorldMap with MIT License | 6 votes |
|
Template= (props) => {
const {t} = useTranslation();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.food[props.id]));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=food__"+props.id).then(response=>response.json()).then(d=>setData(d)) : setData([])},[props.id, marker]);
if (data !== null){return(marker ? (data.map((x=>
<Marker icon={iconLib[props.id]} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window>
<header>
<span><menuicon/> {t("items:food."+props.id)}</span>
</header>
<content>
{t("ui:LegendMenu.Categories.food")}
<br/>
{t("ui:Map.type")}: {t("ui:Map.foodType."+props.type)}
<br/>
{x.notable === true ? <>
{t("items:food.description.prefix.notable")}
<br/>
</>:<Fragment/>}
{t("ui:Map.placedBy")}: {x.contributer}
<id>ID: {props.id}{x.id}</id>
</content>
</tooltip-window></Tooltip>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
}
Example #3
| Source File: containers.jsx From NGS_WorldMap with MIT License | 5 votes |
|
Load = {
Red:()=>{
const {t} = useTranslation();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.container.red));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=container__red").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return (marker ? (data.map((x=>
<Marker
icon={window.localStorage_Checked.redContainers && window.localStorage_Checked.redContainers.indexOf(x.id)>-1 ? iconLib.redBoxChecked : iconLib.redBox}
position={[x.lat,x.lng]}
eventHandlers={{
contextmenu:(e)=>{
if(e.target.getIcon() === iconLib.redBox){
e.target.setIcon(iconLib.redBoxChecked);
if(!window.localStorage_Checked.redContainers){
window.localStorage_Checked.redContainers = []
}
window.localStorage_Checked.redContainers[window.localStorage_Checked.redContainers.length]=x.id;
localStorage.setItem("checked",JSON.stringify(window.localStorage_Checked))
}else{
e.target.setIcon(iconLib.redBox);
var mark = window.localStorage_Checked.redContainers.indexOf(x.id);
window.localStorage_Checked.redContainers.splice(mark,1);
localStorage.setItem("checked",JSON.stringify(window.localStorage_Checked))
}
}
}}
>
<Tooltip direction='top'><tooltip-window>
<header>
<span><menuicon/> {t("items:container.red.title")}</span>
</header>
<content>
{t("ui:Map.placedBy")}: {x.contributer}
<id>ID: {x.id}</id>
</content>
</tooltip-window></Tooltip>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
},
Green:()=>{
const {t} = useTranslation();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.container.green));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=container__green").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return (marker ? (data.map((x=>
<Marker icon={iconLib.greenBox} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window>
<header>
<span><menuicon/> {t("items:container.green.title")}</span>
</header>
<content>
{t("ui:Map.placedBy")}: {x.contributer}
<id>ID: {x.id}</id>
</content>
</tooltip-window></Tooltip>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
}
}
Example #4
| Source File: minerals.jsx From NGS_WorldMap with MIT License | 5 votes |
|
Template = (props) => {
const {t} = useTranslation();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.mineral[props.id]));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=mineral__"+props.id).then(response=>response.json()).then(d=>setData(d)) : setData([])},[props.id, marker]);
if(data !== null){return(marker ? (
props.id === "photonscale" ? (
data.map((x=>
<Circle
center={[x.lat,x.lng]}
radius={30}
pathOptions={{
color: 'pink',
fillColor: 'lightblue',
fillOpacity: '0.25'
}}
>
<Marker icon={iconLib[props.id]} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window>
<header>
<span><menuicon/> {t("items:mineral."+props.id+".title")}</span>
</header>
<content>
{t("ui:LegendMenu.Categories.minerals")}
<br/>
{t("ui:Map.placedBy")}: {x.contributer}
<id>ID: {props.id}{x.id}</id>
</content>
</tooltip-window></Tooltip>
</Marker>
</Circle>
))
) : (
data.map((x=>
<Marker icon={iconLib[props.id]} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window>
<header>
<span><menuicon/> {t("items:mineral."+props.id+".title")}</span>
</header>
<content>
{t("ui:LegendMenu.Categories.minerals")}
<br/>
{t("ui:Map.placedBy")}: {x.contributer}
<id>ID: {props.id}{x.id}</id>
</content>
</tooltip-window></Tooltip>
</Marker>
))
)
):<Fragment/>)}else{return <Fragment/>}
}
Example #5
| Source File: landmarks.jsx From NGS_WorldMap with MIT License | 4 votes |
|
Load = {
Battledia:()=>{
const {t} = useTranslation();
const popupRef = useRef();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
const [tier,setTier] = useState(0);
const handleSelectChange=(e)=>setTier(e.target.value);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.landmark.battledia));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("//raw.githubusercontent.com/kosnag/NGS_WorldMap/master/public/assets/data/battledias.json").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return(marker ? (data.map((x=>
<>{x.id === "blue" ?
<>{
x.available === true ?
<>{(()=>{
const jsx = [];
for(var w=0; w<x.coordinates.length; w++){jsx.push(
<Marker icon={iconLib.battledia} position={[x.coordinates[w].lat,x.coordinates[w].lng]}>
<Tooltip direction='top'><tooltip-window>
<header>
<span><menuicon/> {t("battledias:blue.title")}</span>
</header>
<content>
{t("items:landmark.battledia.title")}
<id>ID: {x.id}</id>
</content>
</tooltip-window></Tooltip>
<Popup ref={popupRef}><popup-window>
<header>
<span><menuicon/> {t("items:landmark.battledia.title")}</span><closebutton onClick={()=>popupRef.current._source._map._popup._closeButton.click()}/>
</header>
<content>
<select onChange={handleSelectChange}>
{(()=>{
const jsx = [];
for (var i=0; i<x.ranks.length; i++){
jsx.push(<option value={i}>{t("ui:Map.rank")} {i+1}</option>)
}
return jsx;
})()}
</select>
<br/><br/>
<name>{t("battledias:blue.title")}</name>
<br/>
<info>
<div>
<level>
<span>{t("ui:Map.maxPlayers")}</span>
<border/>
<value>
{x.ranks[tier] != null ? <>{x.ranks[tier].players}</> : <Fragment/>}
</value>
</level>
<level>
<span>{t("ui:Map.requiredBP")}</span>
<border/>
<value>
{x.ranks[tier] != null ? <>{x.ranks[tier].minBP}</> : <Fragment/>}
</value>
</level>
<level>
<span>{t("ui:Map.enemyLv")}</span>
<border/>
<value>
{x.ranks[tier] != null ? <>{x.ranks[tier].enemyLv}</> : <Fragment/>}
</value>
</level>
</div>
</info>
<cont>
<img src={x.img_url} alt="" />
{(()=>{
const jsx = [];
for (var i=0; i<x.ranks.length; i++){// eslint-disable-next-line
jsx.push(<>{(()=>{
if(x.ranks[tier] != null){return (// eslint-disable-next-line
<info className={tier == i ? "" : "hidden"}>
<span>{t("ui:Map.rewards.guaranteed")}</span>
<border/>
<rewards>
<div>
{(x.ranks[i].rewards.map((y=><>
{y.count != null ? <>
<l>{t(y.item)}</l>
<r>{Number.isInteger(y.count) === true && (
y.item === "rewards:value.seasonalpoints"
||
y.item === "rewards:value.meseta"
||
y.item === "rewards:value.experience"
) ? <>{y.count}</>
:
<>{Number.isInteger(y.count) === true ?
<>x{y.count}</>
:
<>{y.count}</>}
</>
}</r>
</>
:
<full>{t(y.item)}</full>
}
</>)))}
</div>
</rewards>
</info>
)}
})()}</>)
}
return jsx;
})()}
</cont>
<span>{t("ui:Map.clearCondition")}</span>
<border/>
{t("battledias:blue.clearCondition")}
{x.ranks[tier].sp_fail_condition ? <>
{x.ranks[tier].sp_fail_condition === true ? <>
<br/><br/>
<span>{t("ui:Map.failCondition")}</span>
<border/>
{t("battledias:blue.failCondition")}
</> : <Fragment/>}
</> : <Fragment/>}
<br/><br/>
<span>{t("ui:Map.description")}</span>
<border/>
{t("battledias:blue.description")}
</content>
</popup-window></Popup>
</Marker>
)}
return jsx;
})()}
</>
:
<Fragment/>
}
</>
:
<Marker icon={iconLib.battledia} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window>
<header>
<span><menuicon/> {t("battledias:regular."+x.id)}</span>
</header>
<content>
{t("items:landmark.battledia.title")}
<id>ID: {x.id}</id>
</content>
</tooltip-window></Tooltip>
<Popup ref={popupRef}><popup-window>
<header>
<span><menuicon/> {t("items:landmark.battledia.title")}</span><closebutton onClick={()=>popupRef.current._source._map._popup._closeButton.click()}/>
</header>
<content>
<select onChange={handleSelectChange}>
{(()=>{
const jsx = [];
for (var i=0; i<x.ranks.length; i++){
jsx.push(<option value={i}>{t("ui:Map.rank")} {i+1}</option>)
}
return jsx;
})()}
</select>
<br/><br/>
<name>{t("battledias:regular."+x.id)}</name>
<br/>
<info>
<div>
<level>
<span>{t("ui:Map.maxPlayers")}</span>
<border/>
<value>{x.players}</value>
</level>
<level>
<span>{t("ui:Map.requiredBP")}</span>
<border/>
<value>
{x.ranks[tier] != null ? <>{x.ranks[tier].minBP}</> : <Fragment/>}
</value>
</level>
<level>
<span>{t("ui:Map.enemyLv")}</span>
<border/>
<value>
{x.ranks[tier] != null ? <>{x.ranks[tier].enemyLv}</> : <Fragment/>}
</value>
</level>
</div>
</info>
<cont>
<img src="./assets/images/banners/other/battledia.png" alt="" />
{(()=>{
const jsx = [];
for (var i=0; i<x.ranks.length; i++){// eslint-disable-next-line
jsx.push(<>{(()=>{
if(x.ranks[tier] != null){return (// eslint-disable-next-line
<info className={tier == i ? "" : "hidden"}>
<span>
{(()=>{
if(x.type === "purple"){return t("ui:Map.rewards.possible")}
if(x.type === "yellow"){return t("ui:Map.rewards.guaranteed")}
})()}
</span>
<border/>
<rewards>
<div>
{(x.ranks[i].rewards.map((y=><>
{(()=>{
if (y.count != null){return (<>
<l>{t(y.item)}</l>
<r>{(()=>{if(
Number.isInteger(y.count) === true && (
y.item === "rewards:value.seasonalpoints"
||
y.item === "rewards:value.meseta"
||
y.item === "rewards:value.experience"
)
){
return (<>{y.count}</>)
} else if (Number.isInteger(y.count) === true){
return (<>x{y.count}</>)
} else {
return (<>{y.count}</>)
}})()}</r>
</>);
} else {
return (<full>{t(y.item)}</full>);
}})()}
</>)))}
</div>
</rewards>
</info>
)}
})()}</>)
}
return jsx;
})()}
</cont>
<span>{t("ui:Map.clearCondition")}</span>
<border/>
{t("battledias:type."+x.type+".clearCondition")}
<br/><br/>
<span>{t("ui:Map.description")}</span>
<border/>
{t("battledias:type."+x.type+".description")}
</content>
</popup-window></Popup>
</Marker>
}</>
))):<Fragment/>)}else{return <Fragment/>}
},
Cocoon:()=>{
const {t} = useTranslation();
const popupRef = useRef();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.landmark.cocoon));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("//raw.githubusercontent.com/kosnag/NGS_WorldMap/master/public/assets/data/cocoons.json").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return(marker?(data.map((x=>
<Marker icon={iconLib.cocoon} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window>
<header>
<span><menuicon/> {t("cocoons:"+x.id+".title")}</span>
</header>
<content>
{t("items:landmark.cocoon.title")}
<id>ID: {x.id}</id>
</content>
</tooltip-window></Tooltip>
<Popup ref={popupRef}><popup-window>
<header>
<span><menuicon/> {t("items:landmark.cocoon.title")}</span><closebutton onClick={()=>popupRef.current._source._map._popup._closeButton.click()}/>
</header>
<content>
<name>{t("cocoons:"+x.id+".title")}</name>
<br/>
<info>
<div>
<level>
<span>{t("ui:Map.maxPlayers")}</span>
<border/>
<value>{x.players}</value>
</level>
<level>
<span>{t("ui:Map.recommendedBP")}</span>
<border/>
<value>{x.minBP}</value>
</level>
<level>
<span>{t("ui:Map.enemyLv")}</span>
<border/>
<value>{x.enemyLv}</value>
</level>
</div>
</info>
<cont>
<img src="./assets/images/banners/other/trainia.png" alt="" />
<info>
<span>{t("ui:Map.rewards.firstTime")}</span>
<border/>
<rewards>
<div>
<l>{t("rewards:value.skillpoint")}</l>
<r>x1</r>
</div>
</rewards>
</info>
</cont>
<span>{t("ui:Map.clearCondition")}</span>
<border/>
{t("cocoons:"+x.id+".clearCondition")}
<br/><br/>
<span>{t("ui:Map.subMissions")}</span>
<border/>
<submission-divider/> {t("cocoons:"+x.id+".subMission1")}
<br/>
<submission-divider/> {t("cocoons:"+x.id+".subMission2")}
<br/>
<submission-divider/> {t("cocoons:"+x.id+".subMission3")}
<br/><br/>
<span>{t("ui:Map.description")}</span>
<border/>
{t("cocoons:"+x.id+".description")}
</content>
</popup-window></Popup>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
},
Mag:()=>{
const {t} = useTranslation();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.landmark.mag));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=landmark__mag").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return(marker ? (data.map((x=>
<Marker icon={iconLib.mag} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window>
<header>
<span><menuicon/> {t("mags:type."+x.string)}</span>
</header>
<content>
{t("items:landmark.mag.title")}
<id>ID: {x.string}</id>
</content>
</tooltip-window></Tooltip>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
},
Ryuker:()=>{
const {t} = useTranslation();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.landmark.ryuker));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=landmark__ryuker").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return(marker ? (data.map((x=>
<Marker icon={iconLib.ryuker} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window>
<header>
<span><menuicon/> {t("ryukers:"+x.string)}</span>
</header>
<content>
{t("items:landmark.ryuker.title")}
<id>ID: {x.string}</id>
</content>
</tooltip-window></Tooltip>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
},
Tower:()=>{
const {t} = useTranslation();
const popupRef = useRef();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.landmark.tower));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("//raw.githubusercontent.com/kosnag/NGS_WorldMap/master/public/assets/data/towers.json").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return(marker ? (data.map((x=>
<Marker icon={iconLib.tower} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window>
<header>
<span><menuicon/> {t("towers:"+x.id+".title")}</span>
</header>
<content>
{t("items:landmark.tower.title")}
<id>ID: {x.id}</id>
</content>
</tooltip-window></Tooltip>
<Popup ref={popupRef}><popup-window>
<header>
<span><menuicon/> {t("items:landmark.tower.title")}</span><closebutton onClick={()=>popupRef.current._source._map._popup._closeButton.click()}/>
</header>
<content>
<name>{t("towers:"+x.id+".title")}</name>
<br/>
<info>
<div>
<level>
<span>{t("ui:Map.maxPlayers")}</span>
<border/>
<value>{x.players}</value>
</level>
<level>
<span>{t("ui:Map.recommendedBP")}</span>
<border/>
<value>{x.minBP}</value>
</level>
<level>
<span>{t("ui:Map.enemyLv")}</span>
<border/>
<value>{x.enemyLv}</value>
</level>
</div>
</info>
<cont>
<img src="./assets/images/banners/other/trainia.png" alt="" />
<info>
<span>{t("ui:Map.rewards.firstTime")}</span>
<border/>
<rewards>
<div>
<l>{t("rewards:value.skillpoint")}</l>
<r>x4</r>
</div>
</rewards>
</info>
</cont>
<span>{t("ui:Map.clearCondition")}</span>
<border/>
{t("towers:"+x.id+".clearCondition")}
<br/><br/>
<span>{t("ui:Map.subMissions")}</span>
<border/>
<submission-divider/> {t("towers:"+x.id+".subMission1")}
<br/>
<submission-divider/> {t("towers:"+x.id+".subMission2")}
<br/>
<submission-divider/> {t("towers:"+x.id+".subMission3")}
<br/><br/>
<span>{t("ui:Map.description")}</span>
<border/>
{t("towers:"+x.id+".description")}
</content>
</popup-window></Popup>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
},
UQ:()=>{
const {t} = useTranslation();
const popupRef = useRef();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
const [tier,setTier] = useState(0);
const handleSelectChange=(e)=>setTier(e.target.value);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.landmark.urgent));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("//raw.githubusercontent.com/kosnag/NGS_WorldMap/master/public/assets/data/urgents.json").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return(marker ? (data.map((x=>
<Marker icon={iconLib.urgent} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window>
<header>
<span><menuicon/> {t("urgents:"+x.id+".title")}</span>
</header>
<content>
{t("items:landmark.urgent.title")}
<id>ID: {x.id}</id>
</content>
</tooltip-window></Tooltip>
<Popup ref={popupRef}><popup-window>
<header>
<span><menuicon/> {t("items:landmark.urgent.title")}</span><closebutton onClick={()=>popupRef.current._source._map._popup._closeButton.click()}/>
</header>
<content>
<select onChange={handleSelectChange}>
{(()=>{
const jsx = [];
for (var i=0; i<x.ranks.length; i++){
jsx.push(<option value={i}>{t("ui:Map.rank")} {i+1}</option>)
}
return jsx;
})()}
</select>
<br/><br/>
<name>{t("urgents:"+x.id+".title")}</name>
<br/>
<info>
<div>
<level>
<span>{t("ui:Map.maxPlayers")}</span>
<border/>
<value>{x.players}</value>
</level>
<level>
<span>{t("ui:Map.requiredBP")}</span>
<border/>
<value>
{x.ranks[tier] != null ? <>{x.ranks[tier].minBP}</> : <Fragment/>}
</value>
</level>
<level>
<span>{t("ui:Map.enemyLv")}</span>
<border/>
<value>
{x.ranks[tier] != null ? <>{x.ranks[tier].enemyLv}</> : <Fragment/>}
</value>
</level>
</div>
</info>
<cont>
<img src={"./assets/images/banners/urgents/"+x.id+".png"} alt="" />
{(()=>{
const jsx = [];
for (var i=0; i<x.ranks.length; i++){// eslint-disable-next-line
jsx.push(<>{(()=>{
if(x.ranks[tier] != null){return (// eslint-disable-next-line
<info className={tier == i ? "" : "hidden"}>
<span>{t("ui:Map.rewards.firstTime")}</span>
<border/>
<rewards>
{(x.firstRewards.map((y=>
<div>
<l>{t(y.item)}</l>
<r>
{(()=>{switch (y.item){
case "meseta":
case "season_points":
case "experience":
return (<>{y.count}</>)
default:
return (<>x{y.count}</>)
}})()}
</r>
</div>
)))}
</rewards>
<br/>
<span>{t("ui:Map.rewards.guaranteed")}</span>
<border/>
<rewards>
{(x.ranks[i].rewards.map((y=>
<div>
<l>{t(y.item)}</l>
<r>
{(()=>{switch (y.item){
case "meseta":
case "season_points":
case "experience":
return (<>{y.count}</>)
default:
return (<>x{y.count}</>)
}})()}
</r>
</div>
)))}
</rewards>
</info>
)}
})()}</>)
}
return jsx;
})()}
</cont>
<span>{t("ui:Map.clearCondition")}</span>
<border/>
{t("urgents:"+x.id+".clearCondition")}
<br/><br/>
<span>{t("ui:Map.description")}</span>
<border/>
{t("urgents:"+x.id+".description")}
</content>
</popup-window></Popup>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
},
Trinitas:()=>{
const {t} = useTranslation();
const popupRef = useRef();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.landmark.trinitas));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("//raw.githubusercontent.com/kosnag/NGS_WorldMap/master/public/assets/data/trinitas.json").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return(marker ? (data.map((x=>
<Marker icon={iconLib.trinitas} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window>
<header>
<span><menuicon/> {t("trinitas:"+x.id+".title")}</span>
</header>
<content>
{t("items:landmark.trinitas.title")}
<id>ID: {x.id}</id>
</content>
</tooltip-window></Tooltip>
<Popup ref={popupRef}><popup-window>
<header>
<span><menuicon/> {t("items:landmark.trinitas.title")}</span><closebutton onClick={()=>popupRef.current._source._map._popup._closeButton.click()}/>
</header>
<content>
<name>{t("trinitas:"+x.id+".title")}</name>
<br/>
<info>
<div>
<level>
<span>{t("ui:Map.maxPlayers")}</span>
<border/>
<value>{x.players}</value>
</level>
<level>
<span>{t("ui:Map.requiredBP")}</span>
<border/>
<value>{x.minBP}</value>
</level>
<level>
<span>{t("ui:Map.enemyLv")}</span>
<border/>
<value>{x.enemyLv}+</value>
</level>
</div>
</info>
<cont>
<img src="./assets/images/banners/other/trinitas.png" alt="" />
<info>
<span>{t("ui:Map.rewards.possible")}</span>
<border/>
<rewards>
<div>
{(x.rewards.map((y=><full>{t(y.item)}</full>)))}
</div>
</rewards>
</info>
</cont>
<span>{t("ui:Map.clearCondition")}</span>
<border/>
{t("trinitas:"+x.id+".clearCondition")}
<br/><br/>
<span>{t("ui:Map.failCondition")}</span>
<border/>
{t("trinitas:"+x.id+".failCondition")}
<br/><br/>
<span>{t("ui:Map.description")}</span>
<border/>
{t("trinitas:"+x.id+".description")}
</content>
</popup-window></Popup>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
}}
Example #6
| Source File: other.jsx From NGS_WorldMap with MIT License | 4 votes |
|
Load = {
Veteran:()=>{
const {t} = useTranslation();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.other.veteran));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=other__veteran").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return (marker ? (data.map((x=>
<Marker icon={iconLib.veteran} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
<header>
<span><menuicon/> {t("items:other.veteran.title")}</span>
</header>
<content>
{t("enemies:"+x.string)}
<br/>
{t("ui:Map.placedBy")}: {x.contributer}
<id>ID: veteran{x.id}:{x.string}</id>
</content>
</tooltip-window></Tooltip>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
},
AlphaReactor:()=>{
const {t} = useTranslation();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.other.alphareactor));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=other__alphareactor").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return (marker ? (data.map((x=>
<Marker icon={iconLib.alphareactor} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
<header>
<span><menuicon/> {t("items:other.alphareactor.title")}</span>
</header>
<content>
{t("items:other.alphareactor.description")}
<br/>
{t("ui:Map.placedBy")}: {x.contributer}
<id>ID: alphareactor{x.id}</id>
</content>
</tooltip-window></Tooltip>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
},
Snoal:()=>{
const {t} = useTranslation();
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.other.snoal));
return ()=>clearInterval(i);
});
const data = [
{"lat": "-201","lng": "522",},
{"lat": "-172","lng": "562",},
{"lat": "-255","lng": "568",},
{"lat": "-298","lng": "582",},
{"lat": "-348","lng": "579",}
];
return (marker ? (data.map((x=>
<Circle
center={[x.lat,x.lng]}
radius={20}
pathOptions={{
color: 'gold',
fillColor: 'yellow',
fillOpacity: '0.25'
}}
>
<Marker icon={iconLib.snoal} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
<header>
<span><menuicon/> {t("items:other.snoal.title")}</span>
</header>
<content>
{t("items:other.snoal.description")}
</content>
</tooltip-window></Tooltip>
</Marker>
</Circle>
))):<Fragment/>)
},
StellarFragment:()=>{
const {t} = useTranslation();
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.other.stellarseed));
return ()=>clearInterval(i);
});
const data = [
{"lat": -1068, "lng": 1423.5}
]
return(marker ? (data.map((x=>
<Circle
center={[x.lat,x.lng]}
radius={35}
pathOptions={{
color: 'gold',
fillColor: 'yellow',
fillOpacity: '0.25'
}}
>
<Marker icon={iconLib.stellarseed} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
<header>
<span><menuicon/> {t("items:other.stellarseed.title")}</span>
</header>
<content>
{t("items:other.stellarseed.description")}
</content>
</tooltip-window></Tooltip>
</Marker>
</Circle>
))):<Fragment/>)
},
StellarGrace:()=>{
const {t} = useTranslation();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.other.stellargrace));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=other__stellargrace").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return (marker ? (data.map((x=>
<Marker icon={(()=>{
if(x.string === "gold"){return iconLib.stellarGrace_Gold}
if(x.string === "silver"){return iconLib.stellarGrace_Silver}
if(x.string === "default"){return iconLib.stellarGrace_Default}
})()} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
<header>
<span><menuicon/> {t("items:other.stellargrace.title")}</span>
</header>
<content>
{t("ui:Map.type")}: {t("ui:Map.stellarGraceType."+x.string)}
<br/>
{t("ui:Map.placedBy")}: {x.contributer}
<id>ID: stellargrace{x.id}</id>
</content>
</tooltip-window></Tooltip>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
},
Datapod:()=>{
const {t} = useTranslation();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.other.datapod));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=other__datapod").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return (marker ? (data.map((x=>
<Marker
icon={window.localStorage_Checked.datapods && window.localStorage_Checked.datapods.indexOf(x.string)>-1 ? iconLib.datapodChecked :iconLib.datapod}
position={[x.lat,x.lng]}
eventHandlers={{
contextmenu:(e)=>{
if(e.target.getIcon() === iconLib.datapod){
e.target.setIcon(iconLib.datapodChecked);
if(!window.localStorage_Checked.datapods){
window.localStorage_Checked.datapods = []
}
window.localStorage_Checked.datapods[window.localStorage_Checked.datapods.length]=x.string;
localStorage.setItem("checked",JSON.stringify(window.localStorage_Checked))
}else{
e.target.setIcon(iconLib.datapod);
var mark = window.localStorage_Checked.datapods.indexOf(x.string);
window.localStorage_Checked.datapods.splice(mark,1);
localStorage.setItem("checked",JSON.stringify(window.localStorage_Checked))
}
}
}}
>
<Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
<header>
<span><menuicon/> {t("items:other.datapod.title")}</span>
</header>
<content>
{t("datapods:"+x.string)}
<br/>
{t("ui:Map.placedBy")}: {x.contributer}
<id>ID: {x.string}</id>
</content>
</tooltip-window></Tooltip>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
},
BGM:()=>{
const {t} = useTranslation();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.other.musicplace));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=other__musicplace").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return (marker ? (data.map((x=>
<Marker icon={iconLib.musicplace} position={[x.lat,x.lng]}>
<Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
<header>
<span><menuicon/> {t("items:other.musicplace.title")}</span>
</header>
<content>
{x.string}
<br/>
{t("ui:Map.placedBy")}: {x.contributer}
</content>
</tooltip-window></Tooltip>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
},
Mischief:()=>{
const {t} = useTranslation();
const [data,setData] = useState([]);
const [marker,setMarker] = useState([]);
useEffect(()=>{
var i = setInterval(()=>setMarker(window.localStorage_Settings.other.mischief));
return ()=>clearInterval(i);
});
useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=other__mischief").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
if(data !== null){return (marker ? (data.map((x=>
<Marker
icon={window.localStorage_Checked.mischief && window.localStorage_Checked.mischief.indexOf(x.id)>-1 ? iconLib.mischiefChecked : iconLib.mischief}
position={[x.lat,x.lng]}
eventHandlers={{
contextmenu:(e)=>{
if(e.target.getIcon() === iconLib.mischief){
e.target.setIcon(iconLib.mischiefChecked);
if(!window.localStorage_Checked.mischief){
window.localStorage_Checked.mischief = []
}
window.localStorage_Checked.mischief[window.localStorage_Checked.mischief.length]=x.id;
localStorage.setItem("checked",JSON.stringify(window.localStorage_Checked))
}else{
e.target.setIcon(iconLib.mischief);
var mark = window.localStorage_Checked.mischief.indexOf(x.id);
window.localStorage_Checked.mischief.splice(mark,1);
localStorage.setItem("checked",JSON.stringify(window.localStorage_Checked))
}
}
}}
>
<Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
<header>
<span><menuicon/> {t("items:other.mischief.title")}</span>
</header>
<content>
{t("ui:Map.placedBy")}: {x.contributer}
<id>ID: mischief{x.id}</id>
</content>
</tooltip-window></Tooltip>
</Marker>
))):<Fragment/>)}else{return <Fragment/>}
}
}
