79 lines
2.0 KiB
JavaScript
79 lines
2.0 KiB
JavaScript
"use client";
|
|
|
|
import React, { useEffect } from "react";
|
|
import "ol/ol.css"; // استفاده از استایلهای OpenLayers
|
|
import Map from "ol/Map";
|
|
import { fromLonLat } from "ol/proj";
|
|
import View from "ol/View";
|
|
import TileLayer from "ol/layer/Tile";
|
|
import OSM from "ol/source/OSM";
|
|
import Feature from "ol/Feature";
|
|
import Point from "ol/geom/Point";
|
|
import VectorSource from "ol/source/Vector";
|
|
import VectorLayer from "ol/layer/Vector";
|
|
import { Fill, Stroke, Style } from "ol/style";
|
|
import CircleStyle from "ol/style/Circle";
|
|
|
|
const map = ({ data }) => {
|
|
useEffect(() => {
|
|
const dynamicLocation = data?.location_company.split(",");
|
|
const markerCoordinates = fromLonLat([
|
|
dynamicLocation[1],
|
|
dynamicLocation[0],
|
|
]);
|
|
// ایجاد نقشه
|
|
const map = new Map({
|
|
target: "map", // نام DOM element برای جایگذاری نقشه
|
|
layers: [
|
|
new TileLayer({
|
|
source: new OSM(),
|
|
}),
|
|
],
|
|
view: new View({
|
|
center: markerCoordinates, // مرکز نقشه
|
|
zoom: 16, // بزرگنمایی نقشه
|
|
}),
|
|
});
|
|
// ایجاد مارکر
|
|
const marker = new Feature({
|
|
geometry: new Point(markerCoordinates),
|
|
});
|
|
|
|
// تعریف سبک مارکر (مثلاً یک نقطه قرمز)
|
|
marker.setStyle(
|
|
new Style({
|
|
image: new CircleStyle({
|
|
radius: 7,
|
|
fill: new Fill({
|
|
color: "red",
|
|
}),
|
|
stroke: new Stroke({
|
|
color: "white",
|
|
width: 2,
|
|
}),
|
|
}),
|
|
})
|
|
);
|
|
|
|
// ایجاد منبع و لایه برای مارکر
|
|
const vectorSource = new VectorSource({
|
|
features: [marker],
|
|
});
|
|
|
|
const vectorLayer = new VectorLayer({
|
|
source: vectorSource,
|
|
});
|
|
|
|
// افزودن لایه مارکر به نقشه
|
|
map.addLayer(vectorLayer);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<div id="map" style={{ width: "100%", height: "400px" }}></div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default map;
|