Idyll Map Example

This is a test of the react-map-gl component using Idyll.

To recreate this example, first create a new idyll post, then install the component:

$ npm install --save react-map-gl

Then, include this component in your Idyll markup:

[ReactMapGL
  width:400
  height:400
  latitude:47.6062
  longitude:-122.3321
  zoom:8
  mapboxApiAccessToken:"..."
 /]

These parameters can be controlled by Idyll variables. For example, click to button below to move the map to San Francisco:

You must have a (free) Mapbox token to use the component. Learn more about access tokens. To learn more about using Idyll with components on NPM, see https://idyll-lang.org/docs/components/npm.

Note - I’ve hosted this on github pages instead of https://idyll.pub/ because the component uses webworkers, which aren’t currently supported on idyll.pub for security reasons.