Skip to content

Commit 3f66c73

Browse files
AlisherAmonulloevAlisherAmonulloev
committed
Migrate jQuery map example to new template structure
- Updated HTML with proper title and local dependencies - Migrated map functionality with MarkerWithLabel integration - Added CSS styling for marker labels - Copied and integrated markerWithLabel.js library - Excluded third-party library from ESLint - Updated README with new file paths - Maintains functionality: two markers with price labels, one draggable
1 parent 456faa5 commit 3f66c73

File tree

6 files changed

+477
-17
lines changed

6 files changed

+477
-17
lines changed

‎Readme.md‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!-- default badges list -->
2-
![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/128584404/23.1.4%2B)
2+
![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/128584404/25.1.3%2B)
33
[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T108722)
44
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
55
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
@@ -9,15 +9,19 @@
99

1010
This example demonstrates how to add a marker with a label to the Google map. We used the <a href="https://github.com/googlemaps/js-markerwithlabel">js-markerwithhlabel</a> library for this task.
1111

12-
![Markers with labels](./map-marker-with-label.png)
12+
![Markers with labels](images/map-marker-with-label.png)
1313

1414
The Map component allows obtaining the instance in the <a href="https://js.devexpress.com/jQuery/Documentation/ApiReference/UI_Components/dxMap/Configuration/#onReady">onReady</a> event handler using the <strong>originalMap</strong> parameter.
1515

1616
## Files to Review
1717

18+
## Files to Review
19+
1820
- **jQuery**
19-
- [index.html](jQuery/index.html)
20-
- [script.js](jQuery/script.js)
21+
- [index.html](jQuery/src/index.html)
22+
- [index.js](jQuery/src/index.js)
23+
- [index.css](jQuery/src/index.css)
24+
- [markerWithLabel.js](jQuery/src/markerWithLabel.js)
2125

2226
## Documentation
2327

‎jQuery/.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
node_modules/*
2+
src/markerWithLabel.js

‎jQuery/src/index.css‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
1-
.demo-container {
2-
margin: 50px;
3-
width: 90vw;
1+
#map {
2+
width: 1200px;
3+
height: 620px;
4+
position: relative;
5+
margin: 20px auto;
6+
border: 1px solid #ccc;
7+
}
8+
9+
.labels {
10+
color: white;
11+
background-color: #333;
12+
font-family: 'Lucida Grande', Arial, sans-serif;
13+
font-size: 10px;
14+
font-weight: bold;
15+
text-align: center;
16+
width: 40px;
17+
border: 2px solid black;
18+
white-space: nowrap;
19+
padding: 2px;
20+
border-radius: 3px;
421
}

‎jQuery/src/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>DevExtreme jQuery app</title>
4+
<title>Getting Started with DevExtreme jQuery Map</title>
55
<meta charset="utf-8" />
66
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
77
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
@@ -10,12 +10,12 @@
1010
<link rel="stylesheet" type="text/css" href="index.css" />
1111
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
1212
<script type="text/javascript" src="../node_modules/devextreme-dist/js/dx.all.js"></script>
13+
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
14+
<script type="text/javascript" src="markerWithLabel.js"></script>
1315
<script type="text/javascript" src="index.js"></script>
1416
</head>
1517

1618
<body class="dx-viewport">
17-
<div class="demo-container">
18-
<div id="btn"></div>
19-
</div>
19+
<div id="map"></div>
2020
</body>
2121
</html>

‎jQuery/src/index.js‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,35 @@
11
$(() => {
2-
let count = 0;
3-
$('#btn').dxButton({
4-
text: `Click count: ${count}`,
5-
onClick(e) {
6-
count += 1;
7-
e.component.option('text', `Click count: ${count}`);
2+
$('#map').dxMap({
3+
apiKey: 'YOUR_API_KEY',
4+
width: 1200,
5+
height: 620,
6+
zoom: 14,
7+
center: '49.47805, -123.84716',
8+
provider: 'google',
9+
onReady(s) {
10+
const map = s.originalMap;
11+
const homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
12+
13+
const marker1 = new MarkerWithLabel({
14+
position: homeLatLng,
15+
draggable: false,
16+
clickable: false,
17+
map,
18+
labelContent: '$425K',
19+
labelAnchor: new google.maps.Point(-21, 3),
20+
labelClass: 'labels', // the CSS class for the label
21+
labelStyle: { opacity: 0.75 },
22+
});
23+
24+
const marker2 = new MarkerWithLabel({
25+
position: new google.maps.LatLng(49.475, -123.84),
26+
draggable: true,
27+
map,
28+
labelContent: '$395K',
29+
labelAnchor: new google.maps.Point(-21, 3),
30+
labelClass: 'labels', // the CSS class for the label
31+
labelStyle: { opacity: 1.0 },
32+
});
833
},
934
});
1035
});

0 commit comments

Comments
 (0)