Skip to content

Commit 89150ab

Browse files
BlariBlari
committed
Add maps pages
1 parent e5c2da8 commit 89150ab

File tree

9 files changed

+484
-12
lines changed

9 files changed

+484
-12
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,11 @@
4040
"react": "^17.0.2",
4141
"react-apexcharts": "^1.4.0",
4242
"react-dom": "^17.0.2",
43+
"react-google-maps": "^9.4.5",
4344
"react-redux": "^7.2.4",
4445
"react-router-dom": "^5.2.0",
4546
"react-scripts": "3.4.3",
47+
"react-simple-maps": "^0.12.1",
4648
"react-sortablejs": "^1.5.1",
4749
"react-swipeable-views": "^0.14.0",
4850
"react-swipeable-views-utils": "^0.14.0",

‎src/components/Layout/Layout.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@ import PieCharts from '../../pages/charts/PieCharts'
5555

5656
import DraggableGrid from '../../pages/draggablegrid'
5757

58+
import MapsGoogle from '../../pages/maps'
59+
import VectorMaps from '../../pages/maps/VectorMap'
60+
5861
import BreadCrumbs from '../../components/BreadCrumbs';
5962

6063
// context
@@ -129,6 +132,10 @@ function Layout(props) {
129132

130133
<Route path="/app/grid" component={DraggableGrid} />
131134

135+
<Route exact path="/app/maps" render={() => <Redirect to="/app/maps/google" />} />
136+
<Route path="/app/maps/google" component={MapsGoogle} />
137+
<Route path="/app/maps/vector" component={VectorMaps} />
138+
132139
/>
133140

134141
<Route path={'/app/api-docs'} exact

‎src/components/Sidebar/SidebarStructure.js

Lines changed: 118 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ import {
1212
Description as DescriptionIcon,
1313
ShoppingCart as ShoppingCartIcon,
1414
StarBorder as ExtraIcon,
15-
Chat as ChatIcon,
16-
Add as AddSectionIcon,
15+
AddCircle as AddSectionIcon,
1716
FolderOpen as FolderIcon,
1817
Description as DocumentationIcon,
1918
Person as PersonIcon,
2019
AccountCircle as ProfileIcon
2120
} from '@mui/icons-material';
21+
import ChatIcon from '@mui/icons-material/Chat';
2222
import ViewCompactRoundedIcon from '@mui/icons-material/ViewCompactRounded';
2323
import { makeStyles } from '@mui/styles';
2424

@@ -166,6 +166,122 @@ const structure = [
166166
link: '/app/grid',
167167
icon: <ViewCompactRoundedIcon />,
168168
},
169+
{
170+
id: 11,
171+
label: 'Maps',
172+
link: '/app/maps',
173+
icon: <MapIcon />,
174+
children: [
175+
{ label: 'Google Maps', link: '/app/maps/google' },
176+
{ label: 'Vector Map', link: '/app/maps/vector' },
177+
],
178+
},
179+
{
180+
id: 12,
181+
label: 'Extra',
182+
link: '/app/extra',
183+
icon: <ExtraIcon />,
184+
children: [
185+
{ label: 'Calendar', link: '/app/extra/calendar' },
186+
{ label: 'Invoice', link: '/app/extra/invoice' },
187+
{
188+
label: 'Login Page',
189+
click: function(...rest) {
190+
const name = 'onLogin'
191+
rest.forEach(c => {
192+
if (c.clickName === name) {
193+
return c()
194+
}
195+
return false
196+
})
197+
},
198+
},
199+
{ label: 'Error Page', link: '/404' },
200+
{ label: 'Gallery', link: '/app/extra/gallery' },
201+
{ label: 'Search Result', link: '/app/extra/search' },
202+
{ label: 'Time Line', link: '/app/extra/timeline' },
203+
],
204+
},
205+
{
206+
id: 13,
207+
label: 'Menu Levels',
208+
icon: <FolderIcon />,
209+
children: [
210+
{ label: 'Level 1.1' },
211+
{
212+
label: 'Level 1.2',
213+
type: 'nested',
214+
children: [
215+
{ label: 'Level 2.1' },
216+
{
217+
label: 'Level 2.2',
218+
children: [
219+
{
220+
label: 'Level 3.1',
221+
},
222+
],
223+
},
224+
],
225+
},
226+
],
227+
},
228+
{ id: 14, type: 'divider' },
229+
{ id: 15, type: 'title', label: 'HELP' },
230+
{ id: 16, label: 'Library', link: 'https://flatlogic.com/templates', icon: <LibraryIcon /> },
231+
{ id: 17, label: 'Support', link: 'https://flatlogic.com/forum/', icon: <SupportIcon /> },
232+
{ id: 18, label: 'FAQ', link: 'https://flatlogic.com/forum/', icon: <FAQIcon /> },
233+
{ id: 19, type: 'divider' },
234+
{ id: 20, type: 'title', label: 'PROJECTS' },
235+
{
236+
id: 21,
237+
label: 'My recent',
238+
link: '',
239+
icon: <Dot size="medium" color="secondary" />,
240+
},
241+
{
242+
id: 22,
243+
label: 'Starred',
244+
link: '',
245+
icon: <Dot size="medium" color="primary" />,
246+
},
247+
{
248+
id: 23,
249+
label: 'Background',
250+
link: '',
251+
icon: <Dot size="medium" color="secondary" />,
252+
},
253+
{ id: 24, type: 'divider' },
254+
{
255+
id: 25,
256+
label: 'Add section',
257+
icon: <AddSectionIcon />,
258+
click: function(event, ...rest) {
259+
const name = 'addSectionClick'
260+
rest.forEach(c => {
261+
if (c.clickName === name) {
262+
return c(event)
263+
}
264+
return false
265+
})
266+
},
267+
},
268+
{ id: 26, type: 'divider' },
269+
{ id: 27, type: 'margin' },
270+
{ id: 28, type: 'divider' },
271+
{
272+
id: 29,
273+
label: 'Chat',
274+
icon: <ChatIcon />,
275+
click: function(event, ...rest) {
276+
const name = 'chatSetOpen'
277+
rest.forEach(c => {
278+
if (c.clickName === name) {
279+
return c(event)
280+
}
281+
return false
282+
})
283+
},
284+
},
169285
];
170286

