ishaan6395 / react-leaflet-enhanced-marker Goto Github PK
View Code? Open in Web Editor NEWThis library will help render dynamic react components as markers on leaflet maps easily
License: MIT License
This library will help render dynamic react components as markers on leaflet maps easily
License: MIT License
import Marker from 'react-leaflet-enhanced-marker';
Doesn't work onMouseOver and onMouseOut events
Hey
you cant render a a marker with a react component as an icon that has multiple child components.
Code to reporduce:
<Marker icon={ <div> <div>1</div> <div>2</div> </div> } position={[0, 0]}></Marker>
This crashes with the following error message:
Uncaught TypeError: Cannot read property 'onClick' of undefined
at IconUtils.js:47
at Array.forEach ()
at IconUtils.js:44
at getChildrenProperties (IconUtils.js:55)
at Marker.componentDidMount (Markers.js:109)
at commitLifeCycles (react-dom.development.js:20663)
at commitLayoutEffects (react-dom.development.js:23426)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at commitRootImpl (react-dom.development.js:23151)
at unstable_runWithPriority (scheduler.development.js:646)
at runWithPriority$1 (react-dom.development.js:11276)
at commitRoot (react-dom.development.js:22990)
at performSyncWorkOnRoot (react-dom.development.js:22329)
at react-dom.development.js:11327
at unstable_runWithPriority (scheduler.development.js:646)
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:646)
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:590)
at flushWork (scheduler.development.js:545)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)
./node_modules/react-leaflet-enhanced-marker/lib/Markers.js
Module not found: Can't resolve 'fbjs/lib/areEqual' in '/...XYZ.../node_modules/react-leaflet-enhanced-marker/lib'
If I zoom out of the map, the icons (in my case Material UI Icons as React Components) drift from their intended position.
in order to be able to import it with react projects that use typescript, I need to
npm install @types/react-leaflet-enhanced-marker
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@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6" from [email protected]
npm ERR! node_modules/react-leaflet-enhanced-marker
npm ERR! react-leaflet-enhanced-marker@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Hi, I get some Babel related issues when importing your package (v1.0.15), in a Storybook story:
ERROR in ./node_modules/react-leaflet-enhanced-marker/lib/Markers.js
Module not found: Error: Can't resolve 'babel-runtime/helpers/possibleConstructorReturn' in '/code/aplines/aplines-frontend/node_modules/react-leaflet-enhanced-marker/lib'
@ ./node_modules/react-leaflet-enhanced-marker/lib/Markers.js 23:34-92
@ ./src/components/map/stories/LeafletMap.stories.tsx
ERROR in ./node_modules/react-leaflet-enhanced-marker/lib/Markers.js
Module not found: Error: Cannot find module 'babel-runtime/core-js/object/get-prototype-of'
@ ./node_modules/react-leaflet-enhanced-marker/lib/Markers.js 11:22-78
@ ./src/components/map/stories/LeafletMap.stories.tsx
Are there dependencies to install? Also is that normal that your package.json points toward "lib" and not "dist"?
When using , the marker gets displayed at the correct position on the map but also an additinal time in the top left corner of the map.
class ReactComponent extends Component {
render() {
const markerStyle = {
backgroundColor: "blue",
color: "white",
display: "flex",
justifyContent: "center",
width: "50px",
height: "50px",
borderRadius: "50px",
alignItems: "center"
};
return <div onClick={() => alert('rc click')} style={markerStyle}>Marker;
}
}
<Marker icon={} position={this.state.center} />
When render the ReactComponent as marker, onClick event in div won't triger.
Module not found: Can't resolve 'fbjs/lib/areEqual' in ...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.