MapComponent example

This example shows the usage of the MapComponent in combination with the MapProvider. It makes use of the mappify HOC function to supply the provided map to the MapComponent and the NominatimSearch.

This way you can share the same mapobject across the whole application without passing it as prop to the whole rendertree.

The map can be created asynchronusly so that every child of the MapProvider is just rendered when the map is ready.

    import React from 'react';
import { render } from 'react-dom';
import OlSourceOsm from 'ol/source/osm';
import OlLayerTile from 'ol/layer/tile';
import OlView from 'ol/view';
import OlMap from 'ol/map';

import {
  MapComponent,
  MapProvider,
  NominatimSearch,
  mappify
} from '@terrestris/react-geo';

/**
 * Create the OlMap (you could do some asynchronus stuff here).
 *
 * @return {Promise} Promise that resolves an OlMap.
 */
const mapPromise = new Promise((resolve) => {
  const layer = new OlLayerTile({
    source: new OlSourceOsm()
  });

  const map = new OlMap({
    view: new OlView({
      center: [
        135.1691495,
        34.6565482
      ],
      projection: 'EPSG:4326',
      zoom: 16,
    }),
    layers: [layer]
  });

  resolve(map);
});

const Map = mappify(MapComponent);
const Search = mappify(NominatimSearch);

render(
  <MapProvider map={mapPromise}>
    NominatimSearch: <Search />
    <Map style={{
      height: '512px'
    }} />
  </MapProvider>,
  document.getElementById('exampleContainer')
);