React OpenLayers Fiber
IntroductionDocsExamples
/
GitHub
/
  • OpenLayers examples
    • Accessible Map
    • Bing Maps
    • Clustered Features
    • Draw and Modify Features
    • Draw Shapes
    • Dynamic Data
    • GeoJSON
    • Icon Symbolizer
    • Image Filters
    • Mapbox Vector Tiles
    • Popup
    • Preload Tiles
    • Image Reprojection
    • OpenStreetMap Reprojection
    • Select Features
    • Simple Map
    • Static Image
    • turf.js
    • Tiled WMS
    • XYZ Retina Tiles
    • XYZ
    • Zoomify
  • Advanced examples
    • Declaratively move view
    • Dynamic styles
    • Dynamic points
    • Retina
    • Performance
    • Kitchen Sink
  • Introduction
  • Docs
    • Getting Started
    • Components
    • Props
    • Imperative Fallback
  • Examples
    • OpenLayers examples
      • Accessible Map
      • Bing Maps
      • Clustered Features
      • Draw and Modify Features
      • Draw Shapes
      • Dynamic Data
      • GeoJSON
      • Icon Symbolizer
      • Image Filters
      • Mapbox Vector Tiles
      • Popup
      • Preload Tiles
      • Image Reprojection
      • OpenStreetMap Reprojection
      • Select Features
      • Simple Map
      • Static Image
      • turf.js
      • Tiled WMS
      • XYZ Retina Tiles
      • XYZ
      • Zoomify
    • Advanced examples
      • Declaratively move view
      • Dynamic styles
      • Dynamic points
      • Retina
      • Performance
      • Kitchen Sink

Simple Map

See https://openlayers.org/en/latest/examples/simple.html

import React from "react";
import "ol/ol.css";
import { Map } from "@react-ol/fiber";

export const ExampleSimple = () => (
  <Map>
    <olView initialCenter={[0, 0]} initialZoom={2} />
    <olLayerTile>
      <olSourceOSM />
    </olLayerTile>
  </Map>
);
Select Features
Static Image

    On This Page


Edit this page on GitHub
MIT 2022 © Vincent Lecrubier.