Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
146 lines (121 sloc) 4.19 KB

QdtMapBox: Create a map with layers using MapBox

QdtMapBox

  • QdtMapBox allows you to create a MapBox map and layer(s).
  • See the MapBox Api Docs for more information on MapBox and to get your access token

Properties

prop type default description
cols Array [] Define the dimensions like [id],[lat],[lon],[field]
accessToken String pk.eyJ1IjoiYXJ0dXJvbXVub3oiLCJhIjoiY2swODR2NmlhNDYwaDNicDBlcnB6YmR0OSJ9.AgG7MN8DX1aFuG1DfbFr_Q Your MapBox access token
style String mapbox://styles/mapbox/streets-v11 Your MapBox style
center Array [-74.50, 40] The lat and long of the center of your map
zoom Int 4 The zoom level of the map
pitch Int 0 The camera angle
bearing Int 0 The compass direction, in degrees
height Int 400 Define the height of your div in pixels
getData Function null Define a callback so you can work with the map or the data after the dom is drawnconst callback = (qData, qLayout) => {}
getAllDataInterval Int 0 Seconds to paginate through all data

Code

Vanilla JavaScript

var options = {
  config: { /* host, port, appid, etc. */ },
  connections: { /* vizApi, engineAPI */}
}

var qdtComponents = new QdtComponents(options.config, options.connections);

var element = document.getElementById('qdt1');

qdtComponents.render(
  "QdtMapBox", 
  {
    mapToken: 'pk.eyJ1IjoiYXJ0dXJvbXVub3oiLCJhIjoiY2swODR2NmlhNDYwaDNicDBlcnB6YmR0OSJ9.AgG7MN8DX1aFuG1DfbFr_Q',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: -74.50, 40],
    zoom: 4,
    interactive: false,
    circleRadius: 2,
    cols: ['ID', 'lat', 'lon', 'gender'],
    height: 400,
    getData: callback,
    getAllDataInterval: 10, // Get data In Seconds
    qPage: {
      qTop: 0,
      qLeft: 0,
      qWidth: 4,
      qHeight: 2500,
    },
    legend: false,
  }, 
  element
);

React

<QdtComponent
  type="QdtMapBox"
  props={{
    mapToken: 'pk.eyJ1IjoiYXJ0dXJvbXVub3oiLCJhIjoiY2swODR2NmlhNDYwaDNicDBlcnB6YmR0OSJ9.AgG7MN8DX1aFuG1DfbFr_Q',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: -74.50, 40],
    zoom: 4,
    interactive: false,
    circleRadius: 2,
    cols: ['ID', 'lat', 'lon', 'gender'],
    height: 400,
    getData: callback,
    getAllDataInterval: 10, // Get data In Seconds
    qPage: {
      qTop: 0,
      qLeft: 0,
      qWidth: 4,
      qHeight: 2500,
    },
    legend: false,
  }}
/>

Angular

// qdt-mapbox.component.ts
import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'qdt-mapbox',
  templateUrl: './qdt-mapbox.component.html',
})
export class QdtMapBoxComponent implements OnInit {

  constructor(private el: ElementRef) { }

  chart_options = {
    type: 'QdtMapBox',
    props: {
      mapToken: 'pk.eyJ1IjoiYXJ0dXJvbXVub3oiLCJhIjoiY2swODR2NmlhNDYwaDNicDBlcnB6YmR0OSJ9.AgG7MN8DX1aFuG1DfbFr_Q',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: -74.50, 40],
      zoom: 4,
      interactive: false,
      circleRadius: 2,
      cols: ['ID', 'lat', 'lon', 'gender'],
      height: 400,
      getData: callback,
      getAllDataInterval: 10, // Get data In Seconds
      qPage: {
        qTop: 0,
        qLeft: 0,
        qWidth: 4,
        qHeight: 2500,
      },
      legend: false,
    },
  };

  ngOnInit() {

  }

}
<!-- html -->
<qdt-mapbox [Component]="chart_options.type" [props]="chart_options.props"></qdt-mapbox>

Examples


← Back to All Components

You can’t perform that action at this time.