CODEWITHSUNDEEP
javascriptgismapboxlegendchoropleth
tastathamt
tastathamt

Reputation: 41

Mapbox GL JS Creating Custom Legend

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>

Upvotes: 4

Views: 14440

Answers (2)

krishna lodha
krishna lodha

Reputation: 417

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

Upvotes: 2

AndrewHarvey
AndrewHarvey

Reputation: 3055

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.

Upvotes: 5

Related Questions