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.
The menu items in the navigation can be changed in the file Header.jsx!
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.
- Initialize the Site
To create a site in a mymapboxglsite directory with this Gatsby Starter:
gatsby new mymapboxglsite https://github.com/astridx/gatsby-starter-mapbox-examples
- Get Mapbox API token
You must set the environment variable GATSBY_MAPBOX_API_TOKEN to your Mapbox API token. 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
GATSBY_MAPBOX_API_TOKEN='YOUR TOKEN'
- Start the Site
Start the development mode:
gatsby develop
Open up a new tab in your browser and navigate to http://localhost:8000/
Perfect! This is the beginning of a Gatsby MapBox JS GL site!
There is a menu item for each example.
I provide basic map configuration such as initial zoom level in the file src/components/Map:
width: 'auto',
height: '100%',
center: [7.221275, 50.326111],
zoom: 9.5,
bounds: null,
minZoom: 0,
maxZoom: 24,
styles: ['streets-v11'],
padding: 0.1,
sources: {},
layers: [],
directions: [],
You can provide optional configuration (for example sources and layers) according to the Mapbox GL style specification.
<Map
sources={sources}
layers={layers}
/>
This example shows you how to add a sidebar. You can see a concrete implementation in the Scoll Fly to example below.
You add a few geodata directly in the code via JSON souce and layer. The example is worth a thousand words.
This feature allows you to tell a story using the map.
Fly to a location based on scroll position in the sidebar. Scroll down through the Points of interest and the map will fly to the location.
See another example.
You change the content in the file src/constants/scrollflyto.js
| Option | Description |
|---|---|
| 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. |
| 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. |
| speed | The average speed of the animation. |
| --- | Please visit MapBox GL Documentation for all opitons. |
Sometimes it is helpful to get information about a location at the click of a mouse. The Mapbox Tilequery API 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.
In the starter you can see an example 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.
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.
The page show-and-hide-layers 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 one in the constants folder and import it.
Different information can be highlighted with different maps. This function offers a comparison between different maps.
See this example
Add the component <Swipemap /> like in in this page: <Swipemap styles={['streets-v11', 'satellite-v9']} />. 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.
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.
You can see in the example page how you can add the directions plugin. You enter the data for the plugin in an extra file. You can use different routes. To do this, create a file similar to this one in the constants directory and import it into the page in which the route should be displayed.
For all options of the plugin directions see the Documentation.
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.
In previous examples you may have already seen that you can use the parameter styles with more than one entry (for example like this <Map styles={['streets-v11', 'satellite-v9']} />) 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.
The example on this page 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.
The example on this page shows how to do this.