mapbox / mapbox-sdk-js

A JavaScript client to Mapbox services, supporting Node, browsers, and React Native
Other
718 stars 186 forks source link

Styles APIでGeoJSONのソースをサポートして欲しい/Needed: GeoJSON source support by Styles API #357

Closed mutoyuka closed 4 years ago

mutoyuka commented 4 years ago

Styles APIでGeoJSONのソースをサポートして欲しい。 (Needed: GeoJSON source support by Styles API)

GeoJSONで追加したレイヤーを含むスタイルの作成でエラーが発生します。 (Error when creating a style that includes a layer added with GeoJSON)

地図を作成 (Create map)

mapboxgl.accessToken = '{ accessToken }';
var map = new mapboxgl.Map({
 container: 'map',
    style: 'mapbox://styles/{myacountid}/{styleid}',
    center: [139.7621, 35.6797],
    zoom: 13,
    pitchWithRotate: false,
    preserveDrawingBuffer: true
});

地図にGeoJSONで直線を描画 (Draw a line on the map with GeoJSON)

var lineLayer = {
    "id": "route",
    "type": "line",
    "source": {
        "type": "geojson",
        "data": {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": latlons
            },
            "properties": {}
        }
    },
    "layout": {
        "line-join": "round",
        "line-cap": "round"
    },
    "paint": {
        "line-color": "",
        "line-width": ""
    }
};

coordinates、line-color、line-widthに値を設定 (Set values for coordinates, line-color, line-width)

GeoJSONでレイヤーを追加 (Add layers with GeoJSON)

map.addLayer(lineLayer);

var mapboxClient = mapboxSdk({ accessToken });

地図のスタイルを取得 (Get map style)

var mystyle = map.getStyle();

取得したスタイルを設定して新たにスタイルを作成 (Create a new style by setting the acquired style)

mapboxClient.styles.createStyle({
    style: {
        version: mystyle.version,
        name: mystyle.name,
        center: [center.lng, center.lat],
        zoom: map.getZoom(),
        metadata: mystyle.metadata,
        sources: mystyle.sources,
        layers: mystyle.layers,
        glyphs: mystyle.glyphs
    },
    ownerId: 'myacountid'
})
.send()
.then(response => {
  const style = response.body;
  console.log(style);
});

地図上に直線は描画されますが、スタイルを作成するとエラーになります (A line is drawn on the map, but creating a style results in an error.)

エラー内容(error contents): message: "source.data: Unsupported property "data"" type: "HttpError" statusCode: 422

andrewharvey commented 4 years ago

The styles API doesn't support embedded GeoJSON sources, which is the reason why you're getting an error back.

mutoyuka commented 4 years ago

今後サポートする予定はありますか? Do you have any plans to support it in the future?

andrewharvey commented 4 years ago

Best to ask Mapbox Support about that since this library is just a wrapper around the actual API that Mapbox provide.

I'll close this ticket since it's not something that can be actioned within this library.

PS. I don't work at Mapbox, I'm just interested in this library and try to help out with the maintenance.