This code places a Elementary map widget on a window, to exemplify part of the widget's A\-P\-I, related to overlays.

We'll start this example in the same way as \hyperlink{map_example_01}{Map Example 1}. Adding a map with buttons to control zoom, so if you didn't read it yet, just do it now.  
\begin{DoxyCodeInclude}
   map = elm_map_add(win);
   evas\_object\_size\_hint\_weight\_set(map, EVAS\_HINT\_EXPAND, EVAS\_HINT\_EXPAND);
   elm_win_resize_object_add(win, map);
   evas\_object\_show(map);

   box = elm_box_add(win);
   evas\_object\_show(box);

   bt = elm_button_add(win);
   elm\_object\_text\_set(bt, \textcolor{stringliteral}{"+"});
   elm_box_pack_end(box, bt);
   evas\_object\_show(bt);
   evas\_object\_smart\_callback\_add(bt, \textcolor{stringliteral}{"clicked"}, \_bt\_zoom\_in, map);

   bt = elm_button_add(win);
   elm\_object\_text\_set(bt, \textcolor{stringliteral}{"-"});
   elm_box_pack_end(box, bt);
   evas\_object\_show(bt);
   evas\_object\_smart\_callback\_add(bt, \textcolor{stringliteral}{"clicked"}, \_bt\_zoom\_out, map);

   bt = elm_button_add(win);
   elm\_object\_text\_set(bt, \textcolor{stringliteral}{"X"});
   elm_box_pack_end(box, bt);
   evas\_object\_show(bt);
   evas\_object\_smart\_callback\_add(bt, \textcolor{stringliteral}{"clicked"}, \_bt\_zoom\_fit, map);

   bt = elm_button_add(win);
   elm\_object\_text\_set(bt, \textcolor{stringliteral}{"#"});
   elm_box_pack_end(box, bt);
   evas\_object\_show(bt);
   evas\_object\_smart\_callback\_add(bt, \textcolor{stringliteral}{"clicked"}, \_bt\_zoom\_fill, map);

\end{DoxyCodeInclude}


Overlays can be placed over the map to represent anything we want. Let's say we want to represent some countries and cities with overlays.

Before we create city or country overlays, let's create class overlays.


\begin{DoxyCodeInclude}
   city\_clas = elm_map_overlay_class_add(map);
   elm_map_overlay_displayed_zoom_min_set(city\_clas, 3);
   elm_map_overlay_icon_set(city\_clas, \_clas\_city\_icon\_get(map));

\end{DoxyCodeInclude}
 These lines create a class overlay which represents cities. This class overlay will be used for grouping city overlays. Later city overlays in the same class are appended to this class overlay. if city overlays are near each other, they will be grouped.

We can set the icon for the class so that the icon will be displayed when city overlays are grouped. We can set the zoom required to display the overlays that belongs to this class, so if the zoom is less than this value, nothing will be shown.

Country class can be created in the same way. 
\begin{DoxyCodeInclude}
   country\_clas = elm_map_overlay_class_add(map);
   elm_map_overlay_displayed_zoom_min_set(country\_clas, 1);
   elm_map_overlay_icon_set(country\_clas, \_clas\_country\_icon\_get(map));

\end{DoxyCodeInclude}


Next we'll create some overlays representing cities and countries. We set the data for the overlay so that can be used later when clicked callback is called. We'll append them into city class to be grouped. We'll append them in a list, to close up them later. To create a default overlay, we need to pass the coordinates. 
\begin{DoxyCodeInclude}
   ovl = elm_map_overlay_add(map, -43.2, -22.9);
   elm_map_overlay_icon_set(ovl, \_city\_icon\_get(map));
   elm_map_overlay_data_set(ovl, &data\_rio);
   elm_map_overlay_class_append(city\_clas, ovl);
   ovls = eina\_list\_append(ovls, ovl);

\end{DoxyCodeInclude}


We subscribe a smart callback \char`\"{}overlay,clicked\char`\"{} to create bubble on the clicked overlay.  
\begin{DoxyCodeInclude}
   evas\_object\_smart\_callback\_add(map, \textcolor{stringliteral}{"overlay,clicked"}, \_overlay\_cb, NULL);

\end{DoxyCodeInclude}


Finally, on our {\ttfamily main} function, we ask the map to show all the overlays with the biggest zoom possible, passing the list of overlays added. 
\begin{DoxyCodeInclude}
   elm_map_overlays_show(ovls);

\end{DoxyCodeInclude}


We have created a specific structure for this example to store the name of the place and a path to a image file to represent it.  
\begin{DoxyCodeInclude}
\textcolor{keyword}{typedef} \textcolor{keyword}{struct }\_Overlay\_Data
\{
   \textcolor{keyword}{const} \textcolor{keywordtype}{char} *name;
   \textcolor{keyword}{const} \textcolor{keywordtype}{char} *file;
\} Overlay\_Data;

\end{DoxyCodeInclude}


