Not showing the id in the screen when hovering

I am using leaflet and mapbox and I use the function to print the id nuber on the screen when hovering over the line in the map.

geojson = L.geoJson(lines, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);

var info = L.control();

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this.update();
    return this._div;
};


info.update = function (props) {
    this._div.innerHTML = '<h4><b>Links<b></h4>' +  (props ?
        '<b>Link' + props.id + '</b><br />'  
        : 'Hover over a link');


};

info.addTo(map);

The way I draw the line is by the following geoJSON file

var lines = {
    "type": "FeatureCollection",
    "features": [{
        "type": "LineString",
        "coordinates": [
            [103.85, 1.28992],
            [103.89, 1.294],
            [103.83, 1.216]
        ],
        "properties": { "id": "1" }
    }, {
        "type": "LineString",
        "properties": { "id": "2" },
        "coordinates": [
            [103.5, 1.292],
            [103.9, 1.4],
            [103.3, 1.21]
        ]
    }, {
        "type": "LineString",
        "properties": { "id": "3" },
        "coordinates": [
            [103.6, 1.291],
            [103.6, 1.39],
            [103.3, 1.29]
        ]
    }]
};

but when i hover over the line it shows "undefined" instead of showing the id.Any help is appreciated

Calculate center coordinates, zoom, and stops of the layer dynamically

Below is my code to display a base map, set center coordinates and zoom level to show Ghana in view-port and also style/ color the ghana map for NDVI property of my source layer (mapbox hosted tileset) ghanaNDVILayer.

 mapID='myMapID';
    mapboxgl.accessToken = 'accessToken';

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [-1.41, 6.32],
        zoom: 5
    });

    map.on('load', function () {
        map.addLayer({
            'id': 'main',
            'type': 'fill',
            'layout': {},
            'paint': {
                'fill-color': {
                  property: 'NDVI',
                    stops: [
                        [0, '#F2F12D'],
                        [1, '#EED322'],
                        [2, '#E6B71E'],
                        [3, '#DA9C20'],
                        [4, '#CA8323'],
                        [5, '#B86B25'],
                        [6, '#A25626'],
                        [7, '#8B4225'],
                        [8, '#723122']
                    ]
                },
                'fill-opacity': 0.8
            },
            'source': {
                'type': 'vector',
                'url': 'mapbox://' + mapID
            },
           "source-layer": "ghanaNDVILayer",
        });
    });

Now if you see in above code I've hard coded the center coordinates, zoom level and stops array which is typical for this Ghana NDVI trends example.

Now, this approach is fine when I am dealing with only one data source (in this case ghana data source) but I can't hard code these values as my data source could change and could be any region of the world and the property could also be anything other than NDVI.

I am using mapbox hosted tilesets as the data source, but I also have the original geoJson data source on my server.

Is there any way in Mapbox to calculate center, zoom and stops dynamically depending on the source we are loading?

The other approach I thought is to pass the tileset source Id to my server and locate the original geoJSON and using that calculate the center, zoom and stops on the server and then pass these values to my client and then render the map in the js.

Let me know what is the best way to calculate these values dynamically.

Mapbox data with google sheets

I am working to develop a crowdsourcing website that takes input from google forms and displays this information on a map. I am working with mapbox and am looking for a way to get the data points in my google spreadsheet (with lat/long info) to automatically show up on the map. Any tips would be appreciated, thanks!

Drawing annotations over mapbox map

I am using Mapbox as my mapping library. I am trying to add a functionality where after the map has been rendered completely, the user can draw an annotation and add a comment for it (see image). Now, these annotation details (drawn line coordinates and message) should be saved into my GeoJSON, so that next time when the user reloads the map, it should show the same annotation.

Now I didn't find native support in mapbox for annotation. So not sure how to implement this.

Is there any way to draw annotations over the map after the map is rendered?