vs – – What this talk is NOT about

View Github Repository Open presentation in a new window

IvanSanchez

See all presentation from IvanSanchez

vs – – What this talk is NOT about

7 16

leaflet-vs-openlayers-slides

Slides for FOSS4G 2015 talk "Leaflet vs OpenLayers"

On Github IvanSanchez / leaflet-vs-openlayers-slides

vs

Based on the woes of Iván Sánchez Ortega, MazeMap

You might remember me from other FOSS4G talks such as

  • Another game of chess, professor Falken?
  • GeoGlobalDomination: The Musical
  • Up all night (to get mapping)

PARENTALBIASEDOPINIONADVISORY

Timeline

  • 2005: Created my own <canvas>-based map
  • 2014: Worked heavily with
  • 2015-01: Start working for

Timeline

  • 2005: Created my own <canvas>-based map
  • 2014: Worked heavily with
  • 2015-01: Start working for
  • 2015-03: Consider redoing the entire web app
  • 2015-04-23: Submit " vs " talk
  • 2015-04-27: Became a core dev

What this talk is NOT about

This talk is NOT about:

Stamen's ModestMaps

  • Minimalistic (10KB!) map library
  • Too basic
  • No zoom animations

This talk is NOT about:

MapZen's Tangram

  • WebGL goodness
  • Vector tiles
  • Custom shaders
  • Not trivial to add own data

This talk is NOT about:

Mapbox's MapboxGL (Based on )

  • WebGL goodness
  • Vector tiles
  • Stable, well-engineered shaders
  • Depends too much on Mapbox

This talk is NOT about:

ESRI Javascript API

  • Full 3D support (globe)
  • Not open source
  • Plays well with ESRI services, not so well with anything else

This talk is NOT about:

Google Maps API

  • Full 3D support (globe)
  • Not open source
  • Depends too much on Google

This talk is NOT about:

CartoDB

  • Easy, gorgeous visualizations
  • Not a general-purpose mapping API

This talk is NOT about:

D3

  • Awesome data visualizations
  • Extremely customizable
  • Not a general-purpose mapping API
  • Not trivial to add raster
  • Not trivial to use standard interactions

This talk is NOT about:

ThreeJS

  • WebGL goodness
  • Used for indoor maps by MazeMap's competitors
  • A 3D API, not mapping API
  • Not trivial to add raster
  • Not trivial to use standard interactions
  • Uses 3D model formats, not GIS data formats

This talk is NOT about:

IndoorGML

  • No public IndoorGML implementations yet
  • No public IndoorGML showcase yet

Copy-paste simplest tutorials and set coordinates for Seoul

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Minimal Example</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js">
  </head>
  <body>
    <div id="leafmap" style="width: 600px; height: 400px"></div>
    <script>
      var map = L.map('leafmap').setView([37.152, 127.551], 8);
      L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
      }).addTo(map);
    
  </body>
</html>
<!doctype html>
<html lang="en">
  <head>
    <title>OL3 minimal example</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.8.2/build/ol.js" type="text/javascript">
  </head>
  <body>
    <div id="ol3map" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'ol3map ',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'osm'})
          })
        ],
        view: new ol.View({
          center: ol.proj.transform([37.152, 127.551], 'EPSG:4326', 'EPSG:3857'),
          zoom: 8
        })
      });
    
  </body>
</html>
view: new ol.View({
//  center: ol.proj.transform([37.152, 127.551], 'EPSG:4326', 'EPSG:3857'),
    center: ol.proj.transform([127.551, 37.152], 'EPSG:4326', 'EPSG:3857'),
    zoom: 8
})

What the docs say:

map.setView(latlng, zoom)

What you must use:

lat/lng

What the docs say:

What you must use:

lon/lat

Newbie friendliness

  • Friendly for web professionals who don't care about latLng vs lngLat.
  • Makes assumptions for the user.
  • Kinda need to be a GIS professional who know about SRSs.
  • Makes some assumptions.

Javascript

Size of minified JS files

126.5KB

465.3KB

Number of classes/namespaces

52

163

  • Little built-in stuff
  • Lots of plugins (200+)
  • Lots of built-in stuff
  • Very few plugins (ol3-cesium)
  • Leaflet.Omnivore (data formats)
  • Leaflet.draw
  • Leaflet.markercluster
  • Leaflet.MapboxVectorTile
  • Built-in
  • Can be made beefier...
  • ...with any toolchain...

  • ...or with specific integration tools
  • Can be made skinnier...
  • ...only with the Closure compiler...
  • ...which might fit within your toolchain
  • ...but most integration tools or toolchains won't be able to slim it down without help

Speaking of ...

Size of unminified files: leaflet-src.js

223.6KB

ol3-debug.js

3.5MB

/**
 * @const
 * @type {number}
 */
goog.webgl.ZERO = 0;


