diff --git a/package.json b/package.json index c36f163..429cd2e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-azure-maps", - "version": "0.4.7", + "version": "0.4.8", "description": "React Wrapper for Azure Maps", "keywords": [ "react", diff --git a/src/components/AzureMap/AzureMap.tsx b/src/components/AzureMap/AzureMap.tsx index 19fcdb9..c101468 100644 --- a/src/components/AzureMap/AzureMap.tsx +++ b/src/components/AzureMap/AzureMap.tsx @@ -1,5 +1,5 @@ -import React, { memo, useContext, useEffect, useState } from 'react' -import atlas from 'azure-maps-control' +import React, { memo, useContext, useEffect, useState, useRef } from 'react' +import atlas, { Map } from 'azure-maps-control' import { IAzureMap, IAzureMapsContextProps, MapType } from '../../types' import { AzureMapsContext } from '../../contexts/AzureMapContext' import { Guid } from 'guid-typescript' @@ -27,10 +27,15 @@ const AzureMap = memo( styleOptions, serviceOptions }: IAzureMap) => { - const { setMapRef, removeMapRef, mapRef, setMapReady, isMapReady } = useContext< - IAzureMapsContextProps - >(AzureMapsContext) + const { + setMapRef, + removeMapRef, + mapRef, + setMapReady, + isMapReady + } = useContext(AzureMapsContext) const [mapId] = useState(providedMapId || Guid.create().toString()) + const mapRefSource = useRef(null) useEffect(() => { if (mapRef) { mapRef.setTraffic(trafficOptions) @@ -61,7 +66,7 @@ const AzureMap = memo( } }, [serviceOptions]) - useCheckRef(mapRef, mapRef, mref => { + useCheckRef(mapRef, mapRef, (mref) => { mref.events.add('ready', () => { if (imageSprites) { createImageSprites(mref, imageSprites) @@ -95,7 +100,10 @@ const AzureMap = memo( }) useEffect(() => { - setMapRef(new atlas.Map(mapId, options)) + if (mapRefSource.current === null) { + mapRefSource.current = new atlas.Map(mapId, options) + } + setMapRef(mapRefSource.current) return () => { removeMapRef() }