Skip to content

Commit 8f13b42

Browse files
author
Savina Shen (Manpower Services Taiwan Co Ltd)
committed
add html marker events example
1 parent b5daccb commit 8f13b42

File tree

6 files changed

+199
-2
lines changed

6 files changed

+199
-2
lines changed

‎.storybook/preview.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ const preview: Preview = {
2222
'*',
2323
'Data Visualization',
2424
['Introduction'],
25+
'Events',
26+
['Map Events'],
2527
],
2628
},
2729
},

‎src/stories/Events/HtmlMarkerEvents/HtmlMarkerEvents.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.circle-marker.blink {
2+
animation: blink-animation 0.7s infinite alternate;
3+
}
4+
5+
@keyframes blink-animation {
6+
0% {
7+
opacity: 0.5;
8+
background-color: rgb(235, 167, 167);
9+
box-shadow: 0 0 0 0 rgba(162, 4, 44, 0);
10+
}
11+
20% {
12+
opacity: 0.7;
13+
background-color: rgb(235, 167, 167);
14+
box-shadow: 0 0 0 20px rgba(162, 4, 44, 0);
15+
}
16+
100% {
17+
opacity: 1;
18+
background-color: crimson;
19+
box-shadow: 0 0 0 0 rgba(162, 4, 44, 0.6);
20+
}
21+
}

