2

I am trying to create a web app using a Django back end with React for the front end. I am using a React OpenLayers wrapper on the OpenLayers site and keep getting the Type Error. Can someone please help? I am new to React.

Wrapper: https://github.com/allenhwkim/react-openlayers/tree/master/app/controls

Index.jsx
var React = require('react')
var ReactDOM = require('react-dom')
var Hello = require('./app')
var Search = require('./testing')
import Calendar from './date-range-picker'
import Map2 from './map2'


import {
  interaction, layer, custom, control, //name spaces
  Interactions, Overlays, Controls,     //group
  Map, Layers, Overlay, Util    //objects
} from "react-openlayers"

var marker = new custom.style.MarkerStyle(
  'https://openlayers.org/en/v4.0.1/examples/data/icon.png'
);

let selectedMarkerStyle = Util.cloneObject(marker.style);
selectedMarkerStyle.getImage().setOpacity(1);


$(document).ready(function () {
ReactDOM.render(<Hello />, document.getElementById('react-app'))
ReactDOM.render(<Search />, document.getElementById('testing'))
ReactDOM.render(<Calendar />, document.getElementById('Calendar'))


ReactDOM.render(
    <div>
    <Map view={{center: [0, 0], zoom: 2}}>
  <Layers>
    <layer.Tile/>
    <layer.Vector source={marker} style={marker.style} zIndex="1" />
  </Layers>
  <Overlays>
    <Overlay 
      ref={comp => this.overlayComp = comp}
      element="#popup" />
  </Overlays>
  <Controls attribution={false} zoom={true}>
    <control.Rotate />
    <control.ScaleLine />
    <control.FullScreen />
    <control.OverviewMap />
    <control.ZoomSlider />
    <control.ZoomToExtent />
    <control.Zoom />
  </Controls>
  <Interactions>
    <interaction.Select style={selectedMarkerStyle} />
    <interaction.Draw source={marker} type='Point' />
    <interaction.Modify features={marker.features} />
  </Interactions>
</Map>

</div>, document.getElementById('map2'))

});

./map2.jsx

import * as React from 'react';

export class App extends React.Component<any, any> {
constructor(props) {
   super

(props)
  }

  render() {
    return (
      <div className="menu">
        <h1>React OpenLayers</h1>
        <ul className="groups" role="nav">
          <li><Link to="/layers">Layers</Link></li>
          <li><Link to="/controls">Controls</Link></li>
          <li><Link to="/overlays">Overlays</Link></li>
          <li><Link to="/interactions">Interactions</Link></li>
          <li><Link to="/custom">Custom Examples</Link></li>
        </ul>

        {this.props.children}
      </div>
    );
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.