31:T514,evaluate = (style, {zoom, feature, featureState}) => { const type = style.type; const evaluateProperty = paintOrLayout => ([key, value]) => { const spec = styleSpec.latest[paintOrLayout + '_' + type][key]; const expressionResult = styleSpec.expression.createPropertyExpression(value, spec); if (expressionResult.result === 'success') { let result = expressionResult.value.evaluate({zoom}, feature, featureState); if (result.hasOwnProperty('r')) { result = html` ${result.toString()}`; } return html`

${key}: ${result}

`; return [key, result]; } else { console.log(expressionResult) throw expressionResult.value; } } const paint = Object.entries(style.paint).map(evaluateProperty('paint')) const layout = Object.entries(style.layout).map(evaluateProperty('layout')) return html`

Layout

${layout}

Paint

${paint}

`; }32:[] 2f:{"title":"Mapbox Style Calculator","cells":[{"id":0,"value":"md`# Mapbox Style Calculator\n\nOften when building stuff with MapboxGL, you want a way to evaluate your styles in a non-visual, quantitative way. This notebook allows you to do that. \n\n[Handy link to the docs](https://docs.mapbox.com/mapbox-gl-js/style-spec/)\n\nHere's the evaluated style:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"// Put your style spec code in here and press shift-enter\nevaluate({\n type: 'fill',\n paint: {\n 'fill-color': ['case', ['==', ['get', 'foo'], 'bar'], 'blue', 'red']\n },\n layout: {\n 'visibility': \"none\"\n }\n}, environment)","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`## Environment\n\nHere you can customize the inputs that go into the calculation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof zoom = slider({min: 0, max: 23, value: 9, title: \"Zoom\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`This is the feature used for data-driven styling:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"feature = ({\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [30, 30]\n },\n id: 3,\n properties: {\n foo: 'bar'\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"md`Here you can customize the feature state:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"featureState = ({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"md`---\n\nHere are some bits needed to implement this tool.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"environment = ({zoom, feature, featureState})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"styleSpec = require(\"mapbox-gl@1.2.1/dist/style-spec/index.js\");\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}