‎src/stories/Events/HtmlMarkerEvents/HtmlMarkerEvents.mdx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import { Meta, Source } from '@storybook/addon-docs/blocks';
2+
import HtmlMarkerEvents from './HtmlMarkerEvents';
3+
4+
<Meta title="Events/HTML Marker Events"/>
5+
6+
# HTML Marker Events
7+
8+
The HTML Marker component triggers events whenever the user interacts with it.<br/>
9+
For a complete list of available events, refer to the [HTML Marker Events Sample](https://samples.azuremaps.com/html-markers/html-marker-layer-events).
10+
11+
Below is an example of how to listen for drag events on an HTML marker.<br/>
12+
**Try dragging the markers** to see them blink.
13+
14+
<HtmlMarkerEvents/>
15+
16+
<Source code={`
17+
import { AzureMap, AzureMapsProvider, AzureMapHtmlMarker } from 'react-azure-maps';
18+
import './HtmlMarkerEvents.css';
19+
20+
// generate random points
21+
const collection = generateRandomPoints();
22+
23+
// content for the html marker
24+
const circleMarker = (
25+
<div
26+
className="circle-marker"
27+
style={{
28+
width: '25px',
29+
height: '25px',
30+
borderRadius: '50%',
31+
backgroundColor: 'crimson',
32+
}}
33+
></div>
34+
);
35+
36+
const LayerEvents = () => {
37+
// add class name to the marker to apply css animation
38+
const startBlink = (e: any) => {
39+
// access the marker through the event object
40+
e.target.element.firstElementChild.className = 'circle-marker blink';
41+
};
42+
const stopBlink = (e: any) => {
43+
e.target.element.firstElementChild.className = 'circle-marker';
44+
};
45+
46+
return (
47+
<AzureMapsProvider>
48+
<AzureMap options={your_options}>
49+
{collection.map((point: number[], index) => (
50+
<AzureMapHtmlMarker
51+
key={index}
52+
options={{ position: point, draggable: true }}
53+
markerContent={circleMarker}
54+
events={[
55+
{
56+
eventName: 'dragstart',
57+
callback: startBlink,
58+
},
59+
{
60+
eventName: 'dragend',
61+
callback: stopBlink,
62+
},
63+
]}
64+
/>
65+
))}
66+
</AzureMap>
67+
</AzureMapsProvider>
68+
);
69+
};
70+
71+
function generateRandomPoints() {
72+
var layerData = [];
73+
74+
for (var i = 0; i < 30; i++) {
75+
layerData.push([Math.random() * 360 - 180, Math.random() * 170 - 85]);
76+
}
77+
78+
return layerData;
79+
}
80+
`}/>
81+
82+
<Source code={`
83+
/* HtmlMarkerEvents.css */
84+
85+
.circle-marker.blink {
86+
animation: blink-animation 0.5s infinite alternate;
87+
}
88+
89+
@keyframes blink-animation {
90+
0% {
91+
opacity: 0.5;
92+
background-color: rgb(235, 167, 167);
93+
box-shadow: 0 0 0 0 rgba(162, 4, 44, 0);
94+
}
95+
20% {
96+
opacity: 0.7;
97+
background-color: rgb(235, 167, 167);
98+
box-shadow: 0 0 0 20px rgba(162, 4, 44, 0);
99+
}
100+
100% {
101+
opacity: 1;
102+
background-color: crimson;
103+
box-shadow: 0 0 0 0 rgba(162, 4, 44, 0.6);
104+
}
105+
}
106+
`}/>

‎src/stories/Events/HtmlMarkerEvents/HtmlMarkerEvents.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { mapOptions } from '../../../key';
2+
import { AzureMap, AzureMapsProvider, AzureMapHtmlMarker } from 'react-azure-maps';
3+
import './HtmlMarkerEvents.css';
4+
5+
// generate random points
6+
const collection = generateRandomPoints();
7+
8+
// content for the html marker
9+
const circleMarker = (
10+
<div
11+
className="circle-marker"
12+
style={{
13+
width: '25px',
14+
height: '25px',
15+
borderRadius: '50%',
16+
backgroundColor: 'crimson',
17+
}}
18+
></div>
19+
);
20+
21+
const LayerEvents = () => {
22+
// add class name to the marker to apply css animation
23+
const startBlink = (e: any) => {
24+
// access the marker through the event object
25+
e.target.element.firstElementChild.className = 'circle-marker blink';
26+
};
27+
const stopBlink = (e: any) => {
28+
e.target.element.firstElementChild.className = 'circle-marker';
29+
};
30+
31+
return (
32+
<div className="defaultMap sb-unstyled">
33+
<AzureMapsProvider>
34+
<AzureMap options={mapOptions}>
35+
{collection.map((point: number[], index) => (
36+
<AzureMapHtmlMarker
37+
key={index}
38+
options={{ position: point, draggable: true }}
39+
markerContent={circleMarker}
40+
events={[
41+
{
42+
eventName: 'dragstart',
43+
callback: startBlink,
44+
},
45+
{
46+
eventName: 'dragend',
47+
callback: stopBlink,
48+
},
49+
]}
50+
/>
51+
))}
52+
</AzureMap>
53+
</AzureMapsProvider>
54+
</div>
55+
);
56+
};
57+
58+
function generateRandomPoints() {
59+
var layerData = [];
60+
61+
for (var i = 0; i < 30; i++) {
62+
layerData.push([Math.random() * 360 - 180, Math.random() * 170 - 85]);
63+
}
64+
65+
return layerData;
66+
}
67+
68+
export default LayerEvents;

‎src/stories/MapAnnotations/HtmlMarker/HtmlMarker.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const meta: Meta<typeof HtmlMarker> = {
1414
storySource: {
1515
source: `
1616
import { AzureMap, AzureMapHtmlMarker, AzureMapsProvider } from 'react-azure-maps';
17-
import { HtmlMarkerOptions, SymbolLayerOptions } from 'azure-maps-control';
17+
import { HtmlMarkerOptions } from 'azure-maps-control';
1818
1919
const HtmlMarker = () => {
2020
return (

‎src/stories/MapAnnotations/HtmlMarker/HtmlMarker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AzureMap, AzureMapHtmlMarker, AzureMapsProvider } from 'react-azure-maps';
2-
import { HtmlMarkerOptions, SymbolLayerOptions } from 'azure-maps-control';
2+
import { HtmlMarkerOptions } from 'azure-maps-control';
33
import { mapOptions } from '../../../key';
44

55
const HtmlMarker = ({ color, text, position, draggable }: HtmlMarkerOptions) => {

0 commit comments

Comments
 (0)