Creating a Map Service with Corona Map Developers 1

Learn how to implement a real-world map service with the developers of Corona Map!

_{<Source: KTV, EBS>}

Hello, I am developer Donghoon Lee.
This time, I am using Corona Map , which has been used by 14 million people and has over 44 million views.
We planned and developed a mask map that shows real-time mask inventory status.

One of the most frequently asked questions I received while operating the service was
' I want to create a service like Corona Map, but I don't know where or how to start .'
So I started thinking about creating a course, and this was a really great opportunity to create this course.

This is my first lecture, so it's a bit awkward and clumsy, but I hope it will be helpful to many people.
Thank you so much again!! I'd love to hear your feedback anytime.

Why should you learn map service development?

_{<Source: Chosun Ilbo>}

The most impressive thing I heard when attending the Blue House business report was

" The Corona Map represents a new approach to how the government discloses information. We urge a 'shift in thinking' in the government's public relations approach. We specifically urge this." The map UI, recognized as the new concept underlying the Corona Map, is the most efficient and intuitive way to display information to users.

When planning or developing services, providing users with intuitive, easy-to-use, and quick information is becoming increasingly important. This course will teach you how to create a map service, starting with the basic settings.

Create your own map service.

Below is the map service that will be created in this lecture.

In this lecture, you will learn the basic knowledge required to create a map service.

1. Displaying a web map using the Naver Map API
2. Creating banners and infoboxes to provide information
3. Create multiple markers, place them on the map, and add click events.
4. Get the current location and display an animated marker on the map.
5. Implementing a destination search function through Kakao API

The knowledge you learn in this lecture is currently being utilized in Corona Map. I believe this course will be helpful to you as you develop map services in the future.

What should I learn?

This course introduces the project you will be working on, along with the basic knowledge you can gain from the Corona Map Clone project when starting web development.

This course covers how to install and set up the initial environment for running a project. This course covers VS Code,
This explains how to install node.js and express and set up the initial environment to proceed with the project.

This course covers setting up and applying the map API, which is the core of the map service.

This lecture uses the Naver Map API, and explains how to create an application, issue an API key, and display the Naver Map API on the web.

This course covers creating banners and info boxes that appear on map services.

This course explains how to create top banners and infoboxes for map and web services, and how to display them to users using CSS. This course teaches you how to create banners and infoboxes, which display information on maps.

This section describes markers, one of the ways to display data in a map service.

This tutorial explains how to create multiple markers, display them on a map, and add click events. It also explains how to create a feature that displays and hides an info window when a marker is clicked, and how to add click events to the map.

Section 6 - Displaying your current location on the map

This section explains how to receive the current location, which is the most commonly used and basic method in map services, and display it on the map using a marker.

This tutorial explains how to create a button to retrieve the current location, attach a click event using jQuery, and create a marker at the current location. It also covers how to animate the marker so that it spreads around.

Section 7 - Displaying your current location on the map

This section explains how to use the Kakao API to search for destinations and display them on a map.

Using the keyword search API provided by Kakao, we'll implement a feature that prompts users for a destination and displays it on a map. You'll learn how to process the destination's latitude and longitude as returned values, and we'll also cover error handling to ensure only one marker appears on the map.

We've released a development log detailing when and how the Corona Map was planned. We've also provided a brief overview of how the currently operating Corona Map came to be, what prompted its planning, and how it's currently being operated.

Unique features of this course

This lecture is taught by the Corona Map developer, from initial environment setup to map service implementation.

Therefore, we created it so that even developers who are new to map services can easily access it, and by cloning the map service currently used by many users.
This is not just a simple project, but you can also check out the know-how gained during the planning and development process, as well as the code actually used in Corona Map .

Tools to handle

• VS Code - IDE (Integrated Development Environment) for development
• express - web application framework
• naver map api - API for displaying Naver maps

What if you're a beginner who has never learned web development before? 👀

"Step by step from the web basics,
Go to the "Making a Map Service" roadmap