\chapter{Map Example -\/ Creation and Zoom}
\hypertarget{map_example_01}{}\label{map_example_01}\index{Map Example -\/ Creation and Zoom@{Map Example -\/ Creation and Zoom}}
This code places an Elementary map widget on a window, to exemplify part of the widget\textquotesingle{}s API.

Let\textquotesingle{}s start adding a map to our window\+:  
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ map\ =\ \mbox{\hyperlink{group__Elm__Map__Group_ga8f7fccd89ea054fe6e1202fe9a683091}{elm\_map\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(map,\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}},\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Win__Group_ga505d6bd217e5ee01e82b548ec35986eb}{elm\_win\_resize\_object\_add}}(win,\ map);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(map);}

\end{DoxyCodeInclude}
 It\textquotesingle{}s enough to display a world map inside our window. But usually you\textquotesingle{}ll need to let user interact with the map. We need to place some buttons, so the user could control the map. It\textquotesingle{}s done on the following code. If you don\textquotesingle{}t know about boxes, or buttons, check their examples, \doxysectlink{box_example_01}{Box Example 1}{0} and \doxysectlink{button_example_01}{Button Example 1}{0}. 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ box\ =\ \mbox{\hyperlink{group__Elm__Box__Group_ga49ec615c90bf8bead2158d5ffab2e445}{elm\_box\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(box);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ bt\ =\ \mbox{\hyperlink{group__Elm__Button_gaf5caf46d74c4e122a18da323935d25e4}{elm\_button\_add}}(win);}
\DoxyCodeLine{\ \ \ elm\_object\_text\_set(bt,\ \textcolor{stringliteral}{"{}+"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Box__Group_ga66a10dd861578521af2ab7b8c2ca65c5}{elm\_box\_pack\_end}}(box,\ bt);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(bt);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Smart__Object__Group_gac12dd6655f488cc47ce6cf00eb7d12b2}{evas\_object\_smart\_callback\_add}}(bt,\ \textcolor{stringliteral}{"{}clicked"{}},\ \_bt\_zoom\_in,\ map);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ bt\ =\ \mbox{\hyperlink{group__Elm__Button_gaf5caf46d74c4e122a18da323935d25e4}{elm\_button\_add}}(win);}
\DoxyCodeLine{\ \ \ elm\_object\_text\_set(bt,\ \textcolor{stringliteral}{"{}-\/"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Box__Group_ga66a10dd861578521af2ab7b8c2ca65c5}{elm\_box\_pack\_end}}(box,\ bt);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(bt);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Smart__Object__Group_gac12dd6655f488cc47ce6cf00eb7d12b2}{evas\_object\_smart\_callback\_add}}(bt,\ \textcolor{stringliteral}{"{}clicked"{}},\ \_bt\_zoom\_out,\ map);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ bt\ =\ \mbox{\hyperlink{group__Elm__Button_gaf5caf46d74c4e122a18da323935d25e4}{elm\_button\_add}}(win);}
\DoxyCodeLine{\ \ \ elm\_object\_text\_set(bt,\ \textcolor{stringliteral}{"{}X"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Box__Group_ga66a10dd861578521af2ab7b8c2ca65c5}{elm\_box\_pack\_end}}(box,\ bt);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(bt);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Smart__Object__Group_gac12dd6655f488cc47ce6cf00eb7d12b2}{evas\_object\_smart\_callback\_add}}(bt,\ \textcolor{stringliteral}{"{}clicked"{}},\ \_bt\_zoom\_fit,\ map);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ bt\ =\ \mbox{\hyperlink{group__Elm__Button_gaf5caf46d74c4e122a18da323935d25e4}{elm\_button\_add}}(win);}
\DoxyCodeLine{\ \ \ elm\_object\_text\_set(bt,\ \textcolor{stringliteral}{"{}\#"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Box__Group_ga66a10dd861578521af2ab7b8c2ca65c5}{elm\_box\_pack\_end}}(box,\ bt);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(bt);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Smart__Object__Group_gac12dd6655f488cc47ce6cf00eb7d12b2}{evas\_object\_smart\_callback\_add}}(bt,\ \textcolor{stringliteral}{"{}clicked"{}},\ \_bt\_zoom\_fill,\ map);}

