gribnoysup / react-yandex-maps

Yandex Maps API bindings for React
MIT License
327 stars 114 forks source link

#RulerControl and make it default latatatiude and longitude in array list? #328

Closed YummyTi closed 2 years ago

YummyTi commented 2 years ago

How can I put default locations with latatiude and longitudes list as a default array?

mmarkelov commented 2 years ago

You can try something like this:

import React, { useRef } from "react";
import ReactDOM from "react-dom";
import { YMaps, Map, RulerControl } from "react-yandex-maps";

import "./styles.css";

function App() {
  // you need to store map ref to set ruler coordinates 
  const map = useRef(null);

  return (
    <div className="App">
      <YMaps>
        <Map
          defaultState={{
            center: [55.751574, 37.573856],
            zoom: 9
          }}
          instanceRef={map}
        >
          <RulerControl
            onLoad={(e) => {
              // Run this function when ruler will be ready
              // This is init ruler state https://yandex.ru/dev/maps/jsapi/doc/2.1/ref/reference/behavior.Ruler.html#method_detail__setState
              const state =
                "37.57660258,55.69576899~-0.01098633,0.09605884~0.12634277,0.00309472";

              if (map.current) {
                map.current.behaviors.get("ruler").setState(state);
              }
            }}
            options={{ float: "right" }}
          />
        </Map>
      </YMaps>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
YummyTi commented 2 years ago

Parser from array object to string

export const parser = () => { const result = []; console.log(mapsLats.length, 'length'); for (let i = 0; i < mapsLats.length; i++) { const next = mapsLats[i + 1]; const current = mapsLats[i]; if (next) { result.push(${next.lng - current.lng},${next.lat - current.lat}); } console.log(result, 'result'); } return ${mapsLats[0].lng},${mapsLats[0].lat}~${result.join('~')}; };

example list of coordinates image