shows Mapy API 4 with WMS service
Modified version of Quadtree sample from http://bl.ocks.org/mbostock/4343214 This version uses Enter,Exit, Update pattern for selecting small portions of larger dataset (here 100T points) with quadtree filtering. This speed up rendering as only relatively small amount of points (given small brush) has to be rendered. This might be useful for maps zooming into details and panning/moving there. Another sources looked at
Move around the brush to discover generated points.
Testing SVG limits of plotting points on map using D3, Leaflet following this base sample: http://bost.ocks.org/mike/leaflet. However instead of scaling SVG in deep zooms, I am using Enter/Update/Exit pattern from D3 to dynamically update points on map. This has been prototyped also here http://bl.ocks.org/sumbera/9972460 with brushing of 100T points.
For zooming out (causing all points to be displayed), I am filtering out points that can't be effectively visible, thus reducing number of points in SVG. (check console for log output).
This sample is using real data of 24T coordinates, with this points are clustered around cities, rather than artifically randomized. Real number of rendered points / removed points can be seen in console.log
/* | |
UPDATE July 2016 , moved and updated to here: https://github.com/Sumbera/gLayers.Leaflet | |
Generic Canvas Overlay for leaflet, | |
Stanislav Sumbera, April , 2014 | |
- added userDrawFunc that is called when Canvas need to be redrawn | |
- added few useful params fro userDrawFunc callback | |
- fixed resize map bug | |
inspired & portions taken from : https://github.com/Leaflet/Leaflet.heat |
Sample of using Tiled WMS overlay with ArcGIS JavaScript API 3.9.
libtess.js test on medium large polygon, more info here
<!doctype html> | |
<html> | |
<head> | |
<title>Polyline tessellation test with Pixi.js</title> | |
<meta charset="utf-8"> | |
<style> | |
html, body { | |
height: 100%; | |
padding: 0; |
<!doctype html> | |
<html> | |
<head> | |
<title>Polyline tessellation with MapBox-gl-js</title> | |
<meta charset="utf-8"> | |
<style> | |
html, body { | |
height: 100%; | |
padding: 0; |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset='utf-8' /> | |
<title>WMS overlay with MabBox-gl-js (0.5.2)</title> | |
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
<script src="http://www.sumbera.com/gist/js/mapbox/dist/mapbox-gl.js"></script> | |
<link href="http://www.sumbera.com/gist/js/mapbox/dist/mapbox-gl.css" rel="stylesheet" /> | |
<script src="http://www.sumbera.com/gist/js/mapbox/mbstyles/hybrid.js"></script> |