1

I need to modify the point dimensions in an application that use MapBox GL JS Draw plug-in (rif. https://github.com/mapbox/mapbox-gl-draw/).

I've tried to produce a little example with this code:

<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.24.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.24.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
  </head>
  <body>

<link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.11.15/mapbox-gl-draw.css" />
<script type="text/javascript" src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.11.15/mapbox-gl-draw.js"></script>
<script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js"></script>


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


<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2VzYXJlIiwiYSI6Im1LdmxtRU0ifQ.uoGK9BB9eywCPknCRlB9JA';
/* eslint-disable */
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/satellite-v9', //hosted style id
    center: [-91.874, 42.760], // starting position
    zoom: 12 // starting zoom
});


var draw = mapboxgl.Draw({
    drawing: true,
    displayControlsDefault: false,
    controls: {
        point: true,
        trash: true
    }
});
map.addControl(draw);



</script>

  </body>
</html>

This code works fine but the points dimensions are too small and I'd like to try to increase them.

I've tried to use a new definition of the "draw" object like this ...

var draw = mapboxgl.Draw({
  drawing: true,
  displayControlsDefault: false,
  controls: {
    'point': true,
    'trash': true
  },

  styles: [
    {
     'id': 'points-are-blue',
     'type': 'circle',
     'paint': {
      'circle-radius': 7
     }
    }
  ]
});

It works but I lose the original styles ....

Suggestions / examples / useful link are useful!

3

I don't see a way to pull out the defaults and add to them so...how about creating another instance of Draw, making a copy of its styles and passing that to an instance of Draw you hook up to the map? That would look like this:

var dummy = mapboxgl.Draw();
var draw = mapboxgl.Draw({
    drawing: true,
    displayControlsDefault: false,
    controls: {
        point: true,
        trash: true
    },

    styles: dummy.options.styles.concat({
     'id': 'points-are-blue',
     'type': 'circle',
     'paint': {
      'circle-radius': 7
     }
   })
});
map.addControl(draw);
2

The full default styles are here https://github.com/mapbox/mapbox-gl-draw/blob/master/src/lib/theme.js

In addition to the answer above, here are two more options:

1) copy the theme file add it to your app and add your styles to it.

This way if the default styles ever change in the library, your app will not change.

2) Link directly to the theme file assuming you are using a Node tool or some sort to build your app.

var theme = require('mapbox-gl-draw/src/lib/theme');

theme.push({
 'id': 'points-are-blue',
 'type': 'circle',
 'paint': {
  'circle-radius': 7
});

var draw = mapboxgl.Draw({
  ...
  styles: theme
});
  • It worked but then I got the error The layer 'gl-draw-polygon-and-line-vertex-inactive.hot' does not exist in the map's style and cannot be removed. – Falcoa Feb 15 '18 at 0:57
  • To avoid this error instead of pushing another element for the id 'gl-draw-polygon-and-line-vertex-inactive' I realised that I had to change the existing one already defined in theme. – Falcoa Feb 15 '18 at 1:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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