Display custom icon marker from Mapbox vector tiles

Question

I am using mapbox gl javascript. I have a large geojson data which contains point location (Latitude, Longitude) pair along with some properties. I want to load the large geojson into mapbox studio, and convert it into vector tiles.

Next important task for me is to load the vector tileset using mapbox gl javascript and show custom marker icon for the points in vector tiles. Can you please suggest how can I do that ?

Answer 1

A good place to start is working through some of the Mapbox-GL-JS examples, and reading the documentation.

Answer 2

The custom markers setting are explained here : https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

There are differents ways to display your tileset with its markers. Could you be more precise on what you are trying to do ? Do you want to display them from a web page ?

Meanwhile, you can try to upload you GeoJSON in a new tileset in your Mapbox Studio account. Then create a new style > new layer > select data from your tileset.

At this point, you put your data on Symbol type, then go to style > icon and select your custom icon you previously upload from the Images button at the right top of the editor.

Bon courage,

N.

Answer 3

Please have a look at the answer on my code block to load custom image for a layer. Note: I am using vector data source. Source data consists of points (Lat Lng pair).

Attached image is for reference. enter image description here

        map.addSource('ccc_location', {
            type: 'vector',
            url: 'mapbox://aciapprover111.4jkdyq5t'
        });
        map.loadImage('@Url.Content("~/Content/assets/img/green.png")', function (error, green) { //this is where we load the image file
            if (error) throw error;
            map.addImage("custom-green", green); //this is where we name the image file we are loading
            map.addLayer({
                'id': 'CCCLocations_VGO',
                'type': 'symbol',
                'source': 'ccc_location',
                "filter": ["all", ["==", "type", "VGO"]],
                'source-layer': 'CCCLocations-bgcof4',
                'layout': {
                    'icon-image': "custom-green",
                    'icon-size': 0.65,
                    'icon-allow-overlap': true
                }
            });
        });