Skip to content

Latest commit

 

History

History

cesium-and-leaflet-example

README.md

Using Cesium and leaflet combined in React.

This example shows how to use Cesium and Leaflet, and how to swich between the map views in React.

API Key

This example uses the following of Norkart's services:

  • Norkart Maptiles
  • Norkart 3D tiles
  • Norkart WMS-Høyde(terrain provider for cesium)
  • Norkart WMS-Orto(imagery provider for cesium)

How to get keys?

  • Request API access here.

Built With

  • Typescript - Language.
  • React - Front end library.
  • Leaflet - For rendering the interactive map.
  • React Leaflet - For integrating leaflet with react.
  • Material-UI - For design system and components.
  • Cesium - For rendering the interactive map
  • Resium - For integrating cesium with react.
  • Webpack - Javascript Bundler.

Run Locally

  • This is a React App. To run it locally you will need to use npm to install packages and run the app.
  • Add .env to the root folder, and provide the follwing values:
REACT_APP_TILE_MAP_SERVICE_IMAGERY_PROVIDER_URL=
REACT_APP_TERRAIN_PROVIDER_URL=
REACT_APP_3D_TILES_PROVIDER_URL=
REACT_APP_MAPTILES_PROVIDER_URL=

About the code

Common components

  • In Map.tsx, components which will rendered in both the Leaflet and Cesium view are specified.
  • In this example we add the SwitchMode.tsx component, so we can toggle between the map views.
  • Components are rendered, using MapControls.tsx.

Switch view

  • Map bounds are used to determine where to render the map in case of a map swich.
  • MapOrchestrator.tsx holds the bounds state, so it can be updated fromm either the Leaflet or Cesium component.
  • For Leaflet, bounds are updated in EventHandler.tsx
  • For Cesium, bounds are updated in CameraPosition.tsx

Webpack

The following guides have been used to build the webpack.config file:

Relevant documentation and links