Summary  
This chapter outlines how to organize data objects in an array and loop through them to programmatically create custom map markers with icons and interactive popups.  

General domain of usage  
Event planning and mapping tools

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHRpdGxlPkV2ZW50IE1hcDwvdGl0bGU+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9InN0eWxlLmNzcyIgLz4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaHR0cHM6Ly91bnBrZy5jb20vbGVhZmxldC9kaXN0L2xlYWZsZXQuY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxoMj5VcGNvbWluZyBFdmVudHMgaW4gdGhlIENpdHk8L2gyPgogICAgPGRpdiBpZD0ibWFwIj48L2Rpdj4KICAgIDxkaXYgaWQ9ImV2ZW50LWxpc3QiPgogICAgICA8aDM+RXZlbnQgTGlzdDwvaDM+CiAgICAgIDx1bD4KICAgICAgICA8bGk+PHN0cm9uZz5NdXNpYyBGZXN0aXZhbDwvc3Ryb25nPiAtIEp1bmUgMTUsIENlbnRyYWwgUGFyazwvbGk+CiAgICAgICAgPGxpPjxzdHJvbmc+QXJ0IEV4aGliaXRpb248L3N0cm9uZz4gLSBKdWx5IDMsIERvd250b3duIEdhbGxlcnk8L2xpPgogICAgICAgIDxsaT48c3Ryb25nPkZvb2QgVHJ1Y2sgUmFsbHk8L3N0cm9uZz4gLSBKdW5lIDIyLCBSaXZlcmZyb250PC9saT4KICAgICAgPC91bD4KICAgIDwvZGl2PgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vdW5wa2cuY29tL2xlYWZsZXQvZGlzdC9sZWFmbGV0LmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQgc3JjPSJzY3JpcHQuanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmOwogIG1hcmdpbjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6ICNmNWY1ZmE7Cn0KCiNtYXAgewogIHdpZHRoOiAxMDAlOwogIGhlaWdodDogNDAwcHg7CiAgbWFyZ2luLWJvdHRvbTogMjBweDsKICBib3JkZXI6IDJweCBzb2xpZCAjNTU1OwogIGJvcmRlci1yYWRpdXM6IDhweDsKfQoKI2V2ZW50LWxpc3QgewogIHdpZHRoOiA5MCU7CiAgbWF4LXdpZHRoOiA1MDBweDsKICBtYXJnaW46IDAgYXV0byA0MHB4IGF1dG87CiAgYmFja2dyb3VuZDogI2ZmZjsKICBwYWRkaW5nOiAxOHB4IDI0cHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJveC1zaGFkb3c6IDAgMnB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMDcpOwp9CgojZXZlbnQtbGlzdCBoMyB7CiAgbWFyZ2luLXRvcDogMDsKfQoKI2V2ZW50LWxpc3QgdWwgewogIHBhZGRpbmctbGVmdDogMThweDsKfQoKLmxlYWZsZXQtbWFya2VyLWljb24gewogIGJvcmRlcjogMnB4IHNvbGlkICNmZmY7CiAgYm9yZGVyLXJhZGl1czogNTAlOwogIGJveC1zaGFkb3c6IDAgMXB4IDdweCByZ2JhKDAsIDAsIDAsIDAuMTUpOwp9

