aviklai / react-leaflet-google-layer Goto Github PK

View Code? Open in Web Editor NEW

48.0 48.0 7.0 159 KB

Google layer for React-Leaflet using leaflet.gridlayer.googlemutant, implemented with typescript

License: MIT License

TypeScript 100.00%

google-maps google-maps-api leaflet leafletjs react react-leaflet reactjs

react-leaflet-google-layer's People

Contributors

Stargazers

Watchers

Forkers

yuiseki waleed065 next-geography g9insane alexlafl can-exploreinc dipak-galaxeye

react-leaflet-google-layer's Issues

The shapes do not match the Google Map layer

function App() {
return (

Atlantis Internet Services

<ReactLeafletGoogleLayer googleMapsLoaderConf={{ KEY: 'sample' }} type={"hybrid"} />

;

Hello

nologo

skule

);
}

Dynamic Layer Switch

Trying to switch traffic layer dynamically but it is not working.

<LayersControl.BaseLayer name="Google Street" checked={defaultMap ? true : false} key={i}> <ReactLeafletGoogleLayer apiKey={GoogleApiKey} type={"roadmap"} googleMapsAddLayers={TrafficLayer} /> </LayersControl.BaseLayer>

Am using a button to toggle TrafficLayer as in the following code.

if (!ShowTraffic) { setTrafficLayer([{ name: "TrafficLayer" }]); } else { setTrafficLayer([]); }

Any help will be appreciated. Are ReactLeafletGoogleLayer props immutable?

Is it possible to make places of interest clickable?

Is there an option I missed or is this just not possible?

Thanks.

Cannot specify map type or any other GoogleMutant property

When I'm trying to specify the map type I get this error:
'Property 'type' does not exist on type 'IntrinsicAttributes & LayerProps & IProps & RefAttributes'.'

In fact, I cannot seem to set any of the GoogleMutant properties

My code:

<ReactLeafletGoogleLayer apiKey={config.googleMapsApiKey} type="satellite" />

I am using react leaflet v3 and using v2.0.4 of this library

Cannot get running with server side rendering

There's something in the setup or use with leaflet which means I can't get this running with server side rendering. apparently window isn't defined

Upgrade peer dependencies to support react-leaflet v4

