Skip to content

premier213/react-leaflet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React-leaflet for Next.js

this package fixed problems react-leaflet & leaflet for next.js

Next.js 11 is Passed ✔

install with npm

$ npm install @meysam213/react-leaflet

install with yarn

$ yarn add @meysam213/react-leaflet

Usage

first create component

//mapbox.jsx
import { NextMap } from '@meysam213/react-leaflet';

const MapBox = () => {
  return (
    <>
      <NextMap lat={50} lng={50} />
    </>
  );
};

and for use with next.js import dynamic

//pages/mapPage.jsx
import dynamic from 'next/dynamic';

const MapBox = dynamic(() => import('components/mapBox'), {
  ssr: false,
});

notice: Due to being SSR, it is necessary to use import dynamics

Props

prop Default Type Necessary
lat - Number Necessary
lng - Number Necessary
scrollWheelZoom true Boolean Optional
zoomControl false Boolean Optional
attributionControl false Boolean Optional
zoom 17 Number Optional
Height 300px String Optional
Width 300px String Optional
popUp Hello! String Optional
borderRadius 0px String Optional

Author

Github: @premier213

Twitter : @premier213

About

react-leaflet for next.js

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published