<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/leaflet</code> package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/alejo90/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/alejo90">@alejo90</a></li>
</ul>
</li>
</ul>
<p dir="auto">Currently, only function style is supported by typings for GeoJSON style. Typings should be updated to support a simple object as styles as well.</p>
<p dir="auto">See documentation: <a href="http://leafletjs.com/examples/geojson/" rel="nofollow">http://leafletjs.com/examples/geojson/</a></p>
<blockquote>
<p dir="auto">The style option can be used to style features two different ways. First, we can pass a simple object that styles all paths (polylines and polygons) the same way:</p>
</blockquote>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var myLines = [{
    &quot;type&quot;: &quot;LineString&quot;,
    &quot;coordinates&quot;: [[-100, 40], [-105, 45], [-110, 55]]
}, {
    &quot;type&quot;: &quot;LineString&quot;,
    &quot;coordinates&quot;: [[-105, 40], [-110, 45], [-115, 55]]
}];

var myStyle = {
    &quot;color&quot;: &quot;#ff7800&quot;,
    &quot;weight&quot;: 5,
    &quot;opacity&quot;: 0.65
};

L.geoJSON(myLines, {
    style: myStyle
}).addTo(map);"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">myLines</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">{</span>
    <span class="pl-s">"type"</span>: <span class="pl-s">"LineString"</span><span class="pl-kos">,</span>
    <span class="pl-s">"coordinates"</span>: <span class="pl-kos">[</span><span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">100</span><span class="pl-kos">,</span> <span class="pl-c1">40</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">105</span><span class="pl-kos">,</span> <span class="pl-c1">45</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">110</span><span class="pl-kos">,</span> <span class="pl-c1">55</span><span class="pl-kos">]</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-s">"type"</span>: <span class="pl-s">"LineString"</span><span class="pl-kos">,</span>
    <span class="pl-s">"coordinates"</span>: <span class="pl-kos">[</span><span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">105</span><span class="pl-kos">,</span> <span class="pl-c1">40</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">110</span><span class="pl-kos">,</span> <span class="pl-c1">45</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">115</span><span class="pl-kos">,</span> <span class="pl-c1">55</span><span class="pl-kos">]</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

<span class="pl-k">var</span> <span class="pl-s1">myStyle</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-s">"color"</span>: <span class="pl-s">"#ff7800"</span><span class="pl-kos">,</span>
    <span class="pl-s">"weight"</span>: <span class="pl-c1">5</span><span class="pl-kos">,</span>
    <span class="pl-s">"opacity"</span>: <span class="pl-c1">0.65</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-v">L</span><span class="pl-kos">.</span><span class="pl-en">geoJSON</span><span class="pl-kos">(</span><span class="pl-s1">myLines</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-c1">style</span>: <span class="pl-s1">myStyle</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">addTo</span><span class="pl-kos">(</span><span class="pl-s1">map</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<blockquote>
<p dir="auto">Alternatively, we can pass a function that styles individual features based on their properties. In the example below we check the "party" property and style our polygons accordingly:</p>
</blockquote>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var states = [{
    &quot;type&quot;: &quot;Feature&quot;,
    &quot;properties&quot;: {&quot;party&quot;: &quot;Republican&quot;},
    &quot;geometry&quot;: {
        &quot;type&quot;: &quot;Polygon&quot;,
        &quot;coordinates&quot;: [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
    }
}, {
    &quot;type&quot;: &quot;Feature&quot;,
    &quot;properties&quot;: {&quot;party&quot;: &quot;Democrat&quot;},
    &quot;geometry&quot;: {
        &quot;type&quot;: &quot;Polygon&quot;,
        &quot;coordinates&quot;: [[
            [-109.05, 41.00],
            [-102.06, 40.99],
            [-102.03, 36.99],
            [-109.04, 36.99],
            [-109.05, 41.00]
        ]]
    }
}];

L.geoJSON(states, {
    style: function(feature) {
        switch (feature.properties.party) {
            case 'Republican': return {color: &quot;#ff0000&quot;};
            case 'Democrat':   return {color: &quot;#0000ff&quot;};
        }
    }
}).addTo(map);"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">states</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">{</span>
    <span class="pl-s">"type"</span>: <span class="pl-s">"Feature"</span><span class="pl-kos">,</span>
    <span class="pl-s">"properties"</span>: <span class="pl-kos">{</span><span class="pl-s">"party"</span>: <span class="pl-s">"Republican"</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-s">"geometry"</span>: <span class="pl-kos">{</span>
        <span class="pl-s">"type"</span>: <span class="pl-s">"Polygon"</span><span class="pl-kos">,</span>
        <span class="pl-s">"coordinates"</span>: <span class="pl-kos">[</span><span class="pl-kos">[</span>
            <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">104.05</span><span class="pl-kos">,</span> <span class="pl-c1">48.99</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">97.22</span><span class="pl-kos">,</span>  <span class="pl-c1">48.98</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">96.58</span><span class="pl-kos">,</span>  <span class="pl-c1">45.94</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">104.03</span><span class="pl-kos">,</span> <span class="pl-c1">45.94</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">104.05</span><span class="pl-kos">,</span> <span class="pl-c1">48.99</span><span class="pl-kos">]</span>
        <span class="pl-kos">]</span><span class="pl-kos">]</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-s">"type"</span>: <span class="pl-s">"Feature"</span><span class="pl-kos">,</span>
    <span class="pl-s">"properties"</span>: <span class="pl-kos">{</span><span class="pl-s">"party"</span>: <span class="pl-s">"Democrat"</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-s">"geometry"</span>: <span class="pl-kos">{</span>
        <span class="pl-s">"type"</span>: <span class="pl-s">"Polygon"</span><span class="pl-kos">,</span>
        <span class="pl-s">"coordinates"</span>: <span class="pl-kos">[</span><span class="pl-kos">[</span>
            <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">109.05</span><span class="pl-kos">,</span> <span class="pl-c1">41.00</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">102.06</span><span class="pl-kos">,</span> <span class="pl-c1">40.99</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">102.03</span><span class="pl-kos">,</span> <span class="pl-c1">36.99</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">109.04</span><span class="pl-kos">,</span> <span class="pl-c1">36.99</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">109.05</span><span class="pl-kos">,</span> <span class="pl-c1">41.00</span><span class="pl-kos">]</span>
        <span class="pl-kos">]</span><span class="pl-kos">]</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

<span class="pl-v">L</span><span class="pl-kos">.</span><span class="pl-en">geoJSON</span><span class="pl-kos">(</span><span class="pl-s1">states</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-en">style</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">feature</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">switch</span> <span class="pl-kos">(</span><span class="pl-s1">feature</span><span class="pl-kos">.</span><span class="pl-c1">properties</span><span class="pl-kos">.</span><span class="pl-c1">party</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-k">case</span> <span class="pl-s">'Republican'</span>: <span class="pl-k">return</span> <span class="pl-kos">{</span><span class="pl-c1">color</span>: <span class="pl-s">"#ff0000"</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
            <span class="pl-k">case</span> <span class="pl-s">'Democrat'</span>:   <span class="pl-k">return</span> <span class="pl-kos">{</span><span class="pl-c1">color</span>: <span class="pl-s">"#0000ff"</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">addTo</span><span class="pl-kos">(</span><span class="pl-s1">map</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The current style property of GeoJSONOptions is defined as a function returning style properties:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="style?: (featureData: any) =&gt; any;"><pre class="notranslate"><code class="notranslate">style?: (featureData: any) =&gt; any;
</code></pre></div>
<p dir="auto">However, the real definition is wider, as I am allowed to pass in a regular object like so:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var geoJson = L.geoJson(geoJsonRoute, {
    style: {
        &quot;color&quot;: &quot;#ff7800&quot;,
        &quot;weight&quot;: 5,
        &quot;opacity&quot;: 0.65
    }
});"><pre class="notranslate"><code class="notranslate">var geoJson = L.geoJson(geoJsonRoute, {
    style: {
        "color": "#ff7800",
        "weight": 5,
        "opacity": 0.65
    }
});
</code></pre></div>
<p dir="auto">which gets rejected by the current typing. Can we widen the definition of style?<br>
(see also <a href="http://leafletjs.com/examples/geojson.html" rel="nofollow">http://leafletjs.com/examples/geojson.html</a>)</p>
<p dir="auto">(cc-ing <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/rgripper/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/rgripper">@rgripper</a> ?)</p>