Extended Functionality – Route Map lines

  • Resolved splaquet

    (@splaquet)


    7 months, 3 weeks ago

    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/

    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 to see the link]

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • Plugin Author hupe13

    (@hupe13)

    7 months, 3 weeks ago

    You can draw a leaflet-line from airport A to airport B. But this isn’t, what you want. There is Leaflet.curve to make the lines as a curve. I or you have to test whether you can use it.

    Thread Starter splaquet

    (@splaquet)

    7 months, 2 weeks ago

    Do you feel that the Leaflet.curve plugin is a better fit than the Leaflet.bezier plugin?

    Plugin Author hupe13

    (@hupe13)

    7 months, 2 weeks ago

    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. I found it interesting.

    Plugin Author hupe13

    (@hupe13)

    7 months, 2 weeks ago

    My first 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

    (@splaquet)

    7 months, 2 weeks ago

    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

    (@splaquet)

    7 months, 1 week ago

    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.

    [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

    (@hupe13)

    7 months, 1 week ago

    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

    (@splaquet)

    7 months, 1 week ago

    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

    (@hupe13)

    7 months, 1 week ago

    Try again, I changed something. Please take care about new syntax: 

    [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

    (@splaquet)

    7 months, 1 week ago

    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

    • This reply was modified 7 months, 1 week ago by splaquet.
    Thread Starter splaquet

    (@splaquet)

    7 months, 1 week ago

    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 7 months, 1 week ago by splaquet.
    Plugin Author hupe13

    (@hupe13)

    7 months, 1 week ago

    The bezier code is from Leaflet Bezier, I just integrated it into the WordPress Leaflet Map plugins. It seems, Leaflet.curve has some more possibilities, but Leaflet Bezier was easier to integrate.

    Plugin Author hupe13

    (@hupe13)

    7 months, 1 week ago

    The LeafletJS page lists some plugins for “bezier”. I think, Leaflet.Canvas-Flowmap-Layer is that what you want. But the lines (origin, destination) should be in a specific geojson format.

    Thread Starter splaquet

    (@splaquet)

    7 months, 1 week ago

    my apologies! I wasn’t very clear… I was looking at the leaflet.bezier demo 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.gif

    • This reply was modified 7 months, 1 week ago by splaquet. Reason: trying to get the .gif to display
    Plugin Author hupe13

    (@hupe13)

    7 months, 1 week ago

    You are right, there is a undocumented option “slide”, I will check it. And “deep” is not documented also.

    • This reply was modified 7 months, 1 week ago by hupe13.
Viewing 15 replies - 1 through 15 (of 18 total)
1 2

The topic ‘Extended Functionality – Route Map lines’ is closed to new replies.

  • 18 replies
  • 2 participants
  • Last reply from: hupe13
  • Last activity: 7 months ago
  • Status: resolved