Vfrdtyky

Helllo! I'm trying to set the center of the map based the following array:

[[-23.568767,-46.649907],[-23.565972,-46.650859],[-23.563703,-46.653542],[-23.616359,-46.664749],[-23.624203,-46.683369],[-23.565972,-46.650859],[-23.572424,-46.65384],[-23.610235,-46.69591],[-23.609215,-46.69753],[-23.608786,-46.697448],[-23.617262,-46.674802],[-23.620757,-46.673658],[-23.625349,-46.692239],[-23.565972,-46.650859],[-23.564909,-46.654558],[-23.642676,-46.672727],[-23.608786,-46.697448],[-23.610652,-46.686046],[-23.573285,-46.689102],[-23.609215,-46.667182],[-23.609215,-46.667182],[-23.60997,-46.667902],[-23.584718,-46.675473],[-23.584718,-46.675473],[-23.607909,-46.692784],[-23.594718,-46.635473],[-23.564552,-46.654713],[-23.573263,-46.695077],[-23.633372,-46.680053],[-23.64717,-46.727572],[-23.576715,-46.68747],[-23.609215,-46.667182],[-23.609215,-46.667182],[-23.52631,-46.616194],[-23.614064,-46.668883],[-23.608786,-46.697448],[-23.587921,-46.6767],[-23.573691,-46.643678],[-23.573691,-46.643678],[-23.627158,-46.675183],[-23.573263,-46.695077],[-23.573263,-46.695077],[-23.572269,-46.689863],[-23.573263,-46.695077],[-23.628932,-46.665837],[-23.61506,-46.659242],[-23.528071,-46.586955],[-23.595269,-46.669645],[-23.596066,-46.686917],[-23.627158,-46.675183]]

I've tried get the bounds with Leaflet.latLngBounds:

const bounds = L.latLngBounds(latLngs);

and got the following errors:

leaflet-src.js:1658 Uncaught TypeError: Cannot read property 'lat' of
null
at Object.project (leaflet-src.js:1658)
at Object.latLngToPoint (leaflet-src.js:1497)
at NewClass.project (leaflet-src.js:3931)
at NewClass._getNewPixelOrigin (leaflet-src.js:4425)
at NewClass._move (leaflet-src.js:4173)
at NewClass._resetView (leaflet-src.js:4135)
at NewClass.setView (leaflet-src.js:3190)
at NewClass.initialize (leaflet-src.js:3132)
at new NewClass (leaflet-src.js:300)
at Map.createLeafletElement (Map.js:99)

Uncaught TypeError: Cannot read property 'off' of undefined
at Map.componentWillUnmount (Map.js:258)
at callComponentWillUnmountWithTimer (react-dom.development.js:15784)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at safelyCallComponentWillUnmount (react-dom.development.js:15791)
at commitUnmount (react-dom.development.js:16159)
at commitNestedUnmounts (react-dom.development.js:16190)
at unmountHostComponents (react-dom.development.js:16446)
at commitDeletion (react-dom.development.js:16498)

The above error occurred in the component:
in Map (created by ShopMap)
in ShopMap (created by App)
in div (created by Context.Consumer)
in StyledComponent (created by styled.div)
in div (created by App)
in div (created by Context.Consumer)
in StyledComponent (created by styled.div)
in App (created by AppContainer)
in AppContainer (created by Connect(AppContainer))
in Connect(AppContainer)
in Provider

Uncaught Error: A cross-origin error was thrown. React doesn't have
access to the actual error object in development.
at Object.invokeGuardedCallbackDev (react-dom.development.js:210)
at invokeGuardedCallback (react-dom.development.js:256)
at commitRoot (react-dom.development.js:17442)
at completeRoot (react-dom.development.js:18898)
at performWorkOnRoot (react-dom.development.js:18827)
at performWork (react-dom.development.js:18735)
at performSyncWork (react-dom.development.js:18709)
at requestWork (react-dom.development.js:18578)
at scheduleWork (react-dom.development.js:18387)
at scheduleRootUpdate (react-dom.development.js:19055)

Then I tried create a FeatureGroup and add Markers based on the array:

const group = new L.FeatureGroup();



positions.forEach((latitude, longitude) => {

  L.marker([latitude, longitude]).addTo(group);

});

But results on the following:

LatLngBounds {}

And the Map component:

const ShopMap = ({ shops }) => {

  const positions = shops.reduce((newArray, shop) => {

    return [

      ...newArray,

      {

        latitude: shop.latitude,

        longitude: shop.longitude

      }

    ]

  }, );



  return (

    <Map center={getLatLngBounds(positions)} zoom={15}>

      <TileLayer

        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

      />

      {shops &&

        shops.map(({ latitude, longitude, revenueLowerThanExpected, name }) => {

          return (

            <Marker

              key={name}

              icon={revenueLowerThanExpected ? redMarker : blueMarker}

              position={[

                latitude,

                longitude

              ]}

            />

          );

        })}

    </Map>

  );

};

Someone could help me with this?

Map.center property expects a latLng value but what you are after is Map.bounds property which:

A rectangle for the map to contain. It will be centered, and the map
will zoom in as close as it can while still showing the full bounds

In case of Map.bounds value, it could be provided as an array of {lat,lng} values, in your case

const getLatLngBounds = () => {

  return  [

    [-23.568767, -46.649907],

    [-23.565972, -46.650859],

    [-23.563703, -46.653542],

    [-23.616359, -46.664749],

    [-23.624203, -46.683369],

    ...

  ];

} 









 <Map bounds={getLatLngBounds()} >

    <TileLayer 

      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'/>

</Map>

Refer this example for a more details.

Or as L.latLngBounds value, here is a demo for your reference.