Feature Proposal: Add ability to show text labels within polygons

New home Forums Pro Add-on Feature Proposal: Add ability to show text labels within polygons

This topic contains 30 replies, has 7 voices, and was last updated by  KZeni 1 month ago.

Viewing 15 posts - 1 through 15 (of 32 total)
  • Author
    Posts
  • #34668

    KZeni
    Member

    I have modified my WP Google Maps Pro so that it allows me to specify the name of a polygon to then have that shown in the center of that polygon on the map (screenshot as an example: https://cloudup.com/cTzhK9cdDOb)

    I would love it if this were to be officially supported in a future version of WP Google Maps Pro. Currently, it’s hard-coded to always show the name of the polygon as a label and also has hard-coded styles, but this implementation is pretty simple & straightforward now (certainly could be integrated into the Polygon editor’s options.)

    What I’ve done to make this work:
    In short, I’ve added a call to https://github.com/googlemaps/js-map-label/blob/gh-pages/src/maplabel-compiled.js (unmodified & served locally) to add the ability to add labels on-demand to a Google Map.

    Then, I’ve added:

    
            var polyLabel = new MapLabel({
                text: tmp_data['polyname'],
                position: polygon_center,
                map: MYMAP[mapid].map,
                fontSize: 12,
                fontColor: '#ffffff',
                strokeWeight: 2,
                strokeColor: '#333333',
                zIndex: 9999
            });
            polyLabel.set('position', polygon_center);
    

    right after:

    
           WPGM_Path_Polygon[polygonid].setMap(MYMAP[mapid].map);
    
            polygon_center = bounds.getCenter();
    

    in the js/core.js file (which is then minified for the version that’s served publicly).

    Again, that really is all that’s needed to get the basic feature added, and having options added to the Polygon editor to enable & also style the label should be that much more work. I would love to see this added to the official version so I can keep my plugins up-to-date while retaining this very useful feature.

    As an aside, I’ve also posted this to https://wordpress.org/support/topic/feature-proposal-add-ability-to-show-text-labels-within-polygons/ just in case there’s other users out there looking for this that haven’t checked this forum yet.

    Thanks for the great plugin!
    Kurt

    #34673

    Perry
    Moderator

    Hi Kurt

    Thank you so much for this and thanks for your kind words!

    This looks great really, and we genuinely appreciate your contribution 🙂

    I’ve added a note to our repo to get this looked at, I think it’s reasonable to say we’ll be able to merge this in in the short term future though.

    We’ll have to review the code at some point but I can’t see any reason why this wouldn’t be added to the core plugin files shortly, please bear with us as our top priority at the moment is pushing out our new release, however we’ll look into this hopefully within a matter of weeks.

    Thank you once again!

    Kind regards
    – Perry

    #34688

    KZeni
    Member

    Great to hear! Let me know if I can help in any way to get this implemented.

    Thanks!

    #36450

    KZeni
    Member

    Okay, version 7 is out. Just want to give this another mention for potential inclusion in the new version’s codebase (didn’t see this listed anywhere on https://trello.com/b/Brsxoyzo/wp-google-maps, but I did see https://github.com/CodeCabin/wp-google-maps/issues/324 which seems relevant to this [though it didn’t link to this discussion]).

    #36682

    Mike
    Member

    @kzeni I tried implementing your code above to get my polygon labels to appear, but all I seem to get is a JS error with core.js and the polygon hover functionality stops working.

    Is the code above still working for you?

    #36705

    KZeni
    Member

    It’s working (https://www.jmswank.com/about-us/sales-team/), but I have held off on upgrading to version 7 until this is implemented for the new version. Which version are you working with?

    #36708

    Mike
    Member

    Ah that might be why I’m getting the errors. I’m using Version 7.06.

    Which version are you using? And is there any way I can get access to the same version as you?

    Wow, I like the info box you have on hover, how is that done with polygon’s?

    • This reply was modified 1 year, 5 months ago by  Mike.
    #36711

    KZeni
    Member

    I have the latest version made available before the 7.x update which I had modified at the time (6.4.11 free with 6.19 pro) so you may find that https://wordpress.org/plugins/wp-rollback/ will help get you back to a compatible version of the free plugin whereas you may need to check your account / past downloads for the 6.x version of the pro plugin.

    That being said, I see no reason why this code couldn’t be adapted to work with 7.x, but I just don’t have time set aside to handle that aspect myself since it’s working well on 6.x for now (hence why I proposed it being added officially).

    The info box is actually https://wordpress.org/plugins/tabby-responsive-tabs/ which is set to change to the corresponding tab using what I outline here: https://www.wpgmaps.com/forums/topic/feature-proposal-add-hooks-to-specify-behavior-with-polygons-2/ (some additional work to get them to work together seamlessly needing to be done as well.)

    #36712

    Mike
    Member

    Thanks @kzeni awesome info!

    I only purchased this last night, so I only have access to v7 of Pro!

    @perry any chance of getting access to 6.19 pro?

    #36761

    Perry
    Moderator

    Hi Mike, Hi Kzeni

    May I firstly thank Kzeni for contributing to the forum, we really appreciate it 🙂

    Mike, can you please submit a support ticket here: https://www.wpgmaps.com/contact-us/ stating you would like a copy of 6.19, please provide your purchase address so we can verify that and we’ll get a link out to you.

    Kind regards
    – Perry

    #36805

    Mike
    Member

    Thanks Perry!

    I have downloaded v6 and applied the same changes again, but the same issue persists:

    ReferenceError: google is not defined
     /test/:197

    ReferenceError: MapLabel is not defined
     /wp-content/plugins/wp-google-maps-pro/js/core.js:3036

    However, if I use the uncompiled version of the google maplabel.js, I get slightly different errors:

    ReferenceError: google is not defined
     /test/:198

    TypeError: this.set is not a function
     /test/:197

    At this point, I’m not quite sure how to proceed. I’m guessing there is no timeline for getting polygon labels officially released into v7?

    #36841

    Perry
    Moderator

    Hi Mike

    I’m afraid that’s correct, we do have this on our feature request list but we don’t have a deadline set for that at the moment.

    My apologies I can’t be more forthcoming on this.

    Regarding the error, are you sure you aren’t using the setting “Do Not Load Google Maps API”?

    Kind regards
    – Perry

    #36849

    Mike
    Member

    I almost have it working, just need to play around with some styles.

    The error happened when I called maplabel-compiled.js in the header. Once I moved it to the footer it started working!

    Thanks all!

    #36850

    Mike
    Member

    @kzeni any ideas on how to get the labels to appear on top of polygons? I changed z-index with no luck.

    test

    #36851

    KZeni
    Member

    What’s odd is that your map has the container of the labels using a lower z-index which then has the individual labels set to use the defined z-index in the script (screenshot: https://cloudup.com/i_OhtBo1wue). Meanwhile, mine has it so the defined z-index affects the container as well as the individual elements (resulting on it showing on top as desired. Screenshot: https://cloudup.com/cr131J2Iha0)

    Maybe go back to having zIndex: 9999 in your script to match what was provided (wondering if there’s an upper range where Google Maps doesn’t behave as expected). Also, my site’s using https://maps.google.com/maps-api-v3/api/js/32/10/map.js whereas yours is using https://maps.google.com/maps-api-v3/api/js/31/8b/map.js so you may find that changing the Google Maps API version in the WP Google Maps settings has this behaving a bit better.

Viewing 15 posts - 1 through 15 (of 32 total)

You must be logged in to reply to this topic.