import React, { FC } from "react";
import { Container } from "react-bootstrap";
import { YMaps, Map, Placemark } from "react-yandex-maps";
import { icons } from "../../utils/icons/icons";
import { useState } from "react";
function createBalloonLayout(ymaps: any) {
console.log(ymaps.templateLayoutFactory);
const polygonLayout = ymaps.templateLayoutFactory.createClass(
'<div style="color: #FFFFFF; font-weight: bold;">!!!</div>'
);
}
const ContactsPage: FC = () => {
return (
<>
<div className="contacts-page">
<div className="contacts-page__map">
<YMaps>
<Map
onLoad={(ymaps) => {
createBalloonLayout(ymaps);
}}
width="100%"
height="100%"
defaultState={{ center: [23, 70], zoom: 17 }}
>
<Placemark
geometry={[23, 70]}
options={{
iconLayout: polygonLayout,
iconShape: {
type: 'Polygon',
coordinates: [
[[-28,-76],[28,-76],[28,-20],[12,-20],[0,-4],[-12,-20],[-28,-20]]
]
}
}}
></Placemark>
</Map>
</YMaps>
</div>
<Footer />
</div>
</>
);
};
export { ContactsPage };