Skip to content

Instantly share code, notes, and snippets.

@dietrichmax
Last active April 28, 2023 19:39
Show Gist options
  • Save dietrichmax/aa56c61c73146d194f50a08b5d0fcd62 to your computer and use it in GitHub Desktop.
Save dietrichmax/aa56c61c73146d194f50a08b5d0fcd62 to your computer and use it in GitHub Desktop.
OL with features
import React, { useState, useEffect, useRef } from 'react';
import { Feature, Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import Overlay from 'ol/Overlay';
import OSM from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj';
import 'ol/ol.css';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Point from 'ol/geom/Point';
function App() {
const mapElement = useRef(null);
const mapRef = useRef(null);
const marker = new Overlay({
position: fromLonLat([0, 0]),
positioning: "center-center",
element: document.getElementById("marker"),
stopEvent: false
});
const view = new View({ center: [0, 0], zoom: 1 })
const OSMLayer = new TileLayer({ source: new OSM() })
const iconFeature = new Feature({
geometry: new Point([0, 0]),
name: 'Null Island',
population: 4000,
rainfall: 500,
});
const vectorSource = new VectorSource({
features: [iconFeature],
});
const vectorLayer = new VectorLayer({
source: vectorSource,
})
useEffect(() => {
if (!mapRef.current) {
mapRef.current = new Map({
layers: [OSMLayer,vectorLayer],
view: view,
target: mapElement.current
});
mapRef.current.addOverlay(marker)
}
}, [mapElement, mapRef]);
return (
<>
<div ref={mapElement} style={{ width: "100%", height: "100vh" }} />
</>
);
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment