Map using Mapbox shows oddly on large mashup

Home Forums MapPress Support Map using Mapbox shows oddly on large mashup

Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #18470
    joew
    Participant

    When displaying a page using this shortcode, each icon gets a little box around it and the screen is tiled. [mashup query=”post_type=any&posts_per_page=-1″ width=”100%” height=”650″]

    https://www.ruralswalabama.org/map/

    However, when displaying the same number of attractions here in an archive view, the map displays correctly.

    https://www.ruralswalabama.org/attraction/

    What can I do?

    #18471
    joew
    Participant

    I’m noticing that when it runs this way, things display correctly.

    <?php echo do_shortcode(‘[mashup query=”types=@types&towns=@towns&counties=@counties&tag=@tag&posts_per_page=-1″ hideempty=”true” width=”100%” height=”350px”]
    ‘); ?><div class=spacer-map></div>

    Like when it runs from inside an archive.php page. But when it is inserted as a shortcode, it does not.

    #18472
    Chris
    Keymaster

    Hi,

    It looks like this is due to the theme interfering with the Leaflet map styles.  I’ve pasted one of the relevant theme sections below.
    In most browsers you can open development tools using F12, which will let you see what CSS is applied to a particular element.
    For example, it looks like the theme is applying background: #fff to ALL images on the page, including the map icons.
    Some options to fix it include:
    a) Switch themes
    b) Remove that CSS from the theme’s ‘styles.css’
    c) Add you own override at the bottom of syles.css, for example:
    .mapp-layout img { background: none !important; }
    Here’s the styles.css section:
    
    .post img,
    .type-page img,
    .type-feature img,
    .type-testimonial img,
    .type-portfolio img,
    .search-results .page img,
    .search-results .type-product img,
    .search-results .type-feature img,
    .search-results .type-testimonial img,
    .search-results .type-portfolio img,
    .post img.thumbnail,
    .type-page img.thumbnail,
    .type-feature img.thumbnail,
    .type-testimonial img.thumbnail,
    .type-portfolio img.thumbnail,
    .search-results .page img.thumbnail,
    .search-results .type-product img.thumbnail,
    .search-results .type-feature img.thumbnail,
    .search-results .type-testimonial img.thumbnail,
    .search-results .type-portfolio img.thumbnail {
      /* padding: .53em; */
      /* border: 1px solid #eaeaea; */
      background: #fff;
      max-width: 100%;
      height: auto;
    }
    #18473
    joew
    Participant

    Thanks so much. I should have realized it was the very old theme that I’m using! I used your css above (and added an additional border element) .mapp-layout img { background: none !important; border: 0px; } and it more or less solved my problem. Thanks so much for the help! I should have thought it was a CSS issue instead of something more problematic….

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.