Title: Extended Functionality – Route Map lines Last modified: July 16, 2025 --- # Extended Functionality – Route Map lines * Resolved [splaquet](https://wordpress.org/support/users/splaquet/) * (@splaquet) * [10 months, 3 weeks ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/) * First off, thank you very much for all of your effort in these plugins! I have no idea it took so long for me to discover Leaflet and the community. * I’ve browsed through your website and found the section on implementing the additional plugins. I was curious if you could take a look at this example and offer input on which existing features it would take to create my own version. As I mentioned, I’m new to the project and am a bit overwhelmed by the sheer scope of it all. * [https://flyri.com/passengers/route-map/](https://flyri.com/passengers/route-map/) * I can see that these guys developed their own custom plugin for the task. I wasn’t sure if that’s because of how much customization they had to put into it or if it was for their own convenience to package and install on additional websites. * thank you in advance! * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fextended-functionality-route-map-lines%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 15 replies - 1 through 15 (of 18 total) 1 [2](https://wordpress.org/support/topic/extended-functionality-route-map-lines/page/2/?output_format=md) [→](https://wordpress.org/support/topic/extended-functionality-route-map-lines/page/2/?output_format=md) * Plugin Author [hupe13](https://wordpress.org/support/users/hupe13/) * (@hupe13) * [10 months, 3 weeks ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18559090) * You can draw a `leaflet-line` from airport A to airport B. But this isn’t, what you want. There is [Leaflet.curve](https://github.com/elfalem/Leaflet.curve) to make the lines as a curve. I or you have to test whether you can use it. * Thread Starter [splaquet](https://wordpress.org/support/users/splaquet/) * (@splaquet) * [10 months, 2 weeks ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18566072) * Do you feel that the Leaflet.curve plugin is a better fit than the [Leaflet.bezier](https://github.com/lifeeka/leaflet.bezier) plugin? * Plugin Author [hupe13](https://wordpress.org/support/users/hupe13/) * (@hupe13) * [10 months, 2 weeks ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18566514) * I don’t know. I’ll have to check it out. That will take a while, as I rarely have time for it at the moment. Please be patient. * But one of the first results searching the internet was [this site](https://ryancatalani.medium.com/creating-consistently-curved-lines-on-leaflet-b59bc03fa9dc). I found it interesting. * Plugin Author [hupe13](https://wordpress.org/support/users/hupe13/) * (@hupe13) * [10 months, 2 weeks ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18571650) * My [first](https://leafext.de/extra/bezier/) attempt. It’s not quite right yet, there are still some issues that need to be resolved. The blue line is a helper line. * Thread Starter [splaquet](https://wordpress.org/support/users/splaquet/) * (@splaquet) * [10 months, 2 weeks ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18574593) * wow, that’s pretty amazing work!!! I’ll play around with it and update you with how progress goes. * out of curiosity, does this only recognize latlngs? I have my points set to addresses and noticed they didn’t result anything when I quickly updated the shortcode from leaflet-line to leaflet-bezier. * Thread Starter [splaquet](https://wordpress.org/support/users/splaquet/) * (@splaquet) * [10 months, 1 week ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18576907) * I took a look on your website and saw that you were cruising along on dialing everything in! I’m not sure if it matters or not, but I thought I’d share some real time info with you. I thought it might be useful to see how it plays out on the grander scale of things. * ```wp-block-code [leaflet-map height=700 width=100% address="united states" zoom=5 fitbounds][zoomhomemap fit][leaflet-circle address="Hartford, CT" radius=17500 color="grey"][leaflet-bezier latlngs="41, 29; 44, 18;"]41, 29; 44, 18;[/leaflet-bezier][leaflet-bezier addresses="Boston, MA; Kansas City, KS"]Halifax, Nova Scotia; Tanzania[/leaflet-bezier][gestures][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Atlanta, GA;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Baltimore, MD;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Charleston, SC;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Charlotte, NC;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Chicago, IL;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Chicago, IL;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Columbus, OH;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Dallas-Fort Worth, TX;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Denver, CO;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Detroit, MI;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Ft. Lauderdale, FL;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Fort Myers, FL;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Houston, TX;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Jacksonville, FL;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Las Vegas, NV;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Los Angeles, CA;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Miami, FL;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Minneapolis, MN;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Myrtle Beach, SC;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Nashville, TN;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;New Orleans, LA;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;New York, NY;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Norfolk, VA;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Orlando, FL;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Philadelphia, PA;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Phoenix, AZ;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Pittsburgh, PA;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Raleigh-Durham, NC;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Richmond, VA;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Sarasota Bradenton International Airport;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Savannah, GA;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Tampa, FL;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Vero Beach, FL;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Washington, DC;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;Washington, DC;"][leaflet-line color="var(--color-2)" addresses="Hartford, CT;West Palm Beach, FL;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Atlanta, GA;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Baltimore, MD;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Charleston, SC;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Charlotte, NC;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Chicago, IL;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Chicago, IL;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Columbus, OH;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Dallas-Fort Worth, TX;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Denver, CO;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Detroit, MI;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Ft. Lauderdale, FL;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Fort Myers, FL;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Houston, TX;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Jacksonville, FL;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Las Vegas, NV;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Los Angeles, CA;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Miami, FL;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Minneapolis, MN;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Myrtle Beach, SC;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Nashville, TN;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;New Orleans, LA;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;New York, NY;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Norfolk, VA;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Orlando, FL;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Philadelphia, PA;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Phoenix, AZ;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Pittsburgh, PA;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Raleigh-Durham, NC;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Richmond, VA;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Sarasota Bradenton International Airport;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Savannah, GA;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Tampa, FL;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Vero Beach, FL;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Washington, DC;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;Washington, DC;"][leaflet-bezier color="var(--color-2)" addresses="Hartford, CT;West Palm Beach, FL;"][leaflet-circle address="Atlanta, GA" radius=8500 color="grey"][leaflet-circle address="Baltimore, MD" radius=8500 color="grey"][leaflet-circle address="Charleston, SC" radius=8500 color="grey"][leaflet-circle address="Charlotte, NC" radius=8500 color="grey"][leaflet-circle address="Chicago, IL" radius=8500 color="grey"][leaflet-circle address="Chicago, IL" radius=8500 color="grey"][leaflet-circle address="Columbus, OH" radius=8500 color="grey"][leaflet-circle address="Dallas-Fort Worth, TX" radius=8500 color="grey"][leaflet-circle address="Denver, CO" radius=8500 color="grey"][leaflet-circle address="Detroit, MI" radius=8500 color="grey"][leaflet-circle address="Ft. Lauderdale, FL" radius=8500 color="grey"][leaflet-circle address="Fort Myers, FL" radius=8500 color="grey"][leaflet-circle address="Houston, TX" radius=8500 color="grey"][leaflet-circle address="Jacksonville, FL" radius=8500 color="grey"][leaflet-circle address="Las Vegas, NV" radius=8500 color="grey"][leaflet-circle address="Los Angeles, CA" radius=8500 color="grey"][leaflet-circle address="Miami, FL" radius=8500 color="grey"][leaflet-circle address="Minneapolis, MN" radius=8500 color="grey"][leaflet-circle address="Myrtle Beach, SC" radius=8500 color="grey"][leaflet-circle address="Nashville, TN" radius=8500 color="grey"][leaflet-circle address="New Orleans, LA" radius=8500 color="grey"][leaflet-circle address="New York, NY" radius=8500 color="grey"][leaflet-circle address="Norfolk, VA" radius=8500 color="grey"][leaflet-circle address="Orlando, FL" radius=8500 color="grey"][leaflet-circle address="Philadelphia, PA" radius=8500 color="grey"][leaflet-circle address="Phoenix, AZ" radius=8500 color="grey"][leaflet-circle address="Pittsburgh, PA" radius=8500 color="grey"][leaflet-circle address="Raleigh-Durham, NC" radius=8500 color="grey"][leaflet-circle address="Richmond, VA" radius=8500 color="grey"][leaflet-circle address="Sarasota Bradenton International Airport" radius=8500 color="grey"][leaflet-circle address="Savannah, GA" radius=8500 color="grey"][leaflet-circle address="Tampa, FL" radius=8500 color="grey"][leaflet-circle address="Vero Beach, FL" radius=8500 color="grey"][leaflet-circle address="Washington, DC" radius=8500 color="grey"][leaflet-circle address="West Palm Beach, FL" radius=8500 color="grey"] ``` * Plugin Author [hupe13](https://wordpress.org/support/users/hupe13/) * (@hupe13) * [10 months, 1 week ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18577246) * Yes, I tested to make popups yesterday, but I am not happy with it on smartphone. I have to think of another solution. And the airplane icon is too big. * Thread Starter [splaquet](https://wordpress.org/support/users/splaquet/) * (@splaquet) * [10 months, 1 week ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18577980) * I am unsure why, but the code doesn’t generate anything on my end. I have your snippet inserted on the page and I’ve downloaded the 3 files into the /uploads/ leaflet-plugins/ folder. I’m able to see the straight lines without issue, but there’s a blank map with the [leaflet-bezier] shortcode * Plugin Author [hupe13](https://wordpress.org/support/users/hupe13/) * (@hupe13) * [10 months, 1 week ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18578078) * Try again, I changed something. Please take care about new syntax: * ```wp-block-code [leaflet-bezier latlngs="lat1,lng1; lat2, lng2;"]some or no popup text[/leaflet-bezier][leaflet-bezier addresses="address1; address2;"]some or no popup text[/leaflet-bezier] ``` * I think, it is ready now. * Thread Starter [splaquet](https://wordpress.org/support/users/splaquet/) * (@splaquet) * [10 months, 1 week ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18578330) * WOW! that’s amazing, mate! nice work 😃 * I was having blank map issues because I didn’t notice that you had moved the plugin folder into the uploads folder. it popped right up once I put everything in their updated locations. * so, out of curiosity, is there anything that impacts the logic behind what curves up vs curves down? I looked through your code, but didn’t notice anything. * [https://www.icloud.com/iclouddrive/0a8ReKwTiTFb6b40SL1uUyY5Q#lower48flights](https://www.icloud.com/iclouddrive/0a8ReKwTiTFb6b40SL1uUyY5Q#lower48flights) * [[ - This reply was modified 10 months, 1 week ago by [splaquet](https://wordpress.org/support/users/splaquet/). * Thread Starter [splaquet](https://wordpress.org/support/users/splaquet/) * (@splaquet) * [10 months, 1 week ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18578504) * I was looking through the bezier code. looks like it might be these left_round/ right_round commands that allow control, but I haven’t been able to find the source of those calls. * **your code mod:** * getMidPoint: function getMidPoint(from, to, deep) { var round_side = arguments. length > 3 && arguments[3] !== undefined ? arguments[3] : ‘LEFT_ROUND’;var offset = 3.14;var latlngs = []; * if (round_side === ‘RIGHT_ROUND’) { offset = offset * -1;} * **original: L.bezier({path: [[{lat: 7.8731, lng: 80.7718, slide: ‘RIGHT_ROUND’},// Sri Lanka{lat: -25.2744, lng: 133.7751, slide: ‘LEFT_ROUND’},//Australia{lat: 36.2048, lng: 138.2529}//Japan - This reply was modified 10 months, 1 week ago by [splaquet](https://wordpress.org/support/users/splaquet/). * Plugin Author [hupe13](https://wordpress.org/support/users/hupe13/) * (@hupe13) * [10 months, 1 week ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18578724) * The bezier code is from [Leaflet Bezier](https://github.com/lifeeka/leaflet.bezier), I just integrated it into the WordPress Leaflet Map plugins. It seems, [Leaflet.curve](https://github.com/elfalem/Leaflet.curve) has some more possibilities, but Leaflet Bezier was easier to integrate. * Plugin Author [hupe13](https://wordpress.org/support/users/hupe13/) * (@hupe13) * [10 months, 1 week ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18579182) * The [LeafletJS](https://leafletjs.com/plugins.html) page lists some plugins for“ bezier”. I think, [Leaflet.Canvas-Flowmap-Layer](https://github.com/jwasilgeo/Leaflet.Canvas-Flowmap-Layer) is that what you want. But the lines (origin, destination) should be in a specific geojson format. * Thread Starter [splaquet](https://wordpress.org/support/users/splaquet/) * (@splaquet) * [10 months, 1 week ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18580045) * my apologies! I wasn’t very clear… I was looking at the [leaflet.bezier demo](https://github.com/lifeeka/leaflet.bezier/blob/master/demo/demo.js) files and noticed the LEFT/RIGHT options. that’s what I was referring to. * my thought was that another tag could decide the flow, like slide=”LEFT_ROUND” * [https://github.com/lifeeka/leaflet.bezier/blob/master/demo/demo.js](https://github.com/lifeeka/leaflet.bezier/blob/master/demo/demo.js) * [https://github.com/lifeeka/leaflet.bezier/blob/master/demo/demo.gif](https://github.com/lifeeka/leaflet.bezier/blob/master/demo/demo.gif) * [[ - This reply was modified 10 months, 1 week ago by [splaquet](https://wordpress.org/support/users/splaquet/). Reason: trying to get the .gif to display * Plugin Author [hupe13](https://wordpress.org/support/users/hupe13/) * (@hupe13) * [10 months, 1 week ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/#post-18580458) * You are right, there is a undocumented option “slide”, I will check it. And “ deep” is not documented also. - This reply was modified 10 months, 1 week ago by [hupe13](https://wordpress.org/support/users/hupe13/). Viewing 15 replies - 1 through 15 (of 18 total) 1 [2](https://wordpress.org/support/topic/extended-functionality-route-map-lines/page/2/?output_format=md) [→](https://wordpress.org/support/topic/extended-functionality-route-map-lines/page/2/?output_format=md) The topic ‘Extended Functionality – Route Map lines’ is closed to new replies. * ![](https://ps.w.org/extensions-leaflet-map/assets/icon-256x256.png?rev=3067862) * [Extensions for Leaflet Map](https://wordpress.org/plugins/extensions-leaflet-map/) * [Frequently Asked Questions](https://wordpress.org/plugins/extensions-leaflet-map/#faq) * [Support Threads](https://wordpress.org/support/plugin/extensions-leaflet-map/) * [Active Topics](https://wordpress.org/support/plugin/extensions-leaflet-map/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/extensions-leaflet-map/unresolved/) * [Reviews](https://wordpress.org/support/plugin/extensions-leaflet-map/reviews/) * 18 replies * 2 participants * Last reply from: [hupe13](https://wordpress.org/support/users/hupe13/) * Last activity: [10 months ago](https://wordpress.org/support/topic/extended-functionality-route-map-lines/page/2/#post-18585756) * Status: resolved