Including react-leaflet v4's dependencies of react v18 & leaflet v1.8

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.1.0" from the root project
npm ERR!   peer react@">=16.8.0" from [email protected]
npm ERR!   node_modules/react-leaflet-google-layer
npm ERR!     react-leaflet-google-layer@"2.0.5" from the root project
npm ERR!   1 more (react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from [email protected]
npm ERR! node_modules/react-leaflet
npm ERR!   react-leaflet@"^3.2.5" from the root project
npm ERR!   peer react-leaflet@"^3.0.0" from [email protected]
npm ERR!   node_modules/react-leaflet-google-layer
npm ERR!     react-leaflet-google-layer@"2.0.5" from the root project

force upgrade results in multiple typescript errors

TS2322: Type '{ apiKey: string; type: string; styles: ({ featureType: string; stylers: { saturation: number; }[]; } | { featureType: string; elementType: string; stylers: { visibility: string; }[]; })[]; }' is not assignable to type 'IntrinsicAttributes & LayerProps & IProps & RefAttributes<GridLayer>'.
  Property 'type' does not exist on type 'IntrinsicAttributes & LayerProps & IProps & RefAttributes<GridLayer>'.
    39 |           <ReactLeafletGoogleLayer
    40 |             apiKey={GOOGLE_MAP_API_KEY}
  > 41 |             type="roadmap"
       |             ^^^^
    42 |             styles={[
    43 |               {
    44 |                 featureType: 'all',

If you're aware of any workaround in the meantime, please advise. Thanks!

Module breaks when updating to [email protected]

Breaks on updating from v3.2.3 to v3.2.4.

The change made was: Fix removing the map handlers when MapContainer is unmounted.

PaulLeCam/react-leaflet@9f88d11

Leads to this error:

Uncaught ReferenceError: google is not defined
    at NewClass.onRemove (Leaflet.GoogleMutant.js:108)
    at NewClass.removeLayer (leaflet-src.js:6641)
    at NewClass.removeFrom (leaflet-src.js:6522)
    at NewClass.remove (leaflet-src.js:6511)
    at NewClass.remove (leaflet-src.js:3761)
    at eval (MapContainer.js:56)

Likely something that needs to be fixed in Leaflet.GridLayer.GoogleMutant.

location of googlelayer is not matching other layers

Thanks for the awesome library.
I'm using it to with two geojson layers but the location of geojson layers doesn't match the location of the google layer.

      initLayers = (inputLayers) => {
      const outputLayers = inputLayers.map(layer =>{
        switch(layer.type){
          case 'geoJson':
            return (< GeoJSON key = {layer.name} data = {layer.data } onEachFeature = { this.onEachFeatureClosure(layer.style)  } />);
          break;
          case 'googleMap':
            return(
              <ReactLeafletGoogleLayer />
            )
          break;
        }
      });
      console.log(outputLayers)
      return outputLayers;
    }


    render() {
        let layers = this.initLayers(this.props.layers);
        return (
            <Map
            style={{ height: "400px", width: "100%" }}
            zoom={5}
            center={[51.51, -0.06]}
            >

        <Circle center={[51.51, -0.06]} radius={5000} />
              {layers}
          </Map>
        )
    }

Google Maps is not loading

Hello

The google maps is not loading. getting the error on from this package. could you please check

Portion of Google Layer not loading when width changes in firefox

Hello, I am facing an issue with resizing in a firefox browser. More specifically when the map loads in a small screen size and I resize it to a larger one, the map seems that it hasnt loaded yet. I supply a screenshot bellow:

You can use the cosesandbox provided in the npm's section 'Basic usage example': https://codesandbox.io/s/basic-usage-with-react-leaflet-v3-vx8fd?file=/src/index.tsx
Simply load the map in a small screen size and start increasing the window's height.
I am using Firefox developer Edition version: 101.0b7

Support React v17

About

The current stable version of React is v17.
This packages cause error when install to project that needs React v17 because dependency has set to React v16.
(For example, Next.js stable version 10 needs react v17)

React v16 to v17 has no breaking change, no new features.
So I think there is no critical problem to upgrade v17.
https://reactjs.org/blog/2020/10/20/react-v17.html

Workaround

npm i react-leaflet-google-layer --force

If you'd welcome a Pull Request, I'd like to send it to you later.

which version of react-leaflet-google-layer for react-leafet 2.7.0

TypeError: react_leaflet_1.withLeaflet is not a function

Here is my code:
import { Map } from "react-leaflet";
import ReactLeafletGoogleLayer from "react-leaflet-google-layer";
. . . .
. . . .
<Map zoom={15} center={[45, 20]}>
<ReactLeafletGoogleLayer
googleMapsLoaderConf={{ KEY: MY_KEY }}
useGoogMapsLoader={true}
type="roadmap"
/>

@googlemaps/js-api-loader need to be upgraded to version "^1.12.12" to resolve error notification with react 17

Failed to parse source map from '.../node_modules/react-leaflet-google-layer/node_modules/@googlemaps/js-api-loader/src/index.ts' file: Error: ENOENT: no such file or directory

State updates causes the library to include Google JS API multiple times

If you implement ReactLeafletGoogleLayer and update the state of your page, for example with an useState, you will get an error/warning from the Google API:

You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

You can recreate this issue using the example below.

import { render } from "react-dom";
import { MapContainer } from "react-leaflet";
import ReactLeafletGoogleLayer from "react-leaflet-google-layer";

function App() {
  const [x, setX] = useState(0);

  setTimeout(() => {
    setX(x + 1);
  }, 3000);

  return (
    <div>
      {x}
      <MapContainer
        style={{ height: "500px", width: "100%" }}
        zoom={13}
        center={[10, 10]}
      >
        <ReactLeafletGoogleLayer />
      </MapContainer>
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Am i missing something here?

Is it possible to make custom map style?

I don't see options to set custom map style or just set mapId which is provided by google maps platform.

Switch between OSM and GMap at runtime

I would like to switch between OSM and GMap tiles based on a boolean:

const GMapsEnabled = false;
...
<MapContainer>
  {GMapsEnabled ? (<ReactLeafletGoogleLayer apiKey={apiKey} type="satellite" />) :
    (<TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      maxZoom={maxZoom}
      maxNativeZoom={maxNativeZoom}
    />
  )}
</MapContainer>

However, the tiles from OSM have stopped loading. My guess is that the tile urls for GMaps are different. It would be helpful if there is a way to have this configurability.

Uncaught Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>

Facing this issue while using google layer with leaflet 3.x

Uncaught Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>
    at useLeafletContext (context.js:9)
    at useLayer (layer.js:19)
    at ContainerComponent (component.js:6)
    at renderWithHooks (react-dom.development.js:14985)
    at updateForwardRef (react-dom.development.js:17044)
    at beginWork (react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushPassiveEffectsImpl (react-dom.development.js:23620)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at react-dom.development.js:23324
    at workLoop (scheduler.development.js:417)
    at flushWork (scheduler.development.js:390)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)

can anyone help to solve this issue?

Is is possible to hide/disale POI points of interest?

like this

styles: [{
            featureType: 'poi.business',
            stylers: [{
                visibility: 'off'
            }]
        }, {
            "featureType": "transit",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "poi",
            "stylers": [{
                "visibility": "off"
            }]
        },]

Using react-leaflet-google-layer in react application we have some error how to solve ??

Cannot read properties of null (reading '_controlCorners')
TypeError: Cannot read properties of null (reading '_controlCorners')
at NewClass._setupAttribution (http://localhost:3000/static/js/bundle.js:165727:17)
at NewClass.fire (http://localhost:3000/static/js/bundle.js:168931:16)
at http://localhost:3000/static/js/bundle.js:165715:16

react 18.2.0
react-leaflet 4.2.1
react-leaflet-google-layer": "^2.2.0",


react code :


import { useState } from "react";

import {
LayersControl,
MapContainer,
Marker,
Polyline,
useMap,
} from "react-leaflet";
import "./leaflet.css";
import "leaflet/dist/leaflet.css";
import LeafLetIcon from "./Constants";
import ReactLeafletGoogleLayer from "react-leaflet-google-layer";

export const LeafLet = ({ pathData }) => {
const firstPosition = pathData?.[0];

const lastPosition = pathData?.slice(-1)[0];

const middlePosition = pathData?.[(pathData?.length / 2) | 0];

const tripdata = pathData?.map((o) => Object.keys(o).map((k) => o[k]));
const polylinedata = tripdata?.map((point) => point.slice(0, 2));

const ResizeMap = () => {
const map = useMap();
map._onResize();
return null;
};
const polylineColor = {
color: "rgb(26 131 175 / 80%)",
fillOpacity: 0.01,
weight: 4,
};

return (
<>
<MapContainer
center={{
lat: middlePosition?.latitude,
lng: middlePosition?.longitude,
}}
zoom={10}
zoomControl={false}
scrollWheelZoom={false}
>

    <ReactLeafletGoogleLayer
      apiKey={process.env.REACT_APP_APIKEY}
      type={"roadmap"}
    />
    <Marker
      position={{
        lat: firstPosition?.latitude,
        lng: firstPosition?.longitude,
      }}
      icon={LeafLetIcon}
    ></Marker>
    <Polyline pathOptions={polylineColor} positions={polylinedata} />
    <Marker
      position={{
        lat: lastPosition?.latitude,
        lng: lastPosition?.longitude,
      }}
      icon={LeafLetIcon}
    ></Marker>
  </MapContainer>
</>

);
};

Can't set type dynamically

When interpolating the type prop of in jsx only the initial value is taken into account, modifying the type doesn't seem to influence the google mutant layer

Dynamic map type switch

Request for support for dynamic map type - "road | terrain ...etc"

Below is an example:

function LeafletTileLayer() {
  const [currentMapType, setCurrentMapType] = useState('terrain');
  useEffect(() => {
    setCurrentMapType('road');
  }, []);
  return (
    <ReactLeafletGoogleLayer useGoogMapsLoader={false} type={currentMapType} />
  );
}

Support for react-leaflet 3.x

Do you have any plans to add support for react-leaflet 3.x?