react-map-gl#StaticMap JavaScript Examples

The following examples show how to use react-map-gl#StaticMap. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: DeckGL.react.js    From dash-deck with MIT License 5 votes vote down vote up 
render() {
    let {enableEvents, data} = this.props;
    const {id, mapboxKey, tooltip, style} = this.props;
    const getTooltip = makeTooltip(tooltip);

    // ******* PARSE AND CONVERT JSON *******
    // If data is a string, we need to convert into JSON format
    if (typeof(data) === "string"){
      data = JSON.parse(data);
    }
    // Now, we can convert the JSON document to a deck object
    const deckProps = jsonConverter.convert(data);

    // ******** UPDATE DECK PROPS ********
    // Assign the ID to the deck object
    deckProps.id = id;
    // Extract the map style from JSON document, since the map style 
    // is sometimes located in data.views.length
    if (!("mapStyle" in deckProps) && "views" in data && data.views.length > 0){
      deckProps.mapStyle = data.views[0].mapStyle;
    }

    // ******** STATIC MAP ******** 
    // Only render static map if a mapbox token was given
    let staticMap;
    if (mapboxKey !== null){
      staticMap = <StaticMap
        mapboxApiAccessToken={mapboxKey}
        mapStyle={deckProps.mapStyle}
      />
    } else {
      staticMap = null;
    }

    // ******** EVENT CALLBACKS ********
    // First, convert enableEvents to list if it was a boolean
    if (enableEvents === true){
      enableEvents = ['click', 'dragStart', 'dragEnd', 'hover'];
    }
    else if (enableEvents === false){
      enableEvents = [];
    }
    // Now, construct the respective functions
    const clickFn = (info, e) => this.safeSetProps({clickInfo: info, clickEvent: e});
    const dragStartFn = (info, e) => this.safeSetProps({dragStartInfo: info, dragStartEvent: e});
    const dragEndFn = (info, e) => this.safeSetProps({dragEndInfo: info, dragEndEvent: e});
    const hoverFn = (info, e) => this.safeSetProps({hoverInfo: info, hoverEvent: e});

    // Finally, assign them as prop to deckProps
    deckProps.onClick = enableEvents.includes("click") ? clickFn: null;
    deckProps.onDragStart = enableEvents.includes("dragStart") ? dragStartFn: null;
    deckProps.onDragEnd = enableEvents.includes("dragEnd") ? dragEndFn: null;
    deckProps.onHover = enableEvents.includes("hover") ? hoverFn: null;

    return (
        <Deck
            getTooltip={getTooltip}
            style={style}
            {...deckProps}
        >
          {staticMap}
        </Deck>
    );
  }