171287
export default structure;

‎src/pages/maps/Maps.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "react";
2+
import {
3+
withGoogleMap,
4+
withScriptjs,
5+
GoogleMap,
6+
Marker,
7+
} from "react-google-maps";
8+
9+
// styles
10+
import useStyles from "./styles";
11+
12+
const BasicMap = withScriptjs(
13+
withGoogleMap(() => (
14+
<GoogleMap
15+
defaultZoom={12}
16+
defaultCenter={{
17+
lat: parseFloat(-37.813179),
18+
lng: parseFloat(144.950259),
19+
}}
20+
>
21+
<Marker position={{ lat: -37.813179, lng: 144.950259 }} />
22+
</GoogleMap>
23+
)),
24+
);
25+
26+
export default function Maps() {
27+
var classes = useStyles();
28+
29+
return (
30+
<div className={classes.mapContainer}>
31+
<BasicMap
32+
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyB7OXmzfQYua_1LEhRdqsoYzyJOPh9hGLg"
33+
loadingElement={<div style={{ height: "inherit", width: "inherit" }} />}
34+
containerElement={<div style={{ height: "100%" }} />}
35+
mapElement={<div style={{ height: "100%" }} />}
36+
/>
37+
</div>
38+
);
39+
}

‎src/pages/maps/VectorMap.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React from "react";
2+
import {
3+
ComposableMap,
4+
ZoomableGroup,
5+
Geographies,
6+
Geography,
7+
Markers,
8+
Marker
9+
} from "react-simple-maps";
10+
import useStyles from "./styles";
11+
import map from "./map.json";
12+
13+
const markers = [
14+
{
15+
markerOffset: -25,
16+
name: "Buenos Aires",
17+
coordinates: [-58.3816, -34.6037]
18+
}
19+
];
20+
21+
function VectorMap() {
22+
const classes = useStyles();
23+
return (
24+
<div className={classes.vectorContainer}>
25+
<ComposableMap
26+
projectionConfig={{
27+
scale: 205,
28+
rotation: [-11, 0, 0]
29+
}}
30+
width={980}
31+
height={551}
32+
style={{
33+
width: "100%",
34+
height: "auto",
35+
overflow: "auto"
36+
}}
37+
>
38+
<ZoomableGroup center={[0, 20]} disablePanning>
39+
<Geographies geography={map}>
40+
{(geographies, projection) =>
41+
geographies.map(
42+
(geography, i) =>
43+
geography.id !== "ATA" && (
44+
<Geography
45+
key={i}
46+
geography={geography}
47+
projection={projection}
48+
style={{
49+
default: {
50+
fill: "#ECEFF1",
51+
stroke: "#607D8B",
52+
strokeWidth: 0.75,
53+
outline: "none"
54+
},
55+
hover: {
56+
fill: "#607D8B",
57+
stroke: "#607D8B",
58+
strokeWidth: 0.75,
59+
outline: "none"
60+
},
61+
pressed: {
62+
fill: "#536DFE",
63+
stroke: "#607D8B",
64+
strokeWidth: 0.75,
65+
outline: "none"
66+
}
67+
}}
68+
/>
69+
)
70+
)
71+
}
72+
</Geographies>
73+
<Markers>
74+
{markers.map((marker, i) => (
75+
<Marker
76+
key={i}
77+
marker={marker}
78+
style={{
79+
default: { fill: "#536DFE" },
80+
hover: { fill: "#FFFFFF" },
81+
pressed: { fill: "#536DFE" }
82+
}}
83+
>
84+
<circle
85+
cx={0}
86+
cy={0}
87+
r={5}
88+
style={{
89+
stroke: "#536DFE",
90+
strokeWidth: 3,
91+
opacity: 0.9
92+
}}
93+
/>
94+
<text
95+
textAnchor="middle"
96+
y={marker.markerOffset}
97+
style={{
98+
fontFamily: "Roboto, sans-serif",
99+
fill: "#607D8B"
100+
}}
101+
>
102+
{marker.name}
103+
</text>
104+
</Marker>
105+
))}
106+
</Markers>
107+
</ZoomableGroup>
108+
</ComposableMap>
109+
</div>
110+
);
111+
}
112+
113+
export default VectorMap;

‎src/pages/maps/map.json

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎src/pages/maps/package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"name": "Maps",
3+
"version": "0.0.0",
4+
"main": "Maps.js",
5+
"private": true
6+
}

‎src/pages/maps/styles.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { makeStyles } from "@mui/styles";
2+
3+
export default makeStyles(theme => ({
4+
mapContainer: {
5+
height: "100%",
6+
},
7+
vectorContainer: {
8+
margin: -theme.spacing(3)
9+
}
10+
}));

0 commit comments

Comments
 (0)