Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Vector Map: how to add city locations with labels on the map

LauraPitskhelauri pro asked 5 years ago


Hello I purchased vector map and trying to find detailed documentation for it. Is there any way to add highlighted city locations, something like on the sample below? enter image description here


Adam Jakubowski staff answered 5 years ago


Hi,

Here you have the code thanks to which you will be able to add markers.$(function(){ $('#world-map-markers').vectorMap({ map: 'world_mill', scaleColors: ['#C8EEFF', '#0071A4'], normalizeFunction: 'polynomial', hoverOpacity: 0.7, hoverColor: false, markerStyle: { initial: { fill: '#F8E23B', stroke: '#383f47' } }, backgroundColor: '#383f47', markers: [ {latLng: [41.90, 12.45], name: 'Vatican City'}, {latLng: [43.73, 7.41], name: 'Monaco'}, {latLng: [-0.52, 166.93], name: 'Nauru'}, {latLng: [-8.51, 179.21], name: 'Tuvalu'}, {latLng: [43.93, 12.46], name: 'San Marino'}, {latLng: [47.14, 9.52], name: 'Liechtenstein'}, {latLng: [7.11, 171.06], name: 'Marshall Islands'}, {latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis'}, {latLng: [3.2, 73.22], name: 'Maldives'}, {latLng: [35.88, 14.5], name: 'Malta'}, {latLng: [12.05, -61.75], name: 'Grenada'}, {latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines'}, {latLng: [13.16, -59.55], name: 'Barbados'}, {latLng: [17.11, -61.85], name: 'Antigua and Barbuda'}, {latLng: [-4.61, 55.45], name: 'Seychelles'}, {latLng: [7.35, 134.46], name: 'Palau'}, {latLng: [42.5, 1.51], name: 'Andorra'}, {latLng: [14.01, -60.98], name: 'Saint Lucia'}, {latLng: [6.91, 158.18], name: 'Federated States of Micronesia'}, {latLng: [1.3, 103.8], name: 'Singapore'}, {latLng: [1.46, 173.03], name: 'Kiribati'}, {latLng: [-21.13, -175.2], name: 'Tonga'}, {latLng: [15.3, -61.38], name: 'Dominica'}, {latLng: [-20.2, 57.5], name: 'Mauritius'}, {latLng: [26.02, 50.55], name: 'Bahrain'}, {latLng: [0.33, 6.73], name: 'São Tomé and Príncipe'} ] }); });

but you need to change the id in your html code to world-map-markers. This code adds a few markers but you can edit it freely

Best,

Adam



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.5
  • Device: desktopp
  • Browser: cross browser
  • OS: microsoft
  • Provided sample code: No
  • Provided link: No