โคNanometers Per Millisecond

    remapgl
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.2ย โ€ขย Publicย โ€ขย Published

    remapgl

    Declarative Mapbox GL bindings <๐ŸŒŽ>

    Quickly and easily create Mapbox GL maps with React components.

    install

    yarn install remapgl

    use

    Components accept most of the properties described in the Mapbox GL documentation as props.

    map

    The root component of a map is RemapGL, all other components must be children of RemapGL.

    import { RemapGL } from "remapgl";
    
    export function App() {
      return <RemapGL accessToken="your access token" />;
    }

    markers

    import { Marker, RemapGL } from "remapgl";
    
    export function App() {
      return (
        <RemapGL accessToken="your access token">
          <Marker lnglat={{ lng: -68.2954881, lat: 44.3420759 }} />
        </RemapGL>
      );
    }

    layers

    Layer order in the map is controlled by the order of the elements in the array provided to the layers prop.

    import { CircleLayer, CirclePaint } from "mapbox-gl";
    import { FeatureCollection, Geometry } from "geojson";
    import { LayerCollection, RemapGL } from "remapgl";
    
    export function App() {
      return (
        <RemapGL accessToken="your access token">
          <LayerCollection layers={layerData} />
        </RemapGL>
      );
    }
    
    const data: FeatureCollection<Geometry, Record<string, any>> = {
      features: [
        {
          geometry: {
            coordinates: [-68.18928528, 44.32134247],
            type: "Point"
          },
          properties: {
            title: "Thunder Hole"
          },
          type: "Feature"
        }
      ],
      type: "FeatureCollection"
    };
    
    const paint: CirclePaint = {
      "circle-color": "#222",
      "circle-radius": {
        base: 1.15,
        stops: [
          [10, 5],
          [14, 5]
        ]
      },
      "circle-stroke-color": "#FFF",
      "circle-stroke-opacity": 0.8,
      "circle-stroke-width": {
        base: 1.15,
        stops: [
          [10, 3],
          [14, 3]
        ]
      }
    };
    
    const layerData: CircleLayer[] = [
      {
        id: "black",
        paint,
        source: { data, type: "geojson" },
        type: "circle"
      }
    ];

    other controls

    import {
      AttributionControl,
      GeolocateControl,
      NavigationControl,
      RemapGL,
      ScaleControl,
      FullscreenControl
    } from "remapgl";
    
    
    export function App() {
      return (
        <RemapGL accessToken="your access token">
          <AttributionControl />
          <FullscreenControl />
          <GeolocateControl />
          <NavigationControl showCompass showZoom />
          <ScaleControl />
        </RemapGL>
      );
    }

    imperative functions

    remapgl adopts a similar convention regarding Mapbox GL controls as React does for DOM objects. Components that wrap a Mapbox GL control, which exposes callable functions, support the MbxObj interface. A callback function provided to such a component's obj prop will be invoked with a single argument that is the current instance of the Mapbox GL control.

    The following components support the MbxObj interface:

    • RemapGL: returns mapboxgl.Map.
    • Marker: returns: mapboxgl.Marker.
    • GeolocateControl: returns mapboxgl.GeoLocateControl.

    In the following example the GeolocateControl returns the underlying Mapbox GL control which is used to trigger the request to start using geo-location.

    import { GeolocateControl, RemapGL } from "remapgl";
    
    export function App() {
      return (
        <RemapGL accessToken="your access token">
          <GeolocateControl
            obj={control => {
              control.trigger();
            }}
          />
        </RemapGL>
      );
    }

    Install

    npm i remapgl

    DownloadsWeekly Downloads

    23

    Version

    2.3.2

    License

    MIT

    Unpacked Size

    92.3 kB

    Total Files

    27

    Last publish

    Collaborators

    • rlmcneary2