diff --git a/quasar.conf.js b/quasar.conf.js
index 13bf7fc8bc3c51dadc0ae307aed1777acffad54b..b8f3fd42c7d8137b36902f4aba8610fdc2ed0b2b 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -33,7 +33,7 @@ module.exports = configure(function (/* ctx */) {
extras: [
// 'ionicons-v4',
// 'mdi-v5',
- // 'fontawesome-v5',
+ 'fontawesome-v5',
// 'eva-icons',
// 'themify',
// 'line-awesome',
diff --git a/src-cordova/package-lock.json b/src-cordova/package-lock.json
index 59257622f43c62604129017f83395b20ae6b5915..dee41ba30becedaf727c6d7ce602725279e49363 100644
--- a/src-cordova/package-lock.json
+++ b/src-cordova/package-lock.json
@@ -163,6 +163,12 @@
"underscore": "^1.9.2"
}
},
+ "cordova-plugin-geolocation": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/cordova-plugin-geolocation/-/cordova-plugin-geolocation-4.1.0.tgz",
+ "integrity": "sha512-y5io/P10xGMxSn2KEqfv/fExK47eA1pmSonJdmDqDsaSADV9JpgdPx0mUSA08+5pzma/OS9R0LoODeDPx7Jvjg==",
+ "dev": true
+ },
"cordova-plugin-whitelist": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/cordova-plugin-whitelist/-/cordova-plugin-whitelist-1.3.4.tgz",
diff --git a/src-cordova/package.json b/src-cordova/package.json
index 06be3a14b01179b93973e2d5387f894ca3426ca5..60b5eaaeea3dd2e1167835783b25b8f41c086ac4 100644
--- a/src-cordova/package.json
+++ b/src-cordova/package.json
@@ -14,11 +14,15 @@
"license": "Apache-2.0",
"devDependencies": {
"cordova-android": "^9.0.0",
+ "cordova-plugin-geolocation": "^4.1.0",
"cordova-plugin-whitelist": "^1.3.4"
},
"cordova": {
"plugins": {
- "cordova-plugin-whitelist": {}
+ "cordova-plugin-whitelist": {},
+ "cordova-plugin-geolocation": {
+ "GPS_REQUIRED": "true"
+ }
},
"platforms": [
"android"
diff --git a/src/components/EventForm.vue b/src/components/EventForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aa8be1507ba48f67a0a5a007c6656874aeb673cb
--- /dev/null
+++ b/src/components/EventForm.vue
@@ -0,0 +1,103 @@
+<template lang="pug">
+q-card.full-width
+ //- Create Event Header
+ q-card-section.bg-blue-grey-1(style='padding: 8px')
+ span.text-subtitle1.text-weight-light.text-blue-grey-10.q-ml-sm Create your event
+ q-chip.float-right(
+ @click='submitEvent()',
+ clickable,
+ color='primary',
+ text-color='white',
+ icon='done',
+ style='margin-top: -1px'
+ ) Submit Event
+ //- Create Event Form
+ q-card-section
+ //- Event name field
+ .row.q-pb-md
+ q-input.full-width(
+ v-model='name',
+ rounded,
+ outlined,
+ :dense='true',
+ label='Event Name',
+ placeholder='Birthday Party'
+ )
+ template(v-slot:before)
+ span.text-subtitle1.text-blue-grey-10 Name of your Event:  
+ //- Date and Time field
+ span.text-subtitle1.text-blue-grey-10.q-pt-sm Date and Time:
+ .row.q-pb-md.no-wrap
+ q-input(v-model='date', rounded, outlined, type='date', :dense='true', hint='Date of Event', style='width: 60%')
+ q-input.q-ml-sm(
+ v-model='time',
+ rounded,
+ outlined,
+ type='time',
+ :dense='true',
+ hint='Time of the Event',
+ style='width: 40%'
+ )
+ //- Location of Event field
+ .row.q-pb-md
+ span.text-subtitle1.text-blue-grey-10 Where?:
+ q-input.full-width(rounded, outlined, v-model='places', label='Search places', :dense='true')
+ template(v-slot:prepend)
+ q-icon(name='place')
+ template(v-slot:append)
+ q-icon.cursor-pointer(name='search', @click='searchPlaces()')
+ //- Invite friends field
+ .row.q-pb-md
+ span.text-subtitle1.text-blue-grey-10 Invite your friends:
+ q-input.full-width(rounded, outlined, v-model='friends', label='Search friends', :dense='true')
+ template(v-slot:prepend)
+ q-icon(name='person_add')
+ template(v-slot:append)
+ q-icon.cursor-pointer(name='search', @click='searchFriends()')
+ //- Event icon field
+ .text-subtitle1.text-blue-grey-10 Choose an icon for your Event:
+ .row.q-pb-md.justify-around
+ img(src='https://img.icons8.com/dusk/50/000000/home.png')
+ img(src='https://img.icons8.com/dusk/50/000000/party-baloons.png')
+ img(src='https://img.icons8.com/dusk/50/000000/dancing-party.png')
+ img(src='https://img.icons8.com/dusk/50/000000/champagne.png')
+ img(src='https://img.icons8.com/dusk/50/000000/dj.png')
+ img(src='https://img.icons8.com/dusk/50/000000/gift.png')
+ //- Event details field
+ .row
+ span.text-subtitle1.text-blue-grey-10 Details:
+ q-input.full-width(
+ rounded,
+ outlined,
+ autogrow,
+ v-model='details',
+ placeholder='Dress code, specifications, directions etc.',
+ :dense='true'
+ )
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ name: null,
+ date: null,
+ time: null,
+ places: null,
+ friends: null,
+ details: null
+ }
+ },
+ methods: {
+ searchPlaces() {
+ console.log('searching places')
+ },
+ searchFriends() {
+ console.log('searching friends')
+ },
+ submitEvent() {
+ console.log('submit event')
+ }
+ }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Friends.vue b/src/components/Friends.vue
index 93fe388dce297e4bee299f9fa31bda864716eaf7..9fa19e92fe3db8c3f5e0e60dbc1a039f8749bda3 100644
--- a/src/components/Friends.vue
+++ b/src/components/Friends.vue
@@ -1,15 +1,17 @@
<template lang="pug">
-q-page.flex.q-pa-nd
- q-list.full-width(seperator='')
- q-item(v-for='user in users', :key='user.id', to='/chat', clickable, v-ripple)
- q-item-section(avatar='')
- q-avatar(color='primary', text-color='white')
- | {{ user.name.charAt(0) }}
- q-item-section
- q-item-label {{ user.name }}
- q-item-section(side='')
- q-badge(:color='user.online ? "light-green-5" : "gray-4"')
- | {{ user.online ? 'Online' : 'Offline' }}
+q-toolbar.bg-primary.text-white.shadow-2
+ q-toolbar-title Contacts
+q-list(bordered)
+ q-item.q-my-sm(v-for='user in users', :key='user.id', to='/chat', clickable, v-ripple)
+ q-item-section(avatar)
+ q-avatar(color='primary', text-color='white')
+ | {{ user.name.charAt(0) }}
+ q-item-section
+ q-item-label.text-weight-light.text-subtitle2 {{ user.name }}
+ q-item-section(side)
+ q-icon(name='chat_bubble', :color='user.online ? "light-green-6" : "blue-grey-5"')
+q-toolbar.absolute-bottom.bg-primary.text-white.shadow-2
+ q-btn(@click='addFriends()', icon='person_add', flat, dense, label='Add Friends')
</template>
<script>
@@ -39,6 +41,11 @@ export default {
}
]
}
+ },
+ methods: {
+ addFriends() {
+ console.log('clicked')
+ }
}
}
</script>
diff --git a/src/components/GoogleMap.vue b/src/components/GoogleMap.vue
index 1059ad46254b0148f271fddbbe521d2f1891cc6a..72387db259334b26c1c41b1f443095deaa5caa08 100644
--- a/src/components/GoogleMap.vue
+++ b/src/components/GoogleMap.vue
@@ -1,15 +1,21 @@
<template lang="pug">
-div(style='position: relative')
- div(ref='map', style='width: 100vw; height: 100vh; z-index: 0')
- q-toggle(
- @click='toggleHeatmap()',
- v-if='heatmap',
- v-model='toggle',
- icon='warning',
- size='5em',
- color='red',
- style='position: absolute; left: 5px; top: 5px; z-index: 1'
- )
+div(ref='map', style='min-height: inherit; z-index: 0')
+q-toggle(
+ @click='toggleHeatmap()',
+ v-if='heatmap',
+ v-model='toggle',
+ icon='warning',
+ size='5em',
+ color='red',
+ style='position: absolute; left: 0.5em; bottom: 2em; z-index: 1'
+)
+q-btn(
+ @click='centerMap()',
+ fab,
+ color='black',
+ icon='my_location',
+ style='position: absolute; right: 1.25em; bottom: 2.5em; z-index: 1'
+)
</template>
<script>
@@ -36,6 +42,12 @@ export default {
this.heatmap.setMap(this.heatmap.getMap() ? null : this.map)
},
+ // Centers the map on user position when the button is presed
+ centerMap() {
+ this.map.setCenter(new google.maps.LatLng(this.center.lat, this.center.lng))
+ this.map.setZoom(15)
+ },
+
/*********************
APIs IMPLEMENTATION
**********************/
@@ -61,7 +73,7 @@ export default {
alert('Geolocation is not supported by this browser.')
}
},
- // Set center variable to current estimated coordinates
+ // Finds 20 places related to keyword 'nightlife' in 1500m proximity of center coordinates
async findPlaces() {
const URL = `https://secret-ocean-49799.herokuapp.com/https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${this.center.lat},${this.center.lng}
&radius=1500
@@ -131,6 +143,12 @@ export default {
disableDefaultUI: true
})
+ // Initializes your position on the map
+ new google.maps.Marker({
+ position: new google.maps.LatLng(this.center.lat, this.center.lng),
+ map: map
+ })
+
// Add marker for every nightlife establishment along with an info window
await this.findPlaces()
this.places.forEach(place => {
diff --git a/src/components/Login.vue b/src/components/Login.vue
index a99734c41879b67b0420c920d782f1b5189a98ef..74cd2870f7c636f68b995d79ad9d1d9265997d53 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,11 +1,39 @@
<template lang="pug">
-q-form(@submit='submitForm')
- q-input.q-mb-md(v-if='tab == "register"', outlined='', type='name', v-model='formData.name', label='Name')
- q-input.q-mb-md(outlined='', type='email', v-model='formData.email', label='Email')
- q-input.q-mb-md(outlined='', type='password', v-model='formData.password', label='Password')
- .row
- q-space
- q-btn(color='primary', type='submit', :label='tab')
+q-form.q-pa-lg(@submit='submitForm')
+ q-input.q-mb-md(v-model='email', type='email', label='Email')
+ template(v-slot:prepend)
+ q-icon(name='email')
+ q-input.q-mb-md(v-model='username', v-if='tab == "register"', type='username', label='Username')
+ template(v-slot:prepend)
+ q-icon(name='person')
+ q-input.q-mb-md(type='password', v-model='password', label='Password')
+ template(v-slot:prepend)
+ q-icon(name='lock')
+ //- Register only
+ q-card-section(v-if='tab == "register"')
+ .text-center.q-pa-sm.q-gutter-xl
+ q-btn(round, color='indigo-7', size='lg')
+ q-icon(name='fab fa-facebook-f', size='1.7rem')
+ q-btn(round, color='red-8', size='lg')
+ q-icon(name='fab fa-google-plus-g', size='1.7rem')
+ q-btn(round, color='light-blue-5', size='lg')
+ q-icon(name='fab fa-twitter', size='1.7rem')
+ q-card-actions.q-pt-lg
+ q-btn.full-width(
+ color='primary',
+ type='submit',
+ :label='tab == "login" ? "Sign In" : "Get Started"',
+ size='xl',
+ unelevated
+ )
+ //- Register only
+ q-card-section.text-subtitle1.text-center.q-pt-sm(v-if='tab == "register"', style='padding-bottom: 0px')
+ p.text-grey-6.q-mb-none Return to login
+ //- Login only
+ q-card-section.text-subtitle1.text-center.q-pt-sm(v-if='tab == "login"', style='padding-bottom: 0px')
+ p.text-grey-6.q-mb-none Forgot your password?
+ q-card-section.cursor-pointer.text-subtitle1.text-center.q-pa-xs(@click='$router.go(-1)', style='padding-top: 0px')
+ p.text-grey-6 Go back
</template>
<script>
@@ -13,10 +41,9 @@ export default {
props: ['tab'],
data() {
return {
- formData: {
- email: '',
- password: ''
- }
+ email: '',
+ username: '',
+ password: ''
}
},
methods: {
diff --git a/src/components/SignalForm.vue b/src/components/SignalForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8693f50d67d64a33ac51baa0f014d195ed850822
--- /dev/null
+++ b/src/components/SignalForm.vue
@@ -0,0 +1,71 @@
+<template lang="pug">
+q-card.full-width
+ //- Create Signal Header
+ q-card-section.bg-blue-grey-1(style='padding: 8px')
+ span.text-subtitle1.text-weight-light.text-blue-grey-10.q-ml-sm Create new signal
+ q-chip.float-right(
+ @click='submitSignal()',
+ clickable,
+ color='accent',
+ text-color='white',
+ icon='done',
+ style='margin-top: -1px'
+ ) Create Signal
+ //- Create Signal Form
+ q-card-section
+ //- Event name field
+ .row.q-pb-md
+ span.text-subtitle1.text-blue-grey-10 Type of signal:
+ q-select.full-width(
+ v-model='signalType',
+ :options='options',
+ label='Signal type',
+ transition-show='flip-up',
+ transition-hide='flip-down',
+ rounded,
+ outlined
+ )
+ template(v-slot:prepend)
+ q-icon(:name='icon')
+ //- Event details field
+ .row
+ span.text-subtitle1.text-blue-grey-10 Details:
+ q-input.full-width(v-model='details', rounded, outlined, autogrow, placeholder='Describe the situation')
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ signalType: null,
+ options: ['Danger', 'Emergency', 'Fight Breakout', 'Free Drinks', 'Car Rental'],
+ details: null
+ }
+ },
+
+ methods: {
+ submitSignal() {
+ console.log(this.signalType)
+ }
+ },
+
+ computed: {
+ icon() {
+ switch (this.signalType) {
+ case 'Danger':
+ return 'warning'
+ case 'Emergency':
+ return 'medical_services'
+ case 'Fight Breakout':
+ return 'reduce_capacity'
+ case 'Free Drinks':
+ return 'liquor'
+ case 'Car Rental':
+ return 'car_rental'
+ default:
+ return 'add_location'
+ }
+ }
+ }
+}
+</script>
\ No newline at end of file
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 579368692afeb52befd1de769fef8b16f7f99f4a..3fe427ab2c03ddf255443ce22beee69950de3b2c 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,46 +1,69 @@
<template lang="pug">
q-layout(view='lHh Lpr lFf')
- q-drawer.bg-white(v-model='leftDrawer', show-if-above, bordered, :width='200')
- q-scroll-area(style='height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd')
+ //- Left Drawer
+ q-drawer.bg-white(v-model='leftDrawer', show-if-above, :width='200')
+ q-scroll-area(style='height: calc(100% - 150px); margin-top: 150px')
q-list.padding
template(v-for='(menuItem, index) in menuList', :key='index')
- q-item(clickable, :active='menuItem.label === "Outbox"', v-ripple)
+ q-item(clickable, v-ripple, :to='menuItem.link')
q-item-section(avatar)
q-icon(:name='menuItem.icon', :color='menuItem.color')
q-item-section
| {{ menuItem.label }}
q-separator(:key='"sep" + index', v-if='menuItem.separator')
- q-img.absolute-top(src='https://cdn.quasar.dev/img/material.png', style='height: 150px')
- .absolute-bottom.bg-transparent
- q-avatar.q-mb-sm(size='56px')
- img(src='https://cdn.quasar.dev/img/boy-avatar.png')
+ q-img.absolute-top(
+ src='https://i.pinimg.com/564x/a8/1e/01/a81e01701e045f8f70c71dd324c5a87a.jpg',
+ style='height: 150px'
+ )
+ .row.absolute-bottom.bg-transparent.justify-center
+ q-avatar(size='6.5em')
+ img(
+ src='https://avataaars.io/?avatarStyle=Circle&topType=Eyepatch&facialHairType=Blank&clotheType=ShirtVNeck&clotheColor=Pink&eyeType=Squint&eyebrowType=AngryNatural&mouthType=Default&skinColor=Light'
+ )
.text-weight-bold Razvan Stoenescu
div @rstoenescu
- q-drawer.bg-white(v-model='rightDrawer', side='right', show-if-above, bordered)
+ //- Right Drawer
+ q-drawer.bg-white(v-model='rightDrawer', side='right', :width='250', show-if-above)
Friends
+ //- Bottom Drawers
+ q-dialog(v-model='newEvent', position='bottom')
+ EventForm
+ q-dialog(v-model='newSignal', position='bottom')
+ SignalForm
+ //- Page container and floating buttons
q-page-container
router-view
q-page-sticky(position='top-left', :offset='[18, 18]')
q-btn(@click='leftDrawer = !leftDrawer', round, outline, color='cyan-1', icon='more_horiz')
- q-page-sticky(position='bottom-right', :offset='[18, 36]')
+ q-page-sticky(position='bottom-right', :offset='[18, 105]')
q-btn(@click='rightDrawer = !rightDrawer', fab, color='primary', icon='chat')
+ q-page-sticky(position='bottom', :offset='[18, 36]')
+ q-fab(vertical-actions-align='center', color='secondary', icon='add', direction='up')
+ q-fab-action(@click='newEvent = true', color='orange', icon='add_location', label='New Event')
+ q-fab-action(@click='newSignal = true', color='accent', icon='notification_add', label='New Signal')
</template>
<script>
import Friends from 'components/Friends.vue'
+import EventForm from 'components/EventForm.vue'
+import SignalForm from 'components/SignalForm.vue'
import { mapState } from 'vuex'
export default {
name: 'MainLayout',
components: {
- Friends
+ Friends,
+ EventForm,
+ SignalForm
},
data() {
return {
leftDrawer: false,
- rightDrawer: false
+ rightDrawer: false,
+ newEvent: false,
+ newSignal: false
}
},
diff --git a/src/pages/Auth.vue b/src/pages/Auth.vue
index bcf776ba8a1842f471f7f6d488832f106fe8634a..d5843685304e2e50b8f5cecab2b01fe37dd5cfa5 100644
--- a/src/pages/Auth.vue
+++ b/src/pages/Auth.vue
@@ -1,19 +1,17 @@
<template lang='pug'>
q-layout.shadow-2.rounded-borders(view='lHh Lpr lff')
q-page-container
- q-page.flex.q-pa-md
- q-card.full-width
- q-tabs.text-grey(
- v-model='tab',
- dense,
- active-color='primary',
- indicator-color='primary',
- align='justify',
- narrow-indicator
- )
+ q-page.flex.justify-center(
+ style='background: linear-gradient(129deg, rgba(106, 98, 255, 1) 0%, rgba(0, 212, 255, 1) 100%)'
+ )
+ q-card.full-width(style='max-width: 1024px')
+ q-card-section.row.bg-primary.justify-center
+ h4.text-h4.text-white.q-my-lg Welcome to NightLyfe
+ q-tabs.text-grey(v-model='tab', active-color='primary', indicator-color='primary', align='justify')
q-tab(name='login', label='Login')
q-tab(name='register', label='Register')
q-separator
+
q-tab-panels(v-model='tab', animated)
q-tab-panel(name='login')
login-register(:tab='tab')
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 53ae0a1dcc4cb6a64000d40496e751621fc5a6a9..f56b8771f523f6dd3a61728e204219110d6cc520 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -1,5 +1,5 @@
<template lang="pug">
-q-page.flex.flex-center
+q-page
GoogleMap
</template>
diff --git a/src/router/routes.js b/src/router/routes.js
index 90d3b8572de9bd7f92d765087112bc01d5822c63..39ab736adba90e511f75900ac6c90fdd0e1aae7c 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -15,6 +15,7 @@ const routes = [
]
},
{ path: '/auth', component: () => import( 'pages/Auth.vue')},
+ { path: '/userinfo', component: () => import( 'pages/UserInfo.vue')},
// Always leave this as last one,
// but you can also remove it
{
diff --git a/src/store/index.js b/src/store/index.js
index ae788d744dda335a349b35b64cd2b23603819692..3e08ded29cd28900f02c4c9d4a436b1fb3ae0806 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -17,152 +17,420 @@ export default store(function (/* { ssrContext } */) {
state: {
menuList: [
{
- icon: 'inbox',
- label: 'Inbox',
- color: 'black',
- separator: true
- },
- {
- icon: 'send',
- label: 'Outbox',
+ icon: 'account_circle',
+ label: 'User',
color: 'blue',
+ link: '/userinfo',
separator: false
},
{
- icon: 'delete',
- label: 'Trash',
- color: 'black',
- separator: false
- },
+ icon: 'settings',
+ label: 'Settings',
+ color: 'blue-grey-7',
+ link: '',
+ separator: true
+ },
{
- icon: 'error',
- label: 'Spam',
- color: 'red',
- separator: true
+ icon: 'help',
+ label: 'Privacy',
+ color: 'accent',
+ link: '',
+ separator: false
},
{
- icon: 'settings',
- label: 'Settings',
- color: 'gray',
+ icon: 'error',
+ label: 'Report a Problem',
+ color: 'red-6',
+ link: '',
separator: false
},
{
icon: 'feedback',
label: 'Send Feedback',
color: 'orange',
- separator: false
+ link: '',
+ separator: true
},
{
- icon: 'help',
- label: 'Help',
- color: 'green',
- separator: false
- }
+ icon: 'login',
+ label: 'Login',
+ color: 'green',
+ link: '/auth',
+ separator: false
+ },
+
],
mapStyles: [
{
- featureType: 'water',
- elementType: 'geometry',
- stylers: [
- {
- color: '#193341'
- }
- ]
- },
- {
- featureType: 'landscape',
- elementType: 'geometry',
- stylers: [
- {
- color: '#2c5a71'
- }
- ]
- },
- {
- featureType: 'road',
- elementType: 'geometry',
- stylers: [
- {
- color: '#29768a'
- },
- {
- lightness: -37
- }
- ]
- },
- {
- featureType: 'poi',
- elementType: 'geometry',
- stylers: [
- {
- color: '#406d80'
- }
- ]
- },
- {
- featureType: 'transit',
- elementType: 'geometry',
- stylers: [
- {
- color: '#406d80'
- }
- ]
- },
- {
- elementType: 'labels.text.stroke',
- stylers: [
- {
- visibility: 'on'
- },
- {
- color: '#3e606f'
- },
- {
- weight: 2
- },
- {
- gamma: 0.84
- }
- ]
- },
- {
- elementType: 'labels.text.fill',
- stylers: [
- {
- color: '#ffffff'
- }
- ]
- },
- {
- featureType: 'administrative',
- elementType: 'geometry',
- stylers: [
- {
- weight: 0.6
- },
- {
- color: '#1a3541'
- }
- ]
- },
- {
- elementType: 'labels.icon',
- stylers: [
- {
- visibility: 'off'
- }
- ]
- },
- {
- featureType: 'poi.park',
- elementType: 'geometry',
- stylers: [
- {
- color: '#2c5a71'
- }
- ]
+ "featureType": "all",
+ "elementType": "labels",
+ "stylers": [
+ {
+ "visibility": "on"
+ }
+ ]
+ },
+ {
+ "featureType": "all",
+ "elementType": "labels.text",
+ "stylers": [
+ {
+ "visibility": "on"
+ }
+ ]
+ },
+ {
+ "featureType": "all",
+ "elementType": "labels.text.fill",
+ "stylers": [
+ {
+ "saturation": 36
+ },
+ {
+ "color": "#dee6f0"
+ },
+ {
+ "lightness": 40
+ },
+ {
+ "visibility": "on"
+ }
+ ]
+ },
+ {
+ "featureType": "all",
+ "elementType": "labels.text.stroke",
+ "stylers": [
+ {
+ "visibility": "off"
+ },
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 16
+ }
+ ]
+ },
+ {
+ "featureType": "all",
+ "elementType": "labels.icon",
+ "stylers": [
+ {
+ "visibility": "off"
+ },
+ {
+ "hue": "#ff0000"
+ }
+ ]
+ },
+ {
+ "featureType": "administrative",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#353c44"
+ },
+ {
+ "lightness": 20
+ }
+ ]
+ },
+ {
+ "featureType": "administrative",
+ "elementType": "geometry.stroke",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 17
+ },
+ {
+ "weight": 1.2
+ }
+ ]
+ },
+ {
+ "featureType": "landscape",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 20
+ }
+ ]
+ },
+ {
+ "featureType": "landscape",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#1c1e25"
+ }
+ ]
+ },
+ {
+ "featureType": "landscape.man_made",
+ "elementType": "labels.text",
+ "stylers": [
+ {
+ "visibility": "on"
+ }
+ ]
+ },
+ {
+ "featureType": "landscape.man_made",
+ "elementType": "labels.icon",
+ "stylers": [
+ {
+ "visibility": "on"
+ },
+ {
+ "hue": "#e0ff00"
+ }
+ ]
+ },
+ {
+ "featureType": "poi",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 21
+ }
+ ]
+ },
+ {
+ "featureType": "poi",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#1e212b"
+ }
+ ]
+ },
+ {
+ "featureType": "poi",
+ "elementType": "labels.text",
+ "stylers": [
+ {
+ "visibility": "on"
+ }
+ ]
+ },
+ {
+ "featureType": "poi",
+ "elementType": "labels.icon",
+ "stylers": [
+ {
+ "visibility": "on"
+ }
+ ]
+ },
+ {
+ "featureType": "poi.park",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#365231"
+ }
+ ]
+ },
+ {
+ "featureType": "road.highway",
+ "elementType": "all",
+ "stylers": [
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "road.highway",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "lightness": 17
+ },
+ {
+ "saturation": "11"
+ }
+ ]
+ },
+ {
+ "featureType": "road.highway",
+ "elementType": "geometry.stroke",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 29
+ },
+ {
+ "weight": 0.2
+ }
+ ]
+ },
+ {
+ "featureType": "road.highway",
+ "elementType": "labels.text.fill",
+ "stylers": [
+ {
+ "visibility": "simplified"
+ }
+ ]
+ },
+ {
+ "featureType": "road.highway",
+ "elementType": "labels.icon",
+ "stylers": [
+ {
+ "hue": "#ff7a00"
+ },
+ {
+ "saturation": "79"
+ },
+ {
+ "visibility": "on"
+ },
+ {
+ "lightness": "-33"
+ },
+ {
+ "gamma": "0.63"
+ }
+ ]
+ },
+ {
+ "featureType": "road.arterial",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 18
+ }
+ ]
+ },
+ {
+ "featureType": "road.arterial",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#256a72"
+ },
+ {
+ "saturation": "61"
+ }
+ ]
+ },
+ {
+ "featureType": "road.local",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 16
+ }
+ ]
+ },
+ {
+ "featureType": "road.local",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "gamma": "1"
+ },
+ {
+ "lightness": "0"
+ },
+ {
+ "color": "#2d414b"
+ }
+ ]
+ },
+ {
+ "featureType": "transit",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 19
+ },
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "transit.line",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#eb0202"
+ }
+ ]
+ },
+ {
+ "featureType": "transit.station",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#ff1d00"
+ },
+ {
+ "saturation": "-35"
+ },
+ {
+ "lightness": "-47"
+ }
+ ]
+ },
+ {
+ "featureType": "transit.station",
+ "elementType": "labels.icon",
+ "stylers": [
+ {
+ "hue": "#00d4ff"
+ },
+ {
+ "visibility": "simplified"
+ },
+ {
+ "lightness": "0"
+ },
+ {
+ "saturation": "0"
+ },
+ {
+ "gamma": "0.5"
+ }
+ ]
+ },
+ {
+ "featureType": "water",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#69bbcf"
+ },
+ {
+ "lightness": 17
+ }
+ ]
}
- ]
+ ]
},
modules: {
// example