Research article Special Issues

Utilizing MapBox API, Java, and ICT in the creation of agricultural interactive maps for improved farm management and decision-making

  • Agriculture's sustainability is a subject of concern, and digital farming technology has been proposed to solve this problem. The digital revolution is transforming agriculture by utilizing modern equipment, computerized tools, and information and communication technology (ICT) to improve decision-making and productivity. Digital farming technology enables even inexperienced farmers to apply such techniques by using the IoT and AI to collect and analyze data from their farming practices and the surrounding environment to improve productivity. The versatile mapping platform Mapbox is utilized to construct the map, which allows for custom data layer integration and interactive features. Backend development is performed using the Java programming language, which facilitates seamless data processing, storage, and retrieval. The interactive map allows for dynamic overlays of crucial information, such as plot numbers, measurements, crop details, crop health assessments, NDVI, RGB, and DEM. The study involved data collection, analysis of the data, and thematic layer development using GIS to create interactive maps. In this research, two sets of DJI drones, Agisoft Metashape software, QGIS, and Mapbox were used to collect and prepare the data for the interactive map. The data was used to create the results, which were web maps that had several interactive features, such as "display popup on hover, " "swipe between maps, " and "change a map's style." The result was a thematic layer of information such as RGB, NDVI, DEM, and other field information. This research demonstrated the benefits and applicability of information technology for digital transformation in agriculture under the DX Project launched at Niigata University, Japan. This aids in the goal of producing interactive agricultural maps based on map classification, content element analysis, the development of GIS capabilities, and remote sensing data.

    Citation: Ayomikun D. Ajayi, Boris Boiarskii, Kouya Aoyagi, Hideo Hasegawa. Utilizing MapBox API, Java, and ICT in the creation of agricultural interactive maps for improved farm management and decision-making[J]. AIMS Agriculture and Food, 2024, 9(2): 393-410. doi: 10.3934/agrfood.2024023

    Related Papers:

    [1] Mohamad Harisudin, Kusnandar, Erlyna W. Riptanti, Nuning Setyowati, Isti Khomah . Determinants of the Internet of Things adoption by millennial farmers. AIMS Agriculture and Food, 2023, 8(2): 329-342. doi: 10.3934/agrfood.2023018
    [2] Edwin Collado, Anibal Fossatti, Yessica Saez . Smart farming: A potential solution towards a modern and sustainable agriculture in Panama. AIMS Agriculture and Food, 2019, 4(2): 266-284. doi: 10.3934/agrfood.2019.2.266
    [3] Danar Praseptiangga, Jessica M. Guevara Zambrano, Adhitya Pitara Sanjaya, Dimas Rahadian Aji Muhammad . Challenges in the development of the cocoa and chocolate industry in Indonesia: A case study in Madiun, East Java. AIMS Agriculture and Food, 2020, 5(4): 920-937. doi: 10.3934/agrfood.2020.4.920
    [4] Jahanara Akter, Sadia Islam Nilima, Rakibul Hasan, Anamika Tiwari, Md Wali Ullah, Md Kamruzzaman . Artificial intelligence on the agro-industry in the United States of America. AIMS Agriculture and Food, 2024, 9(4): 959-979. doi: 10.3934/agrfood.2024052
    [5] Macire Kante, Robert Oboko, Christopher Chepken . Factors affecting the use of ICTs on agricultural input information by farmers in developing countries. AIMS Agriculture and Food, 2016, 1(3): 315-329. doi: 10.3934/agrfood.2016.3.315
    [6] Robert Ugochukwu Onyeneke, Chinyere Augusta Nwajiuba, Chukwuemeka Chinonso Emenekwe, Anurika Nwajiuba, Chinenye Judith Onyeneke, Precious Ohalete, Uwazie Iyke Uwazie . Climate change adaptation in Nigerian agricultural sector: A systematic review and resilience check of adaptation measures. AIMS Agriculture and Food, 2019, 4(4): 967-1006. doi: 10.3934/agrfood.2019.4.967
    [7] Firoz Ahmad, Laxmi Goparaju, Abdul Qayum . Agroforestry suitability analysis based upon nutrient availability mapping: a GIS based suitability mapping. AIMS Agriculture and Food, 2017, 2(2): 201-220. doi: 10.3934/agrfood.2017.2.201
    [8] Boris Boincean, Amir Kassam, Gottlieb Basch, Don Reicosky, Emilio Gonzalez, Tony Reynolds, Marina Ilusca, Marin Cebotari, Grigore Rusnac, Vadim Cuzeac, Lidia Bulat, Dorian Pasat, Stanislav Stadnic, Sergiu Gavrilas, Ion Boaghii . Towards Conservation Agriculture systems in Moldova. AIMS Agriculture and Food, 2016, 1(4): 369-386. doi: 10.3934/agrfood.2016.4.369
    [9] Romanus Osabohien, Oluwatoyin Matthew, Isaiah Olurinola, Busayo Aderounmu . Agricultural transformation, youth participation and food security in Nigeria. AIMS Agriculture and Food, 2020, 5(4): 911-919. doi: 10.3934/agrfood.2020.4.911
    [10] Felice Adinolfi, Yari Vecchio, Margherita Masi, Giada Mastandrea, Gianmarco Lambertini, Paolo De Castro . The reform of EU geographical indications: A look at the newly approved Regulation. AIMS Agriculture and Food, 2024, 9(2): 693-698. doi: 10.3934/agrfood.2024037
  • Agriculture's sustainability is a subject of concern, and digital farming technology has been proposed to solve this problem. The digital revolution is transforming agriculture by utilizing modern equipment, computerized tools, and information and communication technology (ICT) to improve decision-making and productivity. Digital farming technology enables even inexperienced farmers to apply such techniques by using the IoT and AI to collect and analyze data from their farming practices and the surrounding environment to improve productivity. The versatile mapping platform Mapbox is utilized to construct the map, which allows for custom data layer integration and interactive features. Backend development is performed using the Java programming language, which facilitates seamless data processing, storage, and retrieval. The interactive map allows for dynamic overlays of crucial information, such as plot numbers, measurements, crop details, crop health assessments, NDVI, RGB, and DEM. The study involved data collection, analysis of the data, and thematic layer development using GIS to create interactive maps. In this research, two sets of DJI drones, Agisoft Metashape software, QGIS, and Mapbox were used to collect and prepare the data for the interactive map. The data was used to create the results, which were web maps that had several interactive features, such as "display popup on hover, " "swipe between maps, " and "change a map's style." The result was a thematic layer of information such as RGB, NDVI, DEM, and other field information. This research demonstrated the benefits and applicability of information technology for digital transformation in agriculture under the DX Project launched at Niigata University, Japan. This aids in the goal of producing interactive agricultural maps based on map classification, content element analysis, the development of GIS capabilities, and remote sensing data.



    Maps are an integral part of science, and without them, science would not be possible [1]. Maps play an important role as information support in solving problems in the field of agriculture [2,3]. The mapping of agricultural land aimed at developing effective methods of data visualization and electronic mapping is an important scientific and practical issue in the agricultural sector [4,5]. Interactive mapping is expanding and gaining recognition, which is widely adopted [6,7,8]. Moreover, exploring this map-based approach yields better learning effects, supports productivity, and offers better understanding and user experience toward achieving a goal [9]. The need for maps to navigate web resources is necessary to develop effective ways to visualize, classify, represent, and communicate spatial information, which are complex to be seen directly [6,10]. The dialog between a human and a map, mediated through a computing device, is defined as interactions from a cartographic perspective, which is necessary for researching geo-visualization and geo-visual analytics [11,12].

    Through the Internet, the user has access to data and can use maps [13]. There are different open/big data and online mapping software, which creates the opportunity for interactive mapping in the agricultural sector [12,14,15]. Smith [6] reviewed tools and workflows to produce online research mapping platforms alongside a classification of the interactive functionality that can be achieved. ICT tools, like sensors and weather stations, can be integrated with interactive maps to provide real-time data visualization for farmers [16]. This helps with precision agriculture practices such as targeted irrigation and variable rate fertilization, leading to optimal yield and resource use [17]. The technology can also foster knowledge sharing and collaboration among farmers, promoting innovation and best practices in the agricultural community.

    Furthermore, in the mapping of agricultural sectors, cartography is important in conducting research, which is aimed at digital transformation through data visualization and electronic mapping [2]. This is based on data collection, storage, analysis, processing, evaluation, and creation of geodata using geographic information systems and technologies [7]. The use of GIS systems upgrades the technology of precision farming, which is also aimed at digitalizing the agricultural sector [18]. There are many factors that change agricultural sectors and land resources, and this makes it important to study the geographical data on agriculture to create a regional agro-geological database in the visualization of data. Statistical, cartographic, and remote sensing (RS) data are used in the creation of electronic maps of agriculture and agro-geo databases [7]. One particularly valuable RS tool is the Normalized Difference Vegetation Index (NDVI). This index leverages the spectral reflectance properties of vegetation, allowing researchers and professionals to monitor vegetation health, biomass production, and land cover changes [19]. By adding NDVI data into the agro-geological database, users can gain deeper insights into sustainable agricultural practices and informed farm management decisions [4].

    There are several ways to create an interactive map, depending on user needs and technical skills. Several online platforms allow users to create an interactive map using a map creation platform [20]. Some popular options include Google Maps API, Leaflet, and MapBox [14,21]. MapBox API offers customizable and interactive maps with data visualization layers, custom markers, and real-time updates. It also allows offline map usage, which is crucial for rural agricultural settings. MapBox is open source, providing greater flexibility and customization compared to other mapping platforms [22]. This is why we aimed to leverage the MapBox API. Web maps are usually an interactive display of geographical information. The description "interactive" suggests that the map viewer can engage with it. A viewer can do this by choosing which map data layers or features to see, zooming in on a specific area of the map that interests you, looking at feature characteristics, updating currently existing material, or adding new content [23]. This interactive display can be useful in agriculture, and these features can be built with JavaScript [24]. Java is known for its stability, performance, and ability to handle large datasets, making it suitable for complex agricultural data management and analysis [25]. Java applications can run on various operating systems, ensuring wider accessibility for farmers using different devices [26].

    Several articles focus on software-dependent or independent interactive electronic maps which are created using ArcGIS, MapInfo, GlobalMapper, MapGPS, Gisware, World Maps, and other cartographic software which mainly belong to the GIS family [2,8,12,14,15,21]. The previous studies on interactive mapping showed the application of interactive maps in bivariate geographic data [27,28], open-source interactive maps [29], and line placement algorithms for interactive 3D maps [30].

    The integration of MapBox API, Java development, and ICT can be utilized to create interactive agricultural maps. This approach is quite promising and novel as it can help improve farm management and decision-making, especially considering the relatively limited existing research on this topic. Its customization potential, real-time data integration, and wider application within the agricultural sector make it a valuable area that can be further explored and developed. While agricultural mapping exists [31,32,33,34], this study specifically targets the application of MapBox, and Java towards farm management and decision support, offering a unique value proposition for farmers. This proposition provides customized integration [35] with farm data and user-friendly HTML-based maps for easy access to crucial information from any device. This empowers farmers to monitor their crops effectively and make timely decisions, regardless of their location. The approach can be adapted to different agricultural contexts and farming practices, making it potentially generalizable and impactful beyond a specific region or crop type.

    We introduce interactive mapping technology under the project "Driving Industry DX—Project for Developing Expert Human Resources to Harness Digital and Specialized Fields", which is the basis of this study for Digital Transformation in Agriculture. Our objective of this article is in a bid to digitalize agriculture by creating a technological system of mapping agricultural fields. This paper described the creation of an interactive map of Niigata University's experimental field using MapBox API and Java. The article is divided into 5 sections. Section 1 discusses the role of maps in agriculture and the significance of interactive mapping. Section 2 discusses the workflow and tools used to create the interactive maps. Section 3 presents our results, showcasing the interactive features and benefits of the maps. Section 4 analyzes the outcomes, compares them with existing literature, and highlights the advantages of interactive maps in agriculture. Finally, section 5 combines the key findings and discusses their broader implications.

    The experimental site is in Niigata Prefecture, Japan, on the main island of Honshu, about 340 km northwest of Tokyo, which is represented in Figure 1. The site belongs to Niigata University and located in Muramatsu city of Niigata Prefecture. The farmstead (latitude 37.690194 and longitude 139.194631) is a 19-hectare of crops, grassland, vegetables, forest area, facilities, and administrative buildings.

    Figure 1.  Location of the Niigata University's farmland in Japan, Niigata Prefecture, Muramatsu city. The farm map was obtained by drone; the mini-map is the location of the study site on the Japanese archipelago used by Google service. The map was created in QGIS, free, open-source GIS software.

    Niigata Prefecture is one of the prefectures where the agriculture, forestry, and fisheries industries are rich, surrounded by vast land and abundant water. Niigata Prefecture has the highest production value of rice in Japan, and Koshihikari rice is especially famous nationwide.

    The workflow scheme is presented in figure 2. The interactive map dataset consists of images acquired by UAV DJI Matrice 100 manufactured in China, with a Micasense RedEdge camera on the board. The RedEdge camera has a total of five spectral bands, such as red at 668 nm, green at 560 nm, blue at 475 nm, near-infrared (NIR) at 840 nm, and red edge at 717 nm [19]. This comprehensive set of bands enables users to achieve highly accurate and detailed imagery, making the RedEdge camera a valuable tool in academic and business settings alike. The flight preparation was performed by DJIFlightPlanner software and uploaded to a smartphone through the cloud service Mission Hub. We used Agisoft Metashape for photo alignment by matching features found in overlapping regions of the images. These images with distinct geolocations facilitated the production of a point cloud (3D points). From this point cloud, an orthophoto plan and a digital elevation model (DEM) were created [36]. The camera's focal size is 5.5 x 4.8 mm, while the ground sampling distance (GSD) obtained from the 80 meters altitude flight was 5.3 cm per pixel.

    Figure 2.  Workflow for data mining and interactive map creation for Niigata University's farmland, Niigata, Japan.

    Next, an accurate orthophoto mosaic of the surveyed area was generated. The obtained orthophoto map, exported as a TIFF (Tagged image file format) image, consists of GPS metadata and bands reflectance information, which are 5 (Red, Green, Blue, Infrared, and Rededge) provided by the camera. The following bands are necessary to make vegetation index maps, such as NDVI (Normalized difference vegetation index) [37]. TIFF is a tag-based file format known for the storage and interchange of raster images. In digital imaging projects, it is a common format to apply as a sustainable standard since it serves as a folder for many different encoded bit-mapped pictures [38].

    The next step is processing the orthophoto map in the QGIS (open-source GIS software) for vegetation index calculation from equation 1 [19,39]. In this step, separated rendered TIFF image files for vegetation and true color layers were prepared. The files are then uploaded into MapBox studio using tilesets and style features to design maps that are used as MapBox API in JavaScript.

    NDVI=IRREDIR+RED (1)

    JavaScript is a programming language that is mostly used to control interactive behavior in web pages. To make a map interactive, most websites automatically send JavaScript code to the browser. When the page loads and/or afterward, when the user interacts with the website, the browser executes the JavaScript code. The content of the page can be changed by the JavaScript code. JavaScript, along with HTML and CSS, is one of the three core web technologies. JavaScript determines the interactive behavior of the map while CSS determines the presentation style [24]. Users can use several platforms, such as QGIS, and MapBox to build HTML, CSS, and JavaScript code, with different levels of adaptability and customization [40]. HTML, CSS, JavaScript, and GeoJSON files, among many other established technologies, are common software in the field of web mapping and are very much in use today. HTML is the most basic and fundamental component of web technologies. HTML determines the content of the map/page. In this study, data was stored in a plain text file with the.html file extension to encode the contents and structure of the interactive maps [41]. This enables a user to visualize images on the screen when the corresponding HTML file for each web page is sent and decoded while using the browser. When the web browser interprets the HTML and CSS code to produce the page you see, the map made is activated [24].

    A GeoJSON file was created using the QGIS polygon draw tool based on the farmland scheme with fields and crop information for interactive purposes. The GeoJSON file was uploaded through GitHub's Gist tool. Gist is a feature of GitHub that allows users to share code, notes, and other short text-based items [42]. Gists were created and stored in a public manner. The study used GeoJSON to encode vector geographical data structures for mapping. In order to express the layout and structure of geographic features, their characteristics, and their area, the GeoJSON format defines a number of different sorts of JSON objects [14,28].

    In this study, MapBox GL JS was used for interactive map creation. The MapBox Gl stands for Open GL library and helps render interactive maps. MapBox Js is JavaScript library for vector maps on the web and real-time styling and interactivity features [22,43]. The CSS file is required to display the map elements like popups, menus, and markers [44]. In this study, the JSFiddle code playground, which is an online IDE service, is designed to allow users to edit and run HTML, JavaScript, and CSS code on a single page [45,46].

    Prior to creating a map, an access token from MapBox was required. This token allows users to access MapBox's resources and add them to a website. Using code, a map was defined with properties, such as zoom level, center point, and initial view. In this example, we used custom styling from MapBox's user's account. Geospatial data for the field information and border, such as a GeoJSON file, was retrieved. The map.on('load') function is called when the map has finished loading:

         map.on('load', () = > {        1

    Within the function, the map.addSource() method is used to add a GeoJSON source and the map.addLayer() method is used to add a layer for the GeoJSON source:

         map.addSource('places', {        2

         'type': 'geojson',        3

         'data':        4

         'https://gist.githubusercontent.com/Borissensei/3ffbdd79ca48ece4dd9a53fba8370d0b/raw/150d097c965fa3101b1f1d279aa057bf08a202c0/muramatsu.geojson' });        5

    The style option is used to specify the fill color and opacity for the layer. Two layers were used to highlight borders('state-borders') and area('state-fills'). In this context, the state-fills and state-borders layers are layers that are used to display the boundaries of regions on the map:

         map.addLayer({         6

         'id': 'state-fills',        7

         'type': 'fill',         8

         'source': 'places',         9

         'paint': {'fill-color': '#627BC1', 'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 0.4, 0]}});        10

         map.addLayer({        11

         'id': 'state-borders',        12

         'type': 'line',        13

         'source': 'places',        14

         'layout': {},        15

         'paint': {'line-color': '#627BC1', 'line-width': 2 }});        16

    The layers used data from a GeoJSON file to define the boundaries of the regions [22]. The layer may also include other information about the regions, such as the area's name and description, that was used in this study.

    The Figure 3 demonstrates the effect of the display popup on mouse hover, detailing the information on the experimental field, such as plot numbers, measurements, crop information, and scheduling of tests on the plots. This study finds that with the "display pop up on hover" effect, farmers can facilitate the data of a farm field using the backend developer in creating interactive maps.

    Figure 3.  Interactive map with "display popup on hover" associated with field information at Muramatsu station of Niigata University, Niigata, Japan. Farmland images were taken by drone of the Laboratory for Bioproduction and Machinery, Niigata University.

    The choice of Java is crucial for handling the vast amounts of data generated by tools such as drones, ensuring that farmers can access and utilize the information seamlessly. The initial concept, while valuable in offering data exploration via interactive maps, can be significantly enhanced by leveraging Java's strengths [43]. Initially, its ability to manage vast data volumes from IoT devices and drones can be exploited to create real-time, interactive data dashboards. The system could be further expanded to allow secure data and insight sharing among farmers within a region or community. This fosters collaboration, knowledge sharing, and collective decision-making for improved agricultural practices, resource management, and increased agricultural success. By utilizing Java's versatility beyond the initial "display pop up on hover" functionality, this agricultural decision support system can evolve into a powerful tool, empowering farmers with data-driven insights to optimize their practices and achieve agricultural development toward digital transformation.

    We utilized Java to interact with MapBox styles and GeoJSON files, aiming to create an interactive map experience. This involved leveraging Java's strengths in handling complex data structures and its ability to integrate with various libraries. The initial focus was on enabling users to explore the map and gain basic information about specific features. This is where the current code snippet comes into play, taking the user experience a step further. The code sets up an event listener for the 'mousemove' event on the map object using the 'map.on' method. The event listener is scoped to the state-fills layer, so it will only trigger when the mouse moves over features in that layer:

        map.on('mousemove', 'state-fills', (e) = > {       17

        // Change the cursor style as a UI indicator.       18

        map.getCanvas().style.cursor = 'pointer';        19

        const coordinates = e.features[0].geometry.coordinates.slice();        20

        const description = e.features[0].properties.description;       21

        popup.setLngLat(e.lngLat).setHTML(description).addTo(map); });        22

    This event object contained information about the mouse event, such as the mouse coordinates and the feature under the mouse when the event occurred. The event listener is used to update the appearance of a map to provide visual feedback to the user when they move their mouse over different fields on the map. When the mouse moves over a feature in the state-fills layer, the code updates the map's appearance by setting the hover state of the hovered feature to true and the hover state of the previously hovered feature to false [22]:

        map.on('mousemove', 'state-fills', (e) = >        23

        {if (e.features.length > 0) {if (hoveredStateId! = = null)        24

        {map.setFeatureState({source: 'places', id: hoveredStateId}, {hover: false}); }        25

        hoveredStateId = e.features[0].id;        26

        map.setFeatureState({: 'places',        27

        id: hoveredStateId},        28

        {hover: true}); }});        29

    This map represents the basis for management and field work planning. The generated QR code grants access to the link of the webpage showing the experimental fields and information. When a QR code is scanned using a smartphone camera or a QR code reader app, it instantly redirects the user to the webpage that displays the examples referred to in the paper. This eliminates the need for the manual process of searching or typing the web address, saving a significant amount of time and effort for the reader. This technology has made it convenient and efficient for readers to access information on-the-go, and has become increasingly popular in recent years due to its ability to streamline the process of accessing online content [47,48].

    Under the elements of the webpage, the script content can be viewed for the reader's reference and accessed by a link in the supplementary materials. The script content is not directly embedded within the paper but can be accessed through a link. JSFiddle links have been included in the data availability section for those seeking to replicate the same techniques.

    The following example builds upon the preliminary interactive features and introduces a visual comparison element by utilizing a swipe effect. This technique feature allows for a more intuitive examination of differences between two maps, enhancing the capacity for analysis and understanding. The swipe effect style displays a comparison between two maps to demonstrate a brief visualization of different maps, as shown in Figure 4. The swipe effect is a container that functions as a variable to store a reference to an HTML element in a web page, resulting in an interactive experience. The value assigned to a container is a string that specifies the ID of the HTML element:

    Figure 4.  "Swipe between maps" effect for Niigata University's Muramatsu station of NDVI and RGB layers. Data was taken by drone of the Laboratory for Bioproduction and Machinery, Niigata University, and processed by authors.

        <div id="comparison-container" > 30

        <div id="before" class="map" > </div> 31

        <div id="after" class="map" > </div> 32

        </div> 33

    The 'mapboxgl.Compare' class is used to display two maps side-by-side and allow to compare changes between the two maps. The 'beforeMap' is a MapBox GL map instance that represents the "before" map. This map is displayed on the left side of the comparison view:

        const beforeMap = new mapboxgl.Map({        34

        container: 'before',        35

        style: 'mapbox://styles/borisbo/cl6d8o5ti001614pgli31pli2',        36

        center: [139.193362, 37.692834],        37

        zoom: 15.98});        38

    The 'afterMap' is a MapBox GL map instance that represents the "after" map [22]. This map is displayed on the right side of the comparison view:

        const afterMap = new mapboxgl.Map({        35

        container: 'after',         36

        style: 'mapbox://styles/borisbo/cjkoylmsh348l2so6p5ykf7nw',        37

        center: [139.193362, 37.692834],         38

        zoom: 15.98});        39

    In this study, two layers (NDVI and RGB) on one base map were compared. This shows the chlorophyll content on the field before and after the analysis of the NDVI. By comparing RGB and NDVI on a map, users can see the differences in how the same area of land is represented by each method. For example, an area with dense vegetation might appear green in RGB, but have a high NDVI value, indicating that it is a healthy and productive area of land. On the other hand, an area with little or no vegetation might appear brown in RGB and have a low NDVI value [19,39]. Overall, the comparison of RGB and NDVI on a map can help provide a more comprehensive understanding of the land cover and vegetation characteristics of a specific area. By combining the strengths of both techniques, users can gain a more complete picture of the landscape and better understand the relationship between vegetation and the environment [49]. The farmers can briefly identify soil characteristics which also help in the management of a farm. In cases of crop monitoring, this can be helpful when determining crop damage caused by pests, diseases, or the environment. The QR code equally grants access to the information on the NDVI and RGB layers.

    Figure 5 demonstrates a template showing layers of NDVI, DEM (Digital elevation model), and True color base map. This shows a highly interactive description of the experimental field with high-quality visuals to support the content. Thus, by toggling the visibility of different layers based on the user's interaction with the input elements, the farmer can visualize crucial information such as analysis of the vegetation index, and a DEM on a base map. With this technology, smallholder farmers can be empowered by making digital tools accessible even to inexperienced farmers, to improve efficiency and productivity in their agricultural practices.

    Figure 5.  Interactive map with "change a map's style" effect for Niigata University's Muramatsu station of NDVI and RGB layers. Data was taken by drone of the Laboratory for Bioproduction and Machinery, Niigata University and processed by authors.

    Users can use these inputs to control the visibility of different layers on the map, for example, by toggling the visibility of different layers based on the user's interaction with the input elements in the "menu" that is specified by HTML:

        <div id="menu" >        40

        <input id="cjkoylmsh348l2so6p5ykf7nw" type="radio" name="rtoggle" checked="checked" >        41

        <label for="cjkoylmsh348l2so6p5ykf7nw" > True color < /label >        42

        <input id="cl6d8o5ti001614pgli31pli2" type="radio" name="rtoggle" value="light" >         43

        <label for="cl6d8o5ti001614pgli31pli2" > NDVI < /label >        44

        <input id="cl6echusk000114lcqcft6scm" type="radio" name="rtoggle" value="light" >         45

        <label for="cl6echusk000114lcqcft6scm" > DEM < /label >        46

        </div>         47

    When an input is clicked, the click event listener is triggered, and the layer variable is set to the event target:

        const layerList = document.getElementById('menu');         48

        const inputs = layerList.getElementsByTagName('input');        49

        for (const input of inputs) {        50

        input.onclick = (layer) = > {        51

        const layerId = layer.target.id;         52

        map.setStyle('mapbox://styles/borisbo/' + layerId); };}         53

    The code then uses the target.id property of the event target to get the ID of the clicked input. This ID is used to build the URL of the MapBox style that will be set for the map [22].

    The results presented the integration of MapBox and Java in creating interactive maps as a means of digital transformation. We demonstrate the use of ICT tools in the context of smart farming technology and how it can significantly enhance farmers' interpretation of their fields. The integration of MapBox and Java allows farmers to access more accurate and detailed information about the fields referred to GeoJSON files and different layer data. This approach holds considerable potential for transforming the agricultural sector, enabling it to keep pace with the ever-evolving technological landscape and delivering improved outcomes in terms of yields, efficiency, and sustainability.

    In smart farming technology and in a bid to digitalize agriculture, the cartographic study of agriculture can be a very important interpretation of farm fields for farmers. Interactive mapping is considered one of the digital tools that are gaining popularity in the agricultural sector as it moves towards digital farming [14,15]. One of the major advantages of interactive maps is their ability to integrate and display a large amount of data in an easy-to-use and accessible format, providing an efficient way to make informed decisions [7,8]. The creation of a map involves the synthesis of design and data, balancing context, color, readability, and accuracy. The goal of a well-designed map is to promote exploration while preserving ease of understanding [21]. One popular application of interactive maps in agriculture is the use of remote sensing data to monitor crops and soil conditions. Remote sensing technology, such as satellite and aerial imagery, can provide farmers with valuable information on crop growth and health, soil moisture levels, and other parameters that affect crop production [4,50,51,52]. This information can then be integrated into interactive maps, allowing farmers to identify areas that need attention and make informed decisions about fertilization, irrigation, and pest management.

    The article [53] highlights the latest applications of Big Data in smart agriculture, which include the creation of data, accessibility of technology and devices, software tools, data analytic methods, and pertinent applications of Big Data in precision agriculture. However, the integration of MapBox API, Java development, and ICT in agriculture faces limitations in its widespread adoption due to a lack of research. Thus, we aim to bridge this gap by utilizing the integration of MapBox API, Java development [35], and ICT to create interactive maps that can enhance farm management and decision-making.

    Within the limited number of studies conducted, some have explored the development and testing of a software framework specifically designed to provide in-field farm data to users via mobile devices [34,54]. The framework aims to optimize farm management and decision-making processes by leveraging advanced technological capabilities. However, we provide a more comprehensive overview of digital transformation in agriculture and showcase a more practical application of technology in agriculture.

    The technological system of interactive field mapping requires a comprehensive study of the development and use of various spatial dimensions and cartographic materials based on remote sensing data. This method allows us to study, analyze, and demonstrate access to the most up-to-date information and specialized tools for retrieving information. This helps in the objective of creating interactive maps of agriculture based on the classification of maps, analysis of content elements, and the creation of GIS capabilities, RS data, and agro-geo databases [14,15]

    We introduced the use of interactive maps at planning meetings in Muramatsu station at Niigata University to enhance communication between staff in charge of smart farming and farm technical managers. Furthermore, station workers' involvement in using maps was achieved, and they responded positively to their use. Since the maps are interactive and already carry the collected and processed data and information about the fields, they were easy to use for agricultural staff not experienced in IT. It was noted that farm workers do not have enough experience in data processing, but they can use ready-made online interactive maps in their work.

    Moreover, we have suggested the use of interactive maps in teaching students and noticed an increased interest as computer technology is attracting the younger generation. The utilization of QR codes, for example, in educational applications, as discussed in other studies [48,55], has aroused significant interest among students. While using the code, which a smartphone camera can scan, students can be directly directed to the webpage that displays the experimental fields, the result of the utilization of remote sensing and IT tools. With this technology, students can access the experimental data and information referenced to the fields, providing a smooth and efficient experience.

    In addition, interactive maps can provide historical data, providing complete information on farm management practices. This detailed record-keeping can be used to track the performance of different crops, monitor changes in soil quality, and evaluate the effectiveness of various management strategies. The research can be enhanced by utilizing the concept of digital twin technology. Using digital twins and long-term record-keeping can provide valuable insights for farmers and help them improve their practices over time.

    While the results of this research are promising, there are factors such as reliable internet connectivity, power, training, support, affordability, and technology infrastructure that are necessary for the widespread adoption of digital farming tools that might be an issue for rural farmers. However, these factors can inform further research and development efforts to make digital agriculture accessible and effective for a wider range of farmers, contributing to the management and a more sustainable, resilient food system.

    Overall, we demonstrate the potential of interactive maps as valuable tools for agricultural communication, knowledge sharing, and informed decision-making. Addressing the identified limitations and exploring the suggested future directions are crucial steps towards ensuring the accessibility and effectiveness of interactive maps within the wider agricultural sector.

    The results were determined using remote sensing technologies and processed via post-processing software, then uploaded and published on MapBox as a reference layer and styling for interactive maps. The data, such as the RGB, NDVI, scale, territorial coverage, and other field information, were imported into JavaScript to create a thematic layer of the information. This thematic map describes the geographical locations, the type of plots, crop chlorophyll content, and general characteristics of the experimental field. The first technique was creating an interactive map with information on the field characteristics demonstrated using the popup on mouse hover effect on the map. The second one represented chlorophyll content using the swipe effect to show the information on the field before and after the analysis of the NDVI. The last technique displayed an interactive description of the farm, showing different layers such as DEM, NDVI, and true colors. This thematic layer development showed it is possible to create analytical maps for farmers to describe, forecast, and manage the farm.

    The interactive map, which is based on HTML, is a highly effective tool that enables easy access to all the data related to the farm. It is user-friendly and can be accessed from any device and location, making it a solution for farmers who need to keep an eye on their crops. With its interface, the HTML-based map makes it easy to locate specific areas of the farm and access detailed information about each location. This technology helps farmers make informed decisions for optimal productivity.

    The development of thematic layers using GIS and the integration of remote sensing data have contributed to the creation of insightful and informative maps. The success of this research in producing interactive agricultural maps based on map classification, content element analysis, and the development of GIS capabilities underscores its significance in advancing the goals of the project "Driving Industry DX - Project for Developing Expert Human Resources to Harness Digital and Specialized Fields" launched at Niigata University, Japan. The use of interactive maps has facilitated collaboration among various stakeholders, making it easier to share information and make decisions. Overall, this new tool has proven to be an effective method of improving communication and productivity in the smart farming industry.

    Future research could integrate AI (Artificial Intelligence) and ML (Machine Learning) to improve the analysis of remote sensing data, resulting in more accurate predictions for farmers. In addition, advanced data visualization techniques such as 3D mapping, Augmented Reality (AR), and Virtual Reality (VR) have the potential to enhance the user experience. These cutting-edge techniques may lead to more comprehensive and intuitive data presentations. Therefore, exploring the use of AI and ML in remote sensing data analysis and advanced visualization techniques could significantly improve the agricultural industry.

    The following supporting information can be viewed and accessed via the Laboratory for Bioproduction and Machinery webpage: https://www.agr.niigata-u.ac.jp/~bpm/muramatsu.html.

    The authors declare that they have not used Artificial Intelligence (AI) tools in the creation of this article.

    The code is open to all through the Laboratory for Bioproduction and Machinery webpage: https://www.agr.niigata-u.ac.jp/~bpm/muramatsu.html; Display popup on mouse hover JSFiddle link: https://jsfiddle.net/moooris/m8a7bet9/47/; Swipe between maps JSFiddle link: https://jsfiddle.net/moooris/vjk0mxsn/2/; Change a map's style JSFiddle link: https://jsfiddle.net/moooris/zjpwtuv5/25/. The raw data and images of the farmland are available from the corresponding author on reasonable request.

    This work was done with the support of Niigata University Muramatsu Station's staff. Additionally, we would like to extend our gratitude to the local farmers who participated in the testing and provided valuable feedback, which helped us refine and improve our methodologies. We would like to express our gratitude for the financial support provided by the Ministry of Education, Culture, Sports, Science and Technology (MEXT), and Japan International Cooperation Agency (JICA) in Japan.

    The authors state no conflicts of interest.

    Conceptualization, H.H., B.B.; methodology, A.A. and B.B.; software, A.A., K.A. and B.B.; resources, A.A. and K.A.; data curation, B.B.; writing—original draft preparation, A.A., B.B. and H.H.; writing—review and editing, H.H., B.B.; visualization, A.A.; supervision, H.H.; project administration, H.H.; funding acquisition, H.H. All authors have read and agreed to the published version of the manuscript.



    [1] Turnbull D (1996) Cartography and science in early modern Europe: Mapping the construction of knowledge spaces. Imago Mundi 48: 5–24. https://doi.org/10.1080/03085699608592830 doi: 10.1080/03085699608592830
    [2] Borges LF, Bazzi CL, de Souza EG, et al. (2020) Web software to create thematic maps for precision agriculture. Pesq Agropec Bras 55: 00735. https://doi.org/10.1590/S1678-3921.PAB2020.V55.00735 doi: 10.1590/S1678-3921.PAB2020.V55.00735
    [3] Whelan B, Taylor J (2019) Precision Agriculture for Grain Production Systems, CSIRO Publishing. https://doi.org/10.1071/9780643107489
    [4] Bellón B, Bégué A, Lo Seen D, et al. (2017) A remote sensing approach for regional-scale mapping of agricultural land-use systems based on NDVI time series. Remote Sens 9: 600. https://doi.org/10.3390/rs9060600 doi: 10.3390/rs9060600
    [5] Bronson K (2019) Looking through a responsible innovation lens at uneven engagements with digital farming. NJAS-Wageningen J Life Sci 90–91: 1–6. https://doi.org/10.1016/j.njas.2019.03.001 doi: 10.1016/j.njas.2019.03.001
    [6] Smith DA (2016) Online interactive thematic mapping: Applications and techniques for socio-economic research. Comput, Environ Urban Syst 57: 106–117. https://doi.org/10.1016/j.compenvurbsys.2016.01.002 doi: 10.1016/j.compenvurbsys.2016.01.002
    [7] Oymatov R, Safayev S (2021) Creation of a complex electronic map of agriculture and agro-geo databases using GIS techniques. E3S Web Conf 258: 03020. https://doi.org/10.1051/e3sconf/202125803020 doi: 10.1051/e3sconf/202125803020
    [8] Oymatov RK, Mamatkulov ZJ, Reimov MP, et al. (2021) Methodology development for creating agricultural interactive maps. IOP Conf Ser: Earth Environ Sci 868: 012074. https://doi.org/10.1088/1755-1315/868/1/012074 doi: 10.1088/1755-1315/868/1/012074
    [9] Degbelo A, Kruse J, Pfeiffer M (2019) Interactive maps, productivity and user experience: A user study in the e-mobility domain. Trans GIS 23: 1352–1373. https://doi.org/10.1111/tgis.12576 doi: 10.1111/tgis.12576
    [10] Kamel Boulos MN (2003) The use of interactive graphical maps for browsing medical/health Internet information resources. Int J Health Geographics 2: 1. https://doi.org/10.1186/1476-072X-2-1 doi: 10.1186/1476-072X-2-1
    [11] Roth RE (2013) Interactive maps: What we know and what we need to know. J Spat Inf Sci 6: 59–115. https://doi.org/10.5311/JOSIS.2013.6.105 doi: 10.5311/JOSIS.2013.6.105
    [12] Haklay M, Singleton A, Parker C (2008) Web mapping 2.0: The neogeography of the GeoWeb. Geogr Compass 2: 2011–2039. https://doi.org/10.1111/j.1749-8198.2008.00167.x doi: 10.1111/j.1749-8198.2008.00167.x
    [13] Peterson MP (2020) Map Interactivity. In: Kobayashi A (Ed.), International Encyclopedia of Human Geography, 2 ed., 259–262. https://doi.org/10.1016/B978-0-08-102295-5.10566-9
    [14] Horbiński T, Lorek D (2020) The use of Leaflet and GeoJSON files for creating the interactive web map of the preindustrial state of the natural environment. J Spat Sci 67: 61–77. https://doi.org/10.1080/14498596.2020.1713237 doi: 10.1080/14498596.2020.1713237
    [15] Medyńska-Gulij B (2012) Pragmatische Kartographie in Google Maps API. KN-J Cartography Geogr Inf 62: 250–255. https://doi.org/10.1007/BF03544493 doi: 10.1007/BF03544493
    [16] Wagaskar K, Joshi N, Tripathy AK, et al. (2018) Intelligent AgriTrade to Abet Indian Farming. In: Abraham A, Muhuri PK, Muda AK (Eds.), Advances in Intelligent Systems and Computing, 736: 932–941. https://doi.org/10.1007/978-3-319-76348-4_89
    [17] Lin YP, Petway JR, Anthony J, et al. (2017) Blockchain: The evolutionary next step for ICT e-agriculture. Environments 4: 50. https://doi.org/10.3390/environments4030050 doi: 10.3390/environments4030050
    [18] Zubarev Y, Fomin D, Zubarev N (2019) Using high-precision farming systems in the agricultural sector - the path to digital agriculture. Adv Intell Syst Res 167: 104–107. https://doi.org/10.2991/ispc-19.2019.23 doi: 10.2991/ispc-19.2019.23
    [19] Boiarskii B, Hasegawa H (2019) Comparison of NDVI and NDRE indices to detect differences in vegetation and chlorophyll content. J Mech Contin Math Sci 4: 20–29. https://doi.org/10.26782/jmcms.spl.4/2019.11.00003 doi: 10.26782/jmcms.spl.4/2019.11.00003
    [20] Velkoski G, Gusev M, Ristov S (2017) Analysis of interactive image technologies. In: 2016 24th Telecommunications Forum (TELFOR), Belgrade, Serbia, 1–4. https://doi.org/10.1109/TELFOR.2016.7818929
    [21] Peterson MP (2021) A comparison of feature density for large scale online maps. Cartographic Perspect 97: 26–42. https://doi.org/10.14714/CP97.1707 doi: 10.14714/CP97.1707
    [22] API Reference | Mapbox GL JS | Mapbox. Available from: https://docs.mapbox.com/mapbox-gl-js/api/.
    [23] Dorman M (2020) Introduction to Web Mapping, 1st ed, New York. Available from: https://doi.org/10.1201/9780429352874
    [24] Doernhoefer M (2006) Surfing the net for software engineering notes. ACM SIGSOFT Software Eng Notes 31: 5–13. https://doi.org/10.1145/1108768.1108783 doi: 10.1145/1108768.1108783
    [25] Costanza P, Herzeel C, Verachtert W (2019) A comparison of three programming languages for a full-fledged next-generation sequencing tool. BMC Bioinf 20: 301. https://doi.org/10.1186/s12859-019-2903-5 doi: 10.1186/s12859-019-2903-5
    [26] Leavesley GH, David O, Garen D, et al. (2008) A modeling framework for improved agricultural water-supply forecasting. AGU Fall Meet 2008: C21A–0497.
    [27] Latif S, Beck F (2019) Interactive map reports summarizing bivariate geographic data. Visual Inf 3: 27–37. https://doi.org/10.1016/J.VISINF.2019.03.004 doi: 10.1016/J.VISINF.2019.03.004
    [28] Maiellaro N, Varasano A (2017) One-page multimedia interactive map. ISPRS Int J Geo-Inf 6: 34. https://doi.org/10.3390/ijgi6020034 doi: 10.3390/ijgi6020034
    [29] Di Pasquale D, Lerario A, Maiellaro N, et al. (2013) Open source interactive map of Albania cultural heritage. IERI Proc 4: 383–390. https://doi.org/10.1016/J.IERI.2013.11.055 doi: 10.1016/J.IERI.2013.11.055
    [30] She J, Liu J, Li C, et al. (2017) A line-feature label placement algorithm for interactive 3D map. Comput Graphics 67: 86–94. https://doi.org/10.1016/J.CAG.2017.06.002 doi: 10.1016/J.CAG.2017.06.002
    [31] Oymatov R, Mamatkulov Z, Maksudov R, et al. (2023) Improving the methods of agricultural mapping using remote sensing data. E3S Web Conf 386: 04008. https://doi.org/10.1051/e3sconf/202338604008 doi: 10.1051/e3sconf/202338604008
    [32] Kumalawati R, Salamiah, Yuliarti A, et al. (2021) Potential mapping agricultural commodities to mitigation of food problem in the future. Geojournal Tourism Geosites 33: 1480–1485. https://doi.org/10.30892/gtg.334spl05-596 doi: 10.30892/gtg.334spl05-596
    [33] Nurdin DP, Karim S, Kurniadin N (2022) Geographic information system for mapping agricultural land in North Samarinda district. TEPIAN 3: 165–172. https://doi.org/10.51967/tepian.v3i3.701 doi: 10.51967/tepian.v3i3.701
    [34] Stojanovic V, Falconer RE, Isaacs J, et al. (2017) Streaming and 3D mapping of AGRI-data on mobile devices. Comput Electron Agric 138: 188–199. https://doi.org/10.1016/j.compag.2017.03.019 doi: 10.1016/j.compag.2017.03.019
    [35] Rzeszewski M (2023) Mapbox. In: Burnett CM (Ed.), Evaluating Participatory Mapping Software, Springer International Publishing, Cham, 21–40. https://doi.org/10.1007/978-3-031-19594-5_2
    [36] Den Besten N, Steele-Dunne S, de Jeu R, et al. (2021) Towards monitoring waterlogging with remote sensing for sustainable irrigated agriculture. Remote Sens 13: 2929. https://doi.org/10.3390/rs13152929 doi: 10.3390/rs13152929
    [37] Boiarskii B, Sinegovskii M (2022) Application of NDVI and NDRE vegetation indices in the assessment of soybean productivity under nitrogen controlled-release fertilizer. 2022 8th International Conference on Information Technology and Nanotechnology, ITNT, IEEE, 1–6. https://doi.org/10.1109/ITNT55410.2022.9848588
    [38] Murray JD, Van Ryper W (1997) Encyclopedia of graphics file formats, 2nd Ed., Sebastopol: O'Reilly & Associates Inc.
    [39] Tucker CJ (1979) Red and photographic infrared linear combinations for monitoring vegetation. Remote Sens Environ 8: 127–150. https://doi.org/10.1016/0034-4257(79)90013-0 doi: 10.1016/0034-4257(79)90013-0
    [40] Cadenas C (2014) Geovisualization: Integration and visualization of multiple datasets using Mapbox. Computer Engineering.
    [41] Kennedy B, Musciano C (2002) HTML & XHTML—The Definitive Guide, 5th Ed., Sebastopol: O'Reilly Media Inc.
    [42] Wang W, Poo-Caamaño G, Wilde E, et al. (2015) What is the GIST? Understanding the use of public gists on GitHub. IEEE International Working Conference on Mining Software Repositories. https://doi.org/10.1109/MSR.2015.36
    [43] Netek, Brus, Tomecka (2019) Performance testing on marker clustering and heatmap visualization techniques: A comparative study on JavaScript mapping libraries. ISPRS Int J Geo-Inf 8: 348. https://doi.org/10.3390/ijgi8080348 doi: 10.3390/ijgi8080348
    [44] Giriprasad Patil, Girish MK, Mrs. Vidya (2022) A review paper on new web development technology. Int J Adv Res Sci, Commun Technol 2: 468–476. https://doi.org/10.48175/ijarsct-2901
    [45] Shahu Gaikwad S, Adkar P (2019) A review paper on bootstrap framework. IRE J 2: 349–351.
    [46] Arapov P, Buffa M, ben Othmane A (2014) Developing web of data applications from the browser. WWW 2014 Companion-Proceedings of the 23rd International Conference on World Wide Web, 599–602. https://doi.org/10.1145/2567948.2578040
    [47] Hernando R, Macías JA (2023) Development of usable applications featuring QR codes for enhancing interaction and acceptance: A case study. Behav Inf Technol 42: 360–378. https://doi.org/10.1080/0144929X.2021.2022209 doi: 10.1080/0144929X.2021.2022209
    [48] Deineko Z, Kraievska N, Lyashenko V (2022) QR code as an element of educational activity. Int J Acad Inf Syst Res 6: 26–31.
    [49] Marín JF, Parra L, Lloret J, et al. (2021) Correlation of NDVI with RGB data to evaluate the effects of solar exposure on different combinations of ornamental grass used in lawns. In: Industrial IoT Technologies and Applications: 4th EAI International Conference, Industrial IoT 2020, Virtual Event, Proceedings 4, Springer International Publishing, 207–220. https://doi.org/10.1007/978-3-030-71061-3_13
    [50] Sishodia RP, Ray RL, Singh SK (2020) Applications of remote sensing in precision agriculture: A review. Remote Sens 12: 1–31. https://doi.org/10.3390/rs12193136 doi: 10.3390/rs12193136
    [51] Elazab A, Ordóñez RA, Savin R, et al. (2016) Detecting interactive effects of N fertilization and heat stress on maize productivity by remote sensing techniques. Eur J Agron 73: 11–24. https://doi.org/10.1016/j.eja.2015.11.010 doi: 10.1016/j.eja.2015.11.010
    [52] Bajwa SG, Rupe JC, Mason J (2017) Soybean disease monitoring with leaf reflectance. Remote Sens 9: 127. https://doi.org/10.3390/rs9020127 doi: 10.3390/rs9020127
    [53] Bhat SA, Huang NF (2021) Big data and AI revolution in precision agriculture: Survey and challenges. IEEE Access 9: 110209–110222. https://doi.org/10.1109/ACCESS.2021.3102227 doi: 10.1109/ACCESS.2021.3102227
    [54] Gutiérrez F, Htun NN, Schlenz F, et al. (2019) A review of visualisations in agricultural decision support systems: An HCI perspective. Comput Electron Agric 163: 104844. https://doi.org/10.1016/j.compag.2019.05.053 doi: 10.1016/j.compag.2019.05.053
    [55] Durak G, Ozkeskin EE, Ataizi M (2016) QR codes in education and communication. Turk Online J Distance Educ 17: 43–58. https://doi.org/10.17718/tojde.89156 doi: 10.17718/tojde.89156
  • Reader Comments
  • © 2024 the Author(s), licensee AIMS Press. This is an open access article distributed under the terms of the Creative Commons Attribution License (http://creativecommons.org/licenses/by/4.0)
通讯作者: 陈斌, bchen63@163.com
  • 1. 

    沈阳化工大学材料科学与工程学院 沈阳 110142

  1. 本站搜索
  2. 百度学术搜索
  3. 万方数据库搜索
  4. CNKI搜索

Metrics

Article views(1498) PDF downloads(146) Cited by(0)

Figures and Tables

Figures(5)

/

DownLoad:  Full-Size Img  PowerPoint
Return
Return

Catalog