"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
This shows you the differences between two versions of the page.
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"> |