{"id":154,"date":"2024-08-14T06:46:50","date_gmt":"2024-08-14T06:46:50","guid":{"rendered":"https:\/\/research.binus.ac.id\/geoecoai\/?p=154"},"modified":"2024-08-14T07:52:12","modified_gmt":"2024-08-14T07:52:12","slug":"7-create-search-bar-feature","status":"publish","type":"post","link":"https:\/\/research.binus.ac.id\/geoecoai\/2024\/08\/14\/7-create-search-bar-feature\/","title":{"rendered":"7. Create Search Bar and Print Feature"},"content":{"rendered":"

Tutorial: Implementing a Search Feature with React and Leaflet<\/h3>\n

In this tutorial, we will build a Search<\/strong> component that allows users to search for locations and display the results on a map with a popup containing location information. We will use React, React-Leaflet, and leaflet-geosearch for this component.<\/p>\n

1. Import Required Libraries<\/h4>\n
\n
<\/div>\n
import<\/span> React<\/span>, { useState } from<\/span> \"react\"<\/span>;
\nimport<\/span> { useMap } from<\/span> \"react-leaflet\"<\/span>;
\nimport<\/span> { OpenStreetMapProvider<\/span> } from<\/span> \"leaflet-geosearch\"<\/span>;
\nimport<\/span> L from<\/span> \"leaflet\"<\/span>;
\n<\/code><\/div>\n<\/div>\n

Explanation:<\/strong><\/p>\n

    \n
  • useState<\/code>: React hook for managing local state.<\/li>\n
  • useMap<\/code>: Hook from React-Leaflet to get the map instance.<\/li>\n
  • OpenStreetMapProvider<\/code>: Provider from leaflet-geosearch for geocoding locations based on text.<\/li>\n
  • L<\/code>: Leaflet shorthand for accessing APIs like popup and view settings.<\/li>\n<\/ul>\n

    2. Initialize the Search Component<\/h4>\n
    \n
    <\/div>\n
    const<\/span> Search<\/span> = () => {
    \nconst<\/span> map = useMap<\/span>();
    \nconst<\/span> [searchText, setSearchText] = useState<\/span>(\"\"<\/span>);
    \nconst<\/span> [popup, setPopup] = useState<\/span>(null<\/span>);
    \nconst<\/span> [suggestions, setSuggestions] = useState<\/span>([]);
    \nconst<\/span> [isExpanded, setIsExpanded] = useState<\/span>(false<\/span>);
    \n<\/code><\/div>\n<\/div>\n

    Explanation:<\/strong><\/p>\n

      \n
    • map<\/code>: Gets the map instance from useMap<\/code>.<\/li>\n
    • searchText<\/code>: State to store the user’s search input.<\/li>\n
    • popup<\/code>: State to store the active popup reference on the map.<\/li>\n
    • suggestions<\/code>: State to store location suggestions based on the search text.<\/li>\n
    • isExpanded<\/code>: State to manage the display of the search input field.<\/li>\n<\/ul>\n

      3. Handle Search Input Changes<\/h4>\n
      \n
      <\/div>\n
      const<\/span> handleSearchInputChange<\/span> = (e<\/span>) => {
      \nconst<\/span> userInput = e.target<\/span>.value<\/span>;
      \nsetSearchText<\/span>(userInput);
      \nconst<\/span> provider = new<\/span> OpenStreetMapProvider<\/span>();
      \nprovider
      \n.search<\/span>({ query<\/span>: userInput })
      \n.then<\/span>((results<\/span>) =><\/span> {
      \nconst<\/span> suggestions = results.map<\/span>((result<\/span>) =><\/span> result.label<\/span>);
      \nsetSuggestions<\/span>(suggestions);
      \n})
      \n.catch<\/span>((error<\/span>) =><\/span> {
      \nconsole<\/span>.error<\/span>(\"Error fetching search suggestions:\"<\/span>, error);
      \nsetSuggestions<\/span>([]);
      \n});
      \n};
      \n<\/code><\/div>\n<\/div>\n

      Explanation:<\/strong><\/p>\n

        \n
      • Updates searchText<\/code> whenever the user types.<\/li>\n
      • Uses OpenStreetMapProvider<\/code> to fetch location suggestions based on user input.<\/li>\n
      • Stores the suggestions in the suggestions<\/code> state.<\/li>\n<\/ul>\n

        4. Handle Clicks on Location Suggestions<\/h4>\n
        \n
        const<\/span> handleSuggestionClick<\/span> = (suggestion<\/span>) => {
        \nsetSearchText<\/span>(suggestion);
        \nsetSuggestions<\/span>([]);
        \n};
        \n<\/code><\/div>\n<\/div>\n

        Explanation:<\/strong><\/p>\n

          \n
        • Updates searchText<\/code> when a user selects a suggestion and clears the suggestions list.<\/li>\n<\/ul>\n

          5. Handle Search Form Submission<\/h4>\n
          \n
          <\/div>\n
          const<\/span> handleSearch<\/span> = async<\/span> (e<\/span>) => {
          \ne.preventDefault<\/span>();
          \nif<\/span> (!searchText.trim<\/span>()) return<\/span>;
          \nconst<\/span> provider = new<\/span> OpenStreetMapProvider<\/span>();
          \nconst<\/span> results = await<\/span> provider.search<\/span>({ query<\/span>: searchText });
          \nif<\/span> (results.length<\/span> > 0<\/span>) {
          \nconst<\/span> { x, y, label } = results[0<\/span>];
          \nconst<\/span> latLng = L.latLng<\/span>(y, x);
          \nmap.setView<\/span>(latLng, 10<\/span>);
          \nif<\/span> (popup) {
          \npopup.removeFrom<\/span>(map);
          \n}
          \nconst<\/span> newPopup = L.popup<\/span>()
          \n.setLatLng<\/span>(latLng)
          \n.setContent<\/span>(
          \n`<b>${label}<\/span><\/b><br>Latitude: ${y.toFixed(6<\/span>)}<\/span>, Longitude: ${x.toFixed(6<\/span>)}<\/span>`<\/span>
          \n)
          \n.openOn<\/span>(map);
          \nsetPopup<\/span>(newPopup);
          \n}
          \n};
          \n<\/code><\/div>\n<\/div>\n

          Explanation:<\/strong><\/p>\n

            \n
          • Searches for the location based on the input text when the form is submitted.<\/li>\n
          • If a location is found, updates the map view to the location and displays a popup with location information.<\/li>\n<\/ul>\n

            6. Clear Search Input<\/h4>\n
            \n
            <\/div>\n
            const<\/span> clearInput<\/span> = () => {
            \nsetSearchText<\/span>(''<\/span>);
            \nsetIsExpanded<\/span>(false<\/span>);
            \n};
            \n<\/code><\/div>\n<\/div>\n

            Explanation:<\/strong><\/p>\n

              \n
            • Clears the search input and resets the input field to its default state.<\/li>\n<\/ul>\n

              7. Render the Search Component<\/h4>\n
              \n
              <\/div>\n
              return<\/span> (
              \n<form<\/span> onSubmit<\/span>={handleSearch}<\/span> onMouseEnter<\/span>={()<\/span> =><\/span> setIsExpanded(true)}
              \nonMouseLeave={() => setIsExpanded(searchText !== '')} style={{
              \nposition: \"absolute\",
              \ntop: \"1%\",
              \nleft: \"94%\",
              \ntransform: \"translate(-50%, 0)\",
              \nzIndex: 1000,
              \n}}>
              \n<input<\/span>
              \nclassName<\/span>=\"srch\"<\/span>
              \ntype<\/span>=\"text\"<\/span>
              \nvalue<\/span>={searchText}<\/span>
              \nonChange<\/span>={handleSearchInputChange}<\/span>
              \nlist<\/span>=\"searchSuggestions\"<\/span>
              \nplaceholder<\/span>=\"Search...\"<\/span>
              \nrequired<\/span>
              \n\/><\/span>
              \n<datalist<\/span> id<\/span>=\"searchSuggestions\"<\/span>><\/span>
              \n{suggestions.map((suggestion, index) => (
              \n<option<\/span> key<\/span>={index}<\/span> value<\/span>={suggestion}<\/span> \/><\/span>
              \n))}
              \n<\/datalist<\/span>><\/span>
              \n<button<\/span> type<\/span>=\"submit\"<\/span> className<\/span>=\"fa fa-search\"<\/span>><\/span><\/button<\/span>><\/span>
              \n<a<\/span>
              \nhref<\/span>=\"#\"<\/span>
              \nonClick<\/span>={clearInput}<\/span>
              \nclassName<\/span>={isExpanded<\/span> ? \"clear-link<\/span> visible<\/span>\" :<\/span> \"clear-link<\/span>\"}
              \n><\/span>
              \n\u2715<\/span>
              \n<\/a<\/span>><\/span>
              \n<\/form<\/span>><\/span><\/span>
              \n);
              \n};
              \n<\/code><\/div>\n<\/div>\n

              Explanation:<\/strong><\/p>\n

                \n
              • Creates a search form with a text input, location suggestions, a submit button, and a clear button.<\/li>\n
              • Uses inline CSS to position the form over the map.<\/li>\n<\/ul>\n

                8. Export the Component<\/h4>\n
                \n
                <\/div>\n
                export<\/span> default<\/span> Search<\/span>;
                \n<\/code><\/div>\n<\/div>\n

                Explanation:<\/strong><\/p>\n

                  \n
                • Exports the Search<\/code> component for use in other parts of the application.<\/li>\n<\/ul>\n

                  This tutorial outlines how to build a location search feature using React and Leaflet, including fetching location data, showing suggestions, and updating the map with search results.<\/span><\/p>\n

                  <\/p>\n

                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n

                  Tutorial: Capturing and Printing Map Images with React<\/h3>\n

                  In this tutorial, we’ll create a PrintLayer<\/strong> component that allows users to capture an image of the map and save it as a PNG file. This component uses html-to-image<\/strong> to convert a portion of the application into an image.<\/p>\n

                  1. Import Required Libraries and Components<\/strong><\/h4>\n
                  \n
                  <\/div>\n
                  import<\/span> logo from<\/span> \"..\/Logo\/Printer.png\"<\/span>;
                  \nimport<\/span> { Map<\/span> } from<\/span> \"..\/Map\/Map\"<\/span>;
                  \nimport<\/span> React<\/span>, { useState, useRef, useCallback } from<\/span> \"react\"<\/span>;
                  \nimport<\/span> { toPng } from<\/span> \"html-to-image\"<\/span>;
                  \n<\/code><\/div>\n<\/div>\n

                  Explanation:<\/strong><\/p>\n

                    \n
                  • logo<\/code>: The logo image used for the print button.<\/li>\n
                  • Map<\/code>: The map component that will be captured.<\/li>\n
                  • useState<\/code>, useRef<\/code>, useCallback<\/code>: React hooks for state management, references, and callbacks.<\/li>\n
                  • toPng<\/code>: A function from html-to-image<\/code> to convert HTML elements to PNG images.<\/li>\n<\/ul>\n

                    2. Initialize State and References<\/strong><\/h4>\n
                    \n
                    <\/div>\n
                    export<\/span> const<\/span> PrintLayer<\/span> = () => {
                    \nconst<\/span> [hideComponents, setHideComponents] = useState<\/span>(false<\/span>);
                    \nconst<\/span> [isLoading, setIsLoading] = useState<\/span>(false<\/span>);
                    \nconst<\/span> mapRef = useRef<\/span>();
                    \nconst<\/span> setMapRef = useCallback<\/span>((node<\/span>) =><\/span> {
                    \nif<\/span> (node !== null<\/span>) {
                    \nmapRef.current<\/span> = node;
                    \n}
                    \n}, []);
                    \n<\/code><\/div>\n<\/div>\n

                    Explanation:<\/strong><\/p>\n

                      \n
                    • hideComponents<\/code>: State to hide elements before capturing.<\/li>\n
                    • isLoading<\/code>: State to show a loading message during the capture process.<\/li>\n
                    • mapRef<\/code>: A reference for the map element that will be captured.<\/li>\n
                    • setMapRef<\/code>: A callback to set the map reference.<\/li>\n<\/ul>\n

                      3. Function to Capture Image<\/strong><\/h4>\n
                      \n
                      <\/div>\n
                      const<\/span> handleCapture<\/span> = () => {
                      \nsetHideComponents<\/span>(true<\/span>); \/\/ Hide elements before capture<\/span>
                      \nsetIsLoading<\/span>(true<\/span>); \/\/ Show loading message<\/span>
                      \nsetTimeout<\/span>(() =><\/span> {
                      \nif<\/span> (mapRef.current<\/span> === null<\/span>) {
                      \nreturn<\/span>;
                      \n}
                      \n\/\/ Hide loading message before capture<\/span>
                      \nsetIsLoading<\/span>(false<\/span>);
                      \nsetTimeout<\/span>(() =><\/span> {
                      \ntoPng<\/span>(mapRef.current<\/span>)
                      \n.then<\/span>((dataUrl<\/span>) =><\/span> {
                      \n\/\/ Save as image<\/span>
                      \nconst<\/span> link = document<\/span>.createElement<\/span>(\"a\"<\/span>);
                      \nlink.href<\/span> = dataUrl;
                      \nlink.download<\/span> = \"map.png\"<\/span>;
                      \nlink.click<\/span>();
                      \nsetHideComponents<\/span>(false<\/span>); \/\/ Show elements after capture<\/span>
                      \n})
                      \n.catch<\/span>((error<\/span>) =><\/span> {
                      \nconsole<\/span>.error<\/span>(\"Oops, something went wrong!\"<\/span>, error);
                      \nsetHideComponents<\/span>(false<\/span>); \/\/ Show elements after an error<\/span>
                      \n});
                      \n}, 100<\/span>); \/\/ Short delay to ensure loading message is hidden<\/span>
                      \n}, 1000<\/span>); \/\/ Delay to ensure components are hidden<\/span>
                      \n};
                      \n<\/code><\/div>\n<\/div>\n

                      Explanation:<\/strong><\/p>\n

                        \n
                      • handleCapture<\/code>: Function to hide elements, show the loading message, and capture the map image. The image is then saved as a PNG file and downloaded.<\/li>\n<\/ul>\n

                        4. Function to Trigger Capture<\/strong><\/h4>\n
                        \n
                        <\/div>\n
                        const<\/span> toggleForm<\/span> = () => {
                        \nhandleCapture<\/span>(); \/\/ Immediately capture when the button is clicked<\/span>
                        \n};
                        \n<\/code><\/div>\n<\/div>\n

                        Explanation:<\/strong><\/p>\n

                          \n
                        • toggleForm<\/code>: Function that calls handleCapture<\/code> when the print button is clicked.<\/li>\n<\/ul>\n

                          5. Render the PrintLayer Component<\/strong><\/h4>\n
                          \n
                          <\/div>\n
                          return<\/span> (
                          \n<div<\/span>><\/span>
                          \n<button<\/span>
                          \nstyle<\/span>={{<\/span>
                          \nposition:<\/span> \"absolute<\/span>\",
                          \ntop:<\/span> \"10<\/span>%\",
                          \nright:<\/span> \"28px<\/span>\",
                          \nborder:<\/span> \"3px<\/span> solid<\/span> white<\/span>\",
                          \nbackground:<\/span> \"rgba<\/span>(255<\/span>, 255<\/span>, 255<\/span>)\",
                          \npadding:<\/span> \"20px<\/span>\",
                          \nborderRadius:<\/span> \"100px<\/span>\",
                          \nzIndex:<\/span> 1000<\/span>,
                          \nbackgroundImage:<\/span> `url<\/span>(${logo<\/span>})`,
                          \nbackgroundRepeat:<\/span> \"no-repeat<\/span>\",
                          \nbackgroundSize:<\/span> \"30px<\/span>\",
                          \nbackgroundPosition:<\/span> \"center<\/span>\",
                          \ncursor:<\/span> \"pointer<\/span>\",
                          \ntransition:<\/span> \"transform<\/span> 0.3s<\/span> ease-out<\/span>\",
                          \n}}
                          \nonClick<\/span>={toggleForm}<\/span>
                          \nonMouseEnter<\/span>={(e)<\/span> =><\/span> {
                          \ne.target.style.transform = \"scale(1.1)\";
                          \n}}
                          \nonMouseLeave={(e) => {
                          \ne.target.style.transform = \"scale(1)\";
                          \n}}
                          \n><\/button<\/span>><\/span>
                          \n<div<\/span> ref<\/span>={setMapRef}<\/span> style<\/span>={{<\/span> position:<\/span> \"relative<\/span>\" }}><\/span>
                          \n<Map<\/span> hideComponents<\/span>={hideComponents}<\/span> \/><\/span>
                          \n{isLoading && (
                          \n<div<\/span>
                          \nstyle<\/span>={{<\/span>
                          \nposition:<\/span> \"absolute<\/span>\",
                          \ntop:<\/span> \"50<\/span>%\",
                          \nleft:<\/span> \"50<\/span>%\",
                          \ntransform:<\/span> \"translate<\/span>(-50<\/span>%, -50<\/span>%)\",
                          \nbackground:<\/span> \"rgba<\/span>(255<\/span>, 255<\/span>, 255<\/span>, 0.8<\/span>)\",
                          \npadding:<\/span> \"20px<\/span>\",
                          \nborderRadius:<\/span> \"8px<\/span>\",
                          \nzIndex:<\/span> 1000<\/span>,
                          \n}}
                          \n><\/span>
                          \nLoading...
                          \n<\/div<\/span>><\/span>
                          \n)}
                          \n<\/div<\/span>><\/span>
                          \n<\/div<\/span>><\/span><\/span>
                          \n);
                          \n<\/code><\/div>\n<\/div>\n

                          Explanation:<\/strong><\/p>\n

                            \n
                          • A print button positioned at the top-right corner with hover animation.<\/li>\n
                          • The map area to be captured, with a loading message displayed during the capture process.<\/li>\n<\/ul>\n

                            6. Export the Component<\/strong><\/h4>\n
                            \n
                            <\/div>\n
                            export<\/span> default<\/span> PrintLayer<\/span>;
                            \n<\/code><\/div>\n<\/div>\n

                            Explanation:<\/strong><\/p>\n

                              \n
                            • Exporting the PrintLayer<\/code> component so it can be used elsewhere in the application.<\/li>\n<\/ul>\n
                              \n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n
                              \n
                              \n
                              \n
                              \n
                              \n
                              \n
                              \n
                              \n
                              \n

                               <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n

                              \n","protected":false},"excerpt":{"rendered":"

                              Tutorial: Implementing a Search Feature with React and Leaflet In this tutorial, we will build a Search component that allows users to search for locations and display the results on a map with a popup containing location information. We will use React, React-Leaflet, and leaflet-geosearch for this component. 1. Import Required Libraries import React, { […]<\/p>\n","protected":false},"author":46,"featured_media":179,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-154","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend"],"_links":{"self":[{"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/posts\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":10,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":168,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/posts\/154\/revisions\/168"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/media\/179"}],"wp:attachment":[{"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}