Summary
This chapter covers constructing and rendering polylines as sequences of coordinate points on interactive maps and enhancing them with markers for start and end locations.

General domain of usage
Delivery services route plotting

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHRpdGxlPlJvdXRlIE1hcCBFeGFtcGxlPC90aXRsZT4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGUuY3NzIiAvPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL3VucGtnLmNvbS9sZWFmbGV0L2Rpc3QvbGVhZmxldC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBpZD0ibWFwIj48L2Rpdj4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS9sZWFmbGV0L2Rpc3QvbGVhZmxldC5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0ic2NyaXB0LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

I21hcCB7CiAgaGVpZ2h0OiA1MDBweDsKICB3aWR0aDogMTAwJTsKICBib3JkZXI6IDJweCBzb2xpZCAjMzMzOwogIG1hcmdpbjogMzBweCBhdXRvOwogIGJveC1zaGFkb3c6IDAgMnB4IDhweCByZ2JhKDAsMCwwLDAuMTUpOwogIGJvcmRlci1yYWRpdXM6IDhweDsKfQoKYm9keSB7CiAgYmFja2dyb3VuZDogI2Y1ZjdmYTsKICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7Cn0=

Ly8gU2V0IHVwIHRoZSBtYXAgYW5kIGNlbnRlciBpdCBvbiB0aGUgcm91dGUgYXJlYQpjb25zdCBtYXAgPSBMLm1hcCgibWFwIikuc2V0VmlldyhbNDAuNzEyOCwgLTc0LjAwNl0sIDEzKTsKCi8vIEFkZCBhIGJhc2ljIHRpbGUgbGF5ZXIKTC50aWxlTGF5ZXIoImh0dHBzOi8ve3N9LnRpbGUub3BlbnN0cmVldG1hcC5vcmcve3p9L3t4fS97eX0ucG5nIiwgewogIG1heFpvb206IDE5LAogIGF0dHJpYnV0aW9uOiAiJmNvcHk7IE9wZW5TdHJlZXRNYXAgY29udHJpYnV0b3JzIgp9KS5hZGRUbyhtYXApOwoKLy8gRGVmaW5lIHRoZSBjb29yZGluYXRlcyBmb3IgdGhlIHJvdXRlIChleGFtcGxlOiBhIHNpbXBsZSByb3V0ZSBpbiBOZXcgWW9yayBDaXR5KQpjb25zdCByb3V0ZUNvb3JkaW5hdGVzID0gWwogIFs0MC43MTI4LCAtNzQuMDA2XSwgLy8gU3RhcnQ6IENpdHkgSGFsbCBQYXJrCiAgWzQwLjcxNTcsIC03NC4wMDMxXSwgLy8gU3RvcCAxCiAgWzQwLjcyMDksIC03NC4wMDA3XSwgLy8gU3RvcCAyCiAgWzQwLjcyNjUsIC03My45OTgxXSAvLyBFbmQ6IFdhc2hpbmd0b24gU3F1YXJlIFBhcmsKXTsKCi8vIERyYXcgdGhlIHJvdXRlIHVzaW5nIGEgcG9seWxpbmUKY29uc3Qgcm91dGVQb2x5bGluZSA9IEwucG9seWxpbmUocm91dGVDb29yZGluYXRlcywgewogIGNvbG9yOiAiYmx1ZSIsCiAgd2VpZ2h0OiA1LAogIG9wYWNpdHk6IDAuOAp9KS5hZGRUbyhtYXApOwoKLy8gQWRkIGEgbWFya2VyIGZvciB0aGUgc3RhcnQgb2YgdGhlIHJvdXRlCmNvbnN0IHN0YXJ0TWFya2VyID0gTC5tYXJrZXIocm91dGVDb29yZGluYXRlc1swXSkKICAuYWRkVG8obWFwKQogIC5iaW5kUG9wdXAoIlN0YXJ0OiBDaXR5IEhhbGwgUGFyayIpOwoKLy8gQWRkIGEgbWFya2VyIGZvciB0aGUgZW5kIG9mIHRoZSByb3V0ZQpjb25zdCBlbmRNYXJrZXIgPSBMLm1hcmtlcihyb3V0ZUNvb3JkaW5hdGVzW3JvdXRlQ29vcmRpbmF0ZXMubGVuZ3RoIC0gMV0pCiAgLmFkZFRvKG1hcCkKICAuYmluZFBvcHVwKCJFbmQ6IFdhc2hpbmd0b24gU3F1YXJlIFBhcmsiKTsKCi8vIFpvb20gdGhlIG1hcCB0byBmaXQgdGhlIHJvdXRlCm1hcC5maXRCb3VuZHMocm91dGVQb2x5bGluZS5nZXRCb3VuZHMoKSk7

When you want to display a path connecting several locations on a map, a **polyline** is the tool of choice. In mapping libraries like `Leaflet.js`, a polyline is a continuous line composed of multiple coordinate points. This is especially useful for visualizing routes, such as walking tours, delivery paths, or public transit lines. By connecting the dots between start and end locations, polylines make it easy to see the overall route at a glance.

In practical terms, route maps are used in many real-world applications:
- Delivery services plot routes for drivers;
- Event organizers show race courses;
- Travel apps display suggested itineraries.

Markers are often added at the start and end points, giving users clear reference points for where a journey begins and ends. With `Leaflet.js`, you can easily combine **polylines** and **markers** to build interactive, informative maps that help users navigate and understand routes visually.

What is the main purpose of using a polyline in a route map?

Create interactive and visually engaging maps using Leaflet.js. Learn how to set up maps, add markers, customize tile layers, and design custom icons. Apply your skills through practical mini projects such as store locators, route maps, and event maps.

Learn how Leaflet.js creates interactive maps and how to set up your first map environment. Work with basic features like markers and tile layers to build a functional foundation before adding more customization.

Customize your maps with different tile layers and professionally styled markers. Add visual variety, switch between map styles, and create unique icons that match your project’s theme.

Apply your knowledge through practical mapping projects. Build real-world interfaces such as store locators, route maps, and event maps that demonstrate how Leaflet.js brings geographic data to life.

Route Map

Route Map