Urbica React MapGL Comparison

alex3165-react-mapbox-gl.js

import ReactMapboxGl, { Source, Layer } from 'react-mapbox-gl';

const Map = ReactMapboxGl({
  accessToken: 'pk...'
});

const SOURCE_OPTIONS = {
  type: 'vector',
  tiles: ['https://...']
};

<Map
  style='mapbox://styles/mapbox/streets-v11'
  center={[-74.50, 40]}
  zoom={9}
>
  <Source id='sourceId' tileJsonSource={SOURCE_OPTIONS} />
  <Layer type='raster' id='layerId' sourceId='sourceId' />
</Map>

mapbox-gl-js.js

import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'pk...';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-74.50, 40],
  zoom: 9
});

map.on('load', () => {
  map.addSource('sourceId', { type: 'vector', tiles: ['https://...'] });
  
  map.addLayer({
    id: 'layerId',
    type: 'line',
    source: 'sourceId',
    paint: {}
  });
  
  map.addControl(new mapboxgl.NavigationControl());
});

moveend.js

map.on('moveend', (event) => {
 if (event.originalEvent) {
   console.log('A human moved the map');
 }
});

uber-react-map-gl.js

import MapGL, { NavigationControl } from 'react-map-gl';

const mapStyle = {
  version: 8,
  sources: {
    sourceId: { type: 'vector', tiles: ['https://...'] }
  },
  layers: [
    { id: 'layerId', type: 'line', source: 'sourceId', paint: {} }
  ]
};

const viewport = { latitude: 40, longitude: -74.50, zoom: 9};

<MapGL
  mapStyle={mapStyle}
  mapboxApiAccessToken='pk...'
  onViewportChange={updateViewport}
  {...viewport}
>
  <div style={{position: 'absolute', right: 0}}>
    <NavigationControl onViewportChange={updateViewport} />
  </div>
</MapGL>

urbica-react-map-gl.js

import MapGL, { Source, Layer, NavigationControl } from '@urbica/react-map-gl';

<MapGL
  mapStyle='mapbox://styles/mapbox/streets-v11'
  accessToken='pk...'
  latitude={40}
  longitude={-74.50}
  zoom={9}
>
  <Source id='sourceId' type='vector' tiles=['https://...'] />
  <Layer id='layerId' type='line' source='sourceId' paint={{}} />
  <NavigationControl />
</MapGL>