MapBox GL JS popups for the 0.18.0 version?

Question

I've this sample code using MapBox GL JS in which I load a GeoJSON point layer and I define the popup structure when the user clicks on point to show information details ...

<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
    mapboxgl.accessToken = '<PUT YOUR MAPBOX KEY HERE>';

    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      center: [7.828,44.836],
      zoom: 9
    });

    map.addControl(new mapboxgl.NavigationControl());

        map.on('load', function () {
                map.addSource("pointsStoryTelling", {
                        "type": "geojson",
                        "data": "./data/test.geoJSON"
                });

            map.addLayer({
                  "id": "pointsStoryTelling",
                  "type": "circle",
                  "source": "pointsStoryTelling",
                  "paint": {
                        "circle-radius": 5,
                        "circle-color": "#ff0000"
                  }
           });
   });

   map.on('click', 'pointsStoryTelling', function (e) {
      new mapboxgl.Popup()
          .setLngLat(e.lngLat)
          .setHTML(showPopUp(e))
          .addTo(map);
   });

    // Change the cursor to a pointer when the mouse is over the states layer.
     map.on('mouseenter', 'pointsStoryTelling', function () {
            map.getCanvas().style.cursor = 'pointer';
     });

    // Change it back to a pointer when it leaves.
     map.on('mouseleave', 'pointsStoryTelling', function () {
            map.getCanvas().style.cursor = '';
     });

  function showPopUp (e) {
   var html = '';
   html += "<table>";

   html += " <tr>";
   html += "  <td>";
   html += "   NOME = ";
   html += e.features[0].properties.NAME;
   html += "  </td>";
   html += " </tr>";

   html += " <tr>";
   html += "  <td>";
   html += "   INFO = ";
   html += e.features[0].properties.INFO;
   html += "  </td>";
   html += " </tr>";

   html += " <tr>";
   html += "  <td>";
   html += "   IMG_SRC = ";
   html += e.features[0].properties.IMG_SRC;
   html += "  </td>";
   html += " </tr>";

   html += " <tr>";
   html += "  <td>";
   html += "   Longitudine = ";
   html += e.features[0].properties.Longitudine;
   html += "  </td>";
   html += " </tr>";

   html += " <tr>";
   html += "  <td>";
   html += "   Latitudine = ";
   html += e.features[0].properties.Latitudine;
   html += "  </td>";
   html += " </tr>";

   html += "</table>";
   return html;
    }

</script>

</body>
</html>

