How can I create a detailed highchart map of Korea that accurately includes Dokdo in its design?

I am currently working on a project to create a comprehensive map of Korea using highchart.

One major challenge I have encountered is the absence of Dokdo on the standard map of Korea provided by highchart.

Is there a way for me to develop a map that includes Dokdo using the highchart platform?

Jsfiddle URL: https://jsfiddle.net/jsill2786/bsguoxhq/

(async () => {

const topology = await fetch(
    'https://code.highcharts.com/mapdata/countries/kr/kr-all.topo.json'
).then(response => response.json());

// Prepare demo data. The data is joined to map using value of 'hc-key'
// property by default. See API docs for 'joinBy' for more info on linking
// data and map.
const data = [
    ['kr-4194', 10], ['kr-kg', 11], ['kr-cb', 12], ['kr-kn', 13],
    ['kr-2685', 14], ['kr-pu', 15], ['kr-2688', 16], ['kr-sj', 17],
    ['kr-tj', 18], ['kr-ul', 19], ['kr-in', 20], ['kr-kw', 21],
    ['kr-gn', 22], ['kr-cj', 23], ['kr-gb', 24], ['kr-so', 25],
    ['kr-tg', 26], ['kr-kj', 27]
];

let city_code = ['kr-kg', 'kr-cb', 'kr-so', 'kr-kn', 'kr-2685', 'kr-pu', 
'kr-2688','kr-sj', 'kr-tj', 'kr-ul', 'kr-in', 'kr-kw', 'kr-gn', 'kr-cj', 
'kr-gb', 'kr-tg', 'kr-kj']

let city_name = ['경기도', '전북', '서울', '경상남도', '전라남도', '부산', 
'경상북도', '세종', '대전', '울산', '인천', '강원도', '충청남도', '제주도', '충청북도',
'대구', '광주광역시']

// Create the chart
Highcharts.mapChart('container', {
    chart: {
        map: topology
    },

    title: {
        text: 'Highcharts Korea Map'
    },

    subtitle: {
        // text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/kr/kr-all.topo.json">South Korea</a>'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    colorAxis: {
        min: 0
    },

    series: [{
        data: data,
        name: 'Random data',
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        dataLabels: {
            enabled: true,
            // format: '{point.name}',
            formatter: function() {
                for (let i = 0; i < city_code.length; i++){
                if (this.point['hc-key'] === city_code[i]){
                    return city_name[i]
                }
                
              }
            
            }
        }
    }]
});

})();

Map without Dokdo

Maps with Dokdo

Answer №1

If you find that there is no map or element on the map in our vast Highcharts Map collection, feel free to make a request for it here: https://github.com/highcharts/map-collection-dist/issues

Alternatively, you have the option to design your very own map by following the instructions laid out in this helpful article: https://www.highcharts.com/docs/maps/create-custom-maps

If you encounter any difficulties, you can try adding Dokdo as a point using the following code snippet:

  {
  name: 'North Gyeongsang',
    type: 'mappoint',
    data: [{
      name: 'Dokdo',
      lat: 37.24,
      lon: 131.5,
    }]
  }

For a demonstration, you can visit the following link: https://jsfiddle.net/BlackLabel/b1xhzmrd/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS Troubleshooting: Error in Outlining When Using Block Display

I am attempting to create a combobox using HTML and CSS where each item is displayed on a separate line and lights up blue when hovered over, similar to Google's design. The basic setup is simple. I have a div with links (a) inside, and each link is s ...

Submitting form data to PHP without refreshing the page

I've been attempting to send form data, specifically an array, to a PHP file without having the page refresh. I've implemented AJAX for this purpose but it doesn't appear to be working as intended. Below you'll find the syntax of the fo ...

Angular JS causing text alignment issues in table cells when viewed on mobile devices

I have created a web application that requires both desktop and mobile views, utilizing Angular JS. Everything is functioning as expected except for the text alignment within tables. I attempted using <td align="left">, but it did not produce any cha ...

The image remains unchanged in the JavaScript function

My attempt to swap images using jQuery has hit a snag. Upon running the page, it appears that the chase() method finishes executing before the animation has completed. The goal was to create an illusion of chasing between two images by repeatedly replaci ...

