GIS and Media fusion

"The explosive growth of the GeoWeb and geographic information has made GIS powerful media for the general public to communicate, but perhaps more importantly, GIS have also become media for constructive dialogs and interactions about social issues." - Sui & Goodchild

User Tools

Site Tools


geoinf16:ol3tuto

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision Both sides next revision
geoinf16:ol3tuto [2016/11/16 08:50]
oertz [Ex3B : Custom tiling service with CartoCSS]
geoinf16:ol3tuto [2016/11/16 08:57]
oertz [Ex3B : Custom tiling service with CartoCSS]
Line 424: Line 424:
         <​title>​ol3 - Ex3B - webmap with your own MapBox basemap</​title>​         <​title>​ol3 - Ex3B - webmap with your own MapBox basemap</​title>​
         <script type="​text/​javascript"​ src="​js/​config.js"></​script>​         <script type="​text/​javascript"​ src="​js/​config.js"></​script>​
-        <script type="​text/​javascript">​  +        <script type="​text/​javascript">​ 
-        var map; +            var map; 
-        $(document).ready(function() { +            $(document).ready(function () { 
-          var token = "​pk.eyJ1Ijoib2VydHoiLCJhIjoiT29aUVYyRSJ9.mz-_gaaigdhurQPHZf7fig";​ +                var token = "​pk.eyJ1Ijoib2VydHoiLCJhIjoiT29aUVYyRSJ9.mz-_gaaigdhurQPHZf7fig";​ 
-          var styleId ​= "​oertz.b9becbcf"; + 
-          map = new ol.Map({ +                ​var styleIdClassic ​= "​oertz.c80497f1"; 
-            layers: [ +                //var styleIdWeb = "​oertz/​civjyzx4o00hq2kl80xkaz832";​ 
-              new ol.layer.Tile({ + 
-                source: new ol.source.XYZ({ +                ​map = new ol.Map({ 
-                  url: '​http://​api.tiles.mapbox.com/​v4/'​+styleId+'/​{z}/​{x}/​{y}.png?​access_token='​ + token +                    layers: [ 
-                }) +                        new ol.layer.Tile({ 
-              }) +                            source: new ol.source.XYZ({ 
-            ], +                                // version avec le MapBox Studio "​classic"​ 
-            target: '​map',​ +                                ​url: '​http://​api.tiles.mapbox.com/​v4/'​ + styleIdClassic ​+ '/​{z}/​{x}/​{y}.png?​access_token='​ + token 
-            view: new ol.View({ + 
-              center: ol.proj.transform([6.7,​ 46.7], '​EPSG:​4326',​ '​EPSG:​3857'​),​ +                                // version avec le MapBox Studio "​web"​ 
-              zoom: 10+                                //url: '​https://​api.mapbox.com/​styles/​v1/'​ + styleIdWeb + '/​tiles/​256/​{z}/​{x}/​{y}?​access_token='​ + token 
 +                            ​}) 
 +                        }) 
 +                    ], 
 +                    target: '​map',​ 
 +                    view: new ol.View({ 
 +                        center: ol.proj.transform([6.7,​ 46.7], '​EPSG:​4326',​ '​EPSG:​3857'​),​ 
 +                        zoom: 10 
 +                    }) 
 +                });
             })             })
-          }); 
-        }) 
         </​script> ​       ​         </​script> ​       ​
         <style type="​text/​css"> ​       ​         <style type="​text/​css"> ​       ​
geoinf16/ol3tuto.txt · Last modified: 2019/02/13 11:29 by oertz