Here you're a sample of my GeoJSON that I've in ./data/test.geoJSON

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "NAME": "<b>Entrata Castello del Valentino<\/b>", "INFO": "Torino", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1T.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1.Entrata_Castello_del_Valentino.JPG\" target=\"_blank\">Immagine 360 ø<\/a>", "Longitudine": 7.6855111, "Latitudine": 45.0546417, "Altitudine": 288.39, "Direzione": 202.5, "Data": "2017:06:06", "Ora": "17:57" }, "geometry": { "type": "Point", "coordinates": [ 7.6855111, 45.0546417 ] } },    
{ "type": "Feature", "properties": { "NAME": "<b>Via Frazione di Buriasco<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1B.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1.Via_Frazione_di_Buriasco.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4303883, "Latitudine": 44.8816653, "Altitudine": 0.0, "Direzione": 292.5, "Data": "2017:06:16", "Ora": "19:27" }, "geometry": { "type": "Point", "coordinates": [ 7.4303883, 44.8816653 ] } },    
{ "type": "Feature", "properties": { "NAME": "<b>Via Regione Maineri<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1A.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1.Via_Regione_Maineri.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4328394, "Latitudine": 44.8790463, "Altitudine": 336.29, "Direzione": 180.0, "Data": "2017:06:16", "Ora": "20:23" }, "geometry": { "type": "Point", "coordinates": [ 7.4328394, 44.8790463 ] } },    
{ "type": "Feature", "properties": { "NAME": "<b>Via Frazione di Buriasco<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10B.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10.Via_Frazione_di_Buriasco.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4236184, "Latitudine": 44.8790577, "Altitudine": 0.0, "Direzione": 270.0, "Data": "2017:06:16", "Ora": "19:30" }, "geometry": { "type": "Point", "coordinates": [ 7.4236184, 44.8790577 ] } },    
{ "type": "Feature", "properties": { "NAME": "<b>Via Rivasecca<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10C.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10.Via_Rivasecca.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4266083, "Latitudine": 44.88725, "Altitudine": 348.79, "Direzione": 0.0, "Data": "2017:06:16", "Ora": "20:16" }, "geometry": { "type": "Point", "coordinates": [ 7.4266083, 44.88725 ] } },    
{ "type": "Feature", "properties": { "NAME": "<b>Viale Mattioli<\/b>", "INFO": "Torino", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10T.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10.Viale_Mattioli.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.687725, "Latitudine": 45.0566306, "Altitudine": 282.6, "Direzione": 292.5, "Data": "2017:06:06", "Ora": "17:44" }, "geometry": { "type": "Point", "coordinates": [ 7.687725, 45.0566306 ] } }
]
}

All works fine if I use the v0.39.0 of MapBox GL JS but unfortunately I've to integrate this sample code in a more complex old web application based on v0.18.0 of MapBox GL JS and this code doesn't work if I use this version (you can try simply changing the version references in the above code ... )

I can't upgrade my web application but I don't find any documentaions about MapBox GL JS v0.18.0 anymore .....How may I manage my poupup? Suggestions? old examples? Some links to old API version?

score 2 · Accepted Answer · answered Sep 16 '17 at 10:36

2

Mapbox don't currently publish docs for older GL JS versions (ticketed here https://github.com/mapbox/mapbox-gl-js/issues/2398)

But you can build and view docs for older versions locally with:

git clone https://github.com/mapbox/mapbox-gl-js.git cd mapbox-gl-js git checkout v0.18.0 yarn install yarn run start-docs

answered Sep 16 '17 at 10:36

AndrewHarvey

2,219
12
15

When I try to execute yarn install I obtain ERROR: [Errno 2] No such file or directory: 'install'. I'm on Ubuntu 17.04 .... – Cesare Sep 16 '17 at 20:42
Anyway, I've found in the mapbox-gl-js/docs/_posts/examples/ directory the mapbox 0.18.0 examples and I found what I need and so I've solved – Cesare Sep 16 '17 at 22:04

score 0 · Answer 2 · answered Sep 16 '17 at 22:06

Here you're the code for the MapBox 0.18.0 version that works ...

<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
    mapboxgl.accessToken = '<PUT_YOUR_MAPBOX_KEY_HERE>';

    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/bright-v9',
      center: [7.828,44.836],
      zoom: 9
    });

    map.addControl(new mapboxgl.Navigation({position: 'bottom-left'}));

        map.on('load', function () {
                map.addSource("pointsStoryTelling", {
                        "type": "geojson",
                        "data": "./data/test.geoJSON"
                });

            map.addLayer({
                  "id": "pointsStoryTelling",
                  "type": "circle",
                  "source": "pointsStoryTelling",
                  "paint": {
                        "circle-radius": 5,
                        "circle-color": "#ff0000"
                  }
           });
   });


   // When a click event occurs near a marker icon, open a popup at the location of
   // the feature, with description HTML from its properties.
   map.on('click', function (e) {
       var features = map.queryRenderedFeatures(e.point, { layers: ['pointsStoryTelling'] });
       if (!features.length) {
           return;
       }

       var feature = features[0];

       var popup = new mapboxgl.Popup()
           .setLngLat(map.unproject(e.point))
           .setHTML(showPopUp(feature))
           .addTo(map);
   });

   // Use the same approach as above to indicate that the symbols are clickable
   // by changing the cursor style to 'pointer'.
   map.on('mousemove', function (e) {
       var features = map.queryRenderedFeatures(e.point, { layers: ['pointsStoryTelling'] });
       map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
   });

  function showPopUp (feature) {
   var html = '';
   html += "<table>";

   html += " <tr>";
   html += "  <td>";
   html += "   NOME = ";
   html += feature.properties.NAME;
   html += "  </td>";
   html += " </tr>";

   html += " <tr>";
   html += "  <td>";
   html += "   INFO = ";
   html += feature.properties.INFO;
   html += "  </td>";
   html += " </tr>";

   html += " <tr>";
   html += "  <td>";
   html += "   IMG_SRC = ";
   html += feature.properties.IMG_SRC;
   html += "  </td>";
   html += " </tr>";

   html += " <tr>";
   html += "  <td>";
   html += "   Longitudine = ";
   html += feature.properties.Longitudine;
   html += "  </td>";
   html += " </tr>";

   html += " <tr>";
   html += "  <td>";
   html += "   Latitudine = ";
   html += feature.properties.Latitudine;
   html += "  </td>";
   html += " </tr>";

   html += "</table>";
   return html;
    }

</script>

</body>
</html>

MapBox GL JS popups for the 0.18.0 version?

2 Answers2