What is the right method to pass coordinates from model to mapbox component?

Questions General
1

Hello! I have mapbox map in my component:

{{#mapbox-gl class='map-container' initOptions=(hash pitch=30) as |map|}}

      {{#map.source options=(hash type='geojson' data=marker) as |source|}}
        {{source.layer layer=(hash
          type='circle'
          paint=(hash circle-color='#007cbf' circle-radius=10))}}
      {{/map.source}}
    {{/mapbox-gl}}

Where marker in Controller defined like this:

export default Controller.extend({
  
  marker: {
    type: 'FeatureCollection',
    features: [
    {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [ -96.7969879, 32.7766642 ] }
    },
    {
      type: 'Feature',
      geometry: { type: 'Point', coordinates: [ -94.7969879, 32.7766642 ] }
  }
    ]
  },  
});

And I have a model where my coordinates are in json (data.attributes.coordinates) which looks like "SRID=4326;POINT (84.3 50.1)". I can serialize it to simple [84,3 50.1], but I don’n know how to show them on the map, help me please. (ember 3.6)

2

Yeah, I solved this task. I have serialized coordinates on my backend to geojson format and pass them to the component: marker=point-objects.coordinates.

1 Like