/**
 * @const
 * @type {number}
 */
goog.webgl.ONE = 1;

Coding patterns

var map = L.map('leafmap').setView([37.152, 127.551], 8);
L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
}).addTo(map);
var map = new ol.Map({
	target: 'ol3map ',
	layers: [
		new ol.layer.Tile({
			source: new ol.source.MapQuest({layer: 'osm'})
		})
	],
	view: new ol.View({
		center: ol.proj.transform([37.152, 127.551], 'EPSG:4326', 'EPSG:3857'),
		zoom: 8
	})
});
  • Uses 2 classes (decorators)
  • Object factories
  • 1 level of indentation
  • Uses 5 classes
  • Class constructors
  • 3 level of indentation 
ol.proj.transform( ol.geometry.point([37.152, 127.551], 'EPSG:4326'), 'EPSG:3857'),

Coding patterns

$.ajax('data/geojson/line-samples.geojson', {}, function(json){
	var vectorLayer = L.geoJson(json, {
		color: blue,
		weight: 1,
		fillColor: "rgba(0, 0, 255, 0.1)"
	});
}):
var vectorLines = new ol.layer.Vector({
	source: new ol.source.Vector({
		url: 'data/geojson/line-samples.geojson',
		format: new ol.format.GeoJSON()
	}),
	style: [
		new ol.style.Style({
			stroke: new ol.style.Stroke({
				color: 'blue',
				width: 1
			}),
			fill: new ol.style.Fill({
				color: 'rgba(0, 0, 255, 0.1)'
			})
		});
	]
});
  • Uses 1 classes
  • Decorator/delegator pattern
  • Doesn't have XHR capabilities (but there's the "Leaflet Ajax" plugin)
  • Doesn't have text rendering (but there's the "Leaflet Label" plugin)
  • Doesn't allow multiple symbolizers
  • Uses 6 classes
  • MVC (separates feature layer, source, format, style)
  • Multiple symbolizers

Everything is...

A wrapper over HTML elements A model of "classic" GIS L.GridLayer is a grid of <div>s or <canvas>s or <img>s or even <video>s. ol.Feature has a ol.geom which can be a ol.geom.LinearRing or ol.geom.MultiPoint or any Simple Features Specification type.

Documentation

  • Tutorials that work
  • 5 examples
  • Concise API Ref
  • Verbose tutorials (that don't work)
  • 125 examples
  • Verbose API ref

↑ Learning curve, right there ↑

  • Manually maintained HTML
  • Easily out of sync
  • Not consistent across plugins
  • Autogenerated JSDoc
  • Always in sync
  • Consistent

Documentation

https://github.com/IvanSanchez/Leafdoc

Documentation

🍂doc

  • Groups methods by ancestor.

JSdoc

  • Methods are alphabetical, regardless of ancestor.
Demo!

Something important for indoor...

Something important for indoor...

Rotation

https://github.com/Leaflet/Leaflet/tree/rotate

Rotation

3D

  • L.LatLng has altitude.
  • No perspective support of any kind (suggestion: map.setTilt()).
  • No WebGL at all
  • No renderer support for altitude
  • ol.geom.GeometryLayout can be XY, XYZ, XYM, XYZM.
  • No perspective support of any kind (suggestion: ol.View.tilt).
  • Some WebGL support
  • No renderer support for Z

Cesium for OpenLayers

<script src='../ol3-ol-debug.js'></script>
<script src='../Cesium/Cesium.js'></script>
<script src='../ol3cesium-debug.js'></script>

Cesium for OpenLayers

  • Closure clusterf**k

Cesium for OpenLayers

  • 3D that works
  • No WMS layers rendered as planes at a given height over the geoid
  • High cost to start developing
  • Big files (not viable for deployment in mobiles)

3D

https://github.com/IvanSanchez/Leaflet.gl

Demo!

Y   U   NO   DO

EXACTLY WAT I NEED

What's best for our indoor maps?

  • No rotation
  • No 3D
  • Rotation
  • 3D via Cesium
↑ The «Maybe we should switch to OL3» phase ↑
  • Docs nice to read
  • Low barrier to develop (for me)
  • Low cost of integration (for me)
  • Still supports IE8
  • Docs not nice to read
  • Higher barrier to develop (for me)
  • Higher cost of integration (for me)
  • No support for IE8
↑ The «Nah!» phase ↑

Some signs you might like OL3 better...

  • Non-GIS Layer model
  • Non-OGC Geometry model
  • Clunky LatLng CRS
  • Symbology
  • Built-in OGC standards
  • Raster events & manipulation
  • Raster reprojection

OK, so what should I use?

← Web GIS → ← DOM MVC →

P.S.

F**k you, Internet Explorer

Fin.
¿?
vs Based on the woes of Iván Sánchez Ortega, MazeMap