Simple NeshanMap rendering error #3
Comments
|
move libarary from node_modules into your components folder then edit it yourself i have tried to contact them but they have poor support |
|
I wanted to use NeshanMap just as a Geo location picker. I've done it with another library and its ok. |
|
I have the same mistake! |
|
-## there is hook error in using by npm. 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'
}}
/>
... |
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is error is thrown when
NeshanMapis rendering:my react version:
"react": "^17.0.1"
The text was updated successfully, but these errors were encountered: