Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[TEst mapboxdraw, mapbox layer  et mapboxdraw layer to be able to switch]">
    <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.45.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.4/mapbox-gl-draw.css' type='text/css' />  
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.4/mapbox-gl-draw.js'></script>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
 
<div id='map'></div>
<script>
  var someFakeData = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {"fips": true },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -101.90917968749999,
              52.669720383688166
            ],
            [
              -102.0849609375,
              48.8936153614802
            ],
            [
              -99.404296875,
              48.86471476180277
            ],
            [
              -99.7119140625,
              52.5897007687178
            ],
            [
              -101.90917968749999,
              52.669720383688166
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": { },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -96.1962890625,
              51.645294049305406
            ],
            [
              -96.8994140625,
              49.009050809382046
            ],
            [
              -88.8134765625,
              49.095452162534826
            ],
            [
              -88.681640625,
              51.39920565355378
            ],
            [
              -96.1962890625,
              51.645294049305406
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {"fips": false},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -101.88720703125,
              48.777912755501845
            ],
            [
              -101.634521484375,
              48.436489955944154
            ],
            [
              -99.964599609375,
              47.517200697839414
            ],
            [
              -99.327392578125,
              48.56024979174329
            ],
            [
              -101.88720703125,
              48.777912755501845
            ]
          ]
        ]
      }
    }   
  ]
}
  
  
​
  
var drawData = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {"isProcessed": true},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -101.92565917968749,
          48.79239019646406
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {"isProcessed": false},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -100.953369140625,
          48.785151998043155
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -100.887451171875,
          48.5275192374508
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -101.832275390625,
          48.4765629664158
        ]
      }
    }
  ]
}  
  // Minnesota = 27, BRRRRRR ITS COLD
var VERY_COLD_US_STATE_FIPS_CODE = '27' 
​
// a string property on your source's GeoJSON
var PROPERTY_NAME = 'fips' 
​
// lets make a style that will highlight Minnesota's border with a
// thicker border - so you know where it's cold!
var equalityExpression = ['==', ['get', PROPERTY_NAME], true];
var equalityExpressionFalse = ['==', ['get', PROPERTY_NAME], false];
var widthExpression = ['case',
  equalityExpression, 5.5,
  equalityExpressionFalse, 8,
  ['!', ['has', PROPERTY_NAME]], 12.5,
  0.5,
]
​
var colorExpression = ['case',
  equalityExpression, '#214AED',
  equalityExpressionFalse, '#40CC16',
  '#FF0000',
]
​
// apply our expression to the `line-width` property
// per the mapbox style spec
​
// this doesnt work :(
var paintProperty = {}
paintProperty['line-width'] = widthExpression
paintProperty['line-color'] = colorExpression
​
​
​
​
var colorExpressionPoint = ['case',
    ["==", ['get', 'isProcessed'], true ], '#214AED',
    ["==", ['get', 'isProcessed'], false], '#40CC16',
    '#FF0000'
]
​
var paintPropertyPoint = {};
paintPropertyPoint['circle-radius'] = 12;
paintPropertyPoint['circle-blur'] = 0.5;
paintPropertyPoint['circle-color'] = colorExpressionPoint;
  
  
  
var style = {
  'id': 'equality_should_not_only_be_promised_but_delivered',
  'type': 'line',
  'source': {
     "type": "geojson",
     data: someFakeData,
  },
  'minzoom': 0,
  'filter': [
    '==',
    '$type',
    'Polygon',
  ],
  'layout': {
    'line-join': 'round',
    'line-cap': 'round',
  },
  'paint': paintProperty,
}
​
​
var mapboxDrawStylesCustom = [
    {
      'id': 'agent-point-inactive',
      'type': 'circle',
      'filter': ['all',
        ['==', 'active', 'false'],
        ['==', '$type', 'Point'],
        ['==', 'meta', 'feature'],
        ['!=', 'mode', 'static']
      ],
      'paint': paintPropertyPoint
    },
​
    {
      'id': 'agent-point-active',
      'type': 'circle',
      'filter': ['all',
        ['==', '$type', 'Point'],
        ['!=', 'meta', 'midpoint'],
        ['==', 'active', 'true']],
      'paint': {
        'circle-radius': 12,
        'circle-blur': 0.5,
        'circle-color': '#fbb03b'
      }
    },
    {
      'id': 'agent-point-static',
      'type': 'circle',
      'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Point']],
      'paint': {
        'circle-radius': 5,
        'circle-color': '#404040'
      }
    }
  ];   
​
​
​
​
​
mapboxgl.accessToken = 'pk.eyJ1IjoiYW5kZXN0MDEiLCJhIjoibW02QnJLSSJ9._I2ruvGf4OGDxlZBU2m3KQ';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [-94.50, 48], // starting position [lng, lat]
    zoom: 4 // starting zoom
});
  
  
    var draw = new MapboxDraw({
      displayControlsDefault: false,
      controls: {
        point: true,
        line_string: true,
        polygon: true,
        trash: true
      },
      styles: mapboxDrawStylesCustom,
      userProperties: true
    });  
  
    map.addControl(draw);
  
map.on('load', function () {
  //map.addLayer(style);
  
  draw.set(drawData);
  
  return
})
</script>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
curvenutpro
0viewers