├── .eslintrc
├── .gitignore
├── .prettierrc
├── .stylelintrc
├── LICENSE
├── README.md
├── config
└── typography.js
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package-lock.json
├── package.json
└── src
├── components
├── Findelevation
│ └── Findelevation.jsx
├── Grid
│ ├── Columns.jsx
│ ├── Container.jsx
│ └── index.jsx
├── Layercontrol
│ ├── Layercontrol.jsx
│ └── Layercontrolitem.jsx
├── Layout
│ ├── Header.jsx
│ ├── UnsupportedBrowser.jsx
│ └── index.jsx
├── Link
│ ├── OutboundLink.jsx
│ └── index.jsx
├── Map
│ ├── StyleSelector.jsx
│ ├── index.jsx
│ └── util.js
├── SEO
│ └── index.jsx
├── Scrollflyto
│ ├── Scrollflyto.jsx
│ └── SingleScrollflyto.jsx
├── Sidebar
│ └── index.jsx
└── Swipemap
│ ├── StyleSelector.jsx
│ ├── index.jsx
│ └── util.js
├── constants
├── directions.js
├── layercontrol.js
├── scrollflyto.js
└── styles.js
├── pages
├── 404.jsx
├── index.jsx
├── map-direction.jsx
├── map-full-plus-find-elevation.jsx
├── map-full.jsx
├── map-geojson-simple.jsx
├── map-scale-control.jsx
├── map-show-and-hide-layers.jsx
├── map-style-switcher.jsx
├── map-swipe.jsx
├── map.jsx
├── mapwithsidebar.jsx
└── scrollflyto.jsx
├── style
├── index.jsx
└── theme.js
└── util
└── dom.js
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["airbnb", "prettier", "prettier/react"],
3 | "plugins": ["prettier"],
4 | "parser": "babel-eslint",
5 | "parserOptions": {
6 | "ecmaVersion": 2017,
7 | "ecmaFeatures": {
8 | "experimentalObjectRestSpread": true,
9 | "impliedStrict": true,
10 | "classes": true
11 | }
12 | },
13 | "env": {
14 | "browser": true,
15 | "node": true
16 | },
17 | "settings": {
18 | "import/core-modules": [],
19 | "import/resolver": {
20 | "node": {
21 | "extensions": [".js", ".jsx"],
22 | "moduleDirectory": ["src", "node_modules"]
23 | }
24 | }
25 | },
26 | "rules": {
27 | "no-use-before-define": 0,
28 | "import/no-extraneous-dependencies": 0,
29 | "import/prefer-default-export": 0,
30 | "react/no-danger": 0,
31 | "react/forbid-prop-types": 0,
32 | "react/display-name": 1,
33 | "react/react-in-jsx-scope": 0,
34 | "react/jsx-filename-extension": [
35 | 1,
36 | {
37 | "extensions": [".js", ".jsx"]
38 | }
39 | ],
40 | "quotes": [
41 | 2,
42 | "single",
43 | {
44 | "avoidEscape": true,
45 | "allowTemplateLiterals": true
46 | }
47 | ],
48 | "jsx-a11y/accessible-emoji": 0,
49 | "jsx-a11y/href-no-hash": "off",
50 | "jsx-a11y/anchor-is-valid": [
51 | "warn",
52 | {
53 | "aspects": ["invalidHref"]
54 | }
55 | ]
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # dotenv environment variables file
55 | .env
56 | .env.*
57 |
58 | # gatsby files
59 | .cache/
60 | public
61 |
62 | # Mac files
63 | .DS_Store
64 |
65 | # Yarn
66 | yarn-error.log
67 | .pnp/
68 | .pnp.js
69 | # Yarn Integrity file
70 | .yarn-integrity
71 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "endOfLine": "lf",
3 | "semi": false,
4 | "singleQuote": true,
5 | "tabWidth": 2,
6 | "trailingComma": "es5"
7 | }
8 |
--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "processors": [
3 | [
4 | "stylelint-processor-styled-components",
5 | {
6 | "moduleName": "style"
7 | }
8 | ]
9 | ],
10 | "extends": [
11 | "stylelint-config-recommended",
12 | "stylelint-config-standard",
13 | "stylelint-config-styled-components"
14 | ],
15 | "rules": {
16 | "property-no-vendor-prefix": true
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2019 Brendan C. Ward
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Gatsby starter with Mapbox GL
2 |
3 | __This starter__ is build on the starter https://github.com/brendan-ward/gatsby-starter-mapbox. It gets you going quickly with Mapbox GL in Gatsby. It uses React hooks to wrap the Mapbox GL JS object and I build my examples on this repo.
4 |
5 | [Demo](https://astridx.github.io/gatsbystarter/gatsby-starter-mapbox-examples/)
6 |
7 | The menu items in the navigation can be changed in the file [Header.jsx](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/da0f115b8bc8c52d0b7063ede429d1ce5fb99b92/src/components/Layout/Header.jsx#L63)!
8 |
9 | ## Installation
10 |
11 | You will need to know Gatsby to use this starter. If you are interested in learning more about building your first Gatsby site, check out the [Gatsby.js Tutorials](https://www.gatsbyjs.com/tutorial/).
12 |
13 | 1. Initialize the Site
14 |
15 | To create a site in a `mymapboxglsite` directory with this Gatsby Starter:
16 |
17 | ```
18 | gatsby new mymapboxglsite https://github.com/astridx/gatsby-starter-mapbox-examples
19 | ```
20 |
21 | 2. Get Mapbox API token
22 |
23 | You must set the [environment variable](https://www.gatsbyjs.com/docs/environment-variables/) `GATSBY_MAPBOX_API_TOKEN` to your [Mapbox API token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/). Define an environment config file, `.env.development` and/or `.env.production`, in your root folder. Depending on your active environment, the correct one will be found and its values embedded as environment variables in the browser JavaScript. Add the line
24 |
25 | ```
26 | GATSBY_MAPBOX_API_TOKEN='YOUR TOKEN'
27 | ```
28 |
29 | 3. Start the Site
30 |
31 | Start the development mode:
32 |
33 | ```
34 | gatsby develop
35 | ```
36 |
37 | Open up a new tab in your browser and navigate to http://localhost:8000/
38 |
39 | Perfect! This is the beginning of a Gatsby MapBox JS GL site!
40 |
41 |
42 | ## Features
43 |
44 | There is a menu item for each example.
45 |
46 | ### Full Screen Map
47 |
48 | [](https://astridx.github.io/gatsbystarter/gatsby-starter-mapbox-examples/map-full)
49 |
50 | #### Adapt to your wishes
51 |
52 | I provide basic map configuration such as initial `zoom` level in the file [src/components/Map](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/da0f115b8bc8c52d0b7063ede429d1ce5fb99b92/src/components/Map/index.jsx#L191):
53 |
54 | ```
55 | width: 'auto',
56 | height: '100%',
57 | center: [7.221275, 50.326111],
58 | zoom: 9.5,
59 | bounds: null,
60 | minZoom: 0,
61 | maxZoom: 24,
62 | styles: ['streets-v11'],
63 | padding: 0.1,
64 | sources: {},
65 | layers: [],
66 | directions: [],
67 | ```
68 |
69 | You can provide optional configuration (for example `sources` and `layers`) according to the Mapbox GL style specification.
70 |
71 | ```
72 |
77 | ```
78 |
79 | ### Map with Sidebar
80 |
81 | [](https://astridx.github.io/gatsbystarter/gatsby-starter-mapbox-examples/map)
82 |
83 | #### Adapt to your wishes
84 |
85 | This [example](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/da0f115b8bc8c52d0b7063ede429d1ce5fb99b92/src/pages/mapwithsidebar.jsx#L19) shows you how to add a sidebar. You can see a concrete implementation in the _Scoll Fly to_ example below.
86 |
87 | ### Map with GeoJson Layer (simple)
88 |
89 | [](https://astridx.github.io/gatsbystarter/gatsby-starter-mapbox-examples/map-geojson-simple)
90 |
91 | #### Adapt to your wishes
92 |
93 | You add a few geodata directly in the code via JSON souce and layer. The [example](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/da0f115b8bc8c52d0b7063ede429d1ce5fb99b92/src/pages/map-geojson-simple.jsx#L6) is worth a thousand words.
94 |
95 | ### Scroll Fly To
96 |
97 | [](https://astridx.github.io/gatsbystarter/gatsby-starter-mapbox-examples/scrollflyto)
98 |
99 | This feature allows you to tell a story using the map.
100 |
101 | [Fly to a location](https://astridx.github.io/mapboxexamples/examples/scroll-fly-to.html) based on scroll position in the sidebar. Scroll down through the _Points of interest_ and the map will fly to the location.
102 |
103 | See another [example](https://docs.mapbox.com/mapbox-gl-js/example/scroll-fly-to/).
104 |
105 | #### Adapt to your wishes
106 |
107 | You change the content in the file [src/constants/scrollflyto.js](https://github.com/astridx/gatsby-starter-mapbox/blob/astridx/src/constants/scrollflyto.js)
108 |
109 | Option | Description
110 | --- | ---
111 | bearing | The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north. If bearing is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to 0.
112 | pitch | The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-60). If pitch is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to 0.
113 | speed | The average speed of the animation.
114 | --- | Please visit [MapBox GL Documentation](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto) for all opitons.
115 |
116 | ### Find elevations with the Tilequery API
117 |
118 | [](https://astridx.github.io/gatsbystarter/gatsby-starter-mapbox-examples/map-full-plus-find-elevation)
119 |
120 | Sometimes it is helpful to get information about a location at the click of a mouse. The [Mapbox Tilequery API](https://docs.mapbox.com/api/maps/#tilequery) allows you to retrieve features from vector tilesets based on a given longitude and latitude. The menu item for elevations information offers an example for getting the elevation of a location an show this in a text field in the lef upper corner of the map.
121 |
122 | #### Adapt to your wishes
123 |
124 | In the starter you can see an [example](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/da0f115b8bc8c52d0b7063ede429d1ce5fb99b92/src/pages/map-full-plus-find-elevation.jsx#L14) for querying the height above sea level. You have the option to query and display other geodata. Test and learn about the Tilequery API in the [Playground](https://docs.mapbox.com/playground/tilequery/).
125 |
126 | ### Layer Switcher
127 |
128 | [](https://astridx.github.io/gatsbystarter/gatsby-starter-mapbox-examples/map-show-and-hide-layers)
129 |
130 | Do you want to display a lot of geospatial data? Then it makes sense to add them in a separate file. In addition, you might want to show and hide them as needed? So you can create a custom layer switcher to display different datasets.
131 |
132 | #### Adapt to your wishes
133 |
134 | The page [show-and-hide-layers](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/da0f115b8bc8c52d0b7063ede429d1ce5fb99b92/src/pages/map-show-and-hide-layers.jsx#L3) shows you how to integrate data and components. If you want to use other data in another map of the website, simply create a new file similar to [this](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/master/src/constants/layercontrol.js) one in the constants folder and import it.
135 |
136 | ### Swipe between maps
137 |
138 | [](https://astridx.github.io/gatsbystarter/gatsby-starter-mapbox-examples/map-swipe)
139 |
140 | Different information can be highlighted with different maps. This function offers a comparison between different maps.
141 |
142 | See this [example](https://astridx.github.io/mapboxexamples/plugins/mapbox-gl-compare-swipe-between-maps.html)
143 |
144 | #### Adapt to your wishes
145 |
146 | Add the component `` like in in this [page](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/da0f115b8bc8c52d0b7063ede429d1ce5fb99b92/src/pages/map-swipe.jsx#L9): ``. You have to use two styles as parameters to be able to compare them. If you add more styles, they will be added to the left map in a layer switcher. So you can show all styles and compare them with the map on the right.
147 |
148 | ### Directions
149 |
150 | [](https://astridx.github.io/gatsbystarter/gatsby-starter-mapbox-examples/map-direction)
151 |
152 | What is the best way to get from A to B. Or: I want to show you how I got from A to B. The second was my requirement. I show special points along this route with markers.
153 |
154 | #### Adapt to your wishes
155 |
156 | You can see in the [example page](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/master/src/pages/map-direction.jsx#L11) how you can add the directions plugin. You enter the data for the plugin in an [extra file](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/master/src/constants/directions.js). You can use different routes. To do this, create a file similar to [this](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/master/src/constants/directions.js) one in the constants directory and import it into the page in which the route should be displayed.
157 |
158 | For all options of the plugin directions see the [Documentation](https://docs.mapbox.com/api/navigation/#directions).
159 |
160 | Points of interest you can add via the parameter `pois`. Here you need to add the longitude, the latitude and a text for a popup.
161 |
162 | ### Style Switcher
163 |
164 | [](https://astridx.github.io/gatsbystarter/gatsby-starter-mapbox-examples/map-style-switcher)
165 |
166 | In previous examples you may have already seen that you can use the parameter `styles` with more than one entry (for example like this ``) for showing a style control in the form of an image at the bottom left. In addition it is possible to show a control with text links.
167 |
168 | #### Adapt to your wishes
169 |
170 | The example on [this page](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/bb3fefdbda2e6b2d3e9f2bc62e573cf4a0fc0b9a/src/pages/map-style-switcher.jsx#L13) shows how to do this. You need to add (styleSwitcherData](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/master/src/constants/styles.js). styleSwitcherData are the title you like to display in the control for activation of this style and the [style uri](https://docs.mapbox.com/help/glossary/style-url/).
171 |
172 |
173 | ### Scale Control
174 |
175 | [](https://astridx.github.io/gatsbystarter/gatsby-starter-mapbox-examples/map-scale-control)
176 |
177 | #### Adapt to your wishes
178 |
179 | The example on [this page](https://github.com/astridx/gatsby-starter-mapbox-examples/blob/bb3fefdbda2e6b2d3e9f2bc62e573cf4a0fc0b9a/src/pages/map-scale-control.jsx#L11) shows how to do this.
--------------------------------------------------------------------------------
/config/typography.js:
--------------------------------------------------------------------------------
1 | import Typography from 'typography'
2 | import typeographyTheme from 'typography-theme-noriega'
3 |
4 | import { theme } from 'style'
5 |
6 | typeographyTheme.overrideThemeStyles = () => ({
7 | html: {
8 | // overflowY: 'scroll',
9 | height: '100%',
10 | },
11 | body: {
12 | height: '100%',
13 | width: '100%',
14 | },
15 | // Set height on containing notes to 100% so that full screen map layouts work
16 | '#___gatsby': {
17 | height: '100%',
18 | },
19 | '#___gatsby > *': {
20 | height: '100%',
21 | },
22 | button: {
23 | outline: 'none',
24 | cursor: 'pointer',
25 | },
26 | 'a, a:visited, a:active': {
27 | color: theme.colors.link,
28 | },
29 | })
30 |
31 | const typography = new Typography(typeographyTheme)
32 |
33 | export default typography
34 |
--------------------------------------------------------------------------------
/gatsby-browser.js:
--------------------------------------------------------------------------------
1 | import GoogleAnalytics from 'react-ga'
2 | import { siteMetadata } from './gatsby-config'
3 |
4 | /**
5 | * Initialize Google Analytics
6 | */
7 | export const onClientEntry = () => {
8 | if (process.env.NODE_ENV === 'production') {
9 | GoogleAnalytics.initialize(siteMetadata.googleAnalyticsId)
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
1 | const googleAnalyticsId = `UA-XXXXX`
2 |
3 | module.exports = {
4 | pathPrefix: `/gatsbystarter/gatsby-starter-mapbox-examples`,
5 | siteMetadata: {
6 | siteUrl: `https://astridx.github.io/gatsbystarter/gatsby-starter-mapbox-examples/`,
7 | title: `Gatsby Mapbox GL Starter`,
8 | description: `Get up and running quickly with a Gatsby starter that includes a basic setup for Mapbox GL`,
9 | author: `Brendan C. Ward`,
10 | googleAnalyticsId,
11 | mapboxToken: process.env.GATSBY_MAPBOX_API_TOKEN,
12 | },
13 | plugins: [
14 | `gatsby-plugin-react-helmet`,
15 | `gatsby-transformer-sharp`,
16 | `gatsby-plugin-sharp`,
17 | {
18 | resolve: `gatsby-plugin-styled-components`,
19 | options: {
20 | displayName: process.env.NODE_ENV !== `production`,
21 | fileName: false,
22 | },
23 | },
24 | {
25 | resolve: `gatsby-plugin-typography`,
26 | options: {
27 | pathToConfigModule: `./config/typography.js`,
28 | },
29 | },
30 | `gatsby-plugin-catch-links`,
31 | // `gatsby-plugin-sitemap`,
32 | // {
33 | // resolve: `gatsby-plugin-google-analytics`,
34 | // options: {
35 | // trackingId: googleAnalyticsId,
36 | // anonymize: true,
37 | // },
38 | //},
39 | // {
40 | // resolve: `gatsby-plugin-manifest`,
41 | // options: {
42 | // name: `gatsby-starter-default`,
43 | // short_name: `starter`,
44 | // start_url: `/`,
45 | // background_color: `#663399`,
46 | // theme_color: `#663399`,
47 | // display: `minimal-ui`,
48 | // // icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
49 | // },
50 | // },
51 | // this (optional) plugin enables Progressive Web App + Offline functionality
52 | // To learn more, visit: https://gatsby.dev/offline
53 | // `gatsby-plugin-offline`,
54 | ],
55 | }
56 |
--------------------------------------------------------------------------------
/gatsby-node.js:
--------------------------------------------------------------------------------
1 | const path = require("path")
2 |
3 | exports.onCreateWebpackConfig = ({ actions, stage, loaders }) => {
4 | const config = {
5 | resolve: {
6 | modules: [path.resolve(__dirname, "src"), "node_modules"],
7 | },
8 | }
9 |
10 | // when building HTML, window is not defined, so Leaflet causes the build to blow up
11 | if (stage === "build-html") {
12 | config.module = {
13 | rules: [
14 | {
15 | test: /mapbox-gl/,
16 | use: loaders.null(),
17 | },
18 | ],
19 | }
20 | }
21 |
22 | actions.setWebpackConfig(config)
23 | }
24 |
--------------------------------------------------------------------------------
/gatsby-ssr.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
3 | *
4 | * See: https://www.gatsbyjs.org/docs/ssr-apis/
5 | */
6 |
7 | // You can delete this file if you're not using it
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gatsby-starter-mapbox-examples",
3 | "private": true,
4 | "description": "A Gatsby starter with Mapbox GL and Examples",
5 | "version": "0.1.0",
6 | "author": "Brendan C. Ward extended by Astrid Günther",
7 | "dependencies": {
8 | "@mapbox/geo-viewport": "^0.4.0",
9 | "@mapbox/mapbox-gl-directions": "^4.1.0",
10 | "@rebass/grid": "^6.0.0",
11 | "axios": "^0.20.0",
12 | "babel-plugin-styled-components": "^1.10.0",
13 | "gatsby": "^2.24.73",
14 | "gatsby-image": "^2.0.41",
15 | "gatsby-plugin-catch-links": "^2.0.13",
16 | "gatsby-plugin-google-analytics": "^2.0.19",
17 | "gatsby-plugin-manifest": "^2.1.1",
18 | "gatsby-plugin-offline": "^2.1.0",
19 | "gatsby-plugin-react-helmet": "^3.0.12",
20 | "gatsby-plugin-sharp": "^2.0.36",
21 | "gatsby-plugin-sitemap": "^2.1.0",
22 | "gatsby-plugin-styled-components": "^3.0.7",
23 | "gatsby-plugin-typography": "^2.2.13",
24 | "gatsby-remark-images": "^3.0.11",
25 | "gatsby-source-filesystem": "^2.3.34",
26 | "gatsby-transformer-sharp": "^2.1.19",
27 | "immutable": "^4.0.0-rc.12",
28 | "mapbox-gl": "^1.12.0",
29 | "mapbox-gl-compare": "^0.4.0",
30 | "mapbox-gl-directions": "^3.0.3",
31 | "mapbox-gl-style-switcher": "^1.0.9",
32 | "prop-types": "^15.7.2",
33 | "react": "^16.8.6",
34 | "react-dom": "^16.8.6",
35 | "react-ga": "^2.5.7",
36 | "react-helmet": "^5.2.1",
37 | "react-icons": "^3.11.0",
38 | "react-typography": "^0.16.19",
39 | "rebass": "^3.1.0",
40 | "styled-components": "^4.2.0",
41 | "styled-system": "^4.1.0",
42 | "typography": "^0.16.19",
43 | "typography-theme-noriega": "^0.16.19"
44 | },
45 | "devDependencies": {
46 | "babel-eslint": "^10.0.1",
47 | "eslint": "^5.16.0",
48 | "eslint-config-airbnb": "^17.1.0",
49 | "eslint-config-prettier": "^4.2.0",
50 | "eslint-import-resolver-alias": "^1.1.2",
51 | "eslint-plugin-import": "^2.17.2",
52 | "eslint-plugin-jsx-a11y": "^6.2.1",
53 | "eslint-plugin-prettier": "^3.0.1",
54 | "eslint-plugin-react": "^7.13.0",
55 | "prettier": "^1.17.0",
56 | "stylelint-config-recommended": "^2.2.0",
57 | "stylelint-config-standard": "^18.3.0",
58 | "stylelint-config-styled-components": "^0.1.1",
59 | "stylelint-processor-styled-components": "^1.6.0"
60 | },
61 | "keywords": [
62 | "gatsby"
63 | ],
64 | "license": "MIT",
65 | "scripts": {
66 | "build": "gatsby build",
67 | "develop": "gatsby develop",
68 | "format": "prettier --write src/**/*.{js,jsx}",
69 | "start": "npm run develop",
70 | "serve": "gatsby serve"
71 | },
72 | "repository": {
73 | "type": "git",
74 | "url": "https://github.com/astridx/gatsby-starter-mapbox-examples.git/"
75 | },
76 | "bugs": {
77 | "url": "https://github.com/astridx/gatsby-starter-mapbox-examples/issues"
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/src/components/Findelevation/Findelevation.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'style'
3 |
4 | const Findelevation = props => {
5 | return (
6 |
7 |
8 | Elevation:{' '}
9 | Bitte auf die Karte klicken.
10 |
35 | Unfortunately, you are using an unsupported version of Internet
36 | Explorer.
37 |
38 |
39 | Please use a modern browser such as Google Chrome, Firefox, or Microsoft
40 | Edge.
41 |