layik/geoplumber.html

## geoplumber.html
<!DOCTYPE html>
<!--Thanks to https://github.com/PaulLeCam/react-leaflet/blob/master/example/umd.html-->
<html>
  <head>
    <meta charset="utf-8" />
    <title>Geoplumber front stand alone example</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
    <script src="https://unpkg.com/@babel/standalone"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-leaflet/2.2.1/react-leaflet.min.js"></script>
    <style>
      body {
        padding: 0;
      }
      .leaflet-container {
        height: 600px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/babel" data-presets="es2015,react">
      const React = window.React
      const { Map, TileLayer, Marker, Popup, GeoJSON } = window.ReactLeaflet

      class GeoJSONComponent extends React.Component {

      constructor(props) {
          super(props);
          this.state = {
              geojson: null
          }
          this._fetchData = this._fetchData.bind(this)
      }

      _fetchData() {
          const url = this.props.fetchURL ? this.props.fetchURL : 'http://localhost:8000/api/data'
          // console.log("fetching... " + url)
          fetch(url)
              .then((response) => {
                  if (response.status !== 200) {
                      console.log('Looks like there was a problem. Status Code: ' +
                          response.status);
                      return;
                  }
                  // Examine the text in the response
                  response.json()
                      .then((geojson) => {
                          if ((geojson.features && geojson.features.length === 0) || response.status === 'ZERO_RESULTS') {
                              this.setState({ error: response.status })
                          } else {
                              var geojsonLayer = L.geoJson(geojson)
                              const bbox = geojsonLayer.getBounds()
                              // assuming parent has provided "map" object
                              this.props.map && this.props.map.fitBounds(bbox)
                              this.setState({ geojson })
                          }
                      });
              })
              .catch((err) => {
                  console.log('Fetch Error: ', err);
              });
      }

      componentDidMount() {
          this._fetchData()
      }

      componentDidUpdate(prevProps, prevState) {
          if (this.props.fetchURL !== prevProps.fetchURL) {
              this._fetchData()
          }
          if(this.props.radius !== prevProps.radius) {
              this.forceUpdate()
          }
      }

      render() {
          const { geojson } = this.state;
          let { radius, style } = this.props;

          if (!geojson) {
              return (null) // as per React docs
          }

          // get radius from parent, or is it above 100 markers? 2 else 8
          radius = radius ? radius : geojson.features && geojson.features.length > 100 ? 2 : 8

          if(!geojson.features || geojson.type !== "FeatureCollection") {
              if(geojson.coordinates) { //single feature.
                  return(
                  <GeoJSON //react-leaflet component
                      key={JSON.stringify(geojson)}
                      data={geojson}
                  />
                  )
              } else {
                  return(null) //nothing is passed to me.
              }
          }
          // we have type: "FeatureCollection"
          return (
              geojson.features.map((feature, i) => {
                  return (
                      <GeoJSON //react-leaflet component
                          key={JSON.stringify(feature) + radius}
                          // gp_add_geojson can define values from `feature`
                          style={typeof(style) === 'function' ?
                          style(feature) : style }
                          /**
                           * https://leafletjs.com/examples/geojson/
                           * style for leaflet is
                           * {"color": "#hexstr", "weight": 5, "opacity": 0.65}
                           * or of course a function returning these.
                           */
                          data={feature}
                          onEachFeature={(feature, layer) => {
                              const properties = Object.keys(feature.properties).map((key) => {
                                  return (key + " : " + feature.properties[key])
                              })
                              layer.bindPopup(
                                  properties.join('<br/>')
                              );
                          }}
                          pointToLayer={
                              // use cricles prop if not 10 markers is enough
                              this.props.circle || geojson.features.length > 10 ?
                                  (_, latlng) => {
                                      // Change the values of these options to change the symbol's appearance
                                      let options = {
                                          radius: radius,
                                          fillColor: "green",
                                          color: "black",
                                          weight: 1,
                                          opacity: 1,
                                          fillOpacity: 0.8
                                      }
                                      return L.circleMarker(latlng, options);
                                  }
                                  :
                                  (_, latlng) => {
                                      return L.marker(latlng);
                                  }
                          }
                      />
                  )
              })
          )}
      }
      const position = [51.505, -0.09]
      const Geoplumber = () => (
        <Map center={position} zoom={13}>
          <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <GeoJSONComponent fetchURL="http://localhost:8000/api/uol" />

          <Marker position={position}>
            <Popup>
              <span>
                A pretty CSS3 popup. <br /> Easily customizable.
              </span>
            </Popup>
          </Marker>
        </Map>
      )
      console.log(Map.center);

      window.ReactDOM.render(<Geoplumber />, document.getElementById('container'))
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<!--Thanks to https://github.com/PaulLeCam/react-leaflet/blob/master/example/umd.html-->
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Geoplumber front stand alone example</title>
	<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"
	/>
	<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css"
	/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
	<script src="https://unpkg.com/@babel/standalone"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-leaflet/2.2.1/react-leaflet.min.js"></script>
	<style>
	body {
	padding: 0;
	}
	.leaflet-container {
	height: 600px;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div id="container"></div>
	<script type="text/babel" data-presets="es2015,react">
	const React = window.React
	const { Map, TileLayer, Marker, Popup, GeoJSON } = window.ReactLeaflet

	class GeoJSONComponent extends React.Component {

	constructor(props) {
	super(props);
	this.state = {
	geojson: null
	}
	this._fetchData = this._fetchData.bind(this)
	}

	_fetchData() {
	const url = this.props.fetchURL ? this.props.fetchURL : 'http://localhost:8000/api/data'
	// console.log("fetching... " + url)
	fetch(url)
	.then((response) => {
	if (response.status !== 200) {
	console.log('Looks like there was a problem. Status Code: ' +
	response.status);
	return;
	}
	// Examine the text in the response
	response.json()
	.then((geojson) => {
	if ((geojson.features && geojson.features.length === 0) \|\| response.status === 'ZERO_RESULTS') {
	this.setState({ error: response.status })
	} else {
	var geojsonLayer = L.geoJson(geojson)
	const bbox = geojsonLayer.getBounds()
	// assuming parent has provided "map" object
	this.props.map && this.props.map.fitBounds(bbox)
	this.setState({ geojson })
	}
	});
	})
	.catch((err) => {
	console.log('Fetch Error: ', err);
	});
	}

	componentDidMount() {
	this._fetchData()
	}

	componentDidUpdate(prevProps, prevState) {
	if (this.props.fetchURL !== prevProps.fetchURL) {
	this._fetchData()
	}
	if(this.props.radius !== prevProps.radius) {
	this.forceUpdate()
	}
	}

	render() {
	const { geojson } = this.state;
	let { radius, style } = this.props;

	if (!geojson) {
	return (null) // as per React docs
	}

	// get radius from parent, or is it above 100 markers? 2 else 8
	radius = radius ? radius : geojson.features && geojson.features.length > 100 ? 2 : 8

	if(!geojson.features \|\| geojson.type !== "FeatureCollection") {
	if(geojson.coordinates) { //single feature.
	return(
	<GeoJSON //react-leaflet component
	key={JSON.stringify(geojson)}
	data={geojson}
	/>
	)
	} else {
	return(null) //nothing is passed to me.
	}
	}
	// we have type: "FeatureCollection"
	return (
	geojson.features.map((feature, i) => {
	return (
	<GeoJSON //react-leaflet component
	key={JSON.stringify(feature) + radius}
	// gp_add_geojson can define values from `feature`
	style={typeof(style) === 'function' ?
	style(feature) : style }
	/**
	* https://leafletjs.com/examples/geojson/
	* style for leaflet is
	* {"color": "#hexstr", "weight": 5, "opacity": 0.65}
	* or of course a function returning these.
	*/
	data={feature}
	onEachFeature={(feature, layer) => {
	const properties = Object.keys(feature.properties).map((key) => {
	return (key + " : " + feature.properties[key])
	})
	layer.bindPopup(
	properties.join('<br/>')
	);
	}}
	pointToLayer={
	// use cricles prop if not 10 markers is enough
	this.props.circle \|\| geojson.features.length > 10 ?
	(_, latlng) => {
	// Change the values of these options to change the symbol's appearance
	let options = {
	radius: radius,
	fillColor: "green",
	color: "black",
	weight: 1,
	opacity: 1,
	fillOpacity: 0.8
	}
	return L.circleMarker(latlng, options);
	}
	:
	(_, latlng) => {
	return L.marker(latlng);
	}
	}
	/>
	)
	})
	)}
	}
	const position = [51.505, -0.09]
	const Geoplumber = () => (
	<Map center={position} zoom={13}>
	<TileLayer
	attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
	/>
	<GeoJSONComponent fetchURL="http://localhost:8000/api/uol" />

	<Marker position={position}>
	<Popup>
	<span>
	A pretty CSS3 popup. <br /> Easily customizable.
	</span>
	</Popup>
	</Marker>
	</Map>
	)
	console.log(Map.center);

	window.ReactDOM.render(<Geoplumber />, document.getElementById('container'))
	</script>
	</body>
	</html>