{"id":61255,"date":"2024-04-19T10:43:21","date_gmt":"2024-04-19T05:13:21","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=61255"},"modified":"2024-04-22T10:48:05","modified_gmt":"2024-04-22T05:18:05","slug":"route-planning-using-open-street-map","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/route-planning-using-open-street-map\/","title":{"rendered":"Route Planning Using Open Street Map"},"content":{"rendered":"<h3>Introduction<\/h3>\n<p>In this blog post, we will delve into the utilization of Leaflet.js, an open-source JavaScript library, in conjunction with React to craft interactive maps as a substitute for Google Maps. Understanding the application of Leaflet.js can enable us to showcase location data effectively and construct personalized map-centric applications effortlessly.<\/p>\n<p>For this tutorial and into the future, we&#8217;ll employ the following tools:<\/p>\n<ul class=\"\">\n<li id=\"ccf9\" class=\"oe of gt og b oh pc oj ok ol pd on oo op pe or os ot pf ov ow ox pg oz pa pb ph pi pj bj\" data-selectable-paragraph=\"\"><a class=\"af pk\" href=\"https:\/\/leafletjs.com\/\" target=\"_blank\" rel=\"noopener ugc nofollow\">Leaflet<br \/>\n<\/a><em class=\"pl\">A JavaScript library for interactive maps<\/em><\/li>\n<li id=\"9fa3\" class=\"oe of gt og b oh pm oj ok ol pn on oo op po or os ot pp ov ow ox pq oz pa pb ph pi pj bj\" data-selectable-paragraph=\"\"><a class=\"af pk\" href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noopener ugc nofollow\">React<br \/>\n<\/a><em class=\"pl\">A JavaScript library for building user interfaces<\/em><\/li>\n<li id=\"f998\" class=\"oe of gt og b oh pm oj ok ol pn on oo op po or os ot pp ov ow ox pq oz pa pb ph pi pj bj\" data-selectable-paragraph=\"\"><a class=\"af pk\" href=\"https:\/\/react-leaflet.js.org\/\" target=\"_blank\" rel=\"noopener ugc nofollow\">React-Leaflet<br \/>\n<\/a><em class=\"pl\">React components for Leaflet maps<\/em><\/li>\n<\/ul>\n<h2>What is Leaflet?<\/h2>\n<p>Leaflet stands out as the premier open-source JavaScript library tailored for mobile-responsive interactive maps. With a compact size of approximately 42 KB of JS, it encompasses all the essential mapping functionalities most developers require.<\/p>\n<p>Engineered with simplicity, performance, and user-friendliness at its core, Leaflet seamlessly operates across all key desktop and mobile platforms. It offers extensive extensibility through numerous plugins, boasts an attractive, intuitive API with thorough documentation, and features a straightforward, readable source code that fosters enjoyable contributions.<\/p>\n<h2>Integration<\/h2>\n<p>We can install the package for react-leaflet by following the command.<\/p>\n<pre><strong><span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span><\/strong><span class=\"token plain\"><strong> react-dom leaflet<\/strong><\/span><\/pre>\n<p>This will help to setup the map<\/p>\n<h2><strong class=\"og gu\">Setting Up the Map<\/strong><\/h2>\n<p>First, change the App.js file with the following code to have basic components invoked for the map.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-61249 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/App_js-1.png\" alt=\"\" width=\"1192\" height=\"518\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/04\/App_js-1.png 1192w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/App_js-1-300x130.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/App_js-1-1024x445.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/App_js-1-768x334.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/App_js-1-624x271.png 624w\" sizes=\"(max-width: 1192px) 100vw, 1192px\" \/><\/p>\n<p>Following is the file structure for the sample application<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-61251\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/File-Structure.png\" alt=\"\" width=\"358\" height=\"692\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/04\/File-Structure.png 358w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/File-Structure-155x300.png 155w\" sizes=\"(max-width: 358px) 100vw, 358px\" \/><\/p>\n<p>Map Integration starts from &lt;MapSearch \/&gt; Component<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-61252\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/MapSearch-1024x538.png\" alt=\"\" width=\"625\" height=\"328\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/04\/MapSearch-1024x538.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/MapSearch-300x157.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/MapSearch-768x403.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/MapSearch-624x328.png 624w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/MapSearch.png 1061w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<p>Please create &lt;MapContainer \/&gt; file and copy following code<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-61253\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/MapContainer-1024x691.png\" alt=\"\" width=\"625\" height=\"422\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/04\/MapContainer-1024x691.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/MapContainer-300x202.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/MapContainer-768x518.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/MapContainer-624x421.png 624w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/MapContainer.png 1335w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<p>For Creating Routes between two points, the &lt;RoutePlanner \/&gt; component is created.<br \/>\nThe &#8220;react-bootstrap&#8221; library is used for form control inputs, and React Select will display the search result from geolocation.<\/p>\n<p>This will be responsible for letting geo-search by text using &#8220;leaflet-geo search,&#8221; and save the start and end location in React Context.<\/p>\n<p>&#8220;leaflet-routing-machine&#8221; will highlight the road between the coordinates provided.<\/p>\n<p>With complete integration final output of the route planning will be as follows:-<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-61254\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/Final-Output.png\" alt=\"\" width=\"1920\" height=\"695\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/04\/Final-Output.png 1920w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/Final-Output-300x109.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/Final-Output-1024x371.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/Final-Output-768x278.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/Final-Output-1536x556.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2024\/04\/Final-Output-624x226.png 624w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<blockquote><p>Note: Leaflet map container component must have fixed height and width otherwise the map may not be visible properly.<\/p><\/blockquote>\n<p>You may find the GitHub repo link for the complete sample project <a href=\"https:\/\/github.com\/abdul-samad-ttn\/react-leaflet-demo\">here <\/a>branch name: route-planning<\/p>\n<h2>Conclusion<\/h2>\n<p>It is safe to say that React-leaflet may not be able to provide all the features that other paid libraries have. But it has the ability to be of use when one may need an open source alternative map library for Basic Tracking Applications or Home Delivery and many more use cases.<\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>Introduction In this blog post, we will delve into the utilization of Leaflet.js, an open-source JavaScript library, in conjunction with React to craft interactive maps as a substitute for Google Maps. Understanding the application of Leaflet.js can enable us to showcase location data effectively and construct personalized map-centric applications effortlessly. For this tutorial and into [&hellip;]<\/p>\n","protected":false},"author":1668,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":37},"categories":[3429,3038],"tags":[5816,5819,5818,5817],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61255"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1668"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=61255"}],"version-history":[{"count":2,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61255\/revisions"}],"predecessor-version":[{"id":61380,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61255\/revisions\/61380"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=61255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=61255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=61255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}