Create a specific part of a webpage that can be scrolled through

In a unique way, I have designed a page where the only way to navigate is by simply clicking. To achieve this, I have implemented the following custom CSS: body{ overflow:hidden; } However, I have encountered a problem where I am unable to scroll to ...

Dependency on the selection of items in the Bootstrap dropdown menu

I am currently struggling with a few tasks regarding Bootstrap Dropdown Selection and despite looking for information, I couldn't find anything helpful. Check out my dropdown menu Here are the functions I would like to implement: 1) I want the subm ...

Using Strapi and Next.js to retrieve user information

After searching for similar questions with no luck, I'm reaching out for help. Building an authentication system using Strapi and Next.js, I'm faced with a task that seems simple but eludes me. The main question is: How can the client retrieve u ...

I'm stuck on finding the solution for PROJECT EULER P4

Challenge 4 Palindrome numbers read the same forwards and backwards. The largest palindrome that can be formed by multiplying two 3-digit numbers is 9009 = 91 × 99. Your task is to find the largest palindrome made from the product of two 3-digit numbers. ...

Do I have to include the sizes attribute when using w-descriptors in srcset?

After reading several articles discussing the use of srcset for device-pixel-density adjustments and art direction, I have come to a few conclusions: The State of Responsive Images in 2015 by Paddi Macdonnell srcset Part 2: The W descriptor and sizes att ...

Handle all link clicks on the webpage

My challenge is that some users are required to utilize a virtual desktop in order to access specific information on my website. However, within the virtual environment, there are links leading to external content that do not function properly. I am seekin ...

Updating the text box's font color to its original black shade

I have a form that includes dynamic text boxes fetching data from the backend. When a user clicks on a text box, the color of the text changes. Upon form submission, a confirmation message is displayed and I want the text box color to revert back to black. ...

Having trouble clicking on SubMenu with selenium web driver

Currently, I am looking into automating a UI application. In this application, there is a menu that displays sub-menus upon hovering the mouse over it. However, I am facing an issue where I am unable to click on the items within the sub-menu. Here is the ...

CSS: Fixed item at the bottom of a container that scrolls horizontally

I am working on creating a sticky footer within a horizontally scrolling element. I want the sticky footer to be positioned at the bottom, adjust its height based on the content inside it, and match the width of the scrollable parent (in this case 200px). ...

Navigating and Organizing in Ionic Service Factory

Apologies for the beginner question. I am looking to incorporate filtering and sorting by name on my webpage. However, I have encountered two issues after attempting to implement this functionality using a factory in services.js: When typing a search ter ...

Implementing active className in nextjs: A step-by-step guide

I am a beginner with Nextjs and I am trying to implement a feature where the color of a nav-link changes when it is selected. I am currently using Nextjs+react-bootstrap in my project. This is how my Navbar component is structured: import React from " ...

Attempting to establish both the minimum and maximum time date in a jQuery datepicker across two separate inputs

I've been working on a project for my classes that requires setting minimum and maximum dates for two input fields. The first input should allow dates from now to 12 months in the future, while the second input should be restricted to dates picked wit ...

determining the sorting behavior of columns in Datatables

While working on my table, I referred to a Datatbles tutorial that covers sorting the third column as a percentage value. // Setting up column search - adding a text input to each footer cell $('#p_table-id tfoot th').each(function ...

The user_login view in the account views did not provide an HttpResponse object, but instead returned None

Error: Unable to register or log in - account.views not returning HTTP response # accounts/views.py from django.shortcuts import render, redirect from django.contrib.auth import login, authenticate, logout from account.forms import RegistrationForm, Use ...

When using Selenium async script in its own thread, it can interrupt the execution of other

Let's consider this situation: Various scripts need to run in the browser. One of them involves sending messages from one browser to another (WebRTC). I am interested in measuring the delay for each operation, especially when it comes to sending mess ...

receiving an error message due to attempting to access an

I'm facing an issue with replacing objects in an array using JavaScript. I tried to use indexOf and splice methods, but it's not working as expected. The value returned by indexOf is '-1', indicating that the object is not found in the ...