This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .map-container { | |
| width: 100%; | |
| height: 500px; | |
| border-radius: 5px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const fetchData = useCallback(() => { | |
| const geocodingClient = mbxGeocoding({ | |
| accessToken: mapboxgl.accessToken, | |
| }); | |
| // geocoding with countries | |
| return geocodingClient | |
| .forwardGeocode({ | |
| query: 'Ikeja, Lagos', | |
| countries: ['ng'], |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Marker */ | |
| .marker { | |
| height: 15px; | |
| width: 15px; | |
| border-radius: 50%; | |
| background-color: blue; | |
| cursor: pointer; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| useEffect(() => { | |
| if (!map.current) return; // Waits for the map to initialise | |
| const results = fetchData(); | |
| results.then((marker) => { | |
| // create a HTML element for each feature | |
| var el = document.createElement('div'); | |
| el.className = 'marker'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <meta name="theme-color" content="#000000" /> | |
| <meta | |
| name="description" | |
| content="Create a React app that uses Mapbox GL JS and Mapbox forward geocoding." |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import logo from './logo.svg'; | |
| import './App.css'; | |
| import Mapbox from './components/GenerateMap'; | |
| function App() { | |
| return ( | |
| <div className='App'> | |
| <header className='App-header'> | |
| <img src={logo} className='App-logo' alt='logo' /> | |
| <p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div class="tabs"> | |
| <div class="tabs__list"> | |
| <slot /> | |
| </div> | |
| <div class="tabs__overlay" /> | |
| </div> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| import { watch, ref, provide, defineComponent } from "vue"; | |
| export default defineComponent({ | |
| name: "Tabs", | |
| props: { | |
| groupName: { type: String, required: true }, | |
| initialTab: { type: String, required: true }, | |
| }, | |
| emits: ["change"], |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style scoped> | |
| .tabs { | |
| display: inline-block; | |
| position: relative; | |
| box-sizing: border-box; | |
| width: 100%; | |
| height: 56px; | |
| outline: none; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script lang="ts"> | |
| import { inject, defineComponent, Ref, ref } from "vue"; | |
| export default defineComponent({ | |
| name: "Tab", | |
| props: { | |
| value: { type: String, required: true }, | |
| label: { type: String, required: true }, | |
| }, | |
| setup() { |