geostyler-mapbox-parser
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    geostyler-mapbox-parser

    GeoStyler-Style-Parser implementation for Mapbox

    Important Notes

    Since mapbox works with spritesheets, geostyler-mapbox-parser is only capable of handling sprites/icons if the application that is using the parser implements following API:

    GET /sprites/?name&baseurl

    • name - name of the sprite in the spritesheet corresponding json
    • baseurl - baseurl for retrieving spritesheet and sprite json

    The endpoint MUST return a reference to a single image.


    Mapbox Styles require the properties sources (root property) and source (layers property). geostyler-mapbox-parser only parses style related properties to keep a clear separation between style and data. Thus, sources and source have to be added to the created styleobject after parsing, manually. See code snippet below for an example implementation of a wrapper function.

    /**
     * Example wrapper function that maps a source to the corresponding
     * layer based on layer id. Expects a mapper object with key value
     * pairs in the format of "layerId:'sourceName'".
    **/
    function wrapper(sources, mapper, style) {
      if (typeof style === 'undefined') {
        return;
      }
      if (typeof mapper === 'undefined') {
        return style;
      }
      if (typeof sources === 'undefined') {
        return style;
      }
    
      style.sources = sources;
      style.layers.forEach(l => {
        l.source = mapper[l.id];
      });
      return style;
    }
    
    // required mapper object where the key refers to the layer id
    // and the value to the source name.
    var mapper = {
      "water": "mapbox-streets"
    };
    
    // mapbox sources object
    var sources = {
      "mapbox-streets": {
        "type": "vector",
        "url": "mapbox://mapbox.mapbox-streets-v6"
      }
    };
    
    // mapbox style object
    var mbStyle = {
      version: 8,
      layers: [...]
    };
    
    var wrappedStyle = wrapper(sources, mapper, style);

    How to use

    ES6:

    import MapboxParser from "geostyler-mapbox-parser";
    
    const pointSimplePoint = {
      name: "My Style",
      rules: [
        {
          name: "My Rule",
          symbolizers: [
            {
              kind: "Mark",
              wellKnownName: "Circle",
              color: "#FF0000",
              radius: 6
            }
          ]
        }
      ]
    };
    
    const parser = new MapboxParser();
    
    parser
      .writeStyle(pointSimplePoint)
      .then(mbStyle => console.log(mbStyle))
      .catch(error => console.log(error));

    Browser:

    const pointSimplePoint = {
      name: "My Style",
      rules: [
        {
          name: "My Rule",
          symbolizers: [
            {
              kind: "Mark",
              wellKnownName: "Circle",
              color: "#FF0000",
              radius: 6
            }
          ]
        }
      ]
    };
    var parser = new GeoStylerMapboxParser.MapboxStyleParser();
    parser
      .writeStyle(pointSimplePoint)
      .then(function(mbStyle) {
        console.log(mbStyle);
      })
      catch(function(error) {
        console.log(error);
      });

    Install

    npm i geostyler-mapbox-parser

    DownloadsWeekly Downloads

    59

    Version

    2.0.0

    License

    BSD-2-Clause

    Unpacked Size

    237 kB

    Total Files

    10

    Last publish

    Collaborators

    • jansule
    • annarieger
    • terrestris-info
    • marcjansen
    • kaivolland
    • dnlkoch
    • ahennr
    • buehner
    • hwbllmnn
    • lukaslohoff
    • mholthausen
    • sgoetsch
    • jorzekowsky
    • simonseyock
    • hblitza
    • jweskamm
    • unraveler