milespratt / bingmaps-react Goto Github PK
View Code? Open in Web Editor NEWAn easy to use Bing Maps React component.
Home Page: https://bingmaps-react.netlify.app
License: MIT License
An easy to use Bing Maps React component.
Home Page: https://bingmaps-react.netlify.app
License: MIT License
I am getting this in the console when trying to switch to streetside view.
I have tried to disable streetside view with either the disableStreetside attribute in the BingMapsReact component or with this config under viewOptions and/or mapOptions.
Any insight on either how to solve the issue and allow streetside, or to disable streetside view, as its not a requirement for my application.
TIA :)
<BingMapsReact
bingMapsKey="my_api_key"
height="500px"
mapOptions={{
navigationBarMode: "square"
}}
width="500px"
viewOptions={{
center: { latitude: dt.latitude, longitude: dt.longitude},
mapTypeId: "grayscale"
}}
/>
When configuring the BingMapsReact props, if I don't set the height or set the height to "auto", "100%", or any pixel value below 420px, I am receiving the error shown below when trying to open the Radial Menu to change the map view:
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading '0')
Call Stack
r._adjustSlotText
https://r.bing.com/rp/X0_TMcGQC7zntMW6Vi6WyFCNg-U.br.js (1:123275)
r.showDropDownMenu
https://r.bing.com/rp/X0_TMcGQC7zntMW6Vi6WyFCNg-U.br.js (1:117604)
t._onMouseEnter
https://r.bing.com/rp/X0_TMcGQC7zntMW6Vi6WyFCNg-U.br.js (1:165956)
Object.onMouseEnter
https://r.bing.com/rp/X0_TMcGQC7zntMW6Vi6WyFCNg-U.br.js (1:181284)
HTMLDivElement.u
https://r.bing.com/rp/mLLNMN31k1B6sTH9H7fCgKYukSg.br.js (1:18119)
t.
https://r.bing.com/rp/mIacWs8_crQzFfDVp3oAu1voxBk.br.js (1:23148)
If I set the height to 500px, the menu opens without errors but 500px height will not work with the component I am trying to develop.
The module works fine while running the app, but we get the following error in the jest test environment:
Cannot find module 'bingmaps-react' from 'src/components/stateless/atomic/Map/index.js'
Is there a workaround to this problem, or a simple fix I'm missing?
Install the latest version 1.1.1 and getting the error --> Cannot find module 'bingmaps-react' or its corresponding type declarations.ts(2307)
import BingMapsReact from "bingmaps-react";
Hello!
I am getting this error when rendering the map in a Next.js app
node_modules/react-bingmaps/lib/components/ReactBingmaps/ReactBingmaps.js (49:2) @ new ReactBingmaps
⨯ Internal error: ReferenceError: document is not defined
at new ReactBingmaps (./node_modules/react-bingmaps/lib/components/ReactBingmaps/ReactBingmaps.js:66:9)
The code that is crashing is:
if (document.querySelector('script[src="' + scriptURL + '"]') === null) { _this.loadScript(scriptURL); window.bingmapsCallback = function () { Microsoft = window.Microsoft; this.afterDependencyLoad(pendingProps); }.bind(_this); } return _this;
the thing is that my build process is failing due to this... anyone can give me a hand? thanks in advance!
This is the exact component I am trying to run, on initial render it doesn't render anything, unless I go into my IDE and change something and save it.
However , it seems to render correctly if I only pass my bing map key into it..
lat and lng are props which come from parent component but I also tested this with hard coded values, same result
interface Props {
lat: number
lng: number
}
export default function BingMap({ lat, lng }: Props) {
return (
<BingMapsReact
pushPins={[
{
center: { latitude: lat, longitude: lng },
},
]}
bingMapsKey={process.env.NEXT_PUBLIC_BING_MAPS_KEY}
mapOptions={{
navigationBarMode: 'square',
}}
viewOptions={{
center: { latitude: lat, longitude: lng },
zoom: 17,
}}
/>
)
}
I tried to use this per the instructions but I get this error:
window is not defined
Hi,
I was using react-bingmaps and same key working but when I replacing that and adding bingmaps-react it's start throwing me error the specified credentials are invalid. Kindly suggest.
How can I use the map inside a ScollView component ?
When I try to move the map, the ScollView takes the priority so the map doesn't move.
Hi,
I am creating booking through map but somehow onclick is not working on iphone and android mobiles. Please let me know if any idea.
Please update the package.json within this project to include a license.
Thank you,
Jeff
Displaying multiple maps is unreliable due to the dynamic nature of loading the bing maps script. I'm not sure I can solve for this 100% while the dependency on the external script exists, there are certainly some checks I can add to make the component more robust and reliable.
The current implementation allows for new mapOptions, viewOptions, and pushPins props without reloading the map. This is great when you want to change the visible map data or change some properties but doesn't allow you to change map options that require the map constructor without reloading the app with new config settings.
List of map options here https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/mapoptions-object
Hi,
I have come over this issue when using this package.
Any idea why?
Code:
import Card from "@mui/material/Card";
// Material Dashboard 2 React components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
// Bingmaps
import BingMapsReact from "bingmaps-react";
const Map = () => {
const pushPin = {
center: {
latitude: 27.98785,
longitude: 86.925026,
},
options: {
title: "Mt. Everest",
},
};
const pushPins = [pushPin];
return (
<Card>
<MDBox
mx={2}
mt={-3}
py={3}
px={2}
variant="gradient"
bgColor="info"
borderRadius="lg"
coloredShadow="info"
>
<MDTypography variant="h6" color="white">
Map
</MDTypography>
</MDBox>
<MDBox pt={1} pb={2} px={2}>
<MDBox component="ul" display="flex" flexDirection="column" p={0} m={0}></MDBox>
<BingMapsReact
bingMapsKey="API_KEY"
pushPins={pushPins}
viewOptions={{ center: { latitude: 27.98785, longitude: 86.925026 } }}
/>
</MDBox>
</Card>
);
};
export default Map;
Highlighted line-throwing error in case of offline mode. your suggestion will be highly appreciated.
var offlineWebApi = top.Xrm.WebApi;
if(top.Xrm.WebApi.offline.isAvailableOffline('bookableresource') == true)
{
offlineWebApi = top.Xrm.WebApi.offline;
}
offlineWebApi.retrieveMultipleRecords('bookableresource','?$select=bookableresourceid&$filter=_owninguser_value eq (4d6d1bcd-7320-eb11-a813-000d3ae8e48a)').
then(x=>{
I want to use multiple instances of BingMapsReact component on one screen. When I try to do so i get the following errors on each instance:
mapcontrol?callback=makeMap:12 Uncaught TypeError: Cannot read properties of undefined (reading 'heading') at n.constructView (VM3541 2nIzc7VnJnL4bbR8O2puCQKoiKs.js:1:201695) at u._setViewInternal (VM3548 dcHS7nT2K1gkKSdMvs59EvdUTfc.js:1:83546) at u.setView (VM3548 dcHS7nT2K1gkKSdMvs59EvdUTfc.js:1:82562) at setMapViewOptions (index.js:102:1) at index.js:140:1 at Microsoft.Maps.notifyMapReadyForBootstrap (mapcontrol?callback=makeMap:12:7274) at VM3548 dcHS7nT2K1gkKSdMvs59EvdUTfc.js:1:120205 at VM3548 dcHS7nT2K1gkKSdMvs59EvdUTfc.js:1:120304
and
Uncaught TypeError: Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest is not a function at Log?entry=0&fmt=1&type=3&group=MapControl&name=MVC&version=v8&mkt=de-AT&auth=Au3j6PhQC5-8vZV4H33Ltc7S1ww2dhsp8wVs4B-D42R_ScS2kwCEJ_UXATcPUwfA&jsonp=Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest:1:33 (anonym) @ Log?entry=0&fmt=1&type=3&group=MapControl&name=MVC&version=v8&mkt=de-AT&auth=Au3j6PhQC5-8vZV4H33Ltc7S1ww2dhsp8wVs4B-D42R_ScS2kwCEJ_UXATcPUwfA&jsonp=Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest:1
Any ideas what goes wrong here?
Hi,
do you have idea how we can apply for touch as its not working for demo also.
Bing maps script injection is not 100% reliable. Refactor to ensure proper loading and injection.
If you bind the pushpins property to a state variable in the parent, like this...
const [pushpins, setPushpins] = useState([]);
...
<BingMap pushPins={pushpins} ... />
And then update the pushpins variable via an API for example, the map does not load and you get errors like this:
Uncaught TypeError: Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest is not a function
Looks like the calls are as follows: useEffect, initMap, appendBingMapsScript, useEffect, initMap and here it calls again appendBingMapsScript, which it shouldn't. Then it calls makeMap twice.
Is there a way to style pushpin infoboxes?
This is what I have so far
const coordinate = {
center: {
longitude: event.attributes.longitude,
latitude: event.attributes.latitude,
},
options: {
title: `Event ${event.id}`,
description: `<img src="${'https://wl.blob.core.windows.net/uploads/001 (7).jpg'}" alt="some image" width="200px" height="200px"/>`
}
}
<BingMapsReact
bingMapsKey="foobar"
height="100%"
mapOptions={{
navigationBarMode: "square",
}}
width="100vw"
viewOptions={{
center: { latitude: coordinates[0].center.latitude, longitude: coordinates[0].center.longitude },
mapTypeId: "grayscale",
}}
pushPinsWithInfoboxes={coordinates}
/>
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.