Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rename renderers #965

Merged
merged 4 commits into from
Dec 4, 2018
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# Change Log

## Unreleased

### Changes
- Rename the d3 renderer to svg. d3 still works as an alias (#965)
- Rename the vgl renderer to webgl. vgl still works as an alias (#965)

## Version 0.19.0

### Features
4 changes: 2 additions & 2 deletions docs/developers.rst
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@ Headless browser testing

Geojs uses `PhantomJS <http://phantomjs.org/>`_ for headless browser
testing of core utilities. Unfortunately because PhantomJS does not
support webgl at this time, so code paths requiring gl must be either
support webgl at this time, so code paths requiring webgl must be either
mocked or run in an environment such as xvfb.

The headless unit tests should be placed in the ``tests/cases/``
@@ -53,7 +53,7 @@ so there is no need to rerun this command unless you add a new file.

There are a number of utilities present in the file ``tests/test-utils.js``
that developers can use to make better unit tests. For example, a mocked
vgl renderer can be used to hit code paths within gl rendered layers. There
vgl renderer can be used to hit code paths within webgl rendered layers. There
are also methods for mocking global methods like ``requestAnimationFrame``
to test complex, asynchronous code paths in a stable and repeatable manner.
The `Sinon <https://sinonjs.org/>`_ testing library is also available to
6 changes: 1 addition & 5 deletions docs/quickstart.rst
Original file line number Diff line number Diff line change
@@ -43,13 +43,9 @@ by issue this command in your terminal. ::
git clone https://github.com/OpenGeoscience/geojs.git

This will put all of the source code in a new directory called
``geojs``. The GeoJS library is packaged together with another
library `vgl`_. Formally, this library was included as a git
submodule. Currently, vgl is downloaded from npm to integrate
better with workflows used by web projects.
``geojs``.

.. _GitHub repository: https://github.com/OpenGeoscience/geojs
.. _vgl: https://github.com/OpenGeoscience/vgl

Building the source
-------------------
6 changes: 3 additions & 3 deletions docs/users.rst
Original file line number Diff line number Diff line change
@@ -126,9 +126,9 @@ documentation for each of the classes.
If a renderer is requested when creating a layer, and that renderer is not
supported by the current installation, a fallback renderer may be used
instead and a warning sent to the console.
`geo.gl.vglRenderer <https://opengeoscience.github.io/geojs/apidocs/geo.gl.vglRenderer.html>`_
`geo.webgl.webglRenderer <https://opengeoscience.github.io/geojs/apidocs/geo.webgl.webglRenderer.html>`_
requires webGL support.
`geo.d3.d3Renderer <https://opengeoscience.github.io/geojs/apidocs/geo.d3.d3Renderer.html>`_
`geo.svg.svgRenderer <https://opengeoscience.github.io/geojs/apidocs/geo.svg.svgRenderer.html>`_
requires the d3 library to be present.

`geo.layer <https://opengeoscience.github.io/geojs/apidocs/geo.layer.html>`_
@@ -213,7 +213,7 @@ World coordinates
in 3D graphics. The world coordinates are a rescaled and translated version of the GCS coordinates so
that the world coordinates of the current viewport is near ``1`` in each axis. This is done to
provide well conditioned transformation matrices that can be used acurately in contexts of limited precision
such as GL or CSS. In order to achieve this, the world coordinate system is dynamic at run time
such as WebGL or CSS. In order to achieve this, the world coordinate system is dynamic at run time
and will change as the user pans and zooms the map. By convention, the world coordinates are given
relative to a dynamic "scale" and "origin". Changes to these values trigger events on the map that
allow layers and features to respond and update their views as necessary.
76 changes: 38 additions & 38 deletions examples/blog-lines/index.pug
Original file line number Diff line number Diff line change
@@ -21,218 +21,218 @@ block append mainContent
th Debug WebGL
tr.option(option='basic')
th Basic Lines
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.geojs(rowspan=2, renderer='canvas')
td.geojs(rowspan=2, renderer='d3')
td.geojs(rowspan=2, renderer='svg')
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
td.leaflet(rowspan=2, library='leaflet')
td.mapboxgl(rowspan=2, library='mapboxgl')
td.geojs(rowspan=2, renderer='vgl', version='0.10.5')
td.geojs(rowspan=2, renderer='d3', version='0.10.5')
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='basic')
td
p Lines with default options for each rendering method.
tr.option(option='color', strokeColor='yellow,black,red', strokeOpacity=1)
th Varying Color
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', version='0.10.5')
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='color')
td
p Lines that vary by color from vertex to vertex, cycling through yellow, black, and red.
p On corners, the vertex color is at the far end of the miter. There will probably always be a clear color step along the miter line.
tr.option(option='stroke', strokeOpacity='0.5,1')
th Varying Opacity
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', version='0.10.5')
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='stroke')
td
p Lines that vary by opacity from vertex to vertex, cycling between 0.5 and 1.
tr.option(option='width', strokeWidth='9,12', link_strokeWidth='36,48')
th Varying Width
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', version='0.10.5')
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='width')
td
p Lines that vary by width from vertex to vertex, alternating between 6 and 12 pixels.
p On corners, the width is virtually at the far end of the miter.
tr.option(option='offset', strokeOffset=-1)
th Stroke Offset
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.mapboxgl(rowspan=2, library='mapboxgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='offset')
td
p Lines can be offset to one side or the other of center. This can very from vertex to vertex, but is only shown offset all the way to the left here.
p Offset ranges from -1 (left) to +1 (right) along the direction of the stroke. 0 (default) is centered.
tr.option(option='linecap-round', lineCap='round')
th Round Line Cap
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.geojs(rowspan=2, renderer='canvas')
td.geojs(rowspan=2, renderer='d3')
td.geojs(rowspan=2, renderer='svg')
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
td.leaflet(rowspan=2, library='leaflet')
td.mapboxgl(rowspan=2, library='mapboxgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='linecap-round')
td
p End caps can be 'butt' (default), 'round', or 'square'.
p In GeoJS's WebGL renderer, the end caps can vary by vertex (not shown).
tr.option(option='linecap-square', lineCap='square')
th Square Line Cap
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.geojs(rowspan=2, renderer='canvas')
td.geojs(rowspan=2, renderer='d3')
td.geojs(rowspan=2, renderer='svg')
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
td.leaflet(rowspan=2, library='leaflet')
td.mapboxgl(rowspan=2, library='mapboxgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='linecap-square')
td
p End caps can be 'butt' (default), 'round', or 'square'.
tr.option(option='linejoin-bevel', lineJoin='bevel')
th Bevel Line Join
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.geojs(rowspan=2, renderer='canvas')
td.geojs(rowspan=2, renderer='d3')
td.geojs(rowspan=2, renderer='svg')
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
td.leaflet(rowspan=2, library='leaflet')
td.mapboxgl(rowspan=2, library='mapboxgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='linejoin-bevel')
td
p Line joins can be 'miter' (default), 'bevel', 'round', or 'miter-clip'.
p In GeoJS's WebGL renderer, the joins can vary by vertex (not shown).
tr.option(option='linejoin-round', lineJoin='round')
th Round Line Join
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.geojs(rowspan=2, renderer='canvas')
td.geojs(rowspan=2, renderer='d3')
td.geojs(rowspan=2, renderer='svg')
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
td.leaflet(rowspan=2, library='leaflet')
td.mapboxgl(rowspan=2, library='mapboxgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='linejoin-round')
td
p Line joins can be 'miter' (default), 'bevel', 'round', or 'miter-clip'.
tr.option(option='linejoin-miterclip', lineJoin='miter-clip', miterLimit=4)
th Miter-clip Line Join
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='linejoin-miterclip')
td
p Line joins can be 'miter' (default), 'bevel', 'round', or 'miter-clip'.
p The miter-clip line join is part of a proposed path standard. If the join exceeds the miter limit, it is beveled at that distance rather than right at the join.
tr.option(option='miterlimit', miterLimit=4)
th Miter Limit
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.geojs(rowspan=2, renderer='canvas')
td.geojs(rowspan=2, renderer='d3')
td.geojs(rowspan=2, renderer='svg')
td.unsupported(rowspan=2)
td.leaflet(rowspan=2, library='leaflet')
td.mapboxgl(rowspan=2, library='mapboxgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='miterlimit')
td
p Use a miter limit of 4. Other examples use a miter limit of 10 (except the miter-clip line join).
p Leaflet doesn't expose miter limit directly, but if SVG is used, the paths can be modified to change the miter limit.
tr.option(option='antialiasing0', antialiasing=0)
th Antialiasing of 0
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.mapboxgl(rowspan=2, library='mapboxgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='antialiasing0')
td
p Antialiasing affects how the edges of lines are smoothed. A value of 1 or 2 produces smooth results, 0 hard results, and large values generate a blurred outline.
tr.option(option='antialiasing1-4', antialiasing=6, link_antialiasing=24)
th Antialiasing of 1/2 the line width
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.mapboxgl(rowspan=2, library='mapboxgl')
td.unsupported(rowspan=2)
td.unsupported(rowspan=2)
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='antialiasing1-4')
td
p Antialiasing affects how the edges of lines are smoothed. A value of 1 or 2 produces smooth results, 0 hard results, and large values generate a blurred outline.
tr.option(option='thin-lines', strokeWidth=0.25, referenceLines='false')
th Thin Lines
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.geojs(rowspan=2, renderer='canvas')
td.geojs(rowspan=2, renderer='d3')
td.geojs(rowspan=2, renderer='svg')
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
td.leaflet(rowspan=2, library='leaflet')
td.mapboxgl(rowspan=2, library='mapboxgl')
td.geojs(rowspan=2, renderer='vgl', version='0.10.5')
td.geojs(rowspan=2, renderer='d3', version='0.10.5')
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='thin-lines')
td
p Comparison of a line width of 0.25 pixels. The reference lines are hidden.
tr.option(option='roads', data='roads', lines=10000, referenceLines='false', strokeWidth=2, strokeOpacity=1, x=-73.7593015, y=42.8496799, zoom=13)
th 10,000 Line Segments
td.geojs(rowspan=2, renderer='vgl')
td.geojs(rowspan=2, renderer='webgl')
td.geojs(rowspan=2, renderer='canvas')
td.geojs(rowspan=2, renderer='d3')
td.geojs(rowspan=2, renderer='svg')
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
td.leaflet(rowspan=2, library='leaflet')
td.mapboxgl(rowspan=2, library='mapboxgl')
td.geojs(rowspan=2, renderer='vgl', version='0.10.5')
td.geojs(rowspan=2, renderer='d3', version='0.10.5')
td.geojs(rowspan=2, renderer='vgl', debug='true')
td.geojs(rowspan=2, renderer='webgl', debug='true')
tr.option(option='roads')
td
p A modest number of line segments from a real-world sample.
6 changes: 3 additions & 3 deletions examples/blog-lines/main.js
Original file line number Diff line number Diff line change
@@ -284,7 +284,7 @@ function getStyleValue(val, defaultValue, isString) {
* Show a GeoJS map with lines.
*
* @param {object} opts: options on how to render the lines. Options include:
* renderer: one of 'vgl', 'canvas', or 'd3'. Defaults to 'vgl'.
* renderer: one of 'webgl', 'canvas', or 'svg'. Defaults to 'webgl'.
* version: a GeoJS version to load from a CDN. Defaults to 'current' which
* uses the local GeoJS.
* node: a jquery selector of a div to render the map into. Defaults to
@@ -312,7 +312,7 @@ function geojsLinesTest(opts) {
// create a feature layer using the desired renderer
var renderer = opts.renderer;
var layer = map.createLayer('feature', {
renderer: renderer === 'html' ? null : !renderer ? 'vgl' : renderer
renderer: renderer === 'html' ? null : !renderer ? 'webgl' : renderer
});
var baseStyle = {
antialiasing: getStyleValue(opts.antialiasing, 1),
@@ -583,7 +583,7 @@ function mapboxglLinesTest(opts) {
* library: one of 'geojs', 'leaflet', 'mapbox', or 'mapboxgl'. Defaults to
* 'geojs'.
* version: a library version to load. Varies by library.
* renderer: one of 'vgl', 'canvas', 'd3', 'svg'. Varues by library.
* renderer: one of 'webgl', 'canvas', 'svg'. Varies by library.
* node: a jquery selector of a div to render the map into. Defaults to
* '#map'.
* width: an optional width in pixels to set the node's size.
2 changes: 1 addition & 1 deletion examples/choropleth/main.js
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ $(function () {
);

// Create a feature layer. We could either ask for a layer via a specific
// render {renderer: 'vgl'} or for a layer that supports our feature
// render {renderer: 'webgl'} or for a layer that supports our feature
// {features: ['choropleth']}.
var choroplethLayer = map.createLayer(
'feature',
4 changes: 2 additions & 2 deletions examples/dynamicData/main.js
Original file line number Diff line number Diff line change
@@ -18,10 +18,10 @@ $(function () {
// Add an OSM layer
map.createLayer('osm');

// Add a feature layer with a D3 renderer. We could, instead, ask for any
// Add a feature layer with an svg renderer. We could, instead, ask for any
// renderer that supports point features, like so:
// var features = map.createLayer('feature', {features: ['point']});
var features = map.createLayer('feature', {renderer: 'd3'});
var features = map.createLayer('feature', {renderer: 'svg'});

var numberOfFeatures = 200;

2 changes: 1 addition & 1 deletion examples/layerEvents/main.js
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ $(function () {
// Create an svg layer and return a reference to its dom element.
function getSvgLayer(map, opts) {

opts.renderer = 'd3';
opts.renderer = 'svg';
var layer = map.createLayer('feature', opts);

// The canvas is a d3 context to geojs managed svg element.
2 changes: 1 addition & 1 deletion examples/layers/main.js
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ $(function () {
// Create an svg layer and return a reference to its dom element.
function getSvgLayer(map, opts) {

opts.renderer = 'd3';
opts.renderer = 'svg';
var layer = map.createLayer('feature', opts);

// The canvas is a d3 context to geojs managed svg element.
Loading