├── README.md ├── esri └── index.html ├── mapbox-js └── index.html ├── google └── index.html ├── openlayers └── index.html ├── tangram ├── index.html └── scene.yaml ├── index.html ├── harp-gl └── index.html ├── mapbox-gl └── index.html ├── leaflet └── index.html └── here └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Web Map Comparison 2 | 3 | ## Live Demos 4 | 5 | You can see the live demos on the [GitHub pages](https://jamesmilneruk.github.io/web-mapping-libraries/) for this repository 6 | 7 | ## Mapping Libraries 8 | 9 | * [Google](google/index.html) 10 | * [Esri](esri/index.html) 11 | * [Here](here/index.html) 12 | * [harp.gl (Here)](harp-gl/index.html) 13 | * [Leaflet](leaflet/index.html) 14 | * [OpenLayers](leaflet/index.html) 15 | * [Mapbox GL](mapbox-gl/index.html) 16 | * [Mapbox.js](mapbox-js/index.html) 17 | * [Tangram (Leaflet Based)](tangram/index.html) 18 | 19 | ## License 20 | 21 | MIT -------------------------------------------------------------------------------- /esri/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ArcGIS API for JavaScript Hello World App 6 | 14 | 15 | 16 | 17 | 18 | 37 | 38 | 39 |
40 | 41 | -------------------------------------------------------------------------------- /mapbox-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | A simple map 6 | 7 | 8 | 9 | 13 | 14 | 15 |
16 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /google/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simple Map 5 | 6 | 7 | 20 | 21 | 22 |
23 | 32 | 34 | 35 | -------------------------------------------------------------------------------- /openlayers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 17 | 18 | OpenLayers example 19 | 20 | 21 |
22 | 36 | 37 | -------------------------------------------------------------------------------- /tangram/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simple demo – Tangram 5 | 6 | 7 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 15 | 16 | 17 |
18 |

Mapping Examples

19 | 30 |
31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /harp-gl/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | 20 | 21 | 22 | 36 | 37 | -------------------------------------------------------------------------------- /mapbox-gl/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Display a map 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 |
17 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /leaflet/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A Leaflet map! 5 | 8 | 12 | 19 | 20 | 21 |
22 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /tangram/scene.yaml: -------------------------------------------------------------------------------- 1 | cameras: 2 | camera1: 3 | type: perspective 4 | 5 | lights: 6 | light1: 7 | type: directional 8 | direction: [0, 1, -.5] 9 | diffuse: .3 10 | ambient: 1 11 | 12 | sources: 13 | nextzen: 14 | type: MVT 15 | url: https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.mvt 16 | url_params: 17 | api_key: mAUwN71IQRC3oY0FE2-d3Q 18 | max_zoom: 16 19 | 20 | layers: 21 | earth: 22 | data: { source: nextzen } 23 | draw: 24 | polygons: 25 | order: function() { return feature.sort_rank; } 26 | color: '#ddeeee' 27 | 28 | landuse: 29 | data: { source: nextzen } 30 | draw: 31 | polygons: 32 | order: function() { return feature.sort_rank; } 33 | color: '#aaffaa' 34 | 35 | water: 36 | data: { source: nextzen } 37 | draw: 38 | polygons: 39 | order: function() { return feature.sort_rank; } 40 | color: '#88bbee' 41 | 42 | roads: 43 | data: { source: nextzen } 44 | filter: 45 | not: { kind: [path, rail, ferry] } 46 | draw: 47 | lines: 48 | order: function() { return feature.sort_rank; } 49 | color: gray 50 | width: 8 51 | cap: round 52 | highway: 53 | filter: 54 | kind: highway 55 | draw: 56 | lines: 57 | order: function() { return feature.sort_rank; } 58 | color: '#cc6666' 59 | width: 12 60 | outline: 61 | color: grey 62 | width: 1.5 63 | minor_road: 64 | filter: 65 | kind: minor_road 66 | draw: 67 | lines: 68 | order: function() { return feature.sort_rank; } 69 | color: lightgrey 70 | width: 5 71 | 72 | buildings: 73 | data: { source: nextzen } 74 | draw: 75 | polygons: 76 | order: function() { return feature.sort_rank; } 77 | color: | 78 | function () { 79 | var h = feature.height || 20; 80 | h = Math.min((h + 50)/ 255, .8); // max brightness: .8 81 | h = Math.max(h, .4); // min brightness: .4 82 | return [h, h, h]; 83 | } 84 | 3d-buildings: 85 | filter: { $zoom: { min: 15 } } 86 | draw: 87 | polygons: 88 | extrude: function () { return feature.height > 20 || $zoom >= 16; } 89 | -------------------------------------------------------------------------------- /here/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 |
21 | 74 | 75 | --------------------------------------------------------------------------------