sarangsami
commented
3 years ago move libarary from node_modules into your components folder then edit it yourself i have tried to contact them but they have poor support
Open mogaozq opened 3 years ago
sarangsami
commented
3 years ago move libarary from node_modules into your components folder then edit it yourself i have tried to contact them but they have poor support
mogaozq
commented
3 years ago I wanted to use NeshanMap just as a Geo location picker. I've done it with another library and its ok. And thank you for the comment.
mahdiafzal
commented
3 years ago I have the same mistake! "react": "^16.13.1"
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1438)
at useRef (react.development.js:1478)
at NeshanMap (NeshanMap.js:14)
at renderWithHooks (react-dom.development.js:14797)
at mountIndeterminateComponent (react-dom.development.js:17409)
at beginWork (react-dom.development.js:18489)
at HTMLUnknownElement.callCallback (react-dom.development.js:189)
at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
at invokeGuardedCallback (react-dom.development.js:291)
at beginWork$1 (react-dom.development.js:23055)
at performUnitOfWork (react-dom.development.js:22019)
at workLoopSync (react-dom.development.js:21995)
at performSyncWorkOnRoot (react-dom.development.js:21613)
at scheduleUpdateOnFiber (react-dom.development.js:21045)
at updateContainer (react-dom.development.js:24194)
at react-dom.development.js:24577
at unbatchedUpdates (react-dom.development.js:21763)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:24576)
at Object.render (react-dom.development.js:24659)
at Module../src/index.js (index.js:38)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Object.0 (serviceWorker.js:240)
at __webpack_require__ (bootstrap:782)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1The above error occurred in the <NeshanMap> component:
in NeshanMap (at DraggableExample.jsx:636)
in div (at DraggableExample.jsx:635)
in div (at DraggableExample.jsx:566)
in MyMap (at CreateAddress.jsx:255)
in CreateAddress (at App.jsx:521)
in Route (at App.jsx:516)
in Switch (at App.jsx:513)
in div (at App.jsx:512)
in div (at App.jsx:511)
in App (created by Jss(App))
in Jss(App) (at src/index.js:27)
in GAListener (created by Context.Consumer)
in withRouter(GAListener) (at src/index.js:26)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:25)
in Provider (at src/index.js:24)
in ThemeProvider (at src/index.js:23)
in ReactApp (at src/index.js:38)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
mohammadFeiz
commented
2 years ago -## there is hook error in using by npm. -## instead bring files locally in your project to fix problem. 1 - create neshan-map folder in your project. 2 - add neshan-map.js by below codes:
import React, { useEffect, useRef } from "react";
import "./index.css";
const BASE_URL = "https://static.neshan.org";
const DEFAULT_URL = `${BASE_URL}/sdk/leaflet/1.4.0/leaflet.js`;
function NeshanLoader (props){
const createScript = () => {
const { onError, onLoad } = props;
const script = document.createElement("script");
script.src = DEFAULT_URL;
script.onload = () => {
if (onLoad) onLoad();
return;
};
script.onerror = () => {
if (onError) onError();
return;
};
document.body.appendChild(script);
};
return createScript();
};
const NeshanMap = (props) => {
const { style, options, onInit } = props;
const mapEl = useRef(null);
const defaultStyle = {
width: "600px",
height: "450px",
margin: 0,
padding: 0,
background: "#eee",
};
const defaultOptions = {
key: "YOUR_API_KEY",
maptype: "dreamy",
poi: true,
traffic: false,
center: [35.699739, 51.338097],
zoom: 14,
};
useEffect(() => {
NeshanLoader({
onLoad: () => {
let map = new window.L.Map(mapEl.current, { ...defaultOptions, ...options });
if (onInit) onInit(window.L, map);
},
onError: () => {
console.error("Neshan Maps Error: This page didn't load Neshan Maps correctly");
},
});
});
return <div ref={mapEl} style={{ ...defaultStyle, ...style }} />;
};
export default NeshanMap;3 - add index.css by below code:
@import url('https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css');4 - import NeshanMap Component to your file and use in your component.
import React,{Component} from 'react';
import NeshanMap from '../neshan-map/neshan-map';
...
<NeshanMap
options={{
key: 'web.3b7ae71ad0f4482e84b0f8c47e762b5b',
center: [35.699739, 51.338097],
width:'100%',
zoom: 13,
maptype:'standard-day'
}}
onInit={(L, myMap) => {
let marker = L.marker([35.699739, 51.338097])
.addTo(myMap)
.bindPopup('I am a popup.');
myMap.on('click', function (e) {
marker.setLatLng(e.latlng)
});
L.circle([35.699739, 51.338097], {
color: 'dodgerblue',
fillColor: 'dodgerblue',
fillOpacity: 0.5,
radius: 1500
}).addTo(myMap);
}}
style={{
width:'100%',
height:'300px'
}}
/>
...
This is error is thrown when
NeshanMapis rendering:my react version: "react": "^17.0.1"