Creating a Map Service with Corona Map Developers 1

Implementing a real map service with the Corona Map developer!

_{<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 making lectures, and this was a really great opportunity to create this lecture.

This is my first lecture, so I'm a bit awkward and clumsy, but I hope it will be helpful to many people.
Thank you so much again!! Please feel free to give me any feedback.

 

 

Map service development, why should you learn it?

_{<Source: Chosun Ilbo>}

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

' The Corona Map is a new way for the government to disclose information. We need to 'change our thinking' in the way the government promotes information. I especially urge you to do so.' The map UI, which is recognized as a new way of thinking that forms the basis of the Corona Map, is the most efficient and intuitive way to display information to users.

In the current situation where it is becoming increasingly important to provide users with intuitive, easy, and fast information when planning or developing a service, this lecture will teach you how to use the basic settings to create a map service.

 

 

Create your own map service.

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

 

 

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

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

The knowledge you learn in this lecture is currently being used in Corona Map. I believe that this lecture will be helpful to students when they create map services in the future.

 

 

What should I learn?

This course introduces the project you will be creating and the basic knowledge you can gain from the CoronaMap 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 are shown in map services.

This lecture explains how to create the top banner and infobox required for map services and web services, and how to display them to users through CSS. Through this lecture, you will learn how to create banners and infoboxes, which are methods of displaying 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 to them. It explains how to create a function that shows and hides an info window when a marker is clicked, and how to add click events to the map.

 

Section 6 - Showing your current location on the map

 

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

I'll show you how to create a button to get the current location, attach a click event to it using jQuery, and create a marker at the current location. I'll also show you how to animate the marker so that it spreads around.

Section 7 - Showing your current location on the map

 

This section explains how to search for a destination using the Kakao API and display it on a map.

Using the keyword search API provided by Kakao, we will implement a function that receives a destination from the user and displays it on a map. You will learn how to process the latitude and longitude of the destination after receiving them as results, and we will also cover error handling that displays only one marker on the map.

We have released a development log explaining when and how the Corona Map was planned. We have briefly introduced how the Corona Map, which is currently in operation, came to be, what prompted its planning, and how it is currently being operated.

 

 

Unique features of this course

This is a lecture in which the Corona Map developer directly explains everything from setting up the initial environment to implementing the map service.

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.
You can check not only the know-how gained from the planning and development process, but also the code actually used in Corona Map, rather than a simple project .

 

 

Tools to handle

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

 

 

 

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

"Step by step from the web basics,
Go to the roadmap for "Making Map Services"