Markers - React Map | React Example

import React, { useCallback, useState } from 'react'; import Map from 'devextreme-react/map'; import Button from 'devextreme-react/button'; import CheckBox from 'devextreme-react/check-box'; import { markersData } from './data.ts'; const markerUrl = 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/maps/map-marker.png'; const apiKey = { azure: '6N8zuPkBsnfwniNAJkldM3cUgm3lXg3y9gkIKy59benICnnepK4DJQQJ99AIACYeBjFllM6LAAAgAZMPGFXE', }; const App = () => { const [currentMarkersData, setCurrentMarkersData] = useState(markersData); const [currentMarkerUrl, setCurrentMarkerUrl] = useState(markerUrl); const onCustomMarkersChange = useCallback((value) => { setCurrentMarkerUrl(value ? currentMarkerUrl : null); setCurrentMarkersData(markersData); }, [currentMarkerUrl, setCurrentMarkerUrl, setCurrentMarkersData]); const showTooltips = useCallback(() => { setCurrentMarkersData(currentMarkersData.map((item) => { const newItem = JSON.parse(JSON.stringify(item)); newItem.tooltip.isShown = true; return newItem; })); }, [currentMarkersData, setCurrentMarkersData]); return ( <React.Fragment> <Map defaultZoom={11} height={440} width="100%" controls={true} markerIconSrc={currentMarkerUrl} markers={currentMarkersData} provider="azure" apiKey={apiKey} ></Map> <div className="options"> <div className="caption">Options</div> <div className="option"> <CheckBox defaultValue={true} text="Use custom marker icons" onValueChange={onCustomMarkersChange} /> </div> <div className="option"> <Button text="Show all tooltips" onClick={showTooltips} /> </div> </div> </React.Fragment> ); }; export default App;

import React, { useCallback, useState } from 'react'; import Map from 'devextreme-react/map'; import Button from 'devextreme-react/button'; import CheckBox from 'devextreme-react/check-box'; import { markersData } from './data.js'; const markerUrl = 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/maps/map-marker.png'; const apiKey = { azure: '6N8zuPkBsnfwniNAJkldM3cUgm3lXg3y9gkIKy59benICnnepK4DJQQJ99AIACYeBjFllM6LAAAgAZMPGFXE', }; const App = () => { const [currentMarkersData, setCurrentMarkersData] = useState(markersData); const [currentMarkerUrl, setCurrentMarkerUrl] = useState(markerUrl); const onCustomMarkersChange = useCallback( (value) => { setCurrentMarkerUrl(value ? currentMarkerUrl : null); setCurrentMarkersData(markersData); }, [currentMarkerUrl, setCurrentMarkerUrl, setCurrentMarkersData], ); const showTooltips = useCallback(() => { setCurrentMarkersData( currentMarkersData.map((item) => { const newItem = JSON.parse(JSON.stringify(item)); newItem.tooltip.isShown = true; return newItem; }), ); }, [currentMarkersData, setCurrentMarkersData]); return ( <React.Fragment> <Map defaultZoom={11} height={440} width="100%" controls={true} markerIconSrc={currentMarkerUrl} markers={currentMarkersData} provider="azure" apiKey={apiKey} ></Map> <div className="options"> <div className="caption">Options</div> <div className="option"> <CheckBox defaultValue={true} text="Use custom marker icons" onValueChange={onCustomMarkersChange} /> </div> <div className="option"> <Button text="Show all tooltips" onClick={showTooltips} /> </div> </div> </React.Fragment> ); }; export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const markersData = [{ location: [40.755833, -73.986389], tooltip: { text: 'Times Square', }, }, { location: '40.7825, -73.966111', tooltip: { text: 'Central Park', }, }, { location: { lat: 40.753889, lng: -73.981389 }, tooltip: { text: 'Fifth Avenue', }, }, { location: { lat: 40.705748, lng: -73.996299 }, tooltip: { text: 'Brooklyn Bridge', }, }];

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const markersData = [ { location: [40.755833, -73.986389], tooltip: { text: 'Times Square', }, }, { location: '40.7825, -73.966111', tooltip: { text: 'Central Park', }, }, { location: { lat: 40.753889, lng: -73.981389 }, tooltip: { text: 'Fifth Avenue', }, }, { location: { lat: 40.705748, lng: -73.996299 }, tooltip: { text: 'Brooklyn Bridge', }, }, ];

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; }

React Map - Markers