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

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(

let selectedMarkerStyle = Util.cloneObject(marker.style);

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

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

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



import * as React from 'react';

export class App extends React.Component<any, any> {
constructor(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>


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.