<html>
<head>
    <meta charset='utf-8' />
    <title>Display a map</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.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/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 = 'pk.eyJ1Ijoic2hhaW5hZGFpbHkiLCJhIjoiY2pmMWIwZ21uMDd3bjJxdDdjbmRjYnZveCJ9.F1QUxSdyUXtUCU8aJfTPvg';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/shainadaily/cjfn3br341f412qqvw187utxe', // stylesheet location
    center: [119.834985, 11.672233], // starting position [lng, lat]
    zoom: 4 // starting zoom
});
  
  map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point, {
    layers: ['Location Pin'] // replace this with the name of the layer
  });

  if (!features.length) {
    return;
  }

  var feature = features[0];

  var popup = new mapboxgl.Popup({ offset: [0, -15] })
    .setLngLat(feature.geometry.coordinates)
    .setHTML('<h3>' + feature.properties.Title + '</h3><p>' + feature.properties.Description + '<br>'+ "Collected By : "+ feature.properties.By +'<br>'+ feature.properties.Date + '<br>'+ '<b>'+"Data"+'</b>' + '<br>'+
"Mature Fish : "+ feature.properties.Healthy + '</br>'+ "Undersized Fish : "+ feature.properties.Undersized + '</br>')
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);
});
</script>

</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.