Wix and mapbox integration (CMS)

[pilou]

Question:
Can you help me display these points dynamically (i.e. depending on the page we are on)?

Product:
Wix Editor

What are you trying to achieve:
[Explain the details of what you are trying to achieve. The more details you provide, the easier it is to understand what you need.]

What have you already tried:
I am creating a site on Wix. I created a CMS database with dynamic pages. It works very well. I would however like to add a map for each trip (each page is one trip). So I created a Velo javascript table with the list of points to display on the map.

Additional information:

// Récupérer l'élément de carte
const mapElement = $w('#votre_id_de_carte').value; // Remplacez 'votre_id_de_carte' par l'ID de votre élément de carte

// Initialiser la carte Mapbox
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
    container: mapElement,
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [0, 0], // Coordonnées de départ (peu importe car nous allons ajuster la vue)
    zoom: 10 // Niveau de zoom initial
});

// Ajouter des marqueurs pour chaque point d'intérêt
pointsOfInterest.forEach(point => {
    new mapboxgl.Marker()
        .setLngLat(point.coordinates)
        .setPopup(new mapboxgl.Popup().setHTML(`<h3>${point.name}</h3><p>${point.description}</p>`))
        .addTo(map);
});

// Ajuster la vue pour inclure tous les marqueurs
const bounds = new mapboxgl.LngLatBounds();
pointsOfInterest.forEach(point => {
    bounds.extend(point.coordinates);
});
map.fitBounds(bounds, { padding: 50 });

[CODE-NINJA]

mapbox-gl

[pilou]

Thanks but how can I integrate it in my wix website. I’ve already a mapbox map but I can’t integrate it into a page on my site and link it to my CMS.

[CODE-NINJA]

There are 3-ways i know…

1. INTEGRATION as NMP-package. → (installing the shown NMP)

2. Going the http + fetch way using http-request and endpoints.

3. Embedded code (HTML+JS+CSS code mix) → such codes you can get directly prom your map-box-editor (provider).

What exactly does mean you have already a —> a map-box?

Yes, all you have is…

1. You have registered on MapBox → created Account
2. You got your API-Key
3. You have done some edits inside of your Map-Box, which ever those are.

But this is not part of a Wix-Website.

You will have to use one of the above mentioned 3-options, to be able to integrate in on your Wix-Website.

And in all 3-options → you will need to know how to code, ecxept you check the Wix-APPs, if maybe an APP already existing for your wished FEATURE.

Oh a 4th. option could be → automations ← using for example → ZAPIER

[pilou]

In fact, I created a travel site on Wix. I have a CMS that allows me to list all the destinations that I offer. When we click on a destination, we have the details of the trip with the difference points of the journey. It is on this page that I want to integrate the map with the points on it that correspond to the journey.
Today, I have already personalized my map via the mapbox site, but the point that is blocking me is the integration of this map on the detailed travel page as well as the display of the points on it.

[CODE-NINJA]

Why not using google maps?

Map-Box will maybe give you more options, but if you have just a simple setup, you could use google-map and connecting it with your CMS-DATA.

Google-map is an available element inside Wix.

GoogleMap - Velo API Reference - Wix.com

Or going again the more flexible way…

Get location coordinates when clicking on maps

The google-map out of the Wix-Box won’t make you happy. Why? single-location-point only (no possibility to set multiple-pins on map) no click-event-option onto the marker All you can do on the provided version is. https://www.wix.com/velo/reference/$w/googlemap/location You will have to go the CUSTOM-WAY (like in most cases) if you want to generate your own wished functionality on your page. This is your way to success… Implement an HTML-Component onto your site. Register on GOOGLE-MA…

[pilou]

Mapbox allows you to do a lot of things compared to Google.
I just installed the package on the site.
but I have a problem with the code.
Should it be imported into the code as well as the package?

Cannot find name ‘mapboxgl’.

[CODE-NINJA]

1. NO NO NO !!! —> NEVER SHOW API-KEYS !!!
2. YOU WILL NEED TO INTEGRATE ON → BACKEND <— not on frontend!!!
3. SHOW CODES → ALWAYS IN → CODE-BLOCKS → much better then PICs → because EDITABLE → COPY & PASTE.

Which package have been installed ? → full name of package (the shown NPM above) ???

I think you are not realising how deep it could you drawn into code.

Maybe you first try to find an EMBED-VERSION provided by Map-Box, maybe?
Inside your Map-Box-Generator/Editor → isn’t there an options which allows you to generate a CODE for your current edited/generated MAP on MapBox ???

For COPY and PASTE ?

Since you are using → API-KEYS → (SENSITIVE DATA) ← you will also need to look for Wix-Secrets, where you will have to store the API-KEY (SECURE-STORAGE). <— next API-IMPLEMENTATION needed!

[pilou]

don’t worry, the code is not complete!!!
I initially just want to display a map.
yes I installed the package via the link you gave me.

then i coded this but the map is not showing.

import mapboxgl from ‘mapbox-gl/dist/mapbox-gl-csp’;

const map = new mapboxgl.Map({
  container: 'map', // container ID
  style: 'mapbox://styles/mapbox/streets-v12', // style URL
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
});

$w.onReady(function () {

});

This code has no error

[CODE-NINJA]

Your STEPS:

1. Install the NPM of your choice → done!
2. Open the NPM-README and check the APIs and CODE-STRUCTUREs —> done !?
3. Generate your BACKEND-JSW-FILE inside of your Wix-Editor → BACKEND
4. Generate the code inside of your created JSW-FILE.

import mapboxgl from 'mapbox-gl/dist/mapbox-gl';
import MapboxWorker from 'mapbox-gl/dist/mapbox-gl-csp-worker';


export function myFunction() {
  return mapboxgl; //inspect what it gives you on frontend (console-logging-it)
}

5. Copy the name of the generated JSW-FILE → for ex. → mapBox.jsw
6. Create a new wix-page (give it a name for example Map-Box) → your frontend.
7. Activate the dev-mode → done!
8. Navigate to the CODE-SECTION of your Map-Box-Page.
9. Import one of your generated functions of your BACKEND-MODULE (mapBox.jsw) on your FRONTEND…
   import { myFunction } from 'backend/mapBox.jsw'

Frontend-example-code:

import { myFunction } from 'backend/mapBox.jsw';

$w.onReady(async()=>{console.log('Page ready...');
    let mapBox = await myFunction; console.log('RESULT:  ', mapBox);
    
      // rest of code.......
      // rest of code.......
      // rest of code.......
      // rest of code.......

});

By the way → you also can add this into an HTML-Component inside of your Wix-Website and EDIT it on your own…

Display a map on a webpage | Mapbox GL JS

Maybe faster way to your solution.

This was just a quick start-guide → you will need much more!!!

So, your coding-adventure beginns.