We'll create instances for each place\-: 
\begin{DoxyCodeInclude}
Overlay\_Data data\_argentina = \{\textcolor{stringliteral}{"Argentina"}, NULL\};
Overlay\_Data data\_chile = \{\textcolor{stringliteral}{"Chile"}, NULL\};
Overlay\_Data data\_sampa = \{\textcolor{stringliteral}{"São Paulo"}, NULL\};
Overlay\_Data data\_rio = \{\textcolor{stringliteral}{"Rio de Janeiro"}, NULL\};
Overlay\_Data data\_brasilia = \{\textcolor{stringliteral}{"Brasília"}, NULL\};

\textcolor{keyword}{static} Elm\_Map\_Overlay *bubble;
\textcolor{keyword}{const} \textcolor{keywordtype}{char} *data\_dir;

\textcolor{keyword}{static} Evas\_Object *
\_icon\_get(Evas\_Object *obj, \textcolor{keyword}{const} \textcolor{keywordtype}{char} *file)
\{
   Evas\_Object *icon = elm_icon_add(obj);
   elm_image_file_set(icon, file, NULL);
   evas\_object\_show(icon);
   \textcolor{keywordflow}{return} icon;
\}

\textcolor{keyword}{static} Evas\_Object *
\_city\_icon\_get(Evas\_Object *obj)
\{
   \textcolor{keywordtype}{char} buf[256];
   snprintf(buf, \textcolor{keyword}{sizeof}(buf), \textcolor{stringliteral}{"%s/images/icon\_07.png"}, data\_dir);
   \textcolor{keywordflow}{return} \_icon\_get(obj, buf);
\}

\textcolor{keyword}{static} Evas\_Object *
\_clas\_city\_icon\_get(Evas\_Object *obj)
\{
   \textcolor{keywordtype}{char} buf[256];
   snprintf(buf, \textcolor{keyword}{sizeof}(buf), \textcolor{stringliteral}{"%s/images/icon\_05.png"}, data\_dir);
   \textcolor{keywordflow}{return} \_icon\_get(obj, buf);
\}

\textcolor{keyword}{static} Evas\_Object *
\_country\_icon\_get(Evas\_Object *obj)
\{
   \textcolor{keywordtype}{char} buf[256];
   snprintf(buf, \textcolor{keyword}{sizeof}(buf), \textcolor{stringliteral}{"%s/images/icon\_06.png"}, data\_dir);
   \textcolor{keywordflow}{return} \_icon\_get(obj, buf);
\}

\textcolor{keyword}{static} Evas\_Object *
\_clas\_country\_icon\_get(Evas\_Object *obj)
\{
   \textcolor{keywordtype}{char} buf[256];
   snprintf(buf, \textcolor{keyword}{sizeof}(buf), \textcolor{stringliteral}{"%s/images/icon\_04.png"}, data\_dir);
   \textcolor{keywordflow}{return} \_icon\_get(obj, buf);
\}

\textcolor{keyword}{static} Evas\_Object *
\_box\_get(Evas\_Object *obj, Overlay\_Data *data)
\{
   Evas\_Object *bx, *img, *label;
   bx = elm_box_add(obj);
   evas\_object\_show(bx);

   img = evas\_object\_image\_add(evas\_object\_evas\_get(obj));
   evas\_object\_image\_file\_set(img, data->file, NULL);
   evas\_object\_image\_filled\_set(img, EINA\_TRUE);
   evas\_object\_size\_hint\_min\_set(img, 64, 64);
   evas\_object\_show(img);
   elm_box_pack_end(bx, img);

   label = elm_label_add(obj);
   elm\_object\_text\_set(label, data->name);
   evas\_object\_show(label);
   elm_box_pack_end(bx, label);
   \textcolor{keywordflow}{return} bx;
\}

\textcolor{keyword}{static} \textcolor{keywordtype}{void}
\_overlay\_cb(\textcolor{keywordtype}{void} *data, Evas\_Object *map, \textcolor{keywordtype}{void} *ev)
\{
   printf(\textcolor{stringliteral}{"Overlay clicked\(\backslash\)n"});
   Elm\_Map\_Overlay *overlay = ev;
   Evas\_Object *bx;

   \textcolor{comment}{// prevent duplication}
   \textcolor{keywordflow}{if} (!bubble)  bubble = elm_map_overlay_bubble_add(map);

   elm_map_overlay_bubble_follow(bubble, overlay);
   elm_map_overlay_bubble_content_clear(bubble);
   bx = \_box\_get(map, elm_map_overlay_data_get(overlay));
   elm_map_overlay_bubble_content_append(bubble, bx);
\}

\textcolor{keyword}{static} \textcolor{keywordtype}{void}
\_bt\_zoom\_in(\textcolor{keywordtype}{void} *data, Evas\_Object *obj, \textcolor{keywordtype}{void} *ev)
\{
   Evas\_Object *map = data;
   \textcolor{keywordtype}{int} zoom;

   elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
   zoom = elm_map_zoom_get(map);
   elm_map_zoom_set(map, zoom + 1);
\}

\textcolor{keyword}{static} \textcolor{keywordtype}{void}
\_bt\_zoom\_out(\textcolor{keywordtype}{void} *data, Evas\_Object *obj, \textcolor{keywordtype}{void} *ev)
\{
   Evas\_Object *map = data;
   \textcolor{keywordtype}{int} zoom;

   elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
   zoom = elm_map_zoom_get(map);
   elm_map_zoom_set(map, zoom - 1);
\}

\textcolor{keyword}{static} \textcolor{keywordtype}{void}
\_bt\_zoom\_fit(\textcolor{keywordtype}{void} *data, Evas\_Object *obj, \textcolor{keywordtype}{void} *event\_info)
\{
   Evas\_Object *map = data;
   elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_AUTO_FIT);
\}

