M
M
mr jeery2018-02-21 18:53:29
Yandex
mr jeery, 2018-02-21 18:53:29

How to make layout in yandex map using React?

Maybe someone has already encountered.
I use https://github.com/effrenus/yandex-map-react-examples.
I create a map and a label on it with

import { Map, Marker, BalloonLayout } from 'yandex-map-react';
  <Map width={'100%'} center={[59.91817154482064,30.30557799999997]} zoom={10}>
              <Marker lat='59.823' lon='30.28'  >
              </Marker>      
      </Map>

When you click on the label, a modal window should appear with a description of the place, address, phone number (whatever you want).
Standardly, this is done like this, here is the classic design of the modal window from Yandex, there is a close button.
<Map width={'100%'} center={[59.91817154482064,30.30557799999997]} zoom={10} properties={{  balloonContentHeader: "Ресторан Катюша", balloonContentBody: "www.restorankatusha.com"  }}>

But in the browser, balloonContentBody("www.restorankatusha.com") won't be a link, obviously.
The task was to insert a clickable site link inside the label.
I found another way to describe the contents of the label, but here a modal window appears when you click and disappears only when you click on another label, there is no standard design and, accordingly, there is no cross button to close the window. And I don’t know how to add it, the Yandex documentation says that it should be the default, but this is a package for react ... for which there is no separate documentation.
<Map width={'100%'} state={mapState} center={[59.91817154482064,30.30557799999997]} zoom={10}>
              <Marker lat='59.823' lon='30.28'  >
                <BalloonLayout>
                <div className="Layout">
                <a href="www.google.com">Hello</a>
                </div>
                </BalloonLayout>
              </Marker>
          ))}
      </Map>

Please help!
The end goal is to add a link inside the modal window.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question