Polyline plot on map


#1

I have seen examples on point map plots but haven’t seen any on polylines. To be specific, the dc.rasterLayer accepts “points” but not “lines”. Is there a way to plot lines on a map with MapD?


#2

Hi Yaw,

I used VEGA specification to render the LINESTRING data type in MapD. the MapD connector API makes it easy to send the Vega JSON to the backend, which renders the visualization and returns a PNG image to the browser client. You can see my example here: https://github.com/omveda/mapd-vega-mapboxgl-geo.

The table with LINESTRING:
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))

Extracting the code specific to the LINESTRING:
import sls from “single-line-string”

const makeVegaSpec = ({
width,
height,
minXBounds,
minYBounds,
maxYBounds,
maxXBounds,
minLon,
maxLon,
minLat,
maxLat
}) => (
{
width,
height,
data: [
{
“name”: “sewer_lines”,
“format”: {
“type”: “lines”,
“coords”: {
“x”: [“points”],
“y”: [{“from”: “points”}]
},
“layout”: “interleaved”
},
“sql”: “SELECT rowid, orig_geom as points FROM utility_lines where type = ‘sewer’”
},
{
“name”: “comm_lines”,
“format”: {
“type”: “lines”,
“coords”: {
“x”: [“points”],
“y”: [{“from”: “points”}]
},
“layout”: “interleaved”
},
“sql”: “SELECT rowid, orig_geom as points FROM utility_lines where type = ‘communication’”
}
],
“projections”: [
{
“name”: “projection”,
“type”: “mercator”,
“bounds”: {
“x”: [minLon, maxLon],
“y”: [minLat, maxLat]
}
}
],
scales: [
{
name: “x”,
type: “linear”,
domain: [minXBounds, maxXBounds],
range: “width”
},
{
name: “y”,
type: “linear”,
domain: [minYBounds, maxYBounds],
range: “height”
},
{
“name”: “line_color”,
“type”: “ordinal”,
“domain”: [“A”, “B”, “C”],
“range”: ["#22a7f0","#76c68f", “#c9e52f”]
}
],
marks: [
{
“type”: “lines”,
“from”: {“data”: “sewer_lines”},
“properties”: {
“x”: {
“field”: “x”
},
“y”: {
“field”: “y”
},
“strokeColor”: “green”,
“strokeWidth”: 4,
“lineJoin”: “miter”,
“miterLimit”: 10
},
“transform”: {
“projection”: “projection”
}
},
{
“type”: “lines”,
“from”: {“data”: “comm_lines”},
“properties”: {
“x”: {
“field”: “x”
},
“y”: {
“field”: “y”
},
“strokeColor”: “orange”,
“strokeWidth”: 3,
“lineJoin”: “miter”,
“miterLimit”: 10
},
“transform”: {
“projection”: “projection”
}
}
]
}

);

export default makeVegaSpec


#3

@yawokyere @veda
geo types are avaiable on OS version, not in CE version :wink:


#4

makes a lot of sense. Will look into that.


#5

Veda, does vega work with mapd crossfilter?


#6

Hi @yawokyere,

Sorry, don’t have a code sample to share where mapd crossfilter is used with Vega.
However, we have an example that shows how to use mapd crossfilter with mapd3. The reference code is on line# 315 “/-------MAPD3 COMBO CHART EXAMPLE-----/” which can be changed to make use of Vega.

Regards,
Veda