Vue Map - Customize

The Map UI component allows you to provide a single icon for all markers. For this purpose, assign the URL of the icon to the markerIconSrc property. In addition, you can customize the icon of an individual marker using the iconScr property.

  • <template>
  • <DxMap
  • :zoom="10"
  • :marker-icon-src="markerIconUrl"
  • :markers="mapMarkers"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxMap } from 'devextreme-vue/map';
  •  
  • export default {
  • components: {
  • DxMap
  • },
  • data() {
  • return {
  • markerIconUrl: "https://js.devexpress.com/Demos/RealtorApp/images/map-marker.png",
  • mapMarkers: [
  • { location: "40.749825, -73.090443" },
  • { location: "42.743244, -71.594375", iconSrc: "http://www.iconsdb.com/icons/preview/gray/map-marker-2-xxl.png" },
  • { location: "37.058435, -74.903842" }
  • ]
  • };
  • }
  • }
  • </script>

Apart from the icon, you can specify a tooltip and handle the click event for an individual marker.

  • <template>
  • <DxMap
  • :zoom="10"
  • :center="centerCoordinates"
  • :markers="mapMarkers"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxMap } from 'devextreme-vue/map';
  • import notify from 'devextreme/ui/notify';
  •  
  • export default {
  • components: {
  • DxMap
  • },
  • data() {
  • return {
  • centerCoordinates: { lat: 40.749825, lng: -73.987963 },
  • mapMarkers: [{
  • location: "Brooklyn Bridge,New York,NY",
  • tooltip: {
  • text: "Brooklyn Bridge",
  • isShown: true
  • }
  • }, {
  • location: "40.058435, -74.903842",
  • onClick: () => {
  • notify("The marker is clicked!", "info", 1000);
  • }
  • }]
  • };
  • }
  • }
  • </script>
See Also