3

Following is the component I wrote to load a basic arcgis map using react js

import React, { Component } from 'react';
import { loadModules } from 'esri-loader';

const options = {
  url: 'https://js.arcgis.com/4.6/'
};

const styles =  {
  container: {
    height: '100vh',
    width: '100vw'
  },
  mapDiv: {
    padding: 0,
    margin: 0,
    height: '100%',
    width: '100%'
  },
}

class BaseMap extends Component {

  constructor(props) {
    super(props);
    this.state = {
      status: 'loading'
    }
  }

  componentDidMount() {
    loadModules(['esri/Map', 'esri/views/MapView'], options)
      .then(([Map, MapView]) => {
        const map = new Map({ basemap: "streets" });
        const view = new MapView({
          container: "viewDiv",
          map,
          zoom: 15,
          center: [78.4867, 17.3850]
        });
        view.then(() => {
          this.setState({
            map,
            view,
            status: 'loaded'
          });
        });
      })

  }

  renderMap() {
    if(this.state.status === 'loading') {
      return <div>loading</div>;
    }
  }

  render() {

    return(
          <div style={styles.container}>
            <div id='viewDiv' style={ styles.mapDiv } >
              {this.renderMap()}
            </div>
          </div>
    )
  }
}

export default BaseMap;

The map is loading. However, I'm unable to make it responsive.

If I remove the div around the view div or if I give the height and width of the outer div (surrounding viewDiv) as relative (styles.container: { height: '100%', width: '100%'}), the map does not render. No idea why. Any suggestions to make it responsive would be appreciated.

troglodyte07
  • 3,598
  • 10
  • 42
  • 66
  • 1
    Can you please clarify a bit on what you mean by "make it responsive"? Do you mean fill the height of whatever DOM element contains this component? I suspect some element up the tree has a `position: absolute` or something that prevents `height: 100%` from working. > the map does not render. I suspect that it does render, just that it has a height of 0px, please inspect the DOM and verify. Finally, I strongly suggest you start w/ this code pen and get the behavior you desire working w/o React and esri-loader: https://codepen.io/anon/pen/aqKMwg?&editors=100 – Tom Wayson Feb 22 '18 at 17:39

0 Answers0