Commit 274181e7 authored by Paul Colin Hennig's avatar Paul Colin Hennig
Browse files

add icons and subtext

parent 8931e66f
......@@ -118,7 +118,7 @@
.Interface .suggestions {
all: unset;
position: absolute;
top: 40px;
top: 30px;
left: 60px;
width: 70%;
margin-right: 100px;
......@@ -137,7 +137,7 @@
.Interface .suggestions .name {
font-weight: 600;
overflow: hidden;
width: 250px;
width: 230px;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
......@@ -147,6 +147,7 @@
padding-top: 10px;
padding-left: 15px;
background: var(--background);
height: 40px;
}
.Interface .suggestions li:first-child {
padding-top: 30px;
......@@ -156,3 +157,27 @@
border-bottom-left-radius: calc(45px / 2);
border-bottom-right-radius: calc(45px / 2);
}
.Interface .suggestions .icon {
float: left;
width: 30px;
height: 100%;
margin-top: 8px;
}
.Interface .suggestions .icon svg {
transform: scale(1.3);
}
.Interface .suggestions .text {
width: calc(100% - 30px);
text-overflow: ellipsis;
white-space: nowrap;
}
.Interface .suggestions .text .sub {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 400;
opacity: 50%;
}
......@@ -3,7 +3,31 @@ import "./Interface.css";
import { config } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft, faCrosshairs, faSearch } from "@fortawesome/free-solid-svg-icons";
import {
faChevronLeft,
faChevronRight,
faCrosshairs,
faMapMarkerAlt,
faSearch,
faStethoscope,
faToilet,
faTree,
faUtensils,
faBed,
faBeer,
faChild,
faCity,
faGlassMartiniAlt,
faHamburger,
faHome,
faHospital,
faParking,
faPiggyBank,
faCoffee,
faUmbrellaBeach,
faArchway,
faShoppingCart
} from "@fortawesome/free-solid-svg-icons";
config.autoAddCss = false;
export default class Interface extends Component {
......@@ -50,9 +74,7 @@ export default class Interface extends Component {
? this.state.suggestions.map((sug, i) => {
return (
<li key={i} onClick={() => this.props.goTo(sug)}>
<span className="name" title={sug.properties?.name}>
{sug.properties?.name}
</span>
{suggestion(sug)}
</li>
);
})
......@@ -68,7 +90,7 @@ export default class Interface extends Component {
</button>
</div>
<button onClick={this.openSearch} className="searchButton mapButton">
<FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>
{this.state.search ? <FontAwesomeIcon icon={faChevronRight}></FontAwesomeIcon> : <FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>}
</button>
<button title={!this.props.twoDimensional ? "Switch to 2D-View" : "Switch to 3D-View"} onClick={this.props.switchDimensions} className="switchDimensions mapButton">
{!this.props.twoDimensional ? cubeIcon(25) : surfaceIcon(25)}
......@@ -105,6 +127,57 @@ export default class Interface extends Component {
}
}
const suggestion = sug => {
const selectIcon = sug => {
const fa = i => <FontAwesomeIcon icon={i} />;
//if (icons.includes(v)) return <img alt="" src={`/map_icons/${v}.svg`} />;
if (sug.properties.type === "city") return fa(faCity);
const mapping = [
["hotel", faBed],
["doctors", faStethoscope],
["hospital", faHospital],
["fast_food", faHamburger],
["restaurant", faUtensils],
["park", faTree],
["playground", faChild],
["biergarten", faBeer],
["bar", faGlassMartiniAlt],
["bank", faPiggyBank],
["toilets", faToilet],
["parking", faParking],
["cafe", faCoffee],
["beach", faUmbrellaBeach],
["muesum", faArchway],
["memorial", faArchway],
["supermarket", faShoppingCart]
];
for (let i = 0; i < mapping.length; i++) {
if (sug.properties.osm_value === mapping[i][0]) return fa(mapping[i][1]);
}
//if (v === "nightclub") return fa(faDanc);
if (sug.properties.type === "house") return fa(faHome);
return fa(faMapMarkerAlt);
};
const img = selectIcon(sug);
return (
<div>
<div className="icon">{img ? img : ""}</div>
<div className="text">
<div className="name" title={sug.properties?.name}>
{sug.properties?.name}
</div>
<div className="sub">
{sug.properties?.countrycode}
{sug.properties?.state ? " - " + sug.properties?.state : ""}
{sug.properties?.city ? " - " + sug.properties?.city : ""}
</div>
</div>
</div>
);
};
const textIcon = (size, strikeThrough) => {
return (
<svg
......
......@@ -14,6 +14,7 @@ export default class Map extends Component {
height: window.innerHeight,
selected: 0,
twoDimensional: false,
flyAnimation: false,
showLabels: true,
viewport: {
latitude: 48.389265,
......@@ -139,8 +140,7 @@ export default class Map extends Component {
});
};
goTo = suggestion => {
console.log(suggestion);
this.map.flyTo({ center: suggestion.geometry.coordinates });
this.map.flyTo({ center: suggestion.geometry.coordinates, animate: this.state.flyAnimation });
};
render = () => {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment