├── jollof-slots
    ├── babel.config.js
    ├── .postcssrc.js
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   └── logo.png
    │   ├── main.js
    │   ├── components
    │   │   ├── Water.vue
    │   │   ├── Stew.vue
    │   │   ├── Chili.vue
    │   │   ├── Rice.vue
    │   │   ├── Pot.vue
    │   │   ├── Meat.vue
    │   │   └── Veggies.vue
    │   └── App.vue
    ├── .gitignore
    ├── .eslintrc.js
    └── package.json
├── states-of-nigeria
    ├── vue.config.js
    ├── babel.config.js
    ├── .postcssrc.js
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   ├── logo.png
    │   │   └── mapbox.css
    │   ├── main.js
    │   ├── components
    │   │   ├── SourceLayer.vue
    │   │   ├── FeatureEvents.vue
    │   │   ├── FeatureLayer.vue
    │   │   └── BaseMap.vue
    │   └── App.vue
    ├── .gitignore
    ├── .eslintrc.js
    └── package.json
├── render-props-jollof
    ├── babel.config.js
    ├── .postcssrc.js
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   └── logo.png
    │   ├── main.js
    │   ├── components
    │   │   ├── Water.vue
    │   │   ├── Stew.vue
    │   │   ├── Meal.vue
    │   │   ├── Chili.vue
    │   │   ├── PotOfJollof.vue
    │   │   ├── Rice.vue
    │   │   ├── Meat.vue
    │   │   ├── Pot.vue
    │   │   ├── InstantPot.vue
    │   │   └── Veggies.vue
    │   └── App.vue
    ├── .gitignore
    ├── .eslintrc.js
    └── package.json
├── a-componentized-vue-of-jollof
    ├── babel.config.js
    ├── .postcssrc.js
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   └── logo.png
    │   ├── main.js
    │   ├── components
    │   │   ├── Water.vue
    │   │   ├── Stew.vue
    │   │   ├── Chili.vue
    │   │   ├── Rice.vue
    │   │   ├── Meat.vue
    │   │   └── Veggies.vue
    │   └── App.vue
    ├── .gitignore
    ├── .eslintrc.js
    └── package.json
└── slides
    └── ConcatTalk.pdf


/jollof-slots/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/app"]
3 | };
4 | 


--------------------------------------------------------------------------------
/states-of-nigeria/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   lintOnSave: false
3 | };
4 | 


--------------------------------------------------------------------------------
/render-props-jollof/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/app"]
3 | };
4 | 


--------------------------------------------------------------------------------
/states-of-nigeria/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/app"]
3 | };
4 | 


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/app"]
3 | };
4 | 


--------------------------------------------------------------------------------
/jollof-slots/.postcssrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }


--------------------------------------------------------------------------------
/slides/ConcatTalk.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shortdiv/concatConf2018/HEAD/slides/ConcatTalk.pdf


--------------------------------------------------------------------------------
/render-props-jollof/.postcssrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }


--------------------------------------------------------------------------------
/states-of-nigeria/.postcssrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/.postcssrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }


--------------------------------------------------------------------------------
/jollof-slots/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shortdiv/concatConf2018/HEAD/jollof-slots/public/favicon.ico


--------------------------------------------------------------------------------
/jollof-slots/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shortdiv/concatConf2018/HEAD/jollof-slots/src/assets/logo.png


--------------------------------------------------------------------------------
/states-of-nigeria/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shortdiv/concatConf2018/HEAD/states-of-nigeria/public/favicon.ico


--------------------------------------------------------------------------------
/states-of-nigeria/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shortdiv/concatConf2018/HEAD/states-of-nigeria/src/assets/logo.png


--------------------------------------------------------------------------------
/render-props-jollof/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shortdiv/concatConf2018/HEAD/render-props-jollof/public/favicon.ico


--------------------------------------------------------------------------------
/render-props-jollof/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shortdiv/concatConf2018/HEAD/render-props-jollof/src/assets/logo.png


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shortdiv/concatConf2018/HEAD/a-componentized-vue-of-jollof/public/favicon.ico


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shortdiv/concatConf2018/HEAD/a-componentized-vue-of-jollof/src/assets/logo.png


--------------------------------------------------------------------------------
/jollof-slots/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import App from "./App.vue";
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount("#app");
9 | 


--------------------------------------------------------------------------------
/render-props-jollof/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import App from "./App.vue";
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount("#app");
9 | 


--------------------------------------------------------------------------------
/states-of-nigeria/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import App from "./App.vue";
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount("#app");
9 | 


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import App from "./App.vue";
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount("#app");
9 | 


--------------------------------------------------------------------------------
/jollof-slots/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/states-of-nigeria/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/render-props-jollof/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/jollof-slots/src/components/Water.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="water">
 3 | 
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'Water'
10 |   }
11 | </script>
12 | 
13 | <style scoped>
14 | .water {
15 |   z-index: 1000;
16 |   background: #C7E2F2;
17 |   height: 8em;
18 |   bottom: 0;
19 |   width: 100%;
20 |   position: absolute;
21 | }
22 | </style>


--------------------------------------------------------------------------------
/render-props-jollof/src/components/Water.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="water">
 3 | 
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'Water'
10 |   }
11 | </script>
12 | 
13 | <style scoped>
14 | .water {
15 |   z-index: 1000;
16 |   background: #C7E2F2;
17 |   height: 8em;
18 |   bottom: 0;
19 |   width: 100%;
20 |   position: absolute;
21 | }
22 | </style>


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/src/components/Water.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="water">
 3 | 
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'Water'
10 |   }
11 | </script>
12 | 
13 | <style scoped>
14 | .water {
15 |   z-index: 1000;
16 |   background: #C7E2F2;
17 |   height: 8em;
18 |   bottom: 0;
19 |   width: 100%;
20 |   position: absolute;
21 | }
22 | </style>


--------------------------------------------------------------------------------
/jollof-slots/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/prettier'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }


--------------------------------------------------------------------------------
/states-of-nigeria/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/prettier'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }


--------------------------------------------------------------------------------
/render-props-jollof/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/prettier'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/prettier'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }


--------------------------------------------------------------------------------
/jollof-slots/src/components/Stew.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="stew">
 3 |   </div>
 4 | </template>
 5 | 
 6 | <script>
 7 |   export default {
 8 |     name: 'Stew'
 9 |   }
10 | </script>
11 | 
12 | <style scoped>
13 | .stew {
14 |   z-index: 2000;
15 |   background: tomato;
16 |   background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px);
17 |   height: 7em;
18 |   bottom: 0;
19 |   width: 100%;
20 |   position: absolute;
21 | }
22 | </style>


--------------------------------------------------------------------------------
/render-props-jollof/src/components/Stew.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="stew">
 3 |   </div>
 4 | </template>
 5 | 
 6 | <script>
 7 |   export default {
 8 |     name: 'Stew'
 9 |   }
10 | </script>
11 | 
12 | <style scoped>
13 | .stew {
14 |   z-index: 2000;
15 |   background: tomato;
16 |   background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px);
17 |   height: 7em;
18 |   bottom: 0;
19 |   width: 100%;
20 |   position: absolute;
21 | }
22 | </style>


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/src/components/Stew.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="stew">
 3 |   </div>
 4 | </template>
 5 | 
 6 | <script>
 7 |   export default {
 8 |     name: 'Stew'
 9 |   }
10 | </script>
11 | 
12 | <style scoped>
13 | .stew {
14 |   z-index: 2000;
15 |   background: tomato;
16 |   background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px);
17 |   height: 7em;
18 |   bottom: 0;
19 |   width: 100%;
20 |   position: absolute;
21 | }
22 | </style>


--------------------------------------------------------------------------------
/states-of-nigeria/src/components/SourceLayer.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: "SourceLayer",
 4 |   props: {
 5 |     mapContext: { type: Object, required: true },
 6 |     sourceId: { type: String },
 7 |     sourceType: { type: String },
 8 |     dataSrc: { type: Object, required: true }
 9 |   },
10 |   mounted() {
11 |     this.mapContext.addSource(this.sourceId, {
12 |       type: "geojson",
13 |       data: this.dataSrc
14 |     });
15 |   },
16 |   render() {
17 |     return null;
18 |   }
19 | };
20 | </script>
21 | 
22 | <style scoped>
23 | </style>
24 | 


--------------------------------------------------------------------------------
/jollof-slots/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>jollof-slots</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but jollof-slots doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/states-of-nigeria/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>states-of-nigeria</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but states-of-nigeria doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/render-props-jollof/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>render-props-jollof</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but render-props-jollof doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>a-componentized-vue-of-jollof</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but a-componentized-vue-of-jollof doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/states-of-nigeria/src/components/FeatureEvents.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: "FeatureEvents",
 4 |   props: {
 5 |     onMouseEnter: { type: Function },
 6 |     onMouseLeave: { type: Function },
 7 |     onMouseMove: { type: Function },
 8 |     onClick: { type: Function }
 9 |   },
10 |   inject: ["mapContext", "mapId"],
11 |   mounted() {
12 |     this.mapContext.on("mouseenter", this.mapId, () => {
13 |       this.onMouseEnter();
14 |     });
15 |     this.mapContext.on("mouseleave", this.mapId, () => {
16 |       this.onMouseLeave();
17 |     });
18 |     this.mapContext.on("mousemove", this.mapId, e => {
19 |       this.onMouseMove(e);
20 |     });
21 |     this.mapContext.on("click", this.mapId, e => {
22 |       this.onClick(e);
23 |     });
24 |   },
25 |   render() {
26 |     return null;
27 |   }
28 | };
29 | </script>
30 | 
31 | <style scoped>
32 | </style>
33 | 


--------------------------------------------------------------------------------
/render-props-jollof/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Meal>
 4 |       <template slot="jollof" slot-scope="{ temperature }">
 5 |         <InstantPot :temperature="temperature"></InstantPot>
 6 |       </template>
 7 |     </Meal> 
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import Meal from './components/Meal.vue';
13 | import InstantPot from './components/InstantPot.vue';
14 | 
15 | export default {
16 |   name: "app",
17 |   components: {
18 |     Meal,
19 |     InstantPot
20 |   },
21 |   data () {
22 |     return {
23 | 
24 |     }
25 |   },
26 | };
27 | </script>
28 | 
29 | <style lang="scss">
30 | body {
31 |   background: #888;
32 |   display: flex;
33 |   align-items: center;
34 |   justify-content: center;
35 |   min-height: 100vh;
36 |   flex-flow: row wrap;
37 |   margin: 0;
38 | }
39 | .container {
40 |   position: absolute;
41 |   text-align: center;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/render-props-jollof/src/components/Meal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="meal">
 3 |     <slot
 4 |       name="jollof"
 5 |       :temperature="temperature">
 6 |       <PotOfJollof :temperature="temperature" />
 7 |     </slot>
 8 |     <h2>Temperature: {{ temperature }}</h2>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   import PotOfJollof from './PotOfJollof.vue';
14 |   export default {
15 |     name: 'Meal',
16 |     components: {
17 |       PotOfJollof
18 |     },
19 |     data() {
20 |       return {
21 |         temperature: 100
22 |       }
23 |     },
24 |     methods: {
25 |     coolOff () {
26 |       if(this.temperature > 40) {
27 |         this.temperature -= 1
28 |       } else {
29 |         window.clearInterval(this.interval)
30 |       }
31 |     }
32 |   },
33 |     mounted () {
34 |       this.interval = setInterval(this.coolOff, 5000)
35 |     }
36 |   }
37 | </script>
38 | 
39 | <style scoped>
40 | 
41 | </style>


--------------------------------------------------------------------------------
/jollof-slots/src/components/Chili.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="chili">
 3 |     <div class="chili-top"></div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'Chili'
10 |   }
11 | </script>
12 | 
13 | <style lang="scss">
14 | .chili {
15 |   z-index: 2;
16 |   transform: rotate(33deg);
17 |   top: -61px;
18 |   right: 0;
19 | 
20 |   &-top {
21 |     background: transparent;
22 |     height: 2em;
23 |     width: 4em;
24 |     border-radius: 50% 0;
25 |     box-shadow: 8px 0 0 -1px crimson;
26 |     position: relative;
27 |       &:before {
28 |         content: '';
29 |         display: block;
30 |         width: 0.8em;
31 |         height: 0.2em;
32 |         position: absolute;
33 |         right: -11px;
34 |         border-radius: 0 50% 50% 0;
35 |         background-color: green;
36 |         -webkit-transform: rotate(-5deg);
37 |         transform: rotate(-89deg);
38 |         top: -0.4em;
39 |         z-index: 1;
40 |       }
41 |     }
42 | }
43 | </style>


--------------------------------------------------------------------------------
/render-props-jollof/src/components/Chili.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="chili">
 3 |     <div class="chili-top"></div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'Chili'
10 |   }
11 | </script>
12 | 
13 | <style lang="scss">
14 | .chili {
15 |   z-index: 2;
16 |   transform: rotate(33deg);
17 |   top: -61px;
18 |   right: 0;
19 | 
20 |   &-top {
21 |     background: transparent;
22 |     height: 2em;
23 |     width: 4em;
24 |     border-radius: 50% 0;
25 |     box-shadow: 8px 0 0 -1px crimson;
26 |     position: relative;
27 |       &:before {
28 |         content: '';
29 |         display: block;
30 |         width: 0.8em;
31 |         height: 0.2em;
32 |         position: absolute;
33 |         right: -11px;
34 |         border-radius: 0 50% 50% 0;
35 |         background-color: green;
36 |         -webkit-transform: rotate(-5deg);
37 |         transform: rotate(-89deg);
38 |         top: -0.4em;
39 |         z-index: 1;
40 |       }
41 |     }
42 | }
43 | </style>


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/src/components/Chili.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="chili">
 3 |     <div class="chili-top"></div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'Chili'
10 |   }
11 | </script>
12 | 
13 | <style lang="scss">
14 | .chili {
15 |   z-index: 2;
16 |   transform: rotate(33deg);
17 |   top: -61px;
18 |   right: 0;
19 | 
20 |   &-top {
21 |     background: transparent;
22 |     height: 2em;
23 |     width: 4em;
24 |     border-radius: 50% 0;
25 |     box-shadow: 8px 0 0 -1px crimson;
26 |     position: relative;
27 |       &:before {
28 |         content: '';
29 |         display: block;
30 |         width: 0.8em;
31 |         height: 0.2em;
32 |         position: absolute;
33 |         right: -11px;
34 |         border-radius: 0 50% 50% 0;
35 |         background-color: green;
36 |         -webkit-transform: rotate(-5deg);
37 |         transform: rotate(-89deg);
38 |         top: -0.4em;
39 |         z-index: 1;
40 |       }
41 |     }
42 | }
43 | </style>


--------------------------------------------------------------------------------
/jollof-slots/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jollof-slots",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "vue": "^2.5.17"
12 |   },
13 |   "devDependencies": {
14 |     "@vue/cli-plugin-babel": "^3.0.0",
15 |     "@vue/cli-plugin-eslint": "^3.0.0",
16 |     "@vue/cli-service": "^3.0.0",
17 |     "@vue/eslint-config-prettier": "^3.0.0",
18 |     "lint-staged": "^7.2.0",
19 |     "node-sass": "^4.9.0",
20 |     "sass-loader": "^7.0.1",
21 |     "vue-template-compiler": "^2.5.17"
22 |   },
23 |   "browserslist": [
24 |     "> 1%",
25 |     "last 2 versions",
26 |     "not ie <= 8"
27 |   ],
28 |   "gitHooks": {
29 |     "pre-commit": "lint-staged"
30 |   },
31 |   "lint-staged": {
32 |     "*.js": [
33 |       "vue-cli-service lint",
34 |       "git add"
35 |     ],
36 |     "*.vue": [
37 |       "vue-cli-service lint",
38 |       "git add"
39 |     ]
40 |   }
41 | }


--------------------------------------------------------------------------------
/render-props-jollof/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "render-props-jollof",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "vue": "^2.5.17"
12 |   },
13 |   "devDependencies": {
14 |     "@vue/cli-plugin-babel": "^3.0.0",
15 |     "@vue/cli-plugin-eslint": "^3.0.0",
16 |     "@vue/cli-service": "^3.0.0",
17 |     "@vue/eslint-config-prettier": "^3.0.0",
18 |     "lint-staged": "^7.2.0",
19 |     "node-sass": "^4.9.0",
20 |     "sass-loader": "^7.0.1",
21 |     "vue-template-compiler": "^2.5.17"
22 |   },
23 |   "browserslist": [
24 |     "> 1%",
25 |     "last 2 versions",
26 |     "not ie <= 8"
27 |   ],
28 |   "gitHooks": {
29 |     "pre-commit": "lint-staged"
30 |   },
31 |   "lint-staged": {
32 |     "*.js": [
33 |       "vue-cli-service lint",
34 |       "git add"
35 |     ],
36 |     "*.vue": [
37 |       "vue-cli-service lint",
38 |       "git add"
39 |     ]
40 |   }
41 | }


--------------------------------------------------------------------------------
/render-props-jollof/src/components/PotOfJollof.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Pot>
 4 |       <Water />
 5 |       <Stew  />
 6 |       <Veggies />
 7 |       <Meat />
 8 |       <Rice />
 9 |     </Pot>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import Stew from './Stew.vue';
15 | import Water from './Water.vue';
16 | import Rice from './Rice.vue';
17 | import Veggies from './Veggies.vue';
18 | import Meat from './Meat.vue';
19 | import Chili from './Chili.vue';
20 | import Pot from './Pot.vue';
21 | 
22 | export default {
23 |   name: 'PotOfJollof',
24 |   components: {
25 |     Water,
26 |     Stew,
27 |     Rice,
28 |     Veggies,
29 |     Meat,
30 |     Chili,
31 |     Pot
32 |   },
33 |   props: {
34 |     temperature: {
35 |       type: Number
36 |     }
37 |   },
38 |   provide () {
39 |     const state = {}
40 |     Object.defineProperty(state, 'temperature', {
41 |        enumerable: true,
42 |        get: () => this.temperature,
43 |     })
44 |     return { state }
45 |   }
46 | }
47 | </script>
48 | 
49 | <style scoped>
50 | 
51 | </style>


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "a-componentized-vue-of-jollof",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "vue": "^2.5.17"
12 |   },
13 |   "devDependencies": {
14 |     "@vue/cli-plugin-babel": "^3.0.0",
15 |     "@vue/cli-plugin-eslint": "^3.0.0",
16 |     "@vue/cli-service": "^3.0.0",
17 |     "@vue/eslint-config-prettier": "^3.0.0",
18 |     "lint-staged": "^7.2.0",
19 |     "node-sass": "^4.9.0",
20 |     "sass-loader": "^7.0.1",
21 |     "vue-template-compiler": "^2.5.17"
22 |   },
23 |   "browserslist": [
24 |     "> 1%",
25 |     "last 2 versions",
26 |     "not ie <= 8"
27 |   ],
28 |   "gitHooks": {
29 |     "pre-commit": "lint-staged"
30 |   },
31 |   "lint-staged": {
32 |     "*.js": [
33 |       "vue-cli-service lint",
34 |       "git add"
35 |     ],
36 |     "*.vue": [
37 |       "vue-cli-service lint",
38 |       "git add"
39 |     ]
40 |   }
41 | }


--------------------------------------------------------------------------------
/states-of-nigeria/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "states-of-nigeria",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "vue": "^2.5.16"
12 |   },
13 |   "devDependencies": {
14 |     "@vue/cli-plugin-babel": "^3.0.0-rc.11",
15 |     "@vue/cli-plugin-eslint": "^3.0.0-rc.11",
16 |     "@vue/cli-service": "^3.0.0-rc.11",
17 |     "@vue/eslint-config-prettier": "^3.0.0-rc.10",
18 |     "lint-staged": "^7.2.0",
19 |     "node-sass": "^4.9.0",
20 |     "sass-loader": "^7.0.1",
21 |     "vue-template-compiler": "^2.5.16"
22 |   },
23 |   "browserslist": [
24 |     "> 1%",
25 |     "last 2 versions",
26 |     "not ie <= 8"
27 |   ],
28 |   "gitHooks": {
29 |     "pre-commit": "lint-staged"
30 |   },
31 |   "lint-staged": {
32 |     "*.js": [
33 |       "vue-cli-service lint",
34 |       "git add"
35 |     ],
36 |     "*.vue": [
37 |       "vue-cli-service lint",
38 |       "git add"
39 |     ]
40 |   }
41 | }


--------------------------------------------------------------------------------
/states-of-nigeria/src/components/FeatureLayer.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: "feature-layer",
 4 |   props: {
 5 |     mapContext: { type: Object },
 6 |     mapId: { type: String, required: true },
 7 |     sourceId: { type: String, required: true },
 8 |     layout: { type: Object, required: false, default: () => ({}) },
 9 |     paint: { type: Object, required: false, default: () => ({}) },
10 |     layerType: { type: String },
11 |     filter: { type: Array, required: false, default: () => [] }
12 |   },
13 |   provide() {
14 |     return {
15 |       mapContext: this.mapContext,
16 |       mapId: this.mapId
17 |     };
18 |   },
19 |   mounted() {
20 |     this.mapContext.addLayer({
21 |       id: this.mapId,
22 |       source: this.sourceId,
23 |       type: this.layerType,
24 |       layout: this.layout,
25 |       paint: this.paint
26 |     });
27 |     if (this.filter.length !== 0) {
28 |       this.mapContext.setFilter(this.mapId, this.filter);
29 |     }
30 |   },
31 |   render() {
32 |     return <template>{this.$slots.default}</template>;
33 |   }
34 | };
35 | </script>
36 | 
37 | <style scoped>
38 | </style>
39 | 


--------------------------------------------------------------------------------
/jollof-slots/src/components/Rice.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="rice blob">
 3 |     <div class="blobby-1"></div>
 4 |     <div class="blobby-2"></div>
 5 |     <div class="blobby-3"></div>
 6 |     <div class="blobby-4"></div>
 7 |     <div class="blobby-5"></div>
 8 |     <div class="blobby-6"></div>
 9 |     <div class="blobby-7"></div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |     name: 'Rice'
16 |   }
17 | </script>
18 | 
19 | <style lang="scss">
20 | .rice {
21 |   width: 100%;
22 |   height: 4em;
23 |   bottom: 0;
24 |   position: absolute;
25 |   z-index: 3000;
26 |   &.blob {
27 |     background: #f4f4f4;
28 |     border-radius: 50% 50% 0 0;
29 |   }
30 | }
31 | div[class^="blobby-"] {
32 |   position: absolute;
33 |   border-radius: 200px;
34 |   background: #f4f4f4;
35 |   width: 3em;
36 |   height: 3em;
37 |   bottom: 1.5em;
38 | }
39 | 
40 | .blobby {
41 |   &-1 {
42 |     left: 1em;
43 |   }
44 |   &-2 {
45 |     left: 2.5em;
46 |   }
47 |   &-3 {
48 |     left: 4.5em;
49 |   }
50 |   &-4 {
51 |     left: 5.5em;
52 |   }
53 |   &-5 {
54 |     left: 8.5em;
55 |   }
56 |   &-6 {
57 |     left: 10.5em;
58 |   }
59 |   &-7 {
60 |     left: 12em;
61 |   }
62 | }
63 | </style>


--------------------------------------------------------------------------------
/render-props-jollof/src/components/Rice.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="rice blob">
 3 |     <div class="blobby-1"></div>
 4 |     <div class="blobby-2"></div>
 5 |     <div class="blobby-3"></div>
 6 |     <div class="blobby-4"></div>
 7 |     <div class="blobby-5"></div>
 8 |     <div class="blobby-6"></div>
 9 |     <div class="blobby-7"></div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |     name: 'Rice'
16 |   }
17 | </script>
18 | 
19 | <style lang="scss">
20 | .rice {
21 |   width: 100%;
22 |   height: 4em;
23 |   bottom: 0;
24 |   position: absolute;
25 |   z-index: 3000;
26 |   &.blob {
27 |     background: #f4f4f4;
28 |     border-radius: 50% 50% 0 0;
29 |   }
30 | }
31 | div[class^="blobby-"] {
32 |   position: absolute;
33 |   border-radius: 200px;
34 |   background: #f4f4f4;
35 |   width: 3em;
36 |   height: 3em;
37 |   bottom: 1.5em;
38 | }
39 | 
40 | .blobby {
41 |   &-1 {
42 |     left: 1em;
43 |   }
44 |   &-2 {
45 |     left: 2.5em;
46 |   }
47 |   &-3 {
48 |     left: 4.5em;
49 |   }
50 |   &-4 {
51 |     left: 5.5em;
52 |   }
53 |   &-5 {
54 |     left: 8.5em;
55 |   }
56 |   &-6 {
57 |     left: 10.5em;
58 |   }
59 |   &-7 {
60 |     left: 12em;
61 |   }
62 | }
63 | </style>


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/src/components/Rice.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="rice blob">
 3 |     <div class="blobby-1"></div>
 4 |     <div class="blobby-2"></div>
 5 |     <div class="blobby-3"></div>
 6 |     <div class="blobby-4"></div>
 7 |     <div class="blobby-5"></div>
 8 |     <div class="blobby-6"></div>
 9 |     <div class="blobby-7"></div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |     name: 'Rice'
16 |   }
17 | </script>
18 | 
19 | <style lang="scss">
20 | .rice {
21 |   width: 100%;
22 |   height: 4em;
23 |   bottom: 0;
24 |   position: absolute;
25 |   z-index: 3000;
26 |   &.blob {
27 |     background: #f4f4f4;
28 |     border-radius: 50% 50% 0 0;
29 |   }
30 | }
31 | div[class^="blobby-"] {
32 |   position: absolute;
33 |   border-radius: 200px;
34 |   background: #f4f4f4;
35 |   width: 3em;
36 |   height: 3em;
37 |   bottom: 1.5em;
38 | }
39 | 
40 | .blobby {
41 |   &-1 {
42 |     left: 1em;
43 |   }
44 |   &-2 {
45 |     left: 2.5em;
46 |   }
47 |   &-3 {
48 |     left: 4.5em;
49 |   }
50 |   &-4 {
51 |     left: 5.5em;
52 |   }
53 |   &-5 {
54 |     left: 8.5em;
55 |   }
56 |   &-6 {
57 |     left: 10.5em;
58 |   }
59 |   &-7 {
60 |     left: 12em;
61 |   }
62 | }
63 | </style>


--------------------------------------------------------------------------------
/jollof-slots/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Pot>
 4 |       <Water slot="water" />
 5 |       <Stew slot="stew" />
 6 |       <Veggies slot="veggies" v-if="vegetarian" />
 7 |       <Meat slot="veggies" v-else />
 8 |       <Rice slot="rice"/>
 9 |     </Pot>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import Stew from './components/Stew.vue';
