Drawing lines on the map


#1

anyone can help, I want to draw lines on the map, but something goes wrong. I have installed the mapd server on my own gpu server, and it can run smoothly. Besides, I refer the code on “https://github.com/mapd/mapd-vega-mapboxgl-demo” to build the connection from front-end to back-end, now the back-end to transfer the rendering png file to the front-end after I send my query, but unfortunately, there is nothing on the png file, so maybe I failed to draw the line but I can’t get any error message from the server.

Here is my vega configuration code:
const vegaSpec = {
width: width,
height: height,
data: [
{
name: “geojson_test1”,
sql: “select mapd_geo as points from geojson_test1”,
format: {
type: “lines”,
coords: {
x: [“points”],
y: [
{from: “points”}
]
},
layout: “interleaved”
}
}
],
projections: [
{
name: “projection”,
type: “mercator”
}
],
scales: [
{
name: “x”,
type: “linear”,
domain: [ 10, 200],
range: “width”
},
{
name: “y”,
type: “linear”,
domain: [ 10, 80 ],
range: “height”
},
],
marks: [
{
type: “lines”,
from: {data: “geojson_test1”},
properties: {
x: {
scale: “x”,
field: “x”
},
y: {
scale: “y”,
field: “y”
}
},
opacity: 1,
strokeColor: “red”,
strokeWidth: 20
}
]
};

Here is the data structure in mapd database using the LINESTRING structure:


#2

Hi @xbsss,

Here is a code for rendering linestrings using VEGA that worked for me:
// LINESTRING Rendering
//
import sls from “single-line-string”

const makeVegaSpec = ({
width,
height,
minXBounds,
minYBounds,
maxYBounds,
maxXBounds,
minLon,
maxLon,
minLat,
maxLat
}) => ({
width,
height,
“data”: [
{
“name”: “lines”,
“format”: {
“type”: “lines”,
“coords”: {
“x”: [“points”],
“y”: [{“from”: “points”}]
},
“layout”: “interleaved”
},
“sql”: “SELECT rowid, orig_geom as points FROM veda_utility_lines where type = ‘communication’”
}
],
“projections”: [
{
“name”: “projection”,
“type”: “mercator”,
“bounds”: {
“x”: [minLon, maxLon],
“y”: [minLat, maxLat]
}
}
],

"scales": [
{
  "name": "line_color",
  "type": "ordinal",
  "domain": ["A", "B", "C"],
  "range": ["#22a7f0","#76c68f", "#c9e52f"]
}
],
"marks": [
{
  "type": "lines",
  "from": {"data": "lines"},
  "properties": {
    "x": {
      "field": "x"
    },
    "y": {
      "field": "y"
    },
    "strokeColor": "orange",
    "strokeWidth": 4,
    "lineJoin": "miter",
    "miterLimit": 10
  },
  "transform": {
    "projection": "projection"
  }
}
]

}
);
export default makeVegaSpec

Regards,
Veda


#3

The data set (utility_lines.csv) that I used:
$ cat utility_lines.csv
“street”, “type”, “orig_geom”
Jefferson St; communication; LINESTRING(-122.422008 37.807478 , -122.421397 37.807547, -122.420194 37.807667, -122.418477 37.807893, -122.415114 37.808317)
Beach St; communication; LINESTRING(-122.424746 37.806137, -122.422246 37.806467, -122.420675 37.806662, -122.410772 37.807946)

Created MapD table and imported the data:
mapdql> CREATE TABLE utility_lines (street TEXT, type TEXT, orig_geom GEOMETRY(LINESTRING,4326));
mapdql> COPY utility_lines FROM ‘/home/veda.shankar/utility_lines.csv’ WITH (delimiter=’;’, quoted=‘false’);

mapdql> \d utility_lines
CREATE TABLE utility_lines (
street TEXT ENCODING DICT(32),
type TEXT ENCODING DICT(32),
orig_geom GEOMETRY(LINESTRING, 4326) ENCODING COMPRESSED(32))


#4

Oh, thanks for your replying. Now I can finally see the lines I drawing after referring to your code, thanks again. But it seems that it still has a little problem. The lines are not shown in the place I expect, it is like they are all panning to another area but remaining the same spatial architecture. Do you have the same problem? If not, can you share your code about constructing the map? I guess something goes wrong when I initiate the map.


#5

Hi @xbsss,

I did not have that problem, the code is at https://github.com/omveda/mapd-vega-mapboxgl-geo. In the examples folder, you will find code samples for each of the supported geo data type and also how to layer them on the same map.

Regards,
Veda


#6

It looks like you’re not properly setting up your projection. From your example you’re not defining the bounds of your projection (you’re missing the bounds/x/y properties) nor are you using the projection on the mark.

Your vega should look like this:

{
  "width": <width>,
  "height": <height>,
  "data": [
    {
      "name": "geojson_test1",
      "sql": "select mapd_geo as points from geojson_test1",
      "format": {
        "type": "lines",
        "coords": {
          "x": ["points"],
          "y": [
            {"from": "points"}
          ]
        },
        "layout": "interleaved"
      }
    }
  ],
  "projections": [
    {
      "name": "projection",
      "type": "mercator",
      "bounds": {
        "x": [<minLon>, <maxLon>],
        "y": [<minLat>, <maxLat>]
      }
    }
  ],
  "marks": [
    {
      "type": "lines",
      "from": {"data": "geojson_test1"},
      "properties": {
        "x": {"field": "x"},
        "y": {"field": "y"},
        "opacity": 1,
        "strokeColor": "red",
        "strokeWidth": 1
      },
      "transform": {
        "projection": "projection"
      }
    }
  ]
}

#7

Hi @veda,

Sorry for getting back late. Thanks for sharing me your code, now the problem has solved!

Best regards,
xbsss


#8

Hi vastcharade,

Thanks for replying me, problem has solved.

Best regards