{"id":17064,"date":"2023-12-22T09:44:20","date_gmt":"2023-12-22T09:44:20","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=17064"},"modified":"2023-12-22T11:41:11","modified_gmt":"2023-12-22T11:41:11","slug":"point-map-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/12\/22\/point-map-js\/","title":{"rendered":"How to Build Point Map with JavaScript"},"content":{"rendered":"

\"\"<\/a>If you’re a budding developer or data enthusiast eager to explore map creation, you’re in the right place. In this tutorial, I’ll guide you through how to easily build an interactive point map<\/a> using JavaScript.<\/p>\n

To make things even more interesting, I\u2019ll use data on the number of millionaires in cities as an example. By the end of this tutorial, you’ll have made a visually stunning JS point map, ready to tell the story of the world\u2019s wealthiest cities and a solid understanding of applying these skills to any data and scenarios. And stick around for a bonus at the end \u2014 I’ll also show you how to transform your point map into\u00a0a bubble map<\/a> where the size of the markers conveys additional information.<\/p>\n

Ready to master the JS point mapping technique? Let’s get started, and don’t forget to join me in the bonus section where size matters!<\/p>\n

<\/p>\n

What Is Point Map?<\/h2>\n

As we delve into the realm of building an interactive JavaScript-based point map, it’s essential to grasp the concept of point maps and their multifaceted role. A point map<\/strong> is a form of data visualization that represents data on a map using markers (dots), also known as a marker map<\/strong> and a dot map<\/strong>, offering a concise and potent method for showcasing spatial information. The purpose of point maps lies in their ability to reveal spatial patterns, provide an intuitive understanding of data distribution, facilitate comparisons, and uncover localized insights.<\/p>\n

Beyond these core purposes, point maps find applications in various fields. They serve various purposes, from analyzing population density in urban planning to studying disease spread in epidemiology, revealing demographic trends in sociology, mapping environmental concentrations in environmental science, to visualizing business analytics data such as customer distribution or market trends.<\/p>\n

A. Creating Basic JavaScript Point Map<\/h2>\n

Building a point map with JS might seem intimidating at first, especially envisioning cities lighting up based on their millionaire count. But fear not! Whether you’re a coding novice or a seasoned developer, this guide breaks down the process into manageable steps:<\/p>\n

    \n
  1. Create a web page in HTML<\/li>\n
  2. Include the necessary JavaScript files<\/li>\n
  3. Load the data<\/li>\n
  4. Write some JS code to create the point map<\/li>\n<\/ol>\n

    1. Create Web Page in HTML<\/h3>\n

    Start by laying the foundation by crafting a basic HTML page for your JS point map. There, add an HTML block-level element into the body, which will be the home for your point map. Assign a unique ID to this element, which will be referenced later when bringing the map to life with JavaScript. Feel free to infuse your creativity with some CSS styling to ensure the map looks exactly how you envision it.<\/p>\n

    Below is an example of how your HTML page might look. The <div> element, with an id of “container,” ensures the map gracefully spans the entire screen, with its height and width set to 100%. Remember, this is your canvas, and you’re encouraged to modify the styling to reflect your personal touch or match the theme of your project.<\/p>\n

    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <title>JavaScript Point Map<\/title>\r\n  <style type=\"text\/css\">\r\n    html,\r\n    body,\r\n    #container {\r\n      width: 100%;\r\n      height: 100%;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div id=\"container\"><\/div>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
    2. Include Necessary JavaScript Files<\/h3>\n
    Now that your HTML structure is in place, it\u2019s time to infuse it with the prowess of JavaScript. Include any JS files you are going to use.<\/p>\n
    For example, think of JavaScript charting libraries as secret ingredients that can help you transform raw data into visually delightful creations with little effort. In this tutorial, I\u2019ll illustrate using one of those listed in the top JS mapping libraries<\/a> \u2014 AnyChart<\/a>.<\/p>\n
    You have two options for adding JavaScript files: downloading them for local use or linking them via CDN. In the code below, the latter is used, embedding links to the required scripts directly in the <head> section of the HTML page. The scripts being included are the necessary modules of the JavaScript charting library, map geodata, and the open-source Proj4js component that converts point coordinates.<\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <title>JavaScript Point Map<\/title>\r\n  <style type=\"text\/css\">\r\n    html,\r\n    body,\r\n    #container {\r\n      width: 100%;\r\n      height: 100%;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n  <\/style>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.12.0\/js\/anychart-core.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.12.0\/js\/anychart-map.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.12.0\/geodata\/custom\/world\/world.js\"><\/script>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/proj4js\/2.3.15\/proj4.js\"><\/script>\r\n<\/head>\r\n<body>\r\n  <div id=\"container\"><\/div>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
    3. Load Data<\/h3>\n
    Ready to illuminate your point map? Fuel it with data! For tutorial illustration purposes, I decided to map data from the World\u2019s Wealthiest Cities Report 2023<\/a> by Henley Global, representing millionaire populations of 97 cities across Africa, Australasia, CIS, East Asia, Europe, the Middle East, North America, South Asia, and Southeast Asia. The data is neatly organized in JSON format and readily available on my GitHub Gist<\/a>.<\/p>\n
    Delving into the data, it unfolds as a collection of objects, each signifying a city. Within each city object, you’ll discover details like the city’s name, country, coordinates, and the count of millionaires, centimillionaires, and billionaires.<\/p>\n
    If you use a script to help you load the data, don\u2019t forget to include it in the <head> section in addition to the others. Here, I\u2019ll load my JSON using the data adapter script:<\/p>\n
    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.12.0\/js\/anychart-data-adapter.min.js\"><\/script><\/code><\/pre>\n
    Then here\u2019s how the data is loaded:<\/p>\n
    anychart.data.loadJsonFile(\"https:\/\/gist.githubusercontent.com\/awanshrestha\/9e91dbd3ac4626446cd84f8be97016ae\/raw\/160d5ab2da59a5264e716dcbe3239ce7ac9104b6\/Wealthiest%2520Cities%25202023.json\");<\/code><\/pre>\n
    With this, the groundwork is complete! The stage is set for the next exciting phase, where a touch of JavaScript will bring your point map to life.<\/p>\n
    4. Write Some JS Code to Create a Point Map<\/h3>\n
    Before delving into the JS point map charting code, ensure it runs only after the entire web page is loaded. The anychart.onDocumentReady() function serves this purpose.<\/p>\n
    <script>\r\n  anychart.onDocumentReady(function () {\r\n    \/\/ The point map data and code will be in this section\r\n  });\r\n<\/script><\/code><\/pre>\n
    After confirming the page load, the first task is to import the data prepared in Step 3.<\/p>\n
    anychart.onDocumentReady(function() {\r\n  anychart.data.loadJsonFile(\"https:\/\/gist.githubusercontent.com\/awanshrestha\/9e91dbd3ac4626446cd84f8be97016ae\/raw\/160d5ab2da59a5264e716dcbe3239ce7ac9104b6\/Wealthiest%2520Cities%25202023.json\",\r\n    function(data) {\",\r\n      \/\/ The rest of our code will go here\r\n    }\r\n  );\r\n});<\/code><\/pre>\n
    Now, embark on the map creation.<\/p>\n
    var map = anychart.map();<\/code><\/pre>\n
    After creating a basic map instance, set the geographical data. For this visualization, the world map is used.<\/p>\n
    map.geoData(\"anychart.maps.world\");<\/code><\/pre>\n
    After setting the geodata, map your data using a marker series.<\/p>\n
    var mapSeries = map.marker(data);<\/code><\/pre>\n
    With the data plotted, place your map inside the <div> container defined in Step 1 and draw the result.<\/p>\n
    map.container(\"container\");\r\nmap.draw();<\/code><\/pre>\n
    There you have it! With these lines of JavaScript, a visually appealing point map is crafted, illustrating the world’s wealthiest cities based on their millionaire count. Find the interactive version of this map here<\/a>, where you can experiment with its code further. The entire block of HTML\/CSS\/JS code constructing this point map is also presented below for your reference.<\/p>\n