15 | import Water from './components/Water.vue';
16 | import Rice from './components/Rice.vue';
17 | import Veggies from './components/Veggies.vue';
18 | import Meat from './components/Meat.vue';
19 | import Chili from './components/Chili.vue';
20 | import Pot from './components/Pot.vue';
21 | 
22 | export default {
23 |   name: "app",
24 |   components: {
25 |     Water,
26 |     Stew,
27 |     Rice,
28 |     Veggies,
29 |     Meat,
30 |     Chili,
31 |     Pot
32 |   },
33 |   data() {
34 |     return {
35 |       vegetarian: false
36 |     }
37 |   },
38 | };
39 | </script>
40 | 
41 | <style lang="scss">
42 | body {
43 |   background: #888;
44 |   display: flex;
45 |   align-items: center;
46 |   justify-content: center;
47 |   min-height: 100vh;
48 |   flex-flow: row wrap;
49 |   margin: 0;
50 | }
51 | .container {
52 |   position: absolute;
53 |   text-align: center;
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/states-of-nigeria/src/components/BaseMap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="map" ref="basemap">
 3 |     <slot :mapContext="mapContext" :loaded="loaded"></slot>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import mapboxgl from "mapbox-gl";
 9 | export default {
10 |   name: "BaseMap",
11 |   props: {
12 |     mapStyle: {
13 |       type: String,
14 |       required: false,
15 |       default: "mapbox://styles/mapbox/light-v8"
16 |     },
17 |     center: {
18 |       type: Array,
19 |       required: false,
20 |       default: () => [8.675277000000051, 9.081999]
21 |     },
22 |     zoom: {
23 |       type: Number,
24 |       required: false,
25 |       default: 12
26 |     }
27 |   },
28 |   data() {
29 |     return {
30 |       mapContext: null,
31 |       loaded: false
32 |     };
33 |   },
34 |   methods: {},
35 |   mounted() {
36 |     mapboxgl.accessToken =
37 |       "pk.eyJ1Ijoic2hvcnRkaXYiLCJhIjoiY2l3OGc5YmE5MDJzZjJ5bWhkdDZieGdzcSJ9.1z-swTWtcCHYI_RawDJCEw";
38 | 
39 |     const map = new mapboxgl.Map({
40 |       container: this.$refs.basemap, // container id
41 |       style: this.mapStyle, // stylesheet location
42 |       center: this.center,
43 |       zoom: this.zoom // starting zoom
44 |     });
45 | 
46 |     this.mapContext = map;
47 | 
48 |     map.on("load", () => {
49 |       this.loaded = true;
50 |     });
51 |   }
52 | };
53 | </script>
54 | 
55 | <style lang="scss">
56 | @import url("https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css");
57 | .map {
58 |   width: 1000px;
59 |   height: 800px;
60 | 
61 |   & canvas {
62 |     position: relative !important;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/jollof-slots/src/components/Pot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="pot">
 3 |     <div class="pot-lid"></div>
 4 |     <div class="pot-base">
 5 |       <div class="contents">
 6 |         <slot name="water"></slot>
 7 |         <slot name="stew"></slot>
 8 |         <slot name="veggies"></slot>
 9 |         <slot name="rice"></slot>
10 |       </div>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 |   export default {
17 |     
18 |   }
19 | </script>
20 | 
21 | <style lang="scss">
22 | .pot {
23 |   margin-bottom: 3.2em;
24 |   display: inline-block;
25 | }
26 | .pot-lid{
27 |   width: 15em;
28 |   height: 1em;
29 |   border-radius: 0.5em 0.5em 0 0;
30 |   border: 0.4em solid black;
31 |   //animation: open-lid 10s 1;
32 |   margin-bottom: 0.5em;
33 |   border-bottom: 0.1em solid black;
34 |   animation: lid-dance 1s infinite;
35 |   &:before{
36 |     content: '';
37 |     position: absolute;
38 |     width: 2em;
39 |     height: 0.5em;
40 |     margin-top: -1.5em;
41 |     margin-left: -1em;
42 |     border-radius: 0.5em 0.5em 0 0;
43 |     border: 0.4em solid black;
44 |   }
45 | }
46 | .pot-base {
47 |   width: 15em;
48 |   height: 10em;
49 |   border-radius: 0 0 0.5em 0.5em;
50 |   border: 0.4em solid black;
51 |   margin-top: -0.5em;
52 |   &:before {
53 |     content: '';
54 |     position:absolute;
55 |     width: 2em;
56 |     height: 0.5em;
57 |     margin-left: -10.5em;
58 |     margin-top: 2em;
59 |     -webkit-transform: skew(0, 20deg);
60 | 	   -moz-transform: skew(0, 20deg);
61 | 	     -o-transform: skew(0, 20deg);
62 |     border: 0.4em solid black;
63 |     background: #888;
64 |     border-radius: 0.5em 0 0 0.5em;
65 |   }
66 |   &:after {
67 |     content: '';
68 |     position:absolute;
69 |     width: 2em;
70 |     height: 0.5em;
71 |     margin-left: 7.5em;
72 |     margin-top: -8em;
73 |     -webkit-transform: skew(0, -20deg);
74 | 	   -moz-transform: skew(0, -20deg);
75 | 	     -o-transform: skew(0, -20deg);
76 |     border: 0.4em solid black;
77 |     background: #888;
78 |     border-radius: 0 0.5em 0.5em 0;
79 |   }
80 | }
81 | .contents {
82 |   position: relative;
83 |   height: 100%;
84 | }
85 | </style>


--------------------------------------------------------------------------------
/jollof-slots/src/components/Meat.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="meat">
 3 |     <div class="chicken">
 4 |       <div class="drumstick-meat"></div>
 5 |       <div class="drumstick-leg"></div>
 6 |       <div class="drumstick-left"></div>
 7 |       <div class="drumstick-right"></div>
 8 |     </div>
 9 |     <div class="chicken">
10 |       <div class="drumstick-meat"></div>
11 |       <div class="drumstick-leg"></div>
12 |       <div class="drumstick-left"></div>
13 |       <div class="drumstick-right"></div>
14 |     </div>
15 |     <div class="chicken">
16 |       <div class="drumstick-meat"></div>
17 |       <div class="drumstick-leg"></div>
18 |       <div class="drumstick-left"></div>
19 |       <div class="drumstick-right"></div>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 |   export default {
26 |     name: 'Meat'
27 |   }
28 | </script>
29 | 
30 | <style lang="scss">
31 | .meat {
32 |   position: absolute;
33 |   bottom: 2.8em;
34 |   z-index: 4000;
35 |   width: 100%;
36 |   height: 10px;
37 |   & .chicken {
38 |     position: absolute;
39 |     &:nth-child(1) {
40 |       transform: rotate(210deg);
41 |       right: 2em;
42 |       bottom: 0em;
43 |     }
44 |     &:nth-child(2) {
45 |       transform: rotate(20deg);
46 |       bottom: 2em;
47 |       left: 1em;
48 |     }
49 |     &:nth-child(3) {
50 |       transform: rotate(-25deg);
51 |       right: 11em;
52 |       bottom: 0em;
53 |     }
54 |     .drumstick-leg {
55 |     background-color: white;
56 |     width: 3em;
57 |     height: 0.7em;
58 |     border-radius: 30%;
59 |     position: absolute;
60 |   }
61 |     .drumstick-left {
62 |       background-color: white;
63 |       width: 1em;
64 |       height: 1em;
65 |       border-radius: 50%;
66 |       position: absolute;
67 |       top: 5px;
68 |       left: -0.5em;
69 |     }
70 |     .drumstick-right {
71 |       background-color: white;
72 |       width: 1em;
73 |       height: 1em;
74 |       border-radius: 50%;
75 |       position: absolute;
76 |       top: -0.5em;
77 |       left: -0.5em;
78 |     }
79 |     .drumstick-meat {
80 |       background-color: #8A2E00;
81 |       width: 4em;
82 |       height: 2.5em;
83 |       border-radius: 50%;
84 |       position: absolute;
85 |       top: -1em;
86 |       left: 25px;
87 |       z-index: 1;
88 |     }
89 |   }
90 | }
91 | </style>


--------------------------------------------------------------------------------
/render-props-jollof/src/components/Meat.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="meat">
 3 |     <div class="chicken">
 4 |       <div class="drumstick-meat"></div>
 5 |       <div class="drumstick-leg"></div>
 6 |       <div class="drumstick-left"></div>
 7 |       <div class="drumstick-right"></div>
 8 |     </div>
 9 |     <div class="chicken">
10 |       <div class="drumstick-meat"></div>
11 |       <div class="drumstick-leg"></div>
12 |       <div class="drumstick-left"></div>
13 |       <div class="drumstick-right"></div>
14 |     </div>
15 |     <div class="chicken">
16 |       <div class="drumstick-meat"></div>
17 |       <div class="drumstick-leg"></div>
18 |       <div class="drumstick-left"></div>
19 |       <div class="drumstick-right"></div>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 |   export default {
26 |     name: 'Meat'
27 |   }
28 | </script>
29 | 
30 | <style lang="scss">
31 | .meat {
32 |   position: absolute;
33 |   bottom: 2.8em;
34 |   z-index: 4000;
35 |   width: 100%;
36 |   height: 10px;
37 |   & .chicken {
38 |     position: absolute;
39 |     &:nth-child(1) {
40 |       transform: rotate(210deg);
41 |       right: 2em;
42 |       bottom: 0em;
43 |     }
44 |     &:nth-child(2) {
45 |       transform: rotate(20deg);
46 |       bottom: 2em;
47 |       left: 1em;
48 |     }
49 |     &:nth-child(3) {
50 |       transform: rotate(-25deg);
51 |       right: 11em;
52 |       bottom: 0em;
53 |     }
54 |     .drumstick-leg {
55 |     background-color: white;
56 |     width: 3em;
57 |     height: 0.7em;
58 |     border-radius: 30%;
59 |     position: absolute;
60 |   }
61 |     .drumstick-left {
62 |       background-color: white;
63 |       width: 1em;
64 |       height: 1em;
65 |       border-radius: 50%;
66 |       position: absolute;
67 |       top: 5px;
68 |       left: -0.5em;
69 |     }
70 |     .drumstick-right {
71 |       background-color: white;
72 |       width: 1em;
73 |       height: 1em;
74 |       border-radius: 50%;
75 |       position: absolute;
76 |       top: -0.5em;
77 |       left: -0.5em;
78 |     }
79 |     .drumstick-meat {
80 |       background-color: #8A2E00;
81 |       width: 4em;
82 |       height: 2.5em;
83 |       border-radius: 50%;
84 |       position: absolute;
85 |       top: -1em;
86 |       left: 25px;
87 |       z-index: 1;
88 |     }
89 |   }
90 | }
91 | </style>


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/src/components/Meat.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="meat">
 3 |     <div class="chicken">
 4 |       <div class="drumstick-meat"></div>
 5 |       <div class="drumstick-leg"></div>
 6 |       <div class="drumstick-left"></div>
 7 |       <div class="drumstick-right"></div>
 8 |     </div>
 9 |     <div class="chicken">
10 |       <div class="drumstick-meat"></div>
11 |       <div class="drumstick-leg"></div>
12 |       <div class="drumstick-left"></div>
13 |       <div class="drumstick-right"></div>
14 |     </div>
15 |     <div class="chicken">
16 |       <div class="drumstick-meat"></div>
17 |       <div class="drumstick-leg"></div>
18 |       <div class="drumstick-left"></div>
19 |       <div class="drumstick-right"></div>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 |   export default {
26 |     name: 'Meat'
27 |   }
28 | </script>
29 | 
30 | <style lang="scss">
31 | .meat {
32 |   position: absolute;
33 |   bottom: 2.8em;
34 |   z-index: 4000;
35 |   width: 100%;
36 |   height: 10px;
37 |   & .chicken {
38 |     position: absolute;
39 |     &:nth-child(1) {
40 |       transform: rotate(210deg);
41 |       right: 2em;
42 |       bottom: 0em;
43 |     }
44 |     &:nth-child(2) {
45 |       transform: rotate(20deg);
46 |       bottom: 2em;
47 |       left: 1em;
48 |     }
49 |     &:nth-child(3) {
50 |       transform: rotate(-25deg);
51 |       right: 11em;
52 |       bottom: 0em;
53 |     }
54 |     .drumstick-leg {
55 |     background-color: white;
56 |     width: 3em;
57 |     height: 0.7em;
58 |     border-radius: 30%;
59 |     position: absolute;
60 |   }
61 |     .drumstick-left {
62 |       background-color: white;
63 |       width: 1em;
64 |       height: 1em;
65 |       border-radius: 50%;
66 |       position: absolute;
67 |       top: 5px;
68 |       left: -0.5em;
69 |     }
70 |     .drumstick-right {
71 |       background-color: white;
72 |       width: 1em;
73 |       height: 1em;
74 |       border-radius: 50%;
75 |       position: absolute;
76 |       top: -0.5em;
77 |       left: -0.5em;
78 |     }
79 |     .drumstick-meat {
80 |       background-color: #8A2E00;
81 |       width: 4em;
82 |       height: 2.5em;
83 |       border-radius: 50%;
84 |       position: absolute;
85 |       top: -1em;
86 |       left: 25px;
87 |       z-index: 1;
88 |     }
89 |   }
90 | }
91 | </style>


--------------------------------------------------------------------------------
/render-props-jollof/src/components/Pot.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="pot">
  3 |     <div :class="{ 'pot-lid': true, 'dance-lid': isHot() }"></div>
  4 |     <div class="pot-base">
  5 |       <div class="contents">
  6 |         <slot></slot>
  7 |       </div>
  8 |     </div>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script>
 13 |   export default {
 14 |     name: 'Pot',
 15 |     inject: ['state'],
 16 |     methods: {
 17 |       isHot () {
 18 |         return this.state.temperature > 80 ? true : false
 19 |       }
 20 |     }
 21 |   }
 22 | </script>
 23 | 
 24 | <style lang="scss">
 25 | .pot {
 26 |   margin-bottom: 3.2em;
 27 |   display: inline-block;
 28 | }
 29 | .pot-lid{
 30 |   width: 15em;
 31 |   height: 1em;
 32 |   border-radius: 0.5em 0.5em 0 0;
 33 |   border: 0.4em solid black;
 34 |   //animation: open-lid 10s 1;
 35 |   margin-bottom: 0.5em;
 36 |   border-bottom: 0.1em solid black;
 37 |   &:before{
 38 |     content: '';
 39 |     position: absolute;
 40 |     width: 2em;
 41 |     height: 0.5em;
 42 |     margin-top: -1.5em;
 43 |     margin-left: -1em;
 44 |     border-radius: 0.5em 0.5em 0 0;
 45 |     border: 0.4em solid black;
 46 |   }
 47 | }
 48 | .pot-base {
 49 |   width: 15em;
 50 |   height: 10em;
 51 |   border-radius: 0 0 0.5em 0.5em;
 52 |   border: 0.4em solid black;
 53 |   margin-top: -0.5em;
 54 |   &:before {
 55 |     content: '';
 56 |     position:absolute;
 57 |     width: 2em;
 58 |     height: 0.5em;
 59 |     margin-left: -10.5em;
 60 |     margin-top: 2em;
 61 |     -webkit-transform: skew(0, 20deg);
 62 | 	   -moz-transform: skew(0, 20deg);
 63 | 	     -o-transform: skew(0, 20deg);
 64 |     border: 0.4em solid black;
 65 |     background: #888;
 66 |     border-radius: 0.5em 0 0 0.5em;
 67 |   }
 68 |   &:after {
 69 |     content: '';
 70 |     position:absolute;
 71 |     width: 2em;
 72 |     height: 0.5em;
 73 |     margin-left: 7.5em;
 74 |     margin-top: -8em;
 75 |     -webkit-transform: skew(0, -20deg);
 76 | 	   -moz-transform: skew(0, -20deg);
 77 | 	     -o-transform: skew(0, -20deg);
 78 |     border: 0.4em solid black;
 79 |     background: #888;
 80 |     border-radius: 0 0.5em 0.5em 0;
 81 |   }
 82 | }
 83 | .contents {
 84 |   position: relative;
 85 |   height: 100%;
 86 | }
 87 | 
 88 | .dance-lid {
 89 |   animation: lid-dance 1s infinite;
 90 | }
 91 | @keyframes lid-dance {
 92 |   10%, 20% { 
 93 |     transform:  rotate3d(0, 0, 1, -3deg); 
 94 |   }
 95 |   30%, 50%, 70%, 90% { 
 96 |     transform: rotate3d(0, 0, 1, 3deg); 
 97 |   }
 98 |   40%, 60%, 80% {
 99 |     transform:  rotate3d(0, 0, 1, -3deg);
100 |   }
101 | }
102 | </style>


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |   <div class="pot">
  4 |     <div class="pot-lid"></div>
  5 |     <div class="pot-base">
  6 |       <div class="contents">
  7 |         <div class="spice">
  8 |            <Chili v-for="(chili, index) in chilis"/>
  9 |         </div>
 10 |         <Water />
 11 |         <Stew />
 12 |         <Veggies v-if="vegetarian"/>
 13 |         <Meat v-else />
 14 |         <Rice />
 15 |       </div>
 16 |     </div>
 17 |   </div>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | import Stew from './components/Stew.vue';
 23 | import Water from './components/Water.vue';
 24 | import Rice from './components/Rice.vue';
 25 | import Veggies from './components/Veggies.vue';
 26 | import Meat from './components/Meat.vue';
 27 | import Chili from './components/Chili.vue';
 28 | 
 29 | export default {
 30 |   name: "app",
 31 |   components: {
 32 |     Water,
 33 |     Stew,
 34 |     Rice,
 35 |     Veggies,
 36 |     Meat,
 37 |     Chili
 38 |   },
 39 |   data () {
 40 |     return {
 41 |       vegetarian: false,
 42 |       chilis: 1
 43 |     }
 44 |   }
 45 | };
 46 | </script>
 47 | 
 48 | <style lang="scss">
 49 | body {
 50 |   background: #888;
 51 |   display: flex;
 52 |   align-items: center;
 53 |   justify-content: center;
 54 |   min-height: 100vh;
 55 |   flex-flow: row wrap;
 56 |   margin: 0;
 57 | }
 58 | .container {
 59 |   position: absolute;
 60 |   text-align: center;
 61 | }
 62 | .pot {
 63 |   margin-bottom: 3.2em;
 64 |   display: inline-block;
 65 | }
 66 | .pot-lid{
 67 |   width: 15em;
 68 |   height: 1em;
 69 |   border-radius: 0.5em 0.5em 0 0;
 70 |   border: 0.4em solid black;
 71 |   //animation: open-lid 10s 1;
 72 |   margin-bottom: 0.5em;
 73 |   border-bottom: 0.1em solid black;
 74 |   animation: lid-dance 1s infinite;
 75 |   &:before{
 76 |     content: '';
 77 |     position: absolute;
 78 |     width: 2em;
 79 |     height: 0.5em;
 80 |     margin-top: -1.5em;
 81 |     margin-left: -1em;
 82 |     border-radius: 0.5em 0.5em 0 0;
 83 |     border: 0.4em solid black;
 84 |   }
 85 | }
 86 | .pot-base {
 87 |   width: 15em;
 88 |   height: 10em;
 89 |   border-radius: 0 0 0.5em 0.5em;
 90 |   border: 0.4em solid black;
 91 |   margin-top: -0.5em;
 92 |   &:before {
 93 |     content: '';
 94 |     position:absolute;
 95 |     width: 2em;
 96 |     height: 0.5em;
 97 |     margin-left: -10.5em;
 98 |     margin-top: 2em;
 99 |     -webkit-transform: skew(0, 20deg);
100 | 	   -moz-transform: skew(0, 20deg);
101 | 	     -o-transform: skew(0, 20deg);
102 |     border: 0.4em solid black;
103 |     background: #888;
104 |     border-radius: 0.5em 0 0 0.5em;
105 |   }
106 |   &:after {
107 |     content: '';
108 |     position:absolute;
109 |     width: 2em;
110 |     height: 0.5em;
111 |     margin-left: 7.5em;
112 |     margin-top: -8em;
113 |     -webkit-transform: skew(0, -20deg);
114 | 	   -moz-transform: skew(0, -20deg);
115 | 	     -o-transform: skew(0, -20deg);
116 |     border: 0.4em solid black;
117 |     background: #888;
118 |     border-radius: 0 0.5em 0.5em 0;
119 |   }
120 | }
121 | .contents {
122 |   position: relative;
123 |   height: 100%;
124 | }
125 | .spice {
126 |   position: absolute;
127 |     top: -90px;
128 |     right: -5px;
129 | }
130 | </style>
131 | 


--------------------------------------------------------------------------------
/render-props-jollof/src/components/InstantPot.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="instant-pot">
  3 |     <div class="pot-lid"></div>
  4 |     <div class="pot-body"></div>
  5 |     <div class="pot-bottom"> </div>
  6 |     <div class="pot-display" ref="display" data-temp="Pot's hot"></div>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 |   export default {
 12 |     name: 'InstantPot',
 13 |     props: {
 14 |       temperature: {
 15 |         type: Number
 16 |       }
 17 |     },
 18 |     watch: {
 19 |       temperature() {
 20 |         if (this.temperature < 40) {
 21 |           this.$refs.display.dataset.temp = "Pot's Not Hot"
 22 |         }
 23 |         else {
 24 |           this.$refs.display.dataset.temp = "Pot's Hot"
 25 |         }
 26 |       }
 27 |     },
 28 |     mounted () {
 29 |       //this.$refs.display.attr
 30 |       //$(this).attr("data-count", parseInt($(this).attr("data-count")) + 1);
 31 |     }
 32 |   }
 33 | </script>
 34 | 
 35 | <style lang="scss">
 36 | .instant-pot {
 37 |   position: relative;
 38 |   margin-bottom: 3.2em;
 39 |   & .pot-lid {
 40 |     width: 15em;
 41 |     height: 2em;
 42 |     border: 0.4em solid black;
 43 |     border-radius: 40% 40% 0 0;
 44 |     background: #fff;
 45 |     &:before{
 46 |       content: '';
 47 |       position: absolute;
 48 |       width: 2em;
 49 |       height: 0.5em;
 50 |       margin-top: -1.5em;
 51 |       margin-left: -1em;
 52 |       border-radius: 0.5em 0.5em 0 0;
 53 |       border: 0.4em solid black;
 54 |     }
 55 |   }
 56 |   & .pot-body {
 57 |     width: 15em;
 58 |     height: 10em;
 59 |     border-radius: 0 0 0.5em 0.5em;
 60 |     border: 0.4em solid black;
 61 |     margin-top: -0.5em;
 62 |     background: #fff;
 63 |     &:before {
 64 |       content: '';
 65 |       position: absolute;
 66 |       width: 2em;
 67 |       height: 0.5em;
 68 |       margin-left: 7.5em;
 69 |       border: 0.4em solid black;
 70 |       background: #000;
 71 |       border-radius: 0 0.5em 0.5em 0;
 72 |     }
 73 |     &:after {
 74 |       content: '';
 75 |       position: absolute;
 76 |       width: 2em;
 77 |       height: 0.5em;
 78 |       left: -40px;
 79 |       border: 0.4em solid black;
 80 |       background: #000;
 81 |       border-radius: 0.5em 0 0 0.5em;
 82 |     }
 83 |   }
 84 |   .pot-bottom {
 85 |     border-top: 1em solid #000;
 86 | 	  border-left: 50px solid transparent;
 87 | 	  border-right: 50px solid transparent;
 88 | 	  height: 0;
 89 | 	  width: 9em;
 90 |     position: absolute;
 91 |     right: 5px;
 92 |   }
 93 |   .pot-display {
 94 |     position: absolute;
 95 |     width: 5em;
 96 |     height: 5em;
 97 |     border: 0.2em solid black;
 98 |     border-radius: 10px;
 99 |     bottom: 2em;
100 |     left: 0;
101 |     right: 0;
102 |     margin-left: auto;
103 |     margin-right: auto;
104 |     background: grey;
105 |     &:before {
106 |       content: attr(data-temp);
107 |       word-wrap: break-word;
108 |       position: absolute;
109 |       background: #4D60E3;
110 |       width: 3em;
111 |       height: 4em;
112 |       top: 0.2em;
113 |       margin-left: 7.5em;
114 |       border: 0.2em solid black;
115 |       border-radius: 10px;
116 |       left: 0;
117 |       right: 0;
118 |       margin-left: auto;
119 |       margin-right: auto;
120 |     }
121 |   }
122 | }
123 | </style>


--------------------------------------------------------------------------------
/jollof-slots/src/components/Veggies.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="veggie">
  3 |     <div class="carrot">
  4 |       <div class="carrot-top"></div>
  5 |       <div class="carrot-bottom"></div>
  6 |     </div>
  7 |     <div class="carrot">
  8 |       <div class="carrot-top"></div>
  9 |       <div class="carrot-bottom"></div>
 10 |     </div>
 11 |     <div class="broccoli">
 12 |       <div class="broccoli-stem"></div>
 13 |       <div class="broccoli-leaf-left"></div>
 14 |       <div class="broccoli-leaf-middle"></div>
 15 |       <div class="broccoli-leaf-right"></div>
 16 |     </div>
 17 |     <div class="broccoli">
 18 |       <div class="broccoli-stem"></div>
 19 |       <div class="broccoli-leaf-left"></div>
 20 |       <div class="broccoli-leaf-middle"></div>
 21 |       <div class="broccoli-leaf-right"></div>
 22 |     </div>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 |   export default {
 28 |     name: 'Veggies'
 29 |   }
 30 | </script>
 31 | 
 32 | <style lang="scss">
 33 | .veggie {
 34 |   position: absolute;
 35 |   bottom: 2.8em;
 36 |   z-index: 4000;
 37 |   width: 100%;
 38 |   height: 10px;
 39 |   & .carrot {
 40 |     z-index: 2;
 41 |     position: absolute;
 42 |     &:nth-child(1) {
 43 |       transform: rotate(-30deg);
 44 |     }
 45 |     &:nth-child(2) {
 46 |       transform: rotate(180deg);
 47 |       right: 2em;
 48 |       bottom: 0em;
 49 |     }
 50 |     &-top {
 51 |       width: 3em;
 52 |       height: 1em;
 53 |       margin: 0 auto;
 54 |       position: absolute;
 55 |       border-bottom: none;
 56 |       border-radius: 100% 20% 0 0;
 57 |       background-color: orange;
 58 |       &:before {
 59 |         content: '';
 60 |         display: block;
 61 |         width: 1.8em;
 62 |         height: 0.4em;
 63 |         position: absolute;
 64 |         right: -30px;
 65 |         border-radius: 50%;
 66 |         background-color: green;
 67 |         transform: rotate(-5deg);
 68 |         top: 0.1em;
 69 |       }
 70 |       &:after {
 71 |         content: '';
 72 |         display: block;
 73 |         width: 2.5em;
 74 |         height: 0.5em;
 75 |         position: absolute;
 76 |         top: 12px;
 77 |         right: -40px;
 78 |         border-radius: 50%;
 79 |         background-color: green;
 80 |         transform: rotate(10deg);
 81 |       }
 82 |     }
 83 |     &-bottom {
 84 |       width: 3em;
 85 |       height: 1em;
 86 |       margin: 0 auto;
 87 |       position: absolute;
 88 |       border-bottom: none;
 89 |       border-radius: 100% 20% 20% 100%;
 90 |       background-color: orange;
 91 |       top: 0.5em;
 92 |       &:before {
 93 |         content: '';
 94 |         position: absolute;
 95 |         top: -8px;
 96 |         right: -5px;
 97 |         width: 0.6em;
 98 |         height: 1.5em;
 99 |         background-color: orange;
100 |         overflow: hidden;
101 |         border-radius: 0 100% 100% 0;
102 |       }
103 |     }
104 |   }
105 |   & .broccoli {
106 |     position: absolute;
107 |     &:nth-child(3) {
108 |       right: 8em;
109 |       bottom: 6.5em;
110 |       transform: translate(0, 4.3em) rotate(28deg);
111 |     }
112 |     &:nth-child(4) {
113 |       z-index: 1;
114 |       right: 2em;
115 |       bottom: 6em;
116 |       transform: translate(0, 4.3em) rotate(140deg);
117 |     }
118 |     &-stem {
119 |       position: absolute;
120 |       height: 0.8em;
121 |       width: 1.6em;
122 |       background: #8CFF98;
123 |       transform-origin: 0% 50%;
124 |     }
125 |     &-leaf-left {
126 |       position: absolute;
127 |       height: 1.5em;
128 |       width: 1.5em;
129 |       border-radius: 50%;
130 |       background: #4B7F52;
131 |       transform: translate(-1em, 0.5em);
132 |     }
133 |     &-leaf-middle {
134 |       position: absolute;
135 |       height: 2em;
136 |       width: 2em;
137 |       border-radius: 50%;
138 |       background: #4B7F52;
139 |       transform: translate(-1.5em, -0.5em);
140 |     }
141 |     &-leaf-right {
142 |       position: absolute;
143 |       height: 1.5em;
144 |       width: 1.5em;
145 |       border-radius: 50%;
146 |       background: #4B7F52;
147 |       transform: translate(-1em, -1em);
148 |     }
149 |   }
150 | }
151 | </style>


--------------------------------------------------------------------------------
/render-props-jollof/src/components/Veggies.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="veggie">
  3 |     <div class="carrot">
  4 |       <div class="carrot-top"></div>
  5 |       <div class="carrot-bottom"></div>
  6 |     </div>
  7 |     <div class="carrot">
  8 |       <div class="carrot-top"></div>
  9 |       <div class="carrot-bottom"></div>
 10 |     </div>
 11 |     <div class="broccoli">
 12 |       <div class="broccoli-stem"></div>
 13 |       <div class="broccoli-leaf-left"></div>
 14 |       <div class="broccoli-leaf-middle"></div>
 15 |       <div class="broccoli-leaf-right"></div>
 16 |     </div>
 17 |     <div class="broccoli">
 18 |       <div class="broccoli-stem"></div>
 19 |       <div class="broccoli-leaf-left"></div>
 20 |       <div class="broccoli-leaf-middle"></div>
 21 |       <div class="broccoli-leaf-right"></div>
 22 |     </div>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 |   export default {
 28 |     name: 'Veggies'
 29 |   }
 30 | </script>
 31 | 
 32 | <style lang="scss">
 33 | .veggie {
 34 |   position: absolute;
 35 |   bottom: 2.8em;
 36 |   z-index: 4000;
 37 |   width: 100%;
 38 |   height: 10px;
 39 |   & .carrot {
 40 |     z-index: 2;
 41 |     position: absolute;
 42 |     &:nth-child(1) {
 43 |       transform: rotate(-30deg);
 44 |     }
 45 |     &:nth-child(2) {
 46 |       transform: rotate(180deg);
 47 |       right: 2em;
 48 |       bottom: 0em;
 49 |     }
 50 |     &-top {
 51 |       width: 3em;
 52 |       height: 1em;
 53 |       margin: 0 auto;
 54 |       position: absolute;
 55 |       border-bottom: none;
 56 |       border-radius: 100% 20% 0 0;
 57 |       background-color: orange;
 58 |       &:before {
 59 |         content: '';
 60 |         display: block;
 61 |         width: 1.8em;
 62 |         height: 0.4em;
 63 |         position: absolute;
 64 |         right: -30px;
 65 |         border-radius: 50%;
 66 |         background-color: green;
 67 |         transform: rotate(-5deg);
 68 |         top: 0.1em;
 69 |       }
 70 |       &:after {
 71 |         content: '';
 72 |         display: block;
 73 |         width: 2.5em;
 74 |         height: 0.5em;
 75 |         position: absolute;
 76 |         top: 12px;
 77 |         right: -40px;
 78 |         border-radius: 50%;
 79 |         background-color: green;
 80 |         transform: rotate(10deg);
 81 |       }
 82 |     }
 83 |     &-bottom {
 84 |       width: 3em;
 85 |       height: 1em;
 86 |       margin: 0 auto;
 87 |       position: absolute;
 88 |       border-bottom: none;
 89 |       border-radius: 100% 20% 20% 100%;
 90 |       background-color: orange;
 91 |       top: 0.5em;
 92 |       &:before {
 93 |         content: '';
 94 |         position: absolute;
 95 |         top: -8px;
 96 |         right: -5px;
 97 |         width: 0.6em;
 98 |         height: 1.5em;
 99 |         background-color: orange;
100 |         overflow: hidden;
101 |         border-radius: 0 100% 100% 0;
102 |       }
103 |     }
104 |   }
105 |   & .broccoli {
106 |     position: absolute;
107 |     &:nth-child(3) {
108 |       right: 8em;
109 |       bottom: 6.5em;
110 |       transform: translate(0, 4.3em) rotate(28deg);
111 |     }
112 |     &:nth-child(4) {
113 |       z-index: 1;
114 |       right: 2em;
115 |       bottom: 6em;
116 |       transform: translate(0, 4.3em) rotate(140deg);
117 |     }
118 |     &-stem {
119 |       position: absolute;
120 |       height: 0.8em;
121 |       width: 1.6em;
122 |       background: #8CFF98;
123 |       transform-origin: 0% 50%;
124 |     }
125 |     &-leaf-left {
126 |       position: absolute;
127 |       height: 1.5em;
128 |       width: 1.5em;
129 |       border-radius: 50%;
130 |       background: #4B7F52;
131 |       transform: translate(-1em, 0.5em);
132 |     }
133 |     &-leaf-middle {
134 |       position: absolute;
135 |       height: 2em;
136 |       width: 2em;
137 |       border-radius: 50%;
138 |       background: #4B7F52;
139 |       transform: translate(-1.5em, -0.5em);
140 |     }
141 |     &-leaf-right {
142 |       position: absolute;
143 |       height: 1.5em;
144 |       width: 1.5em;
145 |       border-radius: 50%;
146 |       background: #4B7F52;
147 |       transform: translate(-1em, -1em);
148 |     }
149 |   }
150 | }
151 | </style>


--------------------------------------------------------------------------------
/a-componentized-vue-of-jollof/src/components/Veggies.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="veggie">
  3 |     <div class="carrot">
  4 |       <div class="carrot-top"></div>
  5 |       <div class="carrot-bottom"></div>
  6 |     </div>
  7 |     <div class="carrot">
  8 |       <div class="carrot-top"></div>
  9 |       <div class="carrot-bottom"></div>
 10 |     </div>
 11 |     <div class="broccoli">
 12 |       <div class="broccoli-stem"></div>
 13 |       <div class="broccoli-leaf-left"></div>
 14 |       <div class="broccoli-leaf-middle"></div>
 15 |       <div class="broccoli-leaf-right"></div>
 16 |     </div>
 17 |     <div class="broccoli">
 18 |       <div class="broccoli-stem"></div>
 19 |       <div class="broccoli-leaf-left"></div>
 20 |       <div class="broccoli-leaf-middle"></div>
 21 |       <div class="broccoli-leaf-right"></div>
 22 |     </div>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 |   export default {
 28 |     name: 'Veggies'
 29 |   }
 30 | </script>
 31 | 
 32 | <style lang="scss">
 33 | .veggie {
 34 |   position: absolute;
 35 |   bottom: 2.8em;
 36 |   z-index: 4000;
 37 |   width: 100%;
 38 |   height: 10px;
 39 |   & .carrot {
 40 |     z-index: 2;
 41 |     position: absolute;
 42 |     &:nth-child(1) {
 43 |       transform: rotate(-30deg);
 44 |     }
 45 |     &:nth-child(2) {
 46 |       transform: rotate(180deg);
 47 |       right: 2em;
 48 |       bottom: 0em;
 49 |     }
 50 |     &-top {
 51 |       width: 3em;
 52 |       height: 1em;
 53 |       margin: 0 auto;
 54 |       position: absolute;
 55 |       border-bottom: none;
 56 |       border-radius: 100% 20% 0 0;
 57 |       background-color: orange;
 58 |       &:before {
 59 |         content: '';
 60 |         display: block;
 61 |         width: 1.8em;
 62 |         height: 0.4em;
 63 |         position: absolute;
 64 |         right: -30px;
 65 |         border-radius: 50%;
 66 |         background-color: green;
 67 |         transform: rotate(-5deg);
 68 |         top: 0.1em;
 69 |       }
 70 |       &:after {
 71 |         content: '';
 72 |         display: block;
 73 |         width: 2.5em;
 74 |         height: 0.5em;
 75 |         position: absolute;
 76 |         top: 12px;
 77 |         right: -40px;
 78 |         border-radius: 50%;
 79 |         background-color: green;
 80 |         transform: rotate(10deg);
 81 |       }
 82 |     }
 83 |     &-bottom {
 84 |       width: 3em;
 85 |       height: 1em;
 86 |       margin: 0 auto;
 87 |       position: absolute;
 88 |       border-bottom: none;
 89 |       border-radius: 100% 20% 20% 100%;
 90 |       background-color: orange;
 91 |       top: 0.5em;
 92 |       &:before {
 93 |         content: '';
 94 |         position: absolute;
 95 |         top: -8px;
 96 |         right: -5px;
 97 |         width: 0.6em;
 98 |         height: 1.5em;
 99 |         background-color: orange;
100 |         overflow: hidden;
101 |         border-radius: 0 100% 100% 0;
102 |       }
103 |     }
104 |   }
105 |   & .broccoli {
106 |     position: absolute;
107 |     &:nth-child(3) {
108 |       right: 8em;
109 |       bottom: 6.5em;
110 |       transform: translate(0, 4.3em) rotate(28deg);
111 |     }
112 |     &:nth-child(4) {
113 |       z-index: 1;
114 |       right: 2em;
115 |       bottom: 6em;
116 |       transform: translate(0, 4.3em) rotate(140deg);
117 |     }
118 |     &-stem {
119 |       position: absolute;
120 |       height: 0.8em;
121 |       width: 1.6em;
122 |       background: #8CFF98;
123 |       transform-origin: 0% 50%;
124 |     }
125 |     &-leaf-left {
126 |       position: absolute;
127 |       height: 1.5em;
128 |       width: 1.5em;
129 |       border-radius: 50%;
130 |       background: #4B7F52;
131 |       transform: translate(-1em, 0.5em);
132 |     }
133 |     &-leaf-middle {
134 |       position: absolute;
135 |       height: 2em;
136 |       width: 2em;
137 |       border-radius: 50%;
138 |       background: #4B7F52;
139 |       transform: translate(-1.5em, -0.5em);
140 |     }
141 |     &-leaf-right {
142 |       position: absolute;
143 |       height: 1.5em;
144 |       width: 1.5em;
145 |       border-radius: 50%;
146 |       background: #4B7F52;
147 |       transform: translate(-1em, -1em);
148 |     }
149 |   }
150 | }
151 | </style>


--------------------------------------------------------------------------------
/states-of-nigeria/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <BaseMap
  4 |       :zoom="mapZoom"
  5 |     >
  6 |       <template slot-scope="{loaded, mapContext}" v-if="loaded">
  7 |         <SourceLayer
  8 |           :mapContext="mapContext"
  9 |           sourceId="nigerianstates"
 10 |           sourceType="geojson"
 11 |           :dataSrc="stateBoundaries"
 12 |         />
 13 |         <FeatureLayer 
 14 |           :mapContext="mapContext"
 15 |           mapId="nigerian-states-fill"
 16 |           sourceId="nigerianstates"
 17 |           layerType="fill"
 18 |           :paint="{ 'fill-color': '#3b8555','fill-opacity': 0.8 }"
 19 |         >
 20 |           <FeatureEvents
 21 |             :onMouseEnter="cursorHover(mapContext, 'pointer', 'nigerian-states-hover')"
 22 |             :onMouseLeave="cursorHover(mapContext, '', 'nigerian-states-hover')"
 23 |             :onMouseMove="fillHover(mapContext, 'nigerian-states-hover')"
 24 |             :onClick="fillClick(mapContext, 'nigerian-states-selected')"
 25 |           ></FeatureEvents>
 26 |         </FeatureLayer>
 27 |         <FeatureLayer
 28 |           :mapContext="mapContext"
 29 |           mapId="nigerian-states-selected"
 30 |           sourceId="nigerianstates"
 31 |           layerType="fill"
 32 |           :paint="{'fill-color': '#000','fill-opacity': 0.4}"
 33 |           :filter="selectedFilter"
 34 |         >
 35 |         </FeatureLayer>
 36 |         <FeatureLayer
 37 |           :mapContext="mapContext"
 38 |           mapId="nigerian-states-hover"
 39 |           sourceId="nigerianstates"
 40 |           layerType="fill"
 41 |           :paint="{'fill-color': '#fff','fill-opacity': 0.4}"
 42 |           :filter="hoverFilter"
 43 |         >
 44 |         </FeatureLayer>
 45 |         <FeatureLayer 
 46 |           :mapContext="mapContext"
 47 |           mapId="nigerian-states"
 48 |           sourceId="nigerianstates"
 49 |           layerType="line"
 50 |           :paint="{ 'line-color': '#fff','line-width': 1 }"
 51 |         >
 52 |         </FeatureLayer>
 53 |       </template>
 54 |     </BaseMap>
 55 |   </div>
 56 | </template>
 57 | 
 58 | <script>
 59 | import BaseMap from "./components/BaseMap.vue";
 60 | import FeatureLayer from "./components/FeatureLayer.vue";
 61 | import SourceLayer from "./components/SourceLayer.vue";
 62 | import FeatureEvents from "./components/FeatureEvents.vue";
 63 | 
 64 | export default {
 65 |   name: "app",
 66 |   components: {
 67 |     BaseMap,
 68 |     SourceLayer,
 69 |     FeatureLayer,
 70 |     FeatureEvents
 71 |   },
 72 |   data() {
 73 |     return {
 74 |       stateBoundaries: null,
 75 |       mapZoom: 5,
 76 |       mapCenter: [8.675277000000051, 9.081999],
 77 |       selectedFilter: ["==", "Name", ""],
 78 |       hoverFilter: ["==", "Name", ""]
 79 |     };
 80 |   },
 81 |   created() {
 82 |     fetch(
 83 |       "https://gist.githubusercontent.com/shortdiv/600c5c8f4998fb55e7dafb7c7835c752/raw/fbe3e7f134d4ca61fb68209bf62207f2f4a386bd/statesOfNigeria.geojson"
 84 |     )
 85 |       .then(res => res.json())
 86 |       .then(data => {
 87 |         this.stateBoundaries = data;
 88 |       });
 89 |   },
 90 |   methods: {
 91 |     cursorHover(context, cursor, mapId) {
 92 |       return function() {
 93 |         context.getCanvas().style.cursor = cursor;
 94 |         //capture mouse leave only//
 95 |         if (cursor === "") {
 96 |           context.setFilter(mapId, ["==", "admin1Name", ""]);
 97 |         }
 98 |       };
 99 |     },
100 |     fillHover(context, mapId) {
101 |       return function(e) {
102 |         context.setFilter(mapId, [
103 |           "==",
104 |           "admin1Name",
105 |           e.features[0].properties.admin1Name
106 |         ]);
107 |       };
108 |     },
109 |     fillClick(context, mapId) {
110 |       return function(e) {
111 |         context.setFilter(mapId, [
112 |           "==",
113 |           "admin1Name",
114 |           e.features[0].properties.admin1Name
115 |         ]);
116 |       };
117 |     }
118 |   }
119 | };
120 | </script>
121 | 
122 | <style lang="scss">
123 | #app {
124 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
125 |   -webkit-font-smoothing: antialiased;
126 |   -moz-osx-font-smoothing: grayscale;
127 |   text-align: center;
128 |   color: #2c3e50;
129 |   margin-top: 60px;
130 | }
131 | </style>
132 | 


--------------------------------------------------------------------------------
/states-of-nigeria/src/assets/mapbox.css:
--------------------------------------------------------------------------------
  1 | .mapboxgl-map {
  2 |   font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  3 |   overflow: hidden;
  4 |   position: relative;
  5 |   -webkit-tap-highlight-color: rgba(0,0,0,0);
  6 | }
  7 | .mapboxgl-map:-webkit-full-screen {
  8 |   width: 100%;
  9 |   height: 100%;
 10 | }
 11 | 
 12 | .mapboxgl-missing-css {
 13 |   display: none;
 14 | }
 15 | 
 16 | .mapboxgl-canvas-container.mapboxgl-interactive,
 17 | .mapboxgl-ctrl-nav-compass {
 18 |   cursor: -webkit-grab;
 19 |   cursor: -moz-grab;
 20 |   cursor: grab;
 21 | }
 22 | .mapboxgl-canvas-container.mapboxgl-interactive:active,
 23 | .mapboxgl-ctrl-nav-compass:active {
 24 |   cursor: -webkit-grabbing;
 25 |   cursor: -moz-grabbing;
 26 |   cursor: grabbing;
 27 | }
 28 | 
 29 | .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate {
 30 |   -ms-touch-action: pan-x pan-y;
 31 |   touch-action: pan-x pan-y;
 32 | }
 33 | .mapboxgl-canvas-container.mapboxgl-touch-drag-pan {
 34 |   -ms-touch-action: pinch-zoom;
 35 | }
 36 | .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan {
 37 |   -ms-touch-action: none;
 38 |   touch-action: none;
 39 | }
 40 | .mapboxgl-ctrl-top-left,
 41 | .mapboxgl-ctrl-top-right,
 42 | .mapboxgl-ctrl-bottom-left,
 43 | .mapboxgl-ctrl-bottom-right  { position:absolute; pointer-events:none; z-index:2; }
 44 | .mapboxgl-ctrl-top-left      { top:0; left:0; }
 45 | .mapboxgl-ctrl-top-right     { top:0; right:0; }
 46 | .mapboxgl-ctrl-bottom-left   { bottom:0; left:0; }
 47 | .mapboxgl-ctrl-bottom-right  { right:0; bottom:0; }
 48 | 
 49 | .mapboxgl-ctrl { clear:both; pointer-events:auto }
 50 | .mapboxgl-ctrl-top-left .mapboxgl-ctrl { margin:10px 0 0 10px; float:left; }
 51 | .mapboxgl-ctrl-top-right .mapboxgl-ctrl{ margin:10px 10px 0 0; float:right; }
 52 | .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin:0 0 10px 10px; float:left; }
 53 | .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin:0 10px 10px 0; float:right; }
 54 | 
 55 | .mapboxgl-ctrl-group {
 56 |   border-radius: 4px;
 57 |   -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
 58 |   -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
 59 |   box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
 60 |   overflow: hidden;
 61 |   background: #fff;
 62 | }
 63 | .mapboxgl-ctrl-group > button {
 64 |   width: 30px;
 65 |   height: 30px;
 66 |   display: block;
 67 |   padding: 0;
 68 |   outline: none;
 69 |   border: none;
 70 |   box-sizing: border-box;
 71 |   background-color: rgba(0,0,0,0);
 72 |   cursor: pointer;
 73 | }
 74 | 
 75 | .mapboxgl-ctrl-group > button + button {
 76 |   border-top: 1px solid #ddd;
 77 | }
 78 | /* https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
 79 | .mapboxgl-ctrl > button::-moz-focus-inner {
 80 |   border: 0;
 81 |   padding: 0;
 82 | }
 83 | .mapboxgl-ctrl > button:hover {
 84 |   background-color: rgba(0,0,0,0.05);
 85 | }
 86 | .mapboxgl-ctrl-icon,
 87 | .mapboxgl-ctrl-icon > .mapboxgl-ctrl-compass-arrow {
 88 |   speak: none;
 89 |   -webkit-font-smoothing: antialiased;
 90 |   -moz-osx-font-smoothing: grayscale;
 91 | }
 92 | .mapboxgl-ctrl-icon {
 93 |   padding: 5px;
 94 | }
 95 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
 96 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A");
 97 | }
 98 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
 99 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A");
100 | }
101 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate {
102 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%23333%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
103 | }
104 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate:disabled {
105 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%23aaa%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
106 | }
107 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active {
108 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%2333b5e5%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
109 | }
110 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error {
111 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%23e58978%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
112 | }
113 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background {
114 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%2333b5e5%3B%27%20d%3D%27M%2010%2C4%20C%209%2C4%209%2C5%209%2C5%20L%209%2C5.1%20C%207.0357113%2C5.5006048%205.5006048%2C7.0357113%205.1%2C9%20L%205%2C9%20c%200%2C0%20-1%2C0%20-1%2C1%200%2C1%201%2C1%201%2C1%20l%200.1%2C0%20c%200.4006048%2C1.964289%201.9357113%2C3.499395%203.9%2C3.9%20L%209%2C15%20c%200%2C0%200%2C1%201%2C1%201%2C0%201%2C-1%201%2C-1%20l%200%2C-0.1%20c%201.964289%2C-0.400605%203.499395%2C-1.935711%203.9%2C-3.9%20l%200.1%2C0%20c%200%2C0%201%2C0%201%2C-1%20C%2016%2C9%2015%2C9%2015%2C9%20L%2014.9%2C9%20C%2014.499395%2C7.0357113%2012.964289%2C5.5006048%2011%2C5.1%20L%2011%2C5%20c%200%2C0%200%2C-1%20-1%2C-1%20z%20m%200%2C2.5%20c%201.932997%2C0%203.5%2C1.5670034%203.5%2C3.5%200%2C1.932997%20-1.567003%2C3.5%20-3.5%2C3.5%20C%208.0670034%2C13.5%206.5%2C11.932997%206.5%2C10%206.5%2C8.0670034%208.0670034%2C6.5%2010%2C6.5%20Z%27%20%2F%3E%0A%3C%2Fsvg%3E");
115 | }
116 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error {
117 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23e54e33%3B%27%20d%3D%27M%2010%2C4%20C%209%2C4%209%2C5%209%2C5%20L%209%2C5.1%20C%207.0357113%2C5.5006048%205.5006048%2C7.0357113%205.1%2C9%20L%205%2C9%20c%200%2C0%20-1%2C0%20-1%2C1%200%2C1%201%2C1%201%2C1%20l%200.1%2C0%20c%200.4006048%2C1.964289%201.9357113%2C3.499395%203.9%2C3.9%20L%209%2C15%20c%200%2C0%200%2C1%201%2C1%201%2C0%201%2C-1%201%2C-1%20l%200%2C-0.1%20c%201.964289%2C-0.400605%203.499395%2C-1.935711%203.9%2C-3.9%20l%200.1%2C0%20c%200%2C0%201%2C0%201%2C-1%20C%2016%2C9%2015%2C9%2015%2C9%20L%2014.9%2C9%20C%2014.499395%2C7.0357113%2012.964289%2C5.5006048%2011%2C5.1%20L%2011%2C5%20c%200%2C0%200%2C-1%20-1%2C-1%20z%20m%200%2C2.5%20c%201.932997%2C0%203.5%2C1.5670034%203.5%2C3.5%200%2C1.932997%20-1.567003%2C3.5%20-3.5%2C3.5%20C%208.0670034%2C13.5%206.5%2C11.932997%206.5%2C10%206.5%2C8.0670034%208.0670034%2C6.5%2010%2C6.5%20Z%27%20%2F%3E%0A%3C%2Fsvg%3E");
118 | }
119 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting {
120 |   -webkit-animation: mapboxgl-spin 2s infinite linear;
121 |   -moz-animation: mapboxgl-spin 2s infinite linear;
122 |   -o-animation: mapboxgl-spin 2s infinite linear;
123 |   -ms-animation: mapboxgl-spin 2s infinite linear;
124 |   animation: mapboxgl-spin 2s infinite linear;
125 | }
126 | 
127 | @-webkit-keyframes mapboxgl-spin {
128 |   0% { -webkit-transform: rotate(0deg); }
129 |   100% { -webkit-transform: rotate(360deg); }
130 | }
131 | @-moz-keyframes mapboxgl-spin {
132 |   0% { -moz-transform: rotate(0deg); }
133 |   100% { -moz-transform: rotate(360deg); }
134 | }
135 | @-o-keyframes mapboxgl-spin {
136 |   0% { -o-transform: rotate(0deg); }
137 |   100% { -o-transform: rotate(360deg); }
138 | }
139 | @-ms-keyframes mapboxgl-spin {
140 |   0% { -ms-transform: rotate(0deg); }
141 |   100% { -ms-transform: rotate(360deg); }
142 | }
143 | @keyframes mapboxgl-spin {
144 |   0% { transform: rotate(0deg); }
145 |   100% { transform: rotate(360deg); }
146 | }
147 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-fullscreen  {
148 |   background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iTGF5ZXJfMSIKICAgeD0iMHB4IgogICB5PSIwcHgiCiAgIHZpZXdCb3g9IjAgMCAyMCAyMCIKICAgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIKICAgc29kaXBvZGk6ZG9jbmFtZT0iZnVsbHNjcmVlbi5zdmciPjxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTQxODUiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnM0MTgzIiAvPjxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMSIKICAgICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICAgIGdyaWR0b2xlcmFuY2U9IjEwIgogICAgIGd1aWRldG9sZXJhbmNlPSIxMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTQ3MSIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI2OTUiCiAgICAgaWQ9Im5hbWVkdmlldzQxODEiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjExLjMxMzcwOCIKICAgICBpbmtzY2FwZTpjeD0iMTQuNjk4MjgiCiAgICAgaW5rc2NhcGU6Y3k9IjEwLjUyNjY4OSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iNjk3IgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyOTgiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIgogICAgIGlua3NjYXBlOnNuYXAtYmJveD0idHJ1ZSIKICAgICBpbmtzY2FwZTpiYm94LXBhdGhzPSJ0cnVlIgogICAgIGlua3NjYXBlOm9iamVjdC1wYXRocz0idHJ1ZSIKICAgICBpbmtzY2FwZTpiYm94LW5vZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOm9iamVjdC1ub2Rlcz0idHJ1ZSI+PGlua3NjYXBlOmdyaWQKICAgICAgIHR5cGU9Inh5Z3JpZCIKICAgICAgIGlkPSJncmlkNjA3NiIgLz48L3NvZGlwb2RpOm5hbWVkdmlldz48cGF0aAogICAgIGQ9Ik0gNSA0IEMgNC41IDQgNCA0LjUgNCA1IEwgNCA2IEwgNCA5IEwgNC41IDkgTCA1Ljc3NzM0MzggNy4yOTY4NzUgQyA2Ljc3NzEzMTkgOC4wNjAyMTMxIDcuODM1NzY1IDguOTU2NTcyOCA4Ljg5MDYyNSAxMCBDIDcuODI1NzEyMSAxMS4wNjMzIDYuNzc2MTc5MSAxMS45NTE2NzUgNS43ODEyNSAxMi43MDcwMzEgTCA0LjUgMTEgTCA0IDExIEwgNCAxNSBDIDQgMTUuNSA0LjUgMTYgNSAxNiBMIDkgMTYgTCA5IDE1LjUgTCA3LjI3MzQzNzUgMTQuMjA1MDc4IEMgOC4wNDI4OTMxIDEzLjE4Nzg4NiA4LjkzOTU0NDEgMTIuMTMzNDgxIDkuOTYwOTM3NSAxMS4wNjgzNTkgQyAxMS4wNDIzNzEgMTIuMTQ2OTkgMTEuOTQyMDkzIDEzLjIxMTIgMTIuNzA3MDMxIDE0LjIxODc1IEwgMTEgMTUuNSBMIDExIDE2IEwgMTQgMTYgTCAxNSAxNiBDIDE1LjUgMTYgMTYgMTUuNSAxNiAxNSBMIDE2IDE0IEwgMTYgMTEgTCAxNS41IDExIEwgMTQuMjA1MDc4IDEyLjcyNjU2MiBDIDEzLjE3Nzk4NSAxMS45NDk2MTcgMTIuMTEyNzE4IDExLjA0MzU3NyAxMS4wMzcxMDkgMTAuMDA5NzY2IEMgMTIuMTUxODU2IDguOTgxMDYxIDEzLjIyNDM0NSA4LjA3OTg2MjQgMTQuMjI4NTE2IDcuMzA0Njg3NSBMIDE1LjUgOSBMIDE2IDkgTCAxNiA1IEMgMTYgNC41IDE1LjUgNCAxNSA0IEwgMTEgNCBMIDExIDQuNSBMIDEyLjcwMzEyNSA1Ljc3NzM0MzggQyAxMS45MzI2NDcgNi43ODY0ODM0IDExLjAyNjY5MyA3Ljg1NTQ3MTIgOS45NzA3MDMxIDguOTE5OTIxOSBDIDguOTU4NDczOSA3LjgyMDQ5NDMgOC4wNjk4NzY3IDYuNzYyNzE4OCA3LjMwNDY4NzUgNS43NzE0ODQ0IEwgOSA0LjUgTCA5IDQgTCA2IDQgTCA1IDQgeiAiCiAgICAgaWQ9InBhdGg0MTY5IiAvPjwvc3ZnPg==");
149 | }
150 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-shrink  {
151 |   background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iTGF5ZXJfMSIKICAgeD0iMHB4IgogICB5PSIwcHgiCiAgIHZpZXdCb3g9IjAgMCAyMCAyMCIKICAgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIKICAgc29kaXBvZGk6ZG9jbmFtZT0ic2hyaW5rLnN2ZyI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMTkiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnMxNyIgLz48c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjIwMjEiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iOTA4IgogICAgIGlkPSJuYW1lZHZpZXcxNSIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgaW5rc2NhcGU6em9vbT0iMSIKICAgICBpbmtzY2FwZTpjeD0iNC45NTAxMDgyIgogICAgIGlua3NjYXBlOmN5PSIxMC44NTQ3NDciCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIgogICAgIGlua3NjYXBlOnNuYXAtYmJveD0idHJ1ZSIKICAgICBpbmtzY2FwZTpiYm94LXBhdGhzPSJ0cnVlIgogICAgIGlua3NjYXBlOnNuYXAtYmJveC1lZGdlLW1pZHBvaW50cz0idHJ1ZSIKICAgICBpbmtzY2FwZTpiYm94LW5vZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOnNuYXAtYmJveC1taWRwb2ludHM9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LXBhdGhzPSJ0cnVlIgogICAgIGlua3NjYXBlOm9iamVjdC1ub2Rlcz0idHJ1ZSI+PGlua3NjYXBlOmdyaWQKICAgICAgIHR5cGU9Inh5Z3JpZCIKICAgICAgIGlkPSJncmlkNDE0NyIgLz48L3NvZGlwb2RpOm5hbWVkdmlldz48cGF0aAogICAgIHN0eWxlPSJmaWxsOiMwMDAwMDAiCiAgICAgZD0iTSA0LjI0MjE4NzUgMy40OTIxODc1IEEgMC43NTAwNzUgMC43NTAwNzUgMCAwIDAgMy43MTg3NSA0Ljc4MTI1IEwgNS45NjQ4NDM4IDcuMDI3MzQzOCBMIDQgOC41IEwgNCA5IEwgOCA5IEMgOC41MDAwMDEgOC45OTk5OTg4IDkgOC40OTk5OTkyIDkgOCBMIDkgNCBMIDguNSA0IEwgNy4wMTc1NzgxIDUuOTU1MDc4MSBMIDQuNzgxMjUgMy43MTg3NSBBIDAuNzUwMDc1IDAuNzUwMDc1IDAgMCAwIDQuMjQyMTg3NSAzLjQ5MjE4NzUgeiBNIDE1LjczNDM3NSAzLjQ5MjE4NzUgQSAwLjc1MDA3NSAwLjc1MDA3NSAwIDAgMCAxNS4yMTg3NSAzLjcxODc1IEwgMTIuOTg0Mzc1IDUuOTUzMTI1IEwgMTEuNSA0IEwgMTEgNCBMIDExIDggQyAxMSA4LjQ5OTk5OTIgMTEuNDk5OTk5IDguOTk5OTk4OCAxMiA5IEwgMTYgOSBMIDE2IDguNSBMIDE0LjAzNTE1NiA3LjAyNzM0MzggTCAxNi4yODEyNSA0Ljc4MTI1IEEgMC43NTAwNzUgMC43NTAwNzUgMCAwIDAgMTUuNzM0Mzc1IDMuNDkyMTg3NSB6IE0gNCAxMSBMIDQgMTEuNSBMIDUuOTY0ODQzOCAxMi45NzI2NTYgTCAzLjcxODc1IDE1LjIxODc1IEEgMC43NTEzMDA5NiAwLjc1MTMwMDk2IDAgMSAwIDQuNzgxMjUgMTYuMjgxMjUgTCA3LjAyNzM0MzggMTQuMDM1MTU2IEwgOC41IDE2IEwgOSAxNiBMIDkgMTIgQyA5IDExLjUwMDAwMSA4LjUwMDAwMSAxMS4wMDAwMDEgOCAxMSBMIDQgMTEgeiBNIDEyIDExIEMgMTEuNDk5OTk5IDExLjAwMDAwMSAxMSAxMS41MDAwMDEgMTEgMTIgTCAxMSAxNiBMIDExLjUgMTYgTCAxMi45NzI2NTYgMTQuMDM1MTU2IEwgMTUuMjE4NzUgMTYuMjgxMjUgQSAwLjc1MTMwMDk2IDAuNzUxMzAwOTYgMCAxIDAgMTYuMjgxMjUgMTUuMjE4NzUgTCAxNC4wMzUxNTYgMTIuOTcyNjU2IEwgMTYgMTEuNSBMIDE2IDExIEwgMTIgMTEgeiAiCiAgICAgaWQ9InBhdGg3IiAvPjwvc3ZnPg==");
152 | }
153 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > .mapboxgl-ctrl-compass-arrow {
154 |   width: 20px;
155 |   height: 20px;
156 |   margin: 5px;
157 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23333333%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23CCCCCC%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E");
158 |   background-repeat: no-repeat;
159 |   display: inline-block;
160 | }
161 | 
162 | a.mapboxgl-ctrl-logo {
163 |   width: 85px;
164 |   height: 21px;
165 |   margin: 0 0 -3px -3px;
166 |   display: block;
167 |   background-repeat: no-repeat;
168 |   cursor: pointer;
169 |   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiAgIHZpZXdCb3g9IjAgMCA4NC40OSAyMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgODQuNDkgMjE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gIDxwYXRoIGNsYXNzPSJzdDAiIHN0eWxlPSJvcGFjaXR5OjAuOTsgZmlsbDogI0ZGRkZGRjsgZW5hYmxlLWJhY2tncm91bmQ6IG5ldzsiIGQ9Ik04My4yNSwxNC4yNmMwLDAuMTItMC4wOSwwLjIxLTAuMjEsMC4yMWgtMS42MWMtMC4xMywwLTAuMjQtMC4wNi0wLjMtMC4xN2wtMS40NC0yLjM5bC0xLjQ0LDIuMzkgICAgYy0wLjA2LDAuMTEtMC4xOCwwLjE3LTAuMywwLjE3aC0xLjYxYy0wLjA0LDAtMC4wOC0wLjAxLTAuMTItMC4wM2MtMC4wOS0wLjA2LTAuMTMtMC4xOS0wLjA2LTAuMjhsMCwwbDIuNDMtMy42OEw3Ni4yLDYuODQgICAgYy0wLjAyLTAuMDMtMC4wMy0wLjA3LTAuMDMtMC4xMmMwLTAuMTIsMC4wOS0wLjIxLDAuMjEtMC4yMWgxLjYxYzAuMTMsMCwwLjI0LDAuMDYsMC4zLDAuMTdsMS40MSwyLjM2bDEuNC0yLjM1ICAgIGMwLjA2LTAuMTEsMC4xOC0wLjE3LDAuMy0wLjE3SDgzYzAuMDQsMCwwLjA4LDAuMDEsMC4xMiwwLjAzYzAuMDksMC4wNiwwLjEzLDAuMTksMC4wNiwwLjI4bDAsMGwtMi4zNywzLjYzbDIuNDMsMy42NyAgICBDODMuMjQsMTQuMTgsODMuMjUsMTQuMjIsODMuMjUsMTQuMjZ6Ii8+ICA8cGF0aCBjbGFzcz0ic3QwIiBzdHlsZT0ib3BhY2l0eTowLjk7IGZpbGw6ICNGRkZGRkY7IGVuYWJsZS1iYWNrZ3JvdW5kOiBuZXc7IiBkPSJNNjYuMjQsOS41OWMtMC4zOS0xLjg4LTEuOTYtMy4yOC0zLjg0LTMuMjhjLTEuMDMsMC0yLjAzLDAuNDItMi43MywxLjE4VjMuNTFjMC0wLjEzLTAuMS0wLjIzLTAuMjMtMC4yM2gtMS40ICAgIGMtMC4xMywwLTAuMjMsMC4xMS0wLjIzLDAuMjN2MTAuNzJjMCwwLjEzLDAuMSwwLjIzLDAuMjMsMC4yM2gxLjRjMC4xMywwLDAuMjMtMC4xMSwwLjIzLTAuMjNWMTMuNWMwLjcxLDAuNzUsMS43LDEuMTgsMi43MywxLjE4ICAgIGMxLjg4LDAsMy40NS0xLjQxLDMuODQtMy4yOUM2Ni4zNywxMC43OSw2Ni4zNywxMC4xOCw2Ni4yNCw5LjU5TDY2LjI0LDkuNTl6IE02Mi4wOCwxM2MtMS4zMiwwLTIuMzktMS4xMS0yLjQxLTIuNDh2LTAuMDYgICAgYzAuMDItMS4zOCwxLjA5LTIuNDgsMi40MS0yLjQ4czIuNDIsMS4xMiwyLjQyLDIuNTFTNjMuNDEsMTMsNjIuMDgsMTN6Ii8+ICA8cGF0aCBjbGFzcz0ic3QwIiBzdHlsZT0ib3BhY2l0eTowLjk7IGZpbGw6ICNGRkZGRkY7IGVuYWJsZS1iYWNrZ3JvdW5kOiBuZXc7IiBkPSJNNzEuNjcsNi4zMmMtMS45OC0wLjAxLTMuNzIsMS4zNS00LjE2LDMuMjljLTAuMTMsMC41OS0wLjEzLDEuMTksMCwxLjc3YzAuNDQsMS45NCwyLjE3LDMuMzIsNC4xNywzLjMgICAgYzIuMzUsMCw0LjI2LTEuODcsNC4yNi00LjE5Uzc0LjA0LDYuMzIsNzEuNjcsNi4zMnogTTcxLjY1LDEzLjAxYy0xLjMzLDAtMi40Mi0xLjEyLTIuNDItMi41MXMxLjA4LTIuNTIsMi40Mi0yLjUyICAgIGMxLjMzLDAsMi40MiwxLjEyLDIuNDIsMi41MVM3Mi45OSwxMyw3MS42NSwxMy4wMUw3MS42NSwxMy4wMXoiLz4gIDxwYXRoIGNsYXNzPSJzdDEiIHN0eWxlPSJvcGFjaXR5OjAuMzU7IGVuYWJsZS1iYWNrZ3JvdW5kOm5ldzsiIGQ9Ik02Mi4wOCw3Ljk4Yy0xLjMyLDAtMi4zOSwxLjExLTIuNDEsMi40OHYwLjA2QzU5LjY4LDExLjksNjAuNzUsMTMsNjIuMDgsMTNzMi40Mi0xLjEyLDIuNDItMi41MSAgICBTNjMuNDEsNy45OCw2Mi4wOCw3Ljk4eiBNNjIuMDgsMTEuNzZjLTAuNjMsMC0xLjE0LTAuNTYtMS4xNy0xLjI1di0wLjA0YzAuMDEtMC42OSwwLjU0LTEuMjUsMS4xNy0xLjI1ICAgIGMwLjYzLDAsMS4xNywwLjU3LDEuMTcsMS4yN0M2My4yNCwxMS4yLDYyLjczLDExLjc2LDYyLjA4LDExLjc2eiIvPiAgPHBhdGggY2xhc3M9InN0MSIgc3R5bGU9Im9wYWNpdHk6MC4zNTsgZW5hYmxlLWJhY2tncm91bmQ6bmV3OyIgZD0iTTcxLjY1LDcuOThjLTEuMzMsMC0yLjQyLDEuMTItMi40MiwyLjUxUzcwLjMyLDEzLDcxLjY1LDEzczIuNDItMS4xMiwyLjQyLTIuNTFTNzIuOTksNy45OCw3MS42NSw3Ljk4eiAgICAgTTcxLjY1LDExLjc2Yy0wLjY0LDAtMS4xNy0wLjU3LTEuMTctMS4yN2MwLTAuNywwLjUzLTEuMjYsMS4xNy0xLjI2czEuMTcsMC41NywxLjE3LDEuMjdDNzIuODIsMTEuMjEsNzIuMjksMTEuNzYsNzEuNjUsMTEuNzZ6IiAgICAvPiAgPHBhdGggY2xhc3M9InN0MCIgc3R5bGU9Im9wYWNpdHk6MC45OyBmaWxsOiAjRkZGRkZGOyBlbmFibGUtYmFja2dyb3VuZDogbmV3OyIgZD0iTTQ1Ljc0LDYuNTNoLTEuNGMtMC4xMywwLTAuMjMsMC4xMS0wLjIzLDAuMjN2MC43M2MtMC43MS0wLjc1LTEuNy0xLjE4LTIuNzMtMS4xOCAgICBjLTIuMTcsMC0zLjk0LDEuODctMy45NCw0LjE5czEuNzcsNC4xOSwzLjk0LDQuMTljMS4wNCwwLDIuMDMtMC40MywyLjczLTEuMTl2MC43M2MwLDAuMTMsMC4xLDAuMjMsMC4yMywwLjIzaDEuNCAgICBjMC4xMywwLDAuMjMtMC4xMSwwLjIzLTAuMjNWNi43NGMwLTAuMTItMC4wOS0wLjIyLTAuMjItMC4yMkM0NS43NSw2LjUzLDQ1Ljc1LDYuNTMsNDUuNzQsNi41M3ogTTQ0LjEyLDEwLjUzICAgIEM0NC4xMSwxMS45LDQzLjAzLDEzLDQxLjcxLDEzcy0yLjQyLTEuMTItMi40Mi0yLjUxczEuMDgtMi41MiwyLjQtMi41MmMxLjMzLDAsMi4zOSwxLjExLDIuNDEsMi40OEw0NC4xMiwxMC41M3oiLz4gIDxwYXRoIGNsYXNzPSJzdDEiIHN0eWxlPSJvcGFjaXR5OjAuMzU7IGVuYWJsZS1iYWNrZ3JvdW5kOm5ldzsiIGQ9Ik00MS43MSw3Ljk4Yy0xLjMzLDAtMi40MiwxLjEyLTIuNDIsMi41MVM0MC4zNywxMyw0MS43MSwxM3MyLjM5LTEuMTEsMi40MS0yLjQ4di0wLjA2ICAgIEM0NC4xLDkuMDksNDMuMDMsNy45OCw0MS43MSw3Ljk4eiBNNDAuNTUsMTAuNDljMC0wLjcsMC41Mi0xLjI3LDEuMTctMS4yN2MwLjY0LDAsMS4xNCwwLjU2LDEuMTcsMS4yNXYwLjA0ICAgIGMtMC4wMSwwLjY4LTAuNTMsMS4yNC0xLjE3LDEuMjRDNDEuMDgsMTEuNzUsNDAuNTUsMTEuMTksNDAuNTUsMTAuNDl6Ii8+ICA8cGF0aCBjbGFzcz0ic3QwIiBzdHlsZT0ib3BhY2l0eTowLjk7IGZpbGw6ICNGRkZGRkY7IGVuYWJsZS1iYWNrZ3JvdW5kOiBuZXc7IiBkPSJNNTIuNDEsNi4zMmMtMS4wMywwLTIuMDMsMC40Mi0yLjczLDEuMThWNi43NWMwLTAuMTMtMC4xLTAuMjMtMC4yMy0wLjIzaC0xLjRjLTAuMTMsMC0wLjIzLDAuMTEtMC4yMywwLjIzICAgIHYxMC43MmMwLDAuMTMsMC4xLDAuMjMsMC4yMywwLjIzaDEuNGMwLjEzLDAsMC4yMy0wLjEsMC4yMy0wLjIzVjEzLjVjMC43MSwwLjc1LDEuNywxLjE4LDIuNzQsMS4xOGMyLjE3LDAsMy45NC0xLjg3LDMuOTQtNC4xOSAgICBTNTQuNTgsNi4zMiw1Mi40MSw2LjMyeiBNNTIuMDgsMTMuMDFjLTEuMzIsMC0yLjM5LTEuMTEtMi40Mi0yLjQ4di0wLjA3YzAuMDItMS4zOCwxLjA5LTIuNDksMi40LTIuNDljMS4zMiwwLDIuNDEsMS4xMiwyLjQxLDIuNTEgICAgUzUzLjQsMTMsNTIuMDgsMTMuMDFMNTIuMDgsMTMuMDF6Ii8+ICA8cGF0aCBjbGFzcz0ic3QxIiBzdHlsZT0ib3BhY2l0eTowLjM1OyBlbmFibGUtYmFja2dyb3VuZDpuZXc7IiBkPSJNNTIuMDgsNy45OGMtMS4zMiwwLTIuMzksMS4xMS0yLjQyLDIuNDh2MC4wNmMwLjAzLDEuMzgsMS4xLDIuNDgsMi40MiwyLjQ4czIuNDEtMS4xMiwyLjQxLTIuNTEgICAgUzUzLjQsNy45OCw1Mi4wOCw3Ljk4eiBNNTIuMDgsMTEuNzZjLTAuNjMsMC0xLjE0LTAuNTYtMS4xNy0xLjI1di0wLjA0YzAuMDEtMC42OSwwLjU0LTEuMjUsMS4xNy0xLjI1YzAuNjMsMCwxLjE3LDAuNTgsMS4xNywxLjI3ICAgIFM1Mi43MiwxMS43Niw1Mi4wOCwxMS43NnoiLz4gIDxwYXRoIGNsYXNzPSJzdDAiIHN0eWxlPSJvcGFjaXR5OjAuOTsgZmlsbDogI0ZGRkZGRjsgZW5hYmxlLWJhY2tncm91bmQ6IG5ldzsiIGQ9Ik0zNi4wOCwxNC4yNGMwLDAuMTMtMC4xLDAuMjMtMC4yMywwLjIzaC0xLjQxYy0wLjEzLDAtMC4yMy0wLjExLTAuMjMtMC4yM1Y5LjY4YzAtMC45OC0wLjc0LTEuNzEtMS42Mi0xLjcxICAgIGMtMC44LDAtMS40NiwwLjctMS41OSwxLjYybDAuMDEsNC42NmMwLDAuMTMtMC4xMSwwLjIzLTAuMjMsMC4yM2gtMS40MWMtMC4xMywwLTAuMjMtMC4xMS0wLjIzLTAuMjNWOS42OCAgICBjMC0wLjk4LTAuNzQtMS43MS0xLjYyLTEuNzFjLTAuODUsMC0xLjU0LDAuNzktMS42LDEuOHY0LjQ4YzAsMC4xMy0wLjEsMC4yMy0wLjIzLDAuMjNoLTEuNGMtMC4xMywwLTAuMjMtMC4xMS0wLjIzLTAuMjNWNi43NCAgICBjMC4wMS0wLjEzLDAuMS0wLjIyLDAuMjMtMC4yMmgxLjRjMC4xMywwLDAuMjIsMC4xMSwwLjIzLDAuMjJWNy40YzAuNS0wLjY4LDEuMy0xLjA5LDIuMTYtMS4xaDAuMDNjMS4wOSwwLDIuMDksMC42LDIuNiwxLjU1ICAgIGMwLjQ1LTAuOTUsMS40LTEuNTUsMi40NC0xLjU2YzEuNjIsMCwyLjkzLDEuMjUsMi45LDIuNzhMMzYuMDgsMTQuMjR6Ii8+ICA8cGF0aCBjbGFzcz0ic3QxIiBzdHlsZT0ib3BhY2l0eTowLjM1OyBlbmFibGUtYmFja2dyb3VuZDpuZXc7IiBkPSJNODQuMzQsMTMuNTlsLTAuMDctMC4xM2wtMS45Ni0yLjk5bDEuOTQtMi45NWMwLjQ0LTAuNjcsMC4yNi0xLjU2LTAuNDEtMi4wMmMtMC4wMiwwLTAuMDMsMC0wLjA0LTAuMDEgICAgYy0wLjIzLTAuMTUtMC41LTAuMjItMC43OC0wLjIyaC0xLjYxYy0wLjU2LDAtMS4wOCwwLjI5LTEuMzcsMC43OEw3OS43Miw2LjZsLTAuMzQtMC41NkM3OS4wOSw1LjU2LDc4LjU3LDUuMjcsNzgsNS4yN2gtMS42ICAgIGMtMC42LDAtMS4xMywwLjM3LTEuMzUsMC45MmMtMi4xOS0xLjY2LTUuMjgtMS40Ny03LjI2LDAuNDVjLTAuMzUsMC4zNC0wLjY1LDAuNzItMC44OSwxLjE0Yy0wLjktMS42Mi0yLjU4LTIuNzItNC41LTIuNzIgICAgYy0wLjUsMC0xLjAxLDAuMDctMS40OCwwLjIzVjMuNTFjMC0wLjgyLTAuNjYtMS40OC0xLjQ3LTEuNDhoLTEuNGMtMC44MSwwLTEuNDcsMC42Ni0xLjQ3LDEuNDd2My43NSAgICBjLTAuOTUtMS4zNi0yLjUtMi4xOC00LjE3LTIuMTljLTAuNzQsMC0xLjQ2LDAuMTYtMi4xMiwwLjQ3Yy0wLjI0LTAuMTctMC41NC0wLjI2LTAuODQtMC4yNmgtMS40Yy0wLjQ1LDAtMC44NywwLjIxLTEuMTUsMC41NiAgICBjLTAuMDItMC4wMy0wLjA0LTAuMDUtMC4wNy0wLjA4Yy0wLjI4LTAuMy0wLjY4LTAuNDctMS4wOS0wLjQ3aC0xLjM5Yy0wLjMsMC0wLjYsMC4wOS0wLjg0LDAuMjZjLTAuNjctMC4zLTEuMzktMC40Ni0yLjEyLTAuNDYgICAgYy0xLjgzLDAtMy40MywxLTQuMzcsMi41Yy0wLjItMC40Ni0wLjQ4LTAuODktMC44My0xLjI1Yy0wLjgtMC44MS0xLjg5LTEuMjUtMy4wMi0xLjI1aC0wLjAxYy0wLjg5LDAuMDEtMS43NSwwLjMzLTIuNDYsMC44OCAgICBjLTAuNzQtMC41Ny0xLjY0LTAuODgtMi41Ny0wLjg4SDI4LjFjLTAuMjksMC0wLjU4LDAuMDMtMC44NiwwLjExYy0wLjI4LDAuMDYtMC41NiwwLjE2LTAuODIsMC4yOGMtMC4yMS0wLjEyLTAuNDUtMC4xOC0wLjctMC4xOCAgICBoLTEuNGMtMC44MiwwLTEuNDcsMC42Ni0xLjQ3LDEuNDd2Ny41YzAsMC44MiwwLjY2LDEuNDcsMS40NywxLjQ3aDEuNGMwLjgyLDAsMS40OC0wLjY2LDEuNDgtMS40OGwwLDBWOS43OSAgICBjMC4wMy0wLjM2LDAuMjMtMC41OSwwLjM2LTAuNTljMC4xOCwwLDAuMzgsMC4xOCwwLjM4LDAuNDd2NC41N2MwLDAuODIsMC42NiwxLjQ3LDEuNDcsMS40N2gxLjQxYzAuODIsMCwxLjQ3LTAuNjYsMS40Ny0xLjQ3ICAgIGwtMC4wMS00LjU3YzAuMDYtMC4zMiwwLjI1LTAuNDcsMC4zNS0wLjQ3YzAuMTgsMCwwLjM4LDAuMTgsMC4zOCwwLjQ3djQuNTdjMCwwLjgyLDAuNjYsMS40NywxLjQ3LDEuNDdoMS40MSAgICBjMC44MiwwLDEuNDctMC42NiwxLjQ3LTEuNDd2LTAuMzhjMC45NiwxLjI5LDIuNDYsMi4wNiw0LjA2LDIuMDZjMC43NCwwLDEuNDYtMC4xNiwyLjEyLTAuNDdjMC4yNCwwLjE3LDAuNTQsMC4yNiwwLjg0LDAuMjZoMS4zOSAgICBjMC4zLDAsMC42LTAuMDksMC44NC0wLjI2djIuMDFjMCwwLjgyLDAuNjYsMS40NywxLjQ3LDEuNDdoMS40YzAuODIsMCwxLjQ3LTAuNjYsMS40Ny0xLjQ3di0xLjc3YzAuNDgsMC4xNSwwLjk5LDAuMjMsMS40OSwwLjIyICAgIGMxLjcsMCwzLjIyLTAuODcsNC4xNy0yLjJ2MC41MmMwLDAuODIsMC42NiwxLjQ3LDEuNDcsMS40N2gxLjRjMC4zLDAsMC42LTAuMDksMC44NC0wLjI2YzAuNjYsMC4zMSwxLjM5LDAuNDcsMi4xMiwwLjQ3ICAgIGMxLjkyLDAsMy42LTEuMSw0LjQ5LTIuNzNjMS41NCwyLjY1LDQuOTUsMy41Myw3LjU4LDEuOThjMC4xOC0wLjExLDAuMzYtMC4yMiwwLjUzLTAuMzZjMC4yMiwwLjU1LDAuNzYsMC45MSwxLjM1LDAuOUg3OCAgICBjMC41NiwwLDEuMDgtMC4yOSwxLjM3LTAuNzhsMC4zNy0wLjYxbDAuMzcsMC42MWMwLjI5LDAuNDgsMC44MSwwLjc4LDEuMzgsMC43OGgxLjZjMC44MSwwLDEuNDYtMC42NiwxLjQ1LTEuNDYgICAgQzg0LjQ5LDE0LjAyLDg0LjQ0LDEzLjgsODQuMzQsMTMuNTlMODQuMzQsMTMuNTl6IE0zNS44NiwxNC40N2gtMS40MWMtMC4xMywwLTAuMjMtMC4xMS0wLjIzLTAuMjNWOS42OCAgICBjMC0wLjk4LTAuNzQtMS43MS0xLjYyLTEuNzFjLTAuOCwwLTEuNDYsMC43LTEuNTksMS42MmwwLjAxLDQuNjZjMCwwLjEzLTAuMSwwLjIzLTAuMjMsMC4yM2gtMS40MWMtMC4xMywwLTAuMjMtMC4xMS0wLjIzLTAuMjMgICAgVjkuNjhjMC0wLjk4LTAuNzQtMS43MS0xLjYyLTEuNzFjLTAuODUsMC0xLjU0LDAuNzktMS42LDEuOHY0LjQ4YzAsMC4xMy0wLjEsMC4yMy0wLjIzLDAuMjNoLTEuNGMtMC4xMywwLTAuMjMtMC4xMS0wLjIzLTAuMjMgICAgVjYuNzRjMC4wMS0wLjEzLDAuMTEtMC4yMiwwLjIzLTAuMjJoMS40YzAuMTMsMCwwLjIyLDAuMTEsMC4yMywwLjIyVjcuNGMwLjUtMC42OCwxLjMtMS4wOSwyLjE2LTEuMWgwLjAzICAgIGMxLjA5LDAsMi4wOSwwLjYsMi42LDEuNTVjMC40NS0wLjk1LDEuNC0xLjU1LDIuNDQtMS41NmMxLjYyLDAsMi45MywxLjI1LDIuOSwyLjc4bDAuMDEsNS4xNkMzNi4wOSwxNC4zNiwzNS45OCwxNC40NiwzNS44NiwxNC40NyAgICBMMzUuODYsMTQuNDd6IE00NS45NywxNC4yNGMwLDAuMTMtMC4xLDAuMjMtMC4yMywwLjIzaC0xLjRjLTAuMTMsMC0wLjIzLTAuMTEtMC4yMy0wLjIzVjEzLjVjLTAuNywwLjc2LTEuNjksMS4xOC0yLjcyLDEuMTggICAgYy0yLjE3LDAtMy45NC0xLjg3LTMuOTQtNC4xOXMxLjc3LTQuMTksMy45NC00LjE5YzEuMDMsMCwyLjAyLDAuNDMsMi43MywxLjE4VjYuNzRjMC0wLjEzLDAuMS0wLjIzLDAuMjMtMC4yM2gxLjQgICAgYzAuMTItMC4wMSwwLjIyLDAuMDgsMC4yMywwLjIxYzAsMC4wMSwwLDAuMDEsMCwwLjAydjcuNTFoLTAuMDFWMTQuMjR6IE01Mi40MSwxNC42N2MtMS4wMywwLTIuMDItMC40My0yLjczLTEuMTh2My45NyAgICBjMCwwLjEzLTAuMSwwLjIzLTAuMjMsMC4yM2gtMS40Yy0wLjEzLDAtMC4yMy0wLjEtMC4yMy0wLjIzVjYuNzVjMC0wLjEzLDAuMS0wLjIyLDAuMjMtMC4yMmgxLjRjMC4xMywwLDAuMjMsMC4xMSwwLjIzLDAuMjN2MC43MyAgICBjMC43MS0wLjc2LDEuNy0xLjE4LDIuNzMtMS4xOGMyLjE3LDAsMy45NCwxLjg2LDMuOTQsNC4xOFM1NC41OCwxNC42Nyw1Mi40MSwxNC42N3ogTTY2LjI0LDExLjM5Yy0wLjM5LDEuODctMS45NiwzLjI5LTMuODQsMy4yOSAgICBjLTEuMDMsMC0yLjAyLTAuNDMtMi43My0xLjE4djAuNzNjMCwwLjEzLTAuMSwwLjIzLTAuMjMsMC4yM2gtMS40Yy0wLjEzLDAtMC4yMy0wLjExLTAuMjMtMC4yM1YzLjUxYzAtMC4xMywwLjEtMC4yMywwLjIzLTAuMjMgICAgaDEuNGMwLjEzLDAsMC4yMywwLjExLDAuMjMsMC4yM3YzLjk3YzAuNzEtMC43NSwxLjctMS4xOCwyLjczLTEuMTdjMS44OCwwLDMuNDUsMS40LDMuODQsMy4yOEM2Ni4zNywxMC4xOSw2Ni4zNywxMC44LDY2LjI0LDExLjM5ICAgIEw2Ni4yNCwxMS4zOUw2Ni4yNCwxMS4zOXogTTcxLjY3LDE0LjY4Yy0yLDAuMDEtMy43My0xLjM1LTQuMTctMy4zYy0wLjEzLTAuNTktMC4xMy0xLjE5LDAtMS43N2MwLjQ0LTEuOTQsMi4xNy0zLjMxLDQuMTctMy4zICAgIGMyLjM2LDAsNC4yNiwxLjg3LDQuMjYsNC4xOVM3NC4wMywxNC42OCw3MS42NywxNC42OEw3MS42NywxNC42OHogTTgzLjA0LDE0LjQ3aC0xLjYxYy0wLjEzLDAtMC4yNC0wLjA2LTAuMy0wLjE3bC0xLjQ0LTIuMzkgICAgbC0xLjQ0LDIuMzljLTAuMDYsMC4xMS0wLjE4LDAuMTctMC4zLDAuMTdoLTEuNjFjLTAuMDQsMC0wLjA4LTAuMDEtMC4xMi0wLjAzYy0wLjA5LTAuMDYtMC4xMy0wLjE5LTAuMDYtMC4yOGwwLDBsMi40My0zLjY4ICAgIEw3Ni4yLDYuODRjLTAuMDItMC4wMy0wLjAzLTAuMDctMC4wMy0wLjEyYzAtMC4xMiwwLjA5LTAuMjEsMC4yMS0wLjIxaDEuNjFjMC4xMywwLDAuMjQsMC4wNiwwLjMsMC4xN2wxLjQxLDIuMzZsMS40MS0yLjM2ICAgIGMwLjA2LTAuMTEsMC4xOC0wLjE3LDAuMy0wLjE3aDEuNjFjMC4wNCwwLDAuMDgsMC4wMSwwLjEyLDAuMDNjMC4wOSwwLjA2LDAuMTMsMC4xOSwwLjA2LDAuMjhsMCwwbC0yLjM4LDMuNjRsMi40MywzLjY3ICAgIGMwLjAyLDAuMDMsMC4wMywwLjA3LDAuMDMsMC4xMkM4My4yNSwxNC4zOCw4My4xNiwxNC40Nyw4My4wNCwxNC40N0w4My4wNCwxNC40N0w4My4wNCwxNC40N3oiLz4gIDxwYXRoIGNsYXNzPSJzdDAiIHN0eWxlPSJvcGFjaXR5OjAuOTsgZmlsbDogI0ZGRkZGRjsgZW5hYmxlLWJhY2tncm91bmQ6IG5ldzsiIGQ9Ik0xMC41LDEuMjRjLTUuMTEsMC05LjI1LDQuMTUtOS4yNSw5LjI1czQuMTUsOS4yNSw5LjI1LDkuMjVzOS4yNS00LjE1LDkuMjUtOS4yNSAgICBDMTkuNzUsNS4zOCwxNS42MSwxLjI0LDEwLjUsMS4yNHogTTE0Ljg5LDEyLjc3Yy0xLjkzLDEuOTMtNC43OCwyLjMxLTYuNywyLjMxYy0wLjcsMC0xLjQxLTAuMDUtMi4xLTAuMTZjMCwwLTEuMDItNS42NCwyLjE0LTguODEgICAgYzAuODMtMC44MywxLjk1LTEuMjgsMy4xMy0xLjI4YzEuMjcsMCwyLjQ5LDAuNTEsMy4zOSwxLjQyQzE2LjU5LDguMDksMTYuNjQsMTEsMTQuODksMTIuNzd6Ii8+ICA8cGF0aCBjbGFzcz0ic3QxIiBzdHlsZT0ib3BhY2l0eTowLjM1OyBlbmFibGUtYmFja2dyb3VuZDpuZXc7IiBkPSJNMTAuNS0wLjAxQzQuNy0wLjAxLDAsNC43LDAsMTAuNDlzNC43LDEwLjUsMTAuNSwxMC41UzIxLDE2LjI5LDIxLDEwLjQ5QzIwLjk5LDQuNywxNi4zLTAuMDEsMTAuNS0wLjAxeiAgICAgTTEwLjUsMTkuNzRjLTUuMTEsMC05LjI1LTQuMTUtOS4yNS05LjI1czQuMTQtOS4yNiw5LjI1LTkuMjZzOS4yNSw0LjE1LDkuMjUsOS4yNUMxOS43NSwxNS42MSwxNS42MSwxOS43NCwxMC41LDE5Ljc0eiIvPiAgPHBhdGggY2xhc3M9InN0MSIgc3R5bGU9Im9wYWNpdHk6MC4zNTsgZW5hYmxlLWJhY2tncm91bmQ6bmV3OyIgZD0iTTE0Ljc0LDYuMjVDMTIuOSw0LjQxLDkuOTgsNC4zNSw4LjIzLDYuMWMtMy4xNiwzLjE3LTIuMTQsOC44MS0yLjE0LDguODFzNS42NCwxLjAyLDguODEtMi4xNCAgICBDMTYuNjQsMTEsMTYuNTksOC4wOSwxNC43NCw2LjI1eiBNMTIuNDcsMTAuMzRsLTAuOTEsMS44N2wtMC45LTEuODdMOC44LDkuNDNsMS44Ni0wLjlsMC45LTEuODdsMC45MSwxLjg3bDEuODYsMC45TDEyLjQ3LDEwLjM0eiIgICAgLz4gIDxwb2x5Z29uIGNsYXNzPSJzdDAiIHN0eWxlPSJvcGFjaXR5OjAuOTsgZmlsbDogI0ZGRkZGRjsgZW5hYmxlLWJhY2tncm91bmQ6IG5ldzsiIHBvaW50cz0iMTQuMzMsOS40MyAxMi40NywxMC4zNCAxMS41NiwxMi4yMSAxMC42NiwxMC4zNCA4LjgsOS40MyAxMC42Niw4LjUzIDExLjU2LDYuNjYgMTIuNDcsOC41MyAgICIvPjwvZz48L3N2Zz4=);
170 | }
171 | 
172 | .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
173 |   padding: 0 5px;
174 |   background-color: rgba(255, 255, 255, .5);
175 |   margin: 0;
176 | }
177 | .mapboxgl-ctrl-attrib.mapboxgl-compact {
178 |   padding-top: 2px;
179 |   padding-bottom: 2px;
180 |   margin: 0 10px 10px 10px;
181 |   position: relative;
182 |   padding-right: 24px;
183 |   background-color: #fff;
184 |   border-radius: 3px 12px 12px 3px;
185 |   visibility: hidden;
186 | }
187 | .mapboxgl-ctrl-attrib.mapboxgl-compact:hover {
188 |   visibility: visible;
189 | }
190 | .mapboxgl-ctrl-attrib.mapboxgl-compact:after {
191 |   content: '';
192 |   cursor: pointer;
193 |   position: absolute;
194 |   bottom: 0;
195 |   right: 0;
196 |   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%09%3Cpath%20fill%3D%27%23333333%27%20fill-rule%3D%27evenodd%27%20d%3D%27M4%2C10a6%2C6%200%201%2C0%2012%2C0a6%2C6%200%201%2C0%20-12%2C0%20M9%2C7a1%2C1%200%201%2C0%202%2C0a1%2C1%200%201%2C0%20-2%2C0%20M9%2C10a1%2C1%200%201%2C1%202%2C0l0%2C3a1%2C1%200%201%2C1%20-2%2C0%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
197 |   background-color: rgba(255, 255, 255, .5);
198 |   width: 24px;
199 |   height: 24px;
200 |   box-sizing: border-box;
201 |   visibility: visible;
202 |   border-radius: 12px;
203 | }
204 | .mapboxgl-ctrl-attrib a {
205 |   color: rgba(0,0,0,0.75);
206 |   text-decoration: none;
207 | }
208 | .mapboxgl-ctrl-attrib a:hover {
209 |   color: inherit;
210 |   text-decoration: underline;
211 | }
212 | /* stylelint-disable */
213 | .mapboxgl-ctrl-attrib .mapbox-improve-map {
214 |   font-weight: bold;
215 |   margin-left: 2px;
216 | }
217 | .mapboxgl-attrib-empty {
218 |   display: none;
219 | }
220 | /*stylelint-enable*/
221 | .mapboxgl-ctrl-scale {
222 |   background-color: rgba(255,255,255,0.75);
223 |   font-size: 10px;
224 |   border-width: medium 2px 2px;
225 |   border-style: none solid solid;
226 |   border-color: #333;
227 |   padding: 0 5px;
228 |   color: #333;
229 |   box-sizing: border-box;
230 | }
231 | 
232 | .mapboxgl-popup {
233 |   position: absolute;
234 |   top: 0;
235 |   left: 0;
236 |   display: -webkit-flex;
237 |   display: flex;
238 |   will-change: transform;
239 |   pointer-events: none;
240 | }
241 | .mapboxgl-popup-anchor-top,
242 | .mapboxgl-popup-anchor-top-left,
243 | .mapboxgl-popup-anchor-top-right {
244 |   -webkit-flex-direction: column;
245 |   flex-direction: column;
246 | }
247 | .mapboxgl-popup-anchor-bottom,
248 | .mapboxgl-popup-anchor-bottom-left,
249 | .mapboxgl-popup-anchor-bottom-right {
250 |   -webkit-flex-direction: column-reverse;
251 |   flex-direction: column-reverse;
252 | }
253 | .mapboxgl-popup-anchor-left {
254 |   -webkit-flex-direction: row;
255 |   flex-direction: row;
256 | }
257 | .mapboxgl-popup-anchor-right {
258 |   -webkit-flex-direction: row-reverse;
259 |   flex-direction: row-reverse;
260 | }
261 | .mapboxgl-popup-tip {
262 |   width: 0;
263 |   height: 0;
264 |   border: 10px solid transparent;
265 |   z-index: 1;
266 | }
267 | .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
268 |   -webkit-align-self: center;
269 |   align-self: center;
270 |   border-top: none;
271 |   border-bottom-color: #fff;
272 | }
273 | .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
274 |   -webkit-align-self: flex-start;
275 |   align-self: flex-start;
276 |   border-top: none;
277 |   border-left: none;
278 |   border-bottom-color: #fff;
279 | }
280 | .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
281 |   -webkit-align-self: flex-end;
282 |   align-self: flex-end;
283 |   border-top: none;
284 |   border-right: none;
285 |   border-bottom-color: #fff;
286 | }
287 | .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
288 |   -webkit-align-self: center;
289 |   align-self: center;
290 |   border-bottom: none;
291 |   border-top-color: #fff;
292 | }
293 | .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
294 |   -webkit-align-self: flex-start;
295 |   align-self: flex-start;
296 |   border-bottom: none;
297 |   border-left: none;
298 |   border-top-color: #fff;
299 | }
300 | .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
301 |   -webkit-align-self: flex-end;
302 |   align-self: flex-end;
303 |   border-bottom: none;
304 |   border-right: none;
305 |   border-top-color: #fff;
306 | }
307 | .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
308 |   -webkit-align-self: center;
309 |   align-self: center;
310 |   border-left: none;
311 |   border-right-color: #fff;
312 | }
313 | .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
314 |   -webkit-align-self: center;
315 |   align-self: center;
316 |   border-right: none;
317 |   border-left-color: #fff;
318 | }
319 | .mapboxgl-popup-close-button {
320 |   position: absolute;
321 |   right: 0;
322 |   top: 0;
323 |   border: none;
324 |   border-radius: 0 3px 0 0;
325 |   cursor: pointer;
326 |   background-color: rgba(0,0,0,0);
327 | }
328 | .mapboxgl-popup-close-button:hover {
329 |   background-color: rgba(0,0,0,0.05);
330 | }
331 | .mapboxgl-popup-content {
332 |   position: relative;
333 |   background: #fff;
334 |   border-radius: 3px;
335 |   box-shadow: 0 1px 2px rgba(0,0,0,0.10);
336 |   padding: 10px 10px 15px;
337 |   pointer-events: auto;
338 | }
339 | .mapboxgl-popup-anchor-top-left .mapboxgl-popup-content {
340 |   border-top-left-radius: 0;
341 | }
342 | .mapboxgl-popup-anchor-top-right .mapboxgl-popup-content {
343 |   border-top-right-radius: 0;
344 | }
345 | .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content {
346 |   border-bottom-left-radius: 0;
347 | }
348 | .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content {
349 |   border-bottom-right-radius: 0;
350 | }
351 | 
352 | .mapboxgl-marker {
353 |   position: absolute;
354 |   top: 0;
355 |   left: 0;
356 |   will-change: transform;
357 | }
358 | 
359 | .mapboxgl-user-location-dot {
360 |   background-color: #1da1f2;
361 |   width: 15px;
362 |   height: 15px;
363 |   border-radius: 50%;
364 |   box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
365 | }
366 | .mapboxgl-user-location-dot::before {
367 |   background-color: #1da1f2;
368 |   content: '';
369 |   width: 15px;
370 |   height: 15px;
371 |   border-radius: 50%;
372 |   position: absolute;
373 |   -webkit-animation: mapboxgl-user-location-dot-pulse 2s infinite;
374 |   -moz-animation: mapboxgl-user-location-dot-pulse 2s infinite;
375 |   -ms-animation: mapboxgl-user-location-dot-pulse 2s infinite;
376 |   animation: mapboxgl-user-location-dot-pulse 2s infinite;
377 | }
378 | .mapboxgl-user-location-dot::after {
379 |   border-radius: 50%;
380 |   border: 2px solid #fff;
381 |   content: '';
382 |   height: 15px;
383 |   left: -2px;
384 |   position: absolute;
385 |   top: -2px;
386 |   width: 15px;
387 | }
388 | 
389 | @-webkit-keyframes mapboxgl-user-location-dot-pulse {
390 |   0%   { -webkit-transform: scale(1); opacity: 1; }
391 |   70%  { -webkit-transform: scale(3); opacity: 0; }
392 |   100% { -webkit-transform: scale(1); opacity: 0; }
393 | }
394 | @-ms-keyframes mapboxgl-user-location-dot-pulse {
395 |   0%   { -ms-transform: scale(1); opacity: 1; }
396 |   70%  { -ms-transform: scale(3); opacity: 0; }
397 |   100% { -ms-transform: scale(1); opacity: 0; }
398 | }
399 | @keyframes mapboxgl-user-location-dot-pulse {
400 |   0%   { transform: scale(1); opacity: 1; }
401 |   70%  { transform: scale(3); opacity: 0; }
402 |   100% { transform: scale(1); opacity: 0; }
403 | }
404 | .mapboxgl-user-location-dot-stale {
405 |   background-color: #aaa;
406 | }
407 | .mapboxgl-user-location-dot-stale:after {
408 |   display: none
409 | }
410 | 
411 | .mapboxgl-crosshair,
412 | .mapboxgl-crosshair .mapboxgl-interactive,
413 | .mapboxgl-crosshair .mapboxgl-interactive:active {
414 |   cursor: crosshair;
415 | }
416 | .mapboxgl-boxzoom {
417 |   position: absolute;
418 |   top: 0;
419 |   left: 0;
420 |   width: 0;
421 |   height: 0;
422 |   background: #fff;
423 |   border: 2px dotted #202020;
424 |   opacity: 0.5;
425 | }
426 | 
427 | @media print {
428 | /* stylelint-disable */
429 |   .mapbox-improve-map {
430 |       display:none;
431 |   }
432 | /* stylelint-enable */
433 | }


--------------------------------------------------------------------------------