Example of vtk-js integration
MODIFY
examples/points/main.js
examples/points/main.js
@@ -52,28 +52,28 @@ $(function () {
});
// Create an osm layer with custom tile url for a white background.
- // map.createLayer(
- // 'osm',
- // {
- // url: function () {
- // return 'white.jpg';
- // }
- // }
- // );
+ map.createLayer(
+ 'osm',
+ {
+ url: function () {
+ return 'white.jpg';
+ }
+ }
+ );
- // // Create a gl feature layer
- // var vglLayer = map.createLayer(
- // 'feature',
- // {
- // renderer: 'vgl'
- // }
- // );
+ // Create a gl feature layer
+ var vglLayer = map.createLayer(
+ 'feature',
+ {
+ renderer: 'vgl'
+ }
+ );
// Create an svg feature layer
- var vtkjsLayer = map.createLayer(
+ var svgLayer = map.createLayer(
'feature',
{
- renderer: 'vtkjs'
+ renderer: 'd3'
}
);
@@ -82,18 +82,18 @@ $(function () {
var svgColor = 'blue';
// Generate some data for vgl
- // var data = d3.range(2).map(function (i) {
- // return {
- // x: -95, // longitude
- // y: 39.5 + 4.5 * i, // latitude
- // c: vglColor, // fill color
- // opacity: 0.1 // fill opacity
- // };
- // });
- // makePoints(data, vglLayer, vglColor);
+ var data = d3.range(2).map(function (i) {
+ return {
+ x: -95, // longitude
+ y: 39.5 + 4.5 * i, // latitude
+ c: vglColor, // fill color
+ opacity: 0.1 // fill opacity
+ };
+ });
+ makePoints(data, vglLayer, vglColor);
// Generate some data for svg
- var data = d3.range(1).map(function (i) {
+ data = d3.range(2).map(function (i) {
return {
x: -101, // longitude
y: 39.5 + 4.5 * i, // latitude
@@ -101,8 +101,5 @@ $(function () {
opacity: 0.1 // fill opacity
};
});
- makePoints(data, vtkjsLayer, svgColor);
-
- // TODO: For now we need this extra call.
- map.draw();
+ makePoints(data, svgLayer, svgColor);
});

ADD
examples/vtkjs/main.js
+var exampleDebug = {};
+
+// Run after the DOM loads
+$(function () {
+ 'use strict';
+
+ var capitals;
+ $.when(
+ /* Fetch capitals */
+ $.ajax({url: 'capitals.json'}).done(function (resp) {
+ capitals = resp;
+ })
+ ).then(function () {
+
+ // Set map defaults to a reasonable center and zoom level
+ var mapParams = {
+ node: '#map',
+ center: {x: 0, y: 0},
+ zoom: 2.5,
+ clampBoundsX: false,
+ clampBoundsY: false,
+ clampZoom: false,
+ discreteZoom: false
+ };
+ // Set the tile layer defaults
+ var layerParams = {
+ zIndex: 0,
+ minLevel: 4,
+ keepLower: true,
+ wrapX: false,
+ wrapY: false
+ };
+ // Create a map object
+ var map = geo.map(mapParams);
+ // Add the tile layer with the specified parameters
+ var osmLayer = map.createLayer('osm', layerParams);
+ // Set the vtk feature layer params
+ var vtkLayerParams = {
+ renderer: 'vtkjs'
+ };
+ // Create a vtk point feature layer
+ var vtkLayer = map.createLayer('feature', vtkLayerParams);
+ var pointFeature = vtkLayer
+ .createFeature('point', {
+ selectionAPI: true,
+ style: {
+ radius: 100, // sphere radius (~0.1km)
+ fillColor: 'red',
+ fillOpacity: function () {
+ return Math.random();
+ }
+ }
+ })
+ .data(capitals) // bind data
+ .position(function (d) {
+ return {x: d.longitude, y: d.latitude}; // position accessor
+ })
+ .draw();
+
+ // Make variables available as a global for easier debug
+ exampleDebug.map = map;
+ exampleDebug.mapParams = mapParams;
+ exampleDebug.layerParams = layerParams;
+ exampleDebug.osmLayer = osmLayer;
+ exampleDebug.vtkLayerParams = vtkLayerParams;
+ exampleDebug.vtkLayer = vtkLayer;
+ exampleDebug.pointFeature = pointFeature;
+ });
+});

Example of vtk-js integration