1

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?

Improve this question

2 Answers 2

Reset to default
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

Improve this answer
2
  • 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
    Commented Sep 16, 2017 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
    Commented Sep 16, 2017 at 22:04
0

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>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.