Sources specify the geographic features to be rendered on the map.
A GeoJSON source. Data must be provided via a data property, whose value can be a URL or inline GeoJSON.
import React, { useState } from 'react';
import MapGL, { Source, Layer } from '@urbica/react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const [viewport, setViewport] = useState({
latitude: 45.137451890638886,
longitude: -68.13734351262877,
zoom: 5
});
const data = {
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
[-67.13734351262877, 45.137451890638886],
[-66.96466, 44.8097],
[-68.03252, 44.3252],
[-69.06, 43.98],
[-70.11617, 43.68405],
[-70.64573401557249, 43.090083319667144],
[-70.75102474636725, 43.08003225358635],
[-70.79761105007827, 43.21973948828747],
[-70.98176001655037, 43.36789581966826],
[-70.94416541205806, 43.46633942318431],
[-71.08482, 45.3052400000002],
[-70.6600225491012, 45.46022288673396],
[-70.30495378282376, 45.914794623389355],
[-70.00014034695016, 46.69317088478567],
[-69.23708614772835, 47.44777598732787],
[-68.90478084987546, 47.184794623394396],
[-68.23430497910454, 47.35462921812177],
[-67.79035274928509, 47.066248887716995],
[-67.79141211614706, 45.702585354182816],
[-67.13734351262877, 45.137451890638886]
]
]
}
};
<MapGL
style={{ width: '100%', height: '400px' }}
mapStyle='mapbox://styles/mapbox/light-v9'
accessToken={MAPBOX_ACCESS_TOKEN}
onViewportChange={setViewport}
{...viewport}
>
<Source id='maine' type='geojson' data={data} />
<Layer
id='maine'
type='fill'
source='maine'
paint={{
'fill-color': '#088',
'fill-opacity': 0.8
}}
/>
</MapGL>;Drawing a GeoJSON line on a map.
import React, { useState } from 'react';
import MapGL, { Source, Layer } from '@urbica/react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const [viewport, setViewport] = useState({
latitude: 37.830348,
longitude: -122.486052,
zoom: 15
});
const data = {
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[-122.48369693756104, 37.83381888486939],
[-122.48348236083984, 37.83317489144141],
[-122.48339653015138, 37.83270036637107],
[-122.48356819152832, 37.832056363179625],
[-122.48404026031496, 37.83114119107971],
[-122.48404026031496, 37.83049717427869],
[-122.48348236083984, 37.829920943955045],
[-122.48356819152832, 37.82954808664175],
[-122.48507022857666, 37.82944639795659],
[-122.48610019683838, 37.82880236636284],
[-122.48695850372314, 37.82931081282506],
[-122.48700141906738, 37.83080223556934],
[-122.48751640319824, 37.83168351665737],
[-122.48803138732912, 37.832158048267786],
[-122.48888969421387, 37.83297152392784],
[-122.48987674713133, 37.83263257682617],
[-122.49043464660643, 37.832937629287755],
[-122.49125003814696, 37.832429207817725],
[-122.49163627624512, 37.832564787218985],
[-122.49223709106445, 37.83337825839438],
[-122.49378204345702, 37.83368330777276]
]
}
};
<MapGL
style={{ width: '100%', height: '400px' }}
mapStyle='mapbox://styles/mapbox/light-v9'
accessToken={MAPBOX_ACCESS_TOKEN}
onViewportChange={setViewport}
{...viewport}
>
<Source id='route' type='geojson' data={data} />
<Layer
id='route'
type='line'
source='route'
layout={{
'line-join': 'round',
'line-cap': 'round'
}}
paint={{
'line-color': '#888',
'line-width': 8
}}
/>
</MapGL>;import React, { useState } from 'react';
import { randomPoint } from '@turf/random';
import MapGL, { Source, Layer } from '@urbica/react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const [points, setPoints] = useState(randomPoint(100));
const [viewport, setViewport] = useState({
latitude: 0,
longitude: 0,
zoom: 0
});
const addPoints = () => {
const randomPoints = randomPoint(100);
const newFeatures = points.features.concat(randomPoints.features);
const newPoints = { ...points, features: newFeatures };
setPoints(newPoints);
};
<React.Fragment>
<button onClick={addPoints}>+100 points</button>
<MapGL
style={{ width: '100%', height: '400px' }}
mapStyle='mapbox://styles/mapbox/light-v9'
accessToken={MAPBOX_ACCESS_TOKEN}
onViewportChange={setViewport}
{...viewport}
>
<Source id='points' type='geojson' data={points} />
<Layer
id='points'
type='circle'
source='points'
paint={{
'circle-radius': 6,
'circle-color': '#1978c8'
}}
/>
</MapGL>
</React.Fragment>;Add a vector source to a map.
import React, { useState } from 'react';
import MapGL, { Source, Layer } from '@urbica/react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const [viewport, setViewport] = useState({
latitude: 37.753574,
longitude: -122.447303,
zoom: 13
});
<MapGL
style={{ width: '100%', height: '400px' }}
mapStyle='mapbox://styles/mapbox/light-v9'
accessToken={MAPBOX_ACCESS_TOKEN}
onViewportChange={setViewport}
{...viewport}
>
<Source id='contour' type='vector' url='mapbox://mapbox.mapbox-terrain-v2' />
<Layer
id='contour'
type='line'
source='contour'
source-layer='contour'
paint={{
'line-color': '#877b59',
'line-width': 1
}}
/>
</MapGL>;import React, { useState } from 'react';
import MapGL, { Source, Layer } from '@urbica/react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const [viewport, setViewport] = useState({
latitude: 40.6892,
longitude: -74.5447,
zoom: 8
});
<MapGL
style={{ width: '100%', height: '400px' }}
accessToken={MAPBOX_ACCESS_TOKEN}
onViewportChange={setViewport}
{...viewport}
>
<Source
id='raster'
type='raster'
tileSize={256}
tiles={['https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png']}
/>
<Layer id='raster' type='raster' source='raster' />
</MapGL>;import React, { useState } from 'react';
import { randomPoint } from '@turf/random';
import MapGL, { Source, Layer } from '@urbica/react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const sourceURLs = {
first: 'mapbox://stepankuzmin.ck0glwxo402ld2omagmzc2gma-7pqww',
second: 'mapbox://stepankuzmin.ck0glym6u02ls2omawvm9vi4y-9xid1'
};
const [sourceURL, setSourceURL] = useState(sourceURLs.first);
const [viewport, setViewport] = useState({
latitude: 37.78,
longitude: -122.41,
zoom: 9
});
const toggleSourceURL = () => {
const nextSourceURL = sourceURL === sourceURLs.first ? sourceURLs.second : sourceURLs.first;
setSourceURL(nextSourceURL);
};
<React.Fragment>
<button onClick={toggleSourceURL}>Toggle Source URL</button>
<MapGL
style={{ width: '100%', height: '400px' }}
mapStyle='mapbox://styles/mapbox/light-v9'
accessToken={MAPBOX_ACCESS_TOKEN}
onViewportChange={setViewport}
{...viewport}
>
<Source id='sf-points' type='vector' url={sourceURL} />
<Layer
id='sf-points'
type='circle'
source='sf-points'
source-layer='sf-points'
paint={{
'circle-radius': 6,
'circle-color': '#1978c8'
}}
/>
</MapGL>
</React.Fragment>;import React, { useState } from 'react';
import { randomPoint } from '@turf/random';
import MapGL, { Source, Layer } from '@urbica/react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const sourceTilesURLs = {
toner: 'https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png',
watercolor: 'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png'
};
const [sourceTiles, setSourceTiles] = useState(sourceTilesURLs.toner);
const [viewport, setViewport] = useState({
latitude: 37.78,
longitude: -122.41,
zoom: 9
});
const toggleSourceTiles = () => {
const nextSourceTiles =
sourceTiles === sourceTilesURLs.toner ? sourceTilesURLs.watercolor : sourceTilesURLs.toner;
setSourceTiles(nextSourceTiles);
};
<React.Fragment>
<button onClick={toggleSourceTiles}>Toggle Source Tiles</button>
<MapGL
style={{ width: '100%', height: '400px' }}
mapStyle='mapbox://styles/mapbox/light-v9'
accessToken={MAPBOX_ACCESS_TOKEN}
onViewportChange={setViewport}
{...viewport}
>
<Source id='raster' type='raster' tiles={[sourceTiles]} />
<Layer id='raster' type='raster' source='raster' />
</MapGL>
</React.Fragment>;