-
Data Grids / Data Management
-
Data Grid
- Overview
-
Data Binding
-
Filtering
- Sorting
-
Editing
-
Grouping
-
Selection
- Focused Row
- Paging
-
Scrolling
-
Columns
-
Master-Detail
-
Data Summaries
-
Drag & Drop
-
Export to PDF
-
Export to Excel
- Appearance
-
Customization
- State Persistence
-
Adaptability
-
Keyboard Navigation
- Right-To-Left Support
-
Tree List
- Overview
-
Data Binding
-
Filtering
- Sorting
-
Editing
-
Selection
- Focused Row
- Paging
-
Columns
- Drag & Drop
- State Persistence
- Adaptability
-
Keyboard Navigation
-
Card View
-
Pivot Grid
- Overview
-
Data Binding
-
Field Management
-
Data Summaries
- Drill Down
- Filtering
-
Scrolling
-
Export to Excel
- Chart Integration
- Customization
- State Persistence
-
Filter Builder
-
-
Data Visualization
-
Charts
- Overview
-
Data Binding
-
Common Concepts
-
Axis
-
Aggregation
-
Tooltips
-
Selection
-
Customization
-
Zooming
-
Export
-
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Funnel and Pyramid Charts
-
Line Charts
- Pareto Chart
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
- Sankey Chart
-
Sparkline Charts
-
Tree Map
-
Gauges
- Overview
-
Runtime update
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
-
Scheduling / Planning
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Appointments
-
Timetable
- Editing
-
Grouping
- Virtual Scrolling
- Drag & Drop
-
Customization
- Adaptability
-
Gantt
- Overview
- Data Binding
-
Filtering
- Sorting
- Strip Lines
- Export to PDF
- Validation
-
Customization
-
-
Reporting
-
AI-powered Extensions
-
Interaction
-
Report Types
-
Data binding
-
Real-life Reports
-
Layout Features
-
Report Controls
-
Web-specific Features
-
-
Rich Text Editor
- Overview
- Load/Save
- Document Protection
-
Templates
- Autocorrect
-
Customization
- Simple View
-
Spreadsheet
- Overview
-
Open a Document
- Export And Printing
-
Features
-
UI Customization
-
Messaging
-
WYSIWYG Editor
-
Forms
-
Data Editors
- Overview
-
Common Concepts
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Number Box
- Radio Group
-
Range Selector
- Range Slider
- Slider
- Switch
- Text Area
- Text Box
-
Drop-Downs
- Autocomplete
-
Drop Down Box
-
Select Box
-
Tag Box
-
Lookup
-
Buttons
-
File Upload / File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Popup and Notifications
-
Navigation
- Overview
- Accordion
-
Context Menu
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
-
Stepper
- Pagination
-
List
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
-
-
Interactive Wrappers
-
Sortable
- Resizable
-
-
Progress Indicators
-
Maps
- Overview
-
Map
-
Vector Map
-
Data Binding
- Multiple Layers
-
Markers
- Legend
-
Zooming and Panning
-
Customization
-
-
Localization
Related Demos:
Your search did not match any results.
Map - Markers
The Map component can display markers on the map. The collection of displayed markers is declared in the markers array. Markers can include tooltips that provide additional information.
NOTE
When copying this demo to CodeSandbox, specify your own apiKey. Our demo keys can be used only on our website.
Backend API
@(Html.DevExtreme().Map()
.ID("map")
.Provider(GeoMapProvider.Azure)
.ApiKey(k => k.Azure("6N8zuPkBsnfwniNAJkldM3cUgm3lXg3y9gkIKy59benICnnepK4DJQQJ99AIACYeBjFllM6LAAAgAZMPGFXE"))
.Zoom(11)
.Height(440)
.Width("100%")
.Controls(true)
.MarkerIconSrc(new JS("markerUrl"))
.Markers(markers => {
markers.Add().Coordinates(40.755833, -73.986389).Tooltip(t => t.Text("Times Square"));
markers.Add().Address("40.7825, -73.966111").Tooltip(t => t.Text("Central Park"));
markers.Add().Coordinates(40.753889, -73.981389).Tooltip(t => t.Text("Fifth Avenue"));
markers.Add().Address("Brooklyn Bridge,New York,NY").Tooltip(t => t.Text("Brooklyn Bridge"));
})
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("use-custom-markers")
.Value(true)
.Text("Use custom marker icons")
.OnValueChanged("checkBox_onValueChanged")
)
</div>
<div class="option">
@(Html.DevExtreme().Button()
.ID("show-tooltips")
.Text("Show all tooltips")
.OnClick("button_onClick")
)
</div>
</div>
<script>
var markerUrl = "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/maps/map-marker.png";
function checkBox_onValueChanged(data) {
var mapWidget = $("#map").dxMap("instance");
var markersData = mapWidget.option("markers");
var newMarkers = $.map(markersData, function (item) {
return $.extend(true, {}, item, { tooltip: { isShown: false }} );
});
mapWidget.option("markers", newMarkers);
mapWidget.option("markerIconSrc", data.value ? markerUrl : null);
}
function button_onClick() {
var mapWidget = $("#map").dxMap("instance");
var markersData = mapWidget.option("markers");
var newMarkers = $.map(markersData, function (item) {
return $.extend(true, {}, item, { tooltip: { isShown: true }} );
});
mapWidget.option("markers", newMarkers);
}
</script>
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class MapController : Controller {
public ActionResult Markers() {
return View();
}
}
}
.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;
}