Forum Discussion
Danzz
Mar 22, 2019Copper Contributor
SPFx with Bing Maps render empty divs
I have SharePoint 2019, and I am trying to create a webpart that will display Bing Map, I tried this on a react app created using create-react-app, and it works fine. Then I took the code, and added it to SPFx, I am getting no errors, but the div that's supposed to render the map is empty.
Here's my code for the root component:
return ( <div> <BingMap /> </div> );
Then I have a utility function that'll load scripts when called:
const loadDynamicScript = (config, callback) => { const existingScript = document.getElementById(config.id); if (!existingScript) { const script = document.createElement('script');
script.src = config.link;
script.id = config.id;
document.body.appendChild(script);
script.onload = () => { if (callback) callback(); }; } if (existingScript && callback) callback(); }; export default loadDynamicScript;
Then I have my BingMap component:
import * as React from 'react'; import scriptLoader from '../../utils/scriptLoader' const config = {
id: 'bingmaps',
link: 'https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[mykey]' }
declare global { interface Window { Microsoft: any; GetMap: any } }window.Microsoft = window.Microsoft || {};window.GetMap = window.GetMap || {}; export default class BingMap extends React.Component<{}, {}> {
myRef: any; GetMap = () => { new window.Microsoft.Maps.Map(this.myRef, { }); componentDidMount() {
console.log(this.myRef)
window.GetMap = this.GetMap;
scriptLoader(config, null) } render() { return ( <div ref={(myDiv) => { this.myRef = myDiv; }} className="map" ></div> ) } }
So when my component is mounted, it'll call the script loader, and load bing maps, and execute my callback function. This works in create-react-app, but in SPFx it's not, and I a not getting any errors in the console.
It generates this div:
No RepliesBe the first to reply