Syncfusion Feedback
Choose Framework
Controls
  • Grids
    • Data Grid
    • Pivot Table
    • Tree Grid
    • Spreadsheet
  • Data Visualization
    • Chart
    • Bullet Chart
    • Kanban Board
    • Range Selector
    • Sparkline Charts
    • HeatMap Chart
    • TreeMap
    • Circular Gauge
    • Stock Chart
    • Linear Gauge
    • Smith Chart
    • Maps
    • Diagram
    • 3D Circular Charts
    • 3D Charts
    • Barcode Generator
  • Editors
    • Word Processor
    • Rich Text Editor
    • Image Editor
  • Buttons
    • Button
    • Progress Button
    • Chips
  • Calendars
    • Scheduler
    • Gantt Chart
    • Calendar
    • DatePicker
    • DateRangePicker
    • DateTime Picker
    • TimePicker
  • Dropdowns
    • ComboBox
    • AutoComplete
    • Dropdown List
    • MultiSelect Dropdown
    • ListBox
    • Mention
    • Dropdown Tree
  • Navigation
    • Carousel
    • TreeView
    • File Manager
    • Toolbar
    • Menu Bar
    • Breadcrumb
    • Accordion
    • Context Menu
    • Tabs
    • Sidebar
    • Stepper
    • AppBar
  • Inputs
    • File Upload
    • Signature
    • Color Picker
    • Input Mask
    • TextBox
    • Numeric Textbox
    • Slider
    • Radio Button & Checkbox
    • Toggle Switch Button
    • Rating
    • TextArea
    • OTP Input
  • Layout
    • ListView
    • Splitter
    • Dialog
    • Dashboard Layout
    • Card
    • Tooltip
    • Timeline
    • Avatar
  • Notifications
    • Message
    • ProgressBar
    • Skeleton
    • Toast
    • Badge
  • Forms
    • Query Builder
  • File Viewers & Editors
    • PDF Viewer
    • In-place Editor
  • Interactive Chat
    • AI AssistView
  • Smart Components
    • Smart Paste Button

React Maps - Tutorial Videos

Go Back
thumbnail image

Watch video

Getting Started with the React Maps Component

Learn how to create and configure the Syncfusion React Maps component. In this video, you will learn how to provide a visual guide to the map elements by enabling a legend. You will also see how to enable data labels and tooltips to display additional information or values associated with the map elements.

Download Example: Getting Started with React Maps

Topics included
1. Introduction 00:00 min
2. Create a React application 00:37 min
3. Add the React Maps component 01:02 min
4. Populate a list data source 03:27 min
5. Set titles for maps 05:14 min
6. Add legends 05:39 min
7. Add data labels 06:10 min
8. Enable tooltips 06:55 min
Plaform: React Show more
thumbnail image

Watch video

How to Add and Customize Bubbles in the React Maps Component

Learn how to display and customize bubbles in the Syncfusion React Maps component. This video shows a world map that displays bubbles providing information about the 10 countries with the highest number of internet users.

Download Example: Add and Customize Bubbles in React Maps

Topics included
1. Introduction 00:00 min
2. Enable bubbles 01:14 min
3. Change the bubble type 03:18 min
4. Customize the bubbles 03:40 min
5. Change bubble color using data source 04:44 min
6. Show multiple groups of bubbles 05:19 min
7. Add tooltips to bubbles 06:18 min
8. Format the tooltips 07:07 min
Plaform: React Show more
thumbnail image

Watch video

How to Add Legends to the React Maps Component

Learn how easily you can add a legend to Syncfusion React Maps and customize it with various built-in options. To enable legends, import the legend from the React Maps package and inject it into the services. Then, enable the visible property in the legend settings property of the Maps component.

Download Example: Add Legends to React Maps

Topics included
1. Introduction 00:00 min
2. Enable legends 01:12 min
3. Position the legend 01:44 min
4. Align the legend 02:26 min
5. Customize the legend shapes 02:50 min
6. Toggle the legend 03:39 min
7. Exclude a legend item from Angular Maps 04:36 min
8. Bind legend visibility and color from the database 05:08 min
9. Change the legend mode 05:52 min
Plaform: React Show more
thumbnail image

Watch video

How to Add and Customize Markers in the React Maps Component

Learn how easily you can display and customize markers in the Syncfusion React Maps component. This video shows a world map with markers that provide information about the top 15 cities by population. To use the markers feature, inject the Marker module into the Maps component.

Download Example: Add and Customize Markers in React Maps

Topics included
1. Introduction 00:00 min
2. Enable markers 01:12 min
3. Change the marker shape 03:08 min
4. Customize the markers 04:03 min
5. Set the marker color from the data source 04:37 min
6. Display an image as the marker 05:08 min
7. Add tooltips to markers 05:38 min
8. Format the marker tooltips 06:34 min
Plaform: React Show more
thumbnail image

Watch video

How to Add Data Labels to the React Maps Component

Learn how easily you can add data labels to the Syncfusion React Maps component and customize it with various built-in options. To enable data labels, import the DataLabel module from the React Maps package and inject it into the Maps component.

Download Example: Customize Data Labels in React Maps

Topics included
1. Introduction 00:00 min
2. Add data labels 01:09 min
3. Arrange labels without overlapping 02:09 min
4. Prevent label intersections 02:46 min
5. Customize labels 03:16 min
6. Add labels using templates 03:51 min
Plaform: React Show more
thumbnail image

Watch video

How to Show Tooltips in the React Maps Component

Learn how to add a tooltip to Syncfusion React Maps and customize it with built-in options.

Download Example: Show Informative Tooltips in React Maps

Topics included
1. Introduction 00:00 min
2. Enable tooltip 01:07 min
3. Customize tooltip 01:51 min
4. Change tooltip display mode 02:45 min
5. Format tooltip 03:31 min
6. Tooltip template 04:04 min
Plaform: React Show more
thumbnail image

Watch video

How to Add Annotations to the React Maps Component

Learn how easily you can add an annotation to Syncfusion React Maps and customize it with various built-in options. You will see how to align and position the text and image annotation.

Download Example: Add Annotations to React Maps

Topics included
1. Introduction 00:00 min
2. Add annotations 01:06 min
3. Align annotations 02:34 min
4. Position annotations 03:00 min
5. Add image annotations 03:23 min
6. Position image annotations 03:58 min
Plaform: React Show more
thumbnail image

Watch video

Zooming and Panning in the React Maps Component

Learn how easily you can add zoom and pan effects to Syncfusion React Maps. In this video, I'll show you how to zoom in on a specific area using different zooming modes. You will also see how to customize and change the position of the zooming toolbar and disable the panning option.

Download Example: Zooming and Panning in React Maps

Topics included
1. Introduction 00:00 min
2. Enable zooming options 00:55 min
3. Customize toolbar options 02:14 min
4. Customize the zooming toolbar buttons 02:49 min
5. Customize the zooming toolbar tooltip 03:21 min
6. Change the zooming toolbar position 04:16 min
7. Customize the zooming toolbar 04:43 min
8. Disable the pan option 05:06 min
Plaform: React Show more
thumbnail image

Watch video

How to Add and Customize Marker Clusters in the React Maps Component

Learn how easily you can display and customize marker clusters in the Syncfusion React Maps component.

Download Example: Customize Marker Clusters in React Maps

Topics included
1. Introduction 00:00 min
2. Enable marker clusters 01:10 min
3. Expand marker clusters 01:53 min
4. Customize marker clusters 02:09 min
5. Multiple marker groups 03:14 min
6. Marker template 04:03 min
Plaform: React Show more
Chat with us