MapBox Map is not showing listings

Can someone please help me sync the listings and the MapBox? I have added the API key for MapBox to the integration tab and enabled the MapBox functionality. Yet, none of my listings are showing on the map. Below, I have included a screenshot.

Hi,

Please make sure that you have configured Geolocation correctly using this doc: How to set up Geolocation - HivePress Help Center. If the issue exists, please send us a link to your website and we will take a closer look.

1 Like

I am still having challenges with the Geodirectory. I live in Puerto Rico, so I am not sure if it is the formatting of the addresses that is causing an issue. My website is www.conectadopr.com. Many of the addresses are showing up in the wrong location on the map. I also want to add a large map to show all of the listings and they are not properly syncing.

Yes, this may be related to inconsistencies in the Google or Mapbox datasets. We just fetch the coordinates provided by Google/Mapbox via API and save them. We’ll also consider adding an option for users to drop the map marker manually for specific addresses.

Would you recommend utilizing coordinates instead of addresses in my case? My primary objective is to ensure that each listing is correctly associated with a region, but I understand this largely depends on the accuracy of the address data. Could you provide guidance on how best to achieve this synchronization between regions and listings?

I have two workarounds in mind:

  1. List the cities instead of the addresses so that all listings are synced to their respective regions.
  2. Develop a custom code that can tailor my requests while keeping the addresses on the listings.

I am new to Hivepress but am leveraging ChatGPT to create code to develop the website. Would this coding work to resolve it? I want to troubleshoot it using what I have.

import requests

def geocode_address(address):
“”"
Function to geocode an address and return its coordinates
“”"
access_token = “YOUR_MAPBOX_ACCESS_TOKEN” # Replace this with your actual Mapbox access token
url = f"https://api.mapbox.com/geocoding/v5/mapbox.places/{address}.json?access_token={access_token}"

try:
    response = requests.get(url)
    data = response.json()
    
    if response.status_code == 200:
        # Extract latitude and longitude from the response
        features = data['features']
        if features:
            longitude, latitude = features[0]['center']
            return latitude, longitude
        else:
            print("No results found for the provided address.")
            return None
    else:
        print(f"Geocoding failed: {response.status_code}")
        return None
except Exception as e:
    print(f"An error occurred: {str(e)}")
    return None

Example usage

address = “1600 Amphitheatre Parkway, Mountain View, CA” # Replace with your address
coordinates = geocode_address(address)
if coordinates:
print(f"Coordinates for the address ‘{address}’: {coordinates}")
else:
print(“Failed to geocode the address.”)

There may be a workaround if you enter locations as a site admin manually, e.g. if it’s a website with only listings added by the admin. Then I can provide a snippet to make the latitude/longitude fields editable to enter the coordinates manually, let me know.

Unfortunately the posted code will not work, it’s in another programming language than PHP, seems to be Python.

Yes, all listings will be added by me as the administrator. I am using a “Claim Listings” model during the launch. Please provide the snippet and any other guidance on how to install please.

I also converted the code from the previous format to HTML, do you think it would work?

Geocoding Example
<script>
    // Your Mapbox access token
    const accessToken = "YOUR_MAPBOX_ACCESS_TOKEN";

    // Function to perform geocoding
    async function geocode(address) {
        const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${address}.json?access_token=${accessToken}`;

        try {
            const response = await fetch(url);
            const data = await response.json();
            
            if (response.status === 200) {
                const features = data.features;
                if (features && features.length > 0) {
                    const [longitude, latitude] = features[0].center;
                    document.getElementById('result').innerText = `Latitude: ${latitude}, Longitude: ${longitude}`;
                } else {
                    document.getElementById('result').innerText = "No results found for the provided address.";
                }
            } else {
                document.getElementById('result').innerText = `Geocoding failed: ${response.status}`;
            }
        } catch (error) {
            document.getElementById('result').innerText = `An error occurred: ${error}`;
        }
    }

    // Example usage
    const address = "Your Address Here";
    geocode(address);
</script>

Hi,

Please use this sample PHP snippet: How to latitude and longitude fields to add property form - #4 by yevhen

Please note that it can require further customization.

​I hope this is helpful to you.

1 Like