Ly8gRXZlbnQgZGF0YSB3aXRoIGNvb3JkaW5hdGVzIGFuZCBkZXRhaWxzCmNvbnN0IGV2ZW50cyA9IFsKICB7CiAgICBuYW1lOiAiTXVzaWMgRmVzdGl2YWwiLAogICAgdHlwZTogIm11c2ljIiwKICAgIGNvb3JkczogWzQwLjc4NTA5MSwgLTczLjk2ODI4NV0sCiAgICBkYXRlOiAiSnVuZSAxNSIsCiAgICBsb2NhdGlvbjogIkNlbnRyYWwgUGFyayIKICB9LAogIHsKICAgIG5hbWU6ICJBcnQgRXhoaWJpdGlvbiIsCiAgICB0eXBlOiAiYXJ0IiwKICAgIGNvb3JkczogWzQwLjcyOTUxMywgLTczLjk5ODY0OV0sCiAgICBkYXRlOiAiSnVseSAzIiwKICAgIGxvY2F0aW9uOiAiRG93bnRvd24gR2FsbGVyeSIKICB9LAogIHsKICAgIG5hbWU6ICJGb29kIFRydWNrIFJhbGx5IiwKICAgIHR5cGU6ICJmb29kIiwKICAgIGNvb3JkczogWzQwLjcwMDI5MiwgLTc0LjAxNzA0OF0sCiAgICBkYXRlOiAiSnVuZSAyMiIsCiAgICBsb2NhdGlvbjogIlJpdmVyZnJvbnQiCiAgfQpdOwoKLy8gQ3VzdG9tIGljb25zIGZvciBkaWZmZXJlbnQgZXZlbnQgdHlwZXMKY29uc3QgaWNvbnMgPSB7CiAgbXVzaWM6IEwuaWNvbih7CiAgICBpY29uVXJsOiAiaHR0cHM6Ly9jZG4taWNvbnMtcG5nLmZsYXRpY29uLmNvbS81MTIvNjkvNjk1MjQucG5nIiwKICAgIGljb25TaXplOiBbMzIsIDMyXSwKICAgIGljb25BbmNob3I6IFsxNiwgMzJdLAogICAgcG9wdXBBbmNob3I6IFswLCAtMzJdCiAgfSksCiAgYXJ0OiBMLmljb24oewogICAgaWNvblVybDogImh0dHBzOi8vY2RuLWljb25zLXBuZy5mbGF0aWNvbi5jb20vNTEyLzMxMDMvMzEwMzQ0Ni5wbmciLAogICAgaWNvblNpemU6IFszMiwgMzJdLAogICAgaWNvbkFuY2hvcjogWzE2LCAzMl0sCiAgICBwb3B1cEFuY2hvcjogWzAsIC0zMl0KICB9KSwKICBmb29kOiBMLmljb24oewogICAgaWNvblVybDogImh0dHBzOi8vY2RuLWljb25zLXBuZy5mbGF0aWNvbi5jb20vNTEyLzEwNDYvMTA0Njg1Ny5wbmciLAogICAgaWNvblNpemU6IFszMiwgMzJdLAogICAgaWNvbkFuY2hvcjogWzE2LCAzMl0sCiAgICBwb3B1cEFuY2hvcjogWzAsIC0zMl0KICB9KQp9OwoKLy8gSW5pdGlhbGl6ZSB0aGUgbWFwCmNvbnN0IG1hcCA9IEwubWFwKCJtYXAiKS5zZXRWaWV3KFs0MC43NSwgLTczLjk4XSwgMTIpOwoKLy8gQWRkIGEgdGlsZSBsYXllcgpMLnRpbGVMYXllcigiaHR0cHM6Ly97c30udGlsZS5vcGVuc3RyZWV0bWFwLm9yZy97en0ve3h9L3t5fS5wbmciLCB7CiAgYXR0cmlidXRpb246ICJNYXAgZGF0YSDCqSBPcGVuU3RyZWV0TWFwIGNvbnRyaWJ1dG9ycyIKfSkuYWRkVG8obWFwKTsKCi8vIEFkZCBtYXJrZXJzIGZvciBlYWNoIGV2ZW50IHdpdGggY3VzdG9tIGljb24gYW5kIHBvcHVwCmV2ZW50cy5mb3JFYWNoKChldmVudCkgPT4gewogIEwubWFya2VyKGV2ZW50LmNvb3JkcywgeyBpY29uOiBpY29uc1tldmVudC50eXBlXSB9KQogICAgLmFkZFRvKG1hcCkKICAgIC5iaW5kUG9wdXAoCiAgICAgIGA8c3Ryb25nPiR7ZXZlbnQubmFtZX08L3N0cm9uZz48YnI+CiAgICAgICR7ZXZlbnQuZGF0ZX08YnI+CiAgICAgICR7ZXZlbnQubG9jYXRpb259YAogICAgKTsKfSk7

When building an engaging event map, start by organizing your event data in a clear structure, such as an array of objects with properties for **name**, **type**, **coordinates**, **date**, and **location**. This makes it easy to loop through events and add markers programmatically. Select custom icons that visually represent each event type—like a music note for concerts, a palette for art, or a fork and knife for food events—to help users quickly identify events at a glance. Make your event map interactive and useful by including popups with essential details, such as **event name**, **date**, and **location**, so users can learn more with a single click. Grouping similar events with consistent icons and offering a well-styled event list alongside the map also helps users find what interests them most.

Why might you use different custom icons for event markers on a 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.

Event Map

Event Map