\textcolor{keyword}{static} \textcolor{keywordtype}{void}
\_bt\_zoom\_fill(\textcolor{keywordtype}{void} *data, Evas\_Object *obj, \textcolor{keywordtype}{void} *event\_info)
\{
   Evas\_Object *map = data;
   elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_AUTO_FILL);
\}

\textcolor{comment}{/* FIXME: it shouldn't be required. For unknown reason map won't call}
\textcolor{comment}{ * pan\_calculate until shot delay time, but then it will take a screenshot}
\textcolor{comment}{ * when the map isn't loaded yet (actually it won't be downloaded, because}
\textcolor{comment}{ * after the SS it will kill the example). */}
\textcolor{keyword}{static} Eina\_Bool
\_nasty\_hack(\textcolor{keywordtype}{void} *data)
\{
   Evas\_Object *o = data;
   Evas *e = evas\_object\_evas\_get(o);
   evas\_smart\_objects\_calculate(e);
   \textcolor{keywordflow}{return} ECORE\_CALLBACK\_CANCEL;
\}

EAPI\_MAIN \textcolor{keywordtype}{int}
elm\_main(\textcolor{keywordtype}{int} argc, \textcolor{keywordtype}{char} **argv)
\{
   Evas\_Object *win, *map, *box, *bt;
   Eina\_List *ovls = NULL;
   Elm\_Map\_Overlay *ovl, *city\_clas, *country\_clas;
   \textcolor{keywordtype}{char} buf[255];

   elm_app_info_set(elm\_main, \textcolor{stringliteral}{"elementary"}, \textcolor{stringliteral}{"images"});
   data\_dir = elm_app_data_dir_get();

   snprintf(buf, \textcolor{keyword}{sizeof}(buf), \textcolor{stringliteral}{"%s/images/rock\_01.jpg"}, \textcolor{stringliteral}{"sdf"});
   data\_argentina.file = strdup(buf);
   snprintf(buf, \textcolor{keyword}{sizeof}(buf), \textcolor{stringliteral}{"%s/images/rock\_02.jpg"}, \textcolor{stringliteral}{"sdf"});
   data\_chile.file = strdup(buf);
   snprintf(buf, \textcolor{keyword}{sizeof}(buf), \textcolor{stringliteral}{"%s/images/sky\_01.jpg"}, \textcolor{stringliteral}{"sdf"});
   data\_sampa.file = strdup(buf);
   snprintf(buf, \textcolor{keyword}{sizeof}(buf), \textcolor{stringliteral}{"%s/images/sky\_02.jpg"}, \textcolor{stringliteral}{"sdf"});
   data\_rio.file = strdup(buf);
   snprintf(buf, \textcolor{keyword}{sizeof}(buf), \textcolor{stringliteral}{"%s/images/sky\_03.jpg"}, \textcolor{stringliteral}{"sdf"});

\end{DoxyCodeInclude}


To return an icon, all we need to do is to add a elm\-\_\-icon and return it\-:  
\begin{DoxyCodeInclude}
\_icon\_get(Evas\_Object *obj, \textcolor{keyword}{const} \textcolor{keywordtype}{char} *file)
\{
   Evas\_Object *icon = elm_icon_add(obj);
   elm_image_file_set(icon, file, NULL);
   evas\_object\_show(icon);
   \textcolor{keywordflow}{return} icon;
\}

\end{DoxyCodeInclude}


For the content, let's return something more elaborate. We will return a box with an image representing the place, and the name of this place\-: 
\begin{DoxyCodeInclude}
\_box\_get(Evas\_Object *obj, Overlay\_Data *data)
\{
   Evas\_Object *bx, *img, *label;
   bx = elm_box_add(obj);
   evas\_object\_show(bx);

   img = evas\_object\_image\_add(evas\_object\_evas\_get(obj));
   evas\_object\_image\_file\_set(img, data->file, NULL);
   evas\_object\_image\_filled\_set(img, EINA\_TRUE);
   evas\_object\_size\_hint\_min\_set(img, 64, 64);
   evas\_object\_show(img);
   elm_box_pack_end(bx, img);

   label = elm_label_add(obj);
   elm\_object\_text\_set(label, data->name);
   evas\_object\_show(label);
   elm_box_pack_end(bx, label);
   \textcolor{keywordflow}{return} bx;
\}

\end{DoxyCodeInclude}


See \hyperlink{map_example_02_8c-example}{map\-\_\-example\-\_\-02.c} for full source, whose window should look like this picture\-:

 
\begin{DoxyImage}
\includegraphics{screenshots/map_example_02}
\caption{width=}
\end{DoxyImage}
 