\end{DoxyCodeInclude}
 We are adding callback functions that will be called when the user clicks over these buttons. Let\textquotesingle{}s study such functions, starting from the function that will zoom in the map\+:  
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_bt\_zoom\_in(\textcolor{keywordtype}{void}\ *data,\ Evas\_Object\ *obj\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}},\ \textcolor{keywordtype}{void}\ *ev\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}})}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \textcolor{keywordtype}{int}\ zoom;}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Map__Group_gaacec2a1019adf71a9b7e3b5fa011c90e}{elm\_map\_zoom\_mode\_set}}(data,\ \mbox{\hyperlink{group__Elm__Map__Group_ggae60f2343c0e098264c246d7e2679abe5a35d8c2519926ab59a7bd5835739cd9b7}{ELM\_MAP\_ZOOM\_MODE\_MANUAL}});}
\DoxyCodeLine{\ \ \ zoom\ =\ \mbox{\hyperlink{group__Elm__Map__Group_ga8e5d0739948105e07d77a00013831f6c}{elm\_map\_zoom\_get}}(data);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Map__Group_ga6869a7b99657ee01b0ee19c68c47fc0a}{elm\_map\_zoom\_set}}(data,\ zoom\ +\ 1);}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 First thing done is assure zoom mode is set to manual. It\textquotesingle{}s the default mode, but the other buttons will change this, so before setting a new zoom value, we need to change the zoom mode.

Then, we get the current zoom value, increment that, and set the new value to the map. If it\textquotesingle{}s bigger than max zoom value allowed, it will remain on the maximum allowed, nothing bad will happen. This way we don\textquotesingle{}t need to check first if it won\textquotesingle{}t be bigger than max.

Zoom out function is basically the same thing, but zoom will be decremented instead of incremented\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_bt\_zoom\_out(\textcolor{keywordtype}{void}\ *data,\ Evas\_Object\ *obj\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}},\ \textcolor{keywordtype}{void}\ *ev\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}})}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \textcolor{keywordtype}{int}\ zoom;}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Map__Group_gaacec2a1019adf71a9b7e3b5fa011c90e}{elm\_map\_zoom\_mode\_set}}(data,\ \mbox{\hyperlink{group__Elm__Map__Group_ggae60f2343c0e098264c246d7e2679abe5a35d8c2519926ab59a7bd5835739cd9b7}{ELM\_MAP\_ZOOM\_MODE\_MANUAL}});}
\DoxyCodeLine{\ \ \ zoom\ =\ \mbox{\hyperlink{group__Elm__Map__Group_ga8e5d0739948105e07d77a00013831f6c}{elm\_map\_zoom\_get}}(data);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Map__Group_ga6869a7b99657ee01b0ee19c68c47fc0a}{elm\_map\_zoom\_set}}(data,\ zoom\ -\/\ 1);}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 The "{}\+X"{} button, when pressed, will call a function that will zoom the map until it fits inside the scroll frame with no pixels outside this area\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_bt\_zoom\_fit(\textcolor{keywordtype}{void}\ *data,\ Evas\_Object\ *obj\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}},\ \textcolor{keywordtype}{void}\ *event\_info\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}})}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Map__Group_gaacec2a1019adf71a9b7e3b5fa011c90e}{elm\_map\_zoom\_mode\_set}}(data,\ \mbox{\hyperlink{group__Elm__Map__Group_ggae60f2343c0e098264c246d7e2679abe5a2146e83a3cb0809732a6643a765b6e21}{ELM\_MAP\_ZOOM\_MODE\_AUTO\_FIT}});}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 And the "{}\#"{} button, will call a function that will zoom until map fills scroll, ensuring no pixels are left unfilled\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_bt\_zoom\_fill(\textcolor{keywordtype}{void}\ *data,\ Evas\_Object\ *obj\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}},\ \textcolor{keywordtype}{void}\ *event\_info\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}})}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Map__Group_gaacec2a1019adf71a9b7e3b5fa011c90e}{elm\_map\_zoom\_mode\_set}}(data,\ \mbox{\hyperlink{group__Elm__Map__Group_ggae60f2343c0e098264c246d7e2679abe5a380228deffe851d3598cd2b0e22948ad}{ELM\_MAP\_ZOOM\_MODE\_AUTO\_FILL}});}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 But we can also set map to show something different from default world map, changing the zoom level and region shown. Let\textquotesingle{}s pick a wonderful city coordinates, one placed at {\ttfamily  43 20 S, 22 90 W }. Since map uses double variables to represent latitude and longitude, to represent north or east, we should represent it as positive values, and south or west as negative. Also, the value will be represented as degree.\+min. So, for example, our longitude {\ttfamily  43 20 S } will be represented by the value {\ttfamily  -\/43.\+20 }. A zoom set to {\ttfamily 12} should be enough to show a city. 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Map__Group_gac18d4869797cf49e4fa2e50a3de592f3}{elm\_map\_region\_show}}(map,\ -\/43.2,\ -\/22.9);}

\end{DoxyCodeInclude}
 See \doxylink{map_example_01_8c-example}{map\+\_\+example\+\_\+01.c} for full source, whose window should look like this picture\+:

 
\begin{DoxyImageNoCaption}
  \mbox{\includegraphics[width=\textwidth]{screenshots/map_example_01}}
\end{DoxyImageNoCaption}
 