react-azure-maps-playground's Issues
Three.js azure map react.js example
Hello,
I would like to know if you can provide an example of three.js on the Azure map or webGL custom layer.
Regards
Example MarkersExample.tsx is broken
As mentioned in Azure/react-azure-maps#72
Segment
const memoizedMarkerRender: IAzureDataSourceChildren = useMemo(
(): any => markers.map((marker) => renderPoint(marker)),
[markers],
);
is wrong and works only for that any
type as it does not returh IAzureDataSourceChildren
rather React.Element[]
or IAzureDataSourceChildren[]
.
If I try to use mentioned proper types (especially array) the array is rejected as children with:
Type 'IAzureDataSourceChildren[]' is not assignable to type 'ReactElement<IAzureMapFeature, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactElement<...> | null'.
Type 'IAzureDataSourceChildren[]' is missing the following properties from type 'ReactElement<IAzureLayerStatefulProviderProps, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)>': type, props, keyts(2322)
IAzureMapImageSprite color not updating
In the example: https://github.com/Azure/react-azure-maps-playground/blob/master/src/examples/Live/issPosition.tsx
I am not able to get the ISS icon to change to a different color.
const iconUrl = 'http://open-notify.org/Open-Notify-API/map/ISSIcon.png';
const spaceshipImageSprites: IAzureMapImageSprite = {
id: 'spaceship',
color: 'DarkOrchid',
secondaryColor: 'DarkOrchid',
icon: iconUrl,
};
I thought maybe it was related to the ISS Icon, so I updated the iconUrl to a random MUI icon: https://fonts.gstatic.com/s/i/materialiconstwotone/forest/v2/24px.svg.
This still did not change the color of the icon. Am I missing something, or is this a known issue?
This repo is missing a license file
This repository is currently missing a LICENSE.MD file outlining its license. A license helps users understand how to use your project in a compliant manner. You can find the standard MIT license text at the Microsoft repo templates LICENSE file: https://github.com/microsoft/repo-templates/blob/main/shared/LICENSE.
If you would like to learn more about open source licenses, please visit the document at https://aka.ms/license.
Custom Styling for Region Color Change at Zoom Level 2
We are currently working on implementing a Dashboard map view using react-azure-maps, but we have encountered a challenge in achieving our desired result.
Specifically, we need to change the color of regions from white to green while keeping the ocean color as its default blue.
In Azure Maps, zoom level 2 and the 'road' style provide one result, whereas in the react-azure-maps library, at zoom level 2 with the 'road' style, we get a different view.
Azure Maps view, [ zoom level :2, style:road]
View provided by react-azure-maps package [ zoom level :2, style:road]
However, when we increase the zoom level to 4, some regions of the map are green in color.
As we've explored the available options within the react-azure-maps library, we haven't found a straightforward way to customize the styling to meet this requirement.
Could you please advise us on how we can achieve this specific styling change within the react-azure-maps library at a zoom level of 2?
Thank you in advance for your help, and we look forward to your response
TypeError: Cannot read properties of undefined (reading 'getCurrentStack')
Hi everyone,
have anyone encountered this error? I created a react control which displays an azure map, its working fine displaying only just the map and pins. But if I included a popup for the details of my pins the error occurred. Here is my code.
`
import * as React from 'react';
import { useState, useEffect } from 'react';
import { IInputs } from '../generated/ManifestTypes';
import { Stack } from '@fluentui/react/lib/Stack';
import { AzureMap, AzureMapsProvider, IAzureMapOptions, AzureMapDataSourceProvider, AzureMapLayerProvider, AzureMapFeature, AzureMapPopup } from 'react-azure-maps';
import { AuthenticationType, data, MapMouseEvent} from 'azure-maps-control';
import 'azure-maps-control/dist/atlas.min.css';
export interface AzureMapsGridProp {
mapContext: ComponentFramework.Context;
items?: any[];
}
const baseMapOptions: IAzureMapOptions = {
zoom: 10,
center: [0, 0],
language: 'en-US',
view: 'Auto',
}
const renderPoint = (): data.Position => {
const randomLongitude = Math.floor(Math.random() * (-80 - -120) + -120);
const randomLatitude = Math.floor(Math.random() * (30 - 65) + 65);
return new data.Position(randomLongitude, randomLatitude);
};
export const AzureMapsGrid: React.FunctionComponent = (props) => {
const contextWebApi: any = props.mapContext.webAPI;
const [azureMapOptions, setAzureMapOptions] = useState(baseMapOptions);
const [showMap, setShowMap] = useState(false);
const [coords1, setCoords1] = useState<data.Position>(renderPoint);
const [isVisible, setIsVisible] = useState(false);
//Checking if Azure Map control is supported on user's browser
useEffect(() => {
CreateAzureMapToken(props.mapContext);
},[]);
useEffect(() => {
if (azureMapOptions.authOptions){
setShowMap(true);
}
}, [azureMapOptions.authOptions]);
//Custom API Call for Creating Azure Map Token
const CreateAzureMapToken = async(context: ComponentFramework.Context<IInputs>) => {
//initialize Create Azure Maps Token Request
let createAzureMapsToken_Request = {
getMetadata: function () {
return {
boundParameter: null,
parameterTypes: {},
operationType: 0, operationName: "<generate token custom api name here>"
};
}
};
contextWebApi.execute(createAzureMapsToken_Request).then(
function success(response: any) {
if (response.ok) { return response.json(); }
}
).then(function (responseBody: any) {
let result = responseBody;
let token = result["Token"]; // Edm.String
let xMSClientId = result["X-MS-CLIENT-ID"]; // Edm.String
UpdateAzureMapOptions(xMSClientId, token);
}).catch(function (error: any) {
console.log(error.message);
context.navigation.openErrorDialog({
errorCode: error.errorCode,
details: error.message,
message: error.raw
});
});
}
const UpdateAzureMapOptions = async(ClientId: string, bearerToken: string) => {
let updatedOptions = {
...azureMapOptions,
authOptions: {
authType: AuthenticationType.anonymous,
clientId: ClientId,
getToken: async (resolve: any, reject: any) => {
resolve(bearerToken);
}
}
}
setAzureMapOptions(updatedOptions);
}
return(
<Stack id='azureMapContainer' styles={{root: {height: '500px', position: 'relative'}}}>
{showMap && <AzureMapsProvider>
<AzureMap
options={azureMapOptions}>
<AzureMapDataSourceProvider id={'DataSource Provider'}>
<AzureMapLayerProvider
id={"Layer1"}
options={{
iconOptions: {
image: 'marker-blue',
}
}}
type={"SymbolLayer"}
events={{
click: (e: MapMouseEvent) => {
if (e.shapes && e.shapes.length > 0) {
setIsVisible(true);
}
}
}}/>
<AzureMapFeature
key={'Pin1'}
id={'Pin1'}
type="Point"
coordinate={coords1}
properties={{
title: 'Pin',
icon: 'marker-blue',
}}
/>
</AzureMapDataSourceProvider>
<AzureMapPopup
isVisible={isVisible}
options={{ closeButton: true,
position: [0, 0],
pixelOffset: [0, -5],
showPointer: true}}
popupContent={<div>Hello World</div>}
/>
</AzureMap>
</AzureMapsProvider>}
</Stack>
);
}
`
Here is the details of the error:
ErrorDetails.txt
MarkersExample Nextjs 14
Hello,
Has anyone been able to get the markers example to work on nextjs 14? I am getting this error: Error: Internal Error: do not use legacy react-dom/server APIs. If you encountered this error, please open an issue on the Next.js repo.
I believe I have narrowed it down to the markerContent:
function renderHTMLPoint(coordinates: data.Position): any {
const rendId = Math.random();
return (
<AzureMapHtmlMarker
key={rendId}
markerContent={<div className="pulseIcon"></div>}
options={{ ...azureHtmlMapMarkerOptions(coordinates) } as any}
events={eventToMarker}
/>
);
}
This repo is missing important files
There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.
Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.