Stack Overflow Asked by Shalaw Fatah on January 5, 2021
The code works perfectly for computers, after build, I can browse my website without trouble, but on smartphones and tablets, I cannot see any map, it’s strange because the icons are there on their place but the tiles are just a grey screen, notning is shown from the map. Please let me know if you have an idea as I searched other answers for a similar question but got nowhere.
Here is my code
Please ignore the boiler plate React, Gatsby and Graphql code, I put here just to show the whole code.
import React from "react"
import LayoutNoPadding from "../components/layoutNoPadding"
import { Map, Marker, Popup, TileLayer, Tooltip } from 'react-leaflet'
import {Icon} from 'leaflet'
import {graphql} from 'gatsby'
import AniLink from "gatsby-plugin-transition-link/AniLink"
import SEO from '../components/SEO'
import Img from 'gatsby-image'
import AllSearch from '../components/search/AllSearch'
const IndexPage = ({data}) => {
const {allStrapiGenomes:{nodes:genomes}} = data
return (
<LayoutNoPadding>
<SEO title="WWB" />
<AllSearch />
<div className="relative">
<div className="mx-10 px-6 absolute left-0 top-0 home-headline my-1">
<h1 class="sm:text-3xl text-2xl font-medium title-font text-white headline home-headline">Worldwide Bee</h1>
<p class="text-base leading-relaxed xl:w-full lg:w-full para pb-5 text-white">The Free Honey Bee Encyclopedia</p>
</div>
</div>
{typeof window !== 'undefined' &&
<Map center={[0, 0]}
zoom={2} maxZoom={5}
minZoom={2}
attributionControl={false}
tap={false}
scrollWheelZoom={false}
dragging={false}
>
<TileLayer
url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png"
/>
{genomes.map((genome)=> {
return (
<div className="bee-icons">
<Marker
position={[`${genome.coordinate_x}`,`${genome.coordinate_y}`]}
icon = { new Icon({
iconUrl: genome.bee_icon.childImageSharp.fluid.src,
iconSize: [60],
iconAnchor: [20, 40]
})}
>
<Tooltip>{genome.bee_name}</Tooltip>
<Popup>
<Img fluid={genome.bee_icon.childImageSharp.fluid} alt={genome.bee_name} />
<h1 className="text-xl py-2">{genome.bee_name}</h1>
<h1 className="text-lg text-gray-500">{genome.bee_genome}</h1>
<p className="text-sm text-gray-700 pb-2">{genome.summary}</p>
<AniLink fade to={`/genomes/${genome.slug}`} className="flex bg-gray-200 py-2 px-4 focus:outline-none text-lg cursor-pointer text-white rounded-full justify-center text-white hover:bg-gray-300 transition-all duration-500 ease-in-out">Read More</AniLink>
</Popup>
</Marker>
</div>
)
})}
</Map>
}
</LayoutNoPadding>
)
}
export default IndexPage
export const query = graphql`
{
allStrapiGenomes {
nodes {
bee_icon {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
bee_genome
coordinate_x
coordinate_y
summary
strapiId
bee_photo {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
bee_name
content
slug
}
}
}
`
The problem was the {r}
in url. It stands for retina
.
Replace it with @2x
or remove it completly.
Answered by Falke Design on January 5, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP