Mapbox GL JS Creating Custom Legend

Question

I have created a custom map in Mapbox Studio with a tileset to create a choropleth map I have then exported the map, to extend the map using Mapbox GL JS.

I have followed the tutorial for creating a legend, which works fine when using Javascipt.j: https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-legend/

I need to use the Mapbox GL JS because I have also created popups with custom CSS which work quite nicely.

"map.legendControl.addLegend(document.getElementById('legend').innerHTML);" causes the map not to display the popups.

Please could someone offer assistance in getting a custom legend in Mapbox to work using Mapbox GL JS, as there is no documentation on the Mapbox website.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Show polygon information on click</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.2/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />

<style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>

<body>

<style>
.legend label,
.legend span {
  display:block;
  float:left;
  height:15px;
  width:20%;
  text-align:center;
  font-size:9px;
  color:#808080;
   }
</style>


 <div id='legend'  style='display:none;'>
 <strong>Indices of Multiple Deprivation (IMD) Score </strong>
  <nav class='legend clearfix'>
    <span style='background:#FED976;'></span>
    <span style='background:#FD8D3C;'></span>
    <span style='background:#FC4E2A;'></span>
    <span style='background:#E31A1C;'></span>
    <span style='background:#BD0026;'></span>
    <label>0-19</label>
    <label>20-34</label>
    <label>35-49</label>
    <label>50-64</label>
    <label>65-82</label>
    <small>Source: <a href="https://data.cdrc.ac.uk/dataset/cdrc-english-indices-of-deprivation-2015-geodata-pack-liverpool-e08000012">Consumer Data Research Centre</a></small>
 </div>

<div id='map'></div>
<script>

mapboxgl.accessToken = 'pk.eyJ1IjoidGFzdGF0aGFtMSIsImEiOiJjamZ1ejY2bmYxNHZnMnhxbjEydW9sM29hIn0.w9ndNH49d91aeyvxSjKQqg';

  var map = new mapboxgl.Map({
     container: 'map',
     style: 'mapbox://styles/tastatham1/cjg3vyld813id2spdnhy4sf9u',
     center: [-2.981979, 53.406315],
     zoom: 11,
     minZoom: 11,
    maxZoom: 15,
 });

   map.legendControl.addLegend(document.getElementById('legend').innerHTML);


</script>

</body>
</html>

AndrewHarvey · Accepted Answer · 2018-04-22 09:51:09Z

6

The example you've linked to is for Mapbox.js, which is different to Mapbox GL JS.

https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/ is an example of doing a basic legend with Mapbox GL JS.

answered Apr 22, 2018 at 9:51

AndrewHarvey

3,07313 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tastathamt Over a year ago

Thank you for your reply. I have created the example you have provided but this is not what I am after. I really like the HTML version, as linked in the online tutorial I provided, it looks much cleaner. Do you have any suggestions how to re-create this, as there are no tutorials online for Mapbox GL JS.

krishna lodha · Accepted Answer · 2019-06-29 08:22:15Z

2

there is no pre-defined way to get legends dynamically in Mapbox GL JS, but you can use following method :

use map.getStyle().layers to get array of all layers, and then you can look for the layer your are interested in. inside the array of that layer, you'll find a paint property which holds all cosmetic information such as zoom based coloring, radius of circle, height for extrusion, etc. you can save that paint info in other array and use it as per your need.

if you are looking for complete walkthrough for this, look here

answered Jun 29, 2019 at 8:22

krishna lodha

4615 silver badges16 bronze badges

Collectives™ on Stack Overflow

Mapbox GL JS Creating Custom Legend

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related