protomaps / protomaps-leaflet

Lightweight vector map rendering + labeling and symbology for Leaflet
https://protomaps.com/docs/frontends/leaflet
BSD 3-Clause "New" or "Revised" License
764 stars 43 forks source link

paintRules - all road LineSymbolizer color properties are set to "major" theme value instead of appropriate theme value #146

Open Dixter opened 7 months ago

Dixter commented 7 months ago

This prevents styling of different roads kinds by modifying theme values.

The color properties on lines 302, 318, 333 & 367 of src/default_style/style.ts, should be updated to t.other, t.minor_a, t.medium & t.highway respectively

{
    dataLayer: "roads",
    symbolizer: new LineSymbolizer({
        color: t.other,
        width: (z, f) => {
            return exp(1.6, [
                [14, 0],
                [20, 7],
            ])(z);
        },
    }),
    filter: (z, f) => {
        const kind = getString(f.props, "pmap:kind");
        return ["other", "path"].includes(kind);
    },
},
{
    dataLayer: "roads",
    symbolizer: new LineSymbolizer({
        color: t.minor_a,
        width: (z, f) => {
            return exp(1.6, [
                [13, 0],
                [18, 8],
            ])(z);
        },
    }),
    filter: (z, f) => {
        return f.props["pmap:kind"] === "minor_road";
    },
},
{
    dataLayer: "roads",
    symbolizer: new LineSymbolizer({
        color: t.medium,
        width: (z, f) => {
            return exp(1.6, [
                [7, 0],
                [12, 1.2],
                [15, 3],
                [18, 13],
            ])(z);
        },
    }),
    filter: (z, f) => {
        return f.props["pmap:kind"] === "medium_road";
    },
},
{
    dataLayer: "roads",
    symbolizer: new LineSymbolizer({
        color: t.major,
        width: (z, f) => {
            return exp(1.6, [
                [6, 0],
                [12, 1.6],
                [15, 3],
                [18, 13],
            ])(z);
        },
    }),
    filter: (z, f) => {
        return f.props["pmap:kind"] === "major_road";
    },
},
{
    dataLayer: "roads",
    symbolizer: new LineSymbolizer({
        color: t.highway,
        width: (z, f) => {
            return exp(1.6, [
                [3, 0],
                [6, 1.1],
                [12, 1.6],
                [15, 5],
                [18, 15],
            ])(z);
        },
    }),
    filter: (z, f) => {
        return f.props["pmap:kind"] === "highway";
    },
},
bdon commented 7 months ago

Thanks, I have not had the time to implement this yet. If you need custom styling of specific tags I’d recommend using maplibre instead