Friday, December 2, 2016

Liste des serveurs de baseMap (tiles, tuillage et layers). Changer de baseMap (et la personnaliser) pour odyssey.js: mapbox.

Les tuiles:
puis les zooms:


La base:

En français:
http://openstreetmap.fr/blogs/cquest/visite-guidee

https://switch2osm.org/fr/les-basiques/

Servir des tuiles:
https://switch2osm.org/fr/servir-des-tuiles/utilisation-dune-solution-tout-en-un/

les serveurs:
http://wiki.openstreetmap.org/wiki/Tile_servers

Le format principal (pour X/Y/Z) est une URL de ce type:
'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png'
{s} means one of the available subdomains (used sequentially to help with browser parallel requests per domain limitation; subdomain values are specified in options; a, b or c by default, can be omitted), {z} — zoom level, {x} and {y} — tile coordinates.

tile server capable of providing map tiles in vector (pbf) or raster (png) formats, as well as static map snapshots of any size for a given location.

Une liste de serveurs
The maps project aims to build cartography technologies for all Wikimedia projects, at a scale sufficient for their widespread usage. 
https://www.mediawiki.org/wiki/Maps
https://www.mediawiki.org/wiki/Maps#/map/0
On peut comparer: Bing Maps, Google Maps, OpenStreetMap,ACME Mapper,Apple Maps,HERE, MapQuest,Waze, Wikimapia, WikiMiniAtlas, Yandex.Maps.
http://tile.openstreetmap.fr/?q=yssingeaux
http://mapper.acme.com/?ll=45.142316,4.123694&z=10&t=M&marker0=45.142316,4.123694,Maps

Serveurs

On a de nombreux serveurs de baseMap:
http://wiki.openstreetmap.org/wiki/Tiles

Il faut comprendre qq différence avec "tileset":
A "tileset" typically includes enough tiles to form a very large image, if they were shown all at once, and also several zoom levels. Generally the idea is not to show them all at once, but to display a particular area of the map on a website. Normally this is done using a JavaScript map library to provide panning and zooming functionality, and request downloading of new tiles as necessary to show the user new areas of the map (a Slippy Map). (http://wiki.openstreetmap.org/wiki/Slippy_Map)

Changer de baseMap pour odyssey.js

On a de nombreux serveurs de baseMap:
http://wiki.openstreetmap.org/wiki/Tiles

On a 3 choix dans le sandbox d'odyssey: nokia est la moins mauvaise...
c'est l'ensemble des choix par défaut dans cartoDB editor free:
  • https://cartocdn_a.global.ssl.fastly.net/base-light/{z}/{x}/{y}.png
    qui est vraiment très light!! mais "unlimited use permitted" et en lien avec OpenStreetMap.
  • une autre du provider Stamen: http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg
    essayez (chargement lent):
    http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg
    http://maps.stamen.com/#terrain/12/37.7706/-122.3782
  • une autre du provider ex-nokia, maintenant HERE ("nokia day"):
    https://2.maps.nlp.nokia.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?lg=eng&token=A7tBPacePg9Mj_zghvKt9Q&app_id=KuYppsdXZznpffJsKT24
    (vendu en 2015): https://wego.here.com; https://fr.wikipedia.org/wiki/HERE_WeGo
    essayer le mode hybrid:
    "https://2.maps.nlp.nokia.com/maptile/2.1/maptile/newest/hybrid.day/{z}/{x}/{y}/256/png8?lg=eng&token=A7tBPacePg9Mj_zghvKt9Q&app_id=KuYppsdXZznpffJsKT24"
Rem:'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png'
{s} means one of the available subdomains (used sequentially to help with browser parallel requests per domain limitation; subdomain values are specified in options; a, b or c by default, can be omitted), {z} — zoom level, {x} and {y} — tile coordinates.
Ref: http://leafletjs.com/reference.html#popup

https://developer.here.com/rest-apis/documentation/enterprise-map-tile/
https://developer.here.com/rest-apis/documentation/enterprise-map-tile/topics/example-hybrid-map.html

vous pouvez aussi copier/coller celles-ci de cartoDB:
http://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png
http://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png

le plus important est de bien choisir en fonction de ses besoins.
Personnellement je préfère openstreetmap car très complète:
http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
et aussi une carte "france" :  http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
http://wiki.openstreetmap.org/wiki/FR:Servers/tile.openstreetmap.fr
voir les choix:
http://leaflet-extras.github.io/leaflet-providers/preview/

Il faut comprendre qq différence avec "tileset":
A "tileset" typically includes enough tiles to form a very large image, if they were shown all at once, and also several zoom levels. Generally the idea is not to show them all at once, but to display a particular area of the map on a website. Normally this is done using a JavaScript map library to provide panning and zooming functionality, and request downloading of new tiles as necessary to show the user new areas of the map (a Slippy Map). (http://wiki.openstreetmap.org/wiki/Slippy_Map)

Faire sa basemap personnalisée avec MapBox utilisable par odyssey.js

On peut utiliser le provider mapbox (https://www.mapbox.com) mais attention au mélange:
Mapbox is a service which lets you customize the design of a basemap with custom colors and elements. Insert your Mapbox URL and access token to add the basemap
Note: CARTO only supports Mapbox classic urls. If you enter a new Mapbox Studio url, an error appears.
En premier, avec odyssey.js, on peut utiliser les baseMaps styles de base de mapBox comme la "mapbox.streets":
https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=your_token
voir: https://carto.com/location-data-services/basemaps/
https://carto.com/docs/carto-editor/maps/#basemaps

On a deux choix:

  • soit avec les superbes outils javascript de MapBox
  • soit avec MapBox Studio.

Je vais traiter du cas avec "MapBox Studio" (et en lien avec la doc/exemple javascript).
MapBox n'est pas facile à comprendre au début.
C'est un processus linéaire :
                                            datasets->tilesets->Styles
                                            en fait (GeoJSON data->layer vectorielle->carte multicouche).

  1. Il faut se créer un compte et on obtient une clé (token).
    Il faut savoir que c'est construit "on top of Leaflet" http://leafletjs.com/
    ->plus de renseignement: GitHub: https://github.com/mapbox/mapbox.js/
  2. importer un dataset (voir point 3). Juste une explication: c'est fondée sur les fonctions import/export liées au Leaflet-Omnivore plug-in
    https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js. qq exemples:
  3. avec MapBox Studio, il suffit de faire "new datasets", soit on le créée soit on l'upload, avec ces deux choix (tester son fichier avec geojson.io, avant):
    • GeoJSON 
    •  CSV file
  4. on click sur datasets (à gauche) puis "edit", on peut voir son fichier sur une carte et aussi en un click sur un point (ou plusieurs points) l'ensemble des données associés.
    On peut ajouter une droite, un polygone, un point... Si on revient sur dataset, on peut sauvegarder en geoJSON son oeuvre modifiée.
  5. exporter vers "tilesets"
  6. dans tilesets, on peut voir la nature de cette "carte", par exemple: "This layer contains mostly Points". On a le numero "mapId" le format "pbf" vector et sa taille. C'est en fait une vector layer (générée à partir de l'ensemble des données GeoJSON). De plus on peut suivre les stats de visualisation de sa carte.
    Avec un compte gratuit: 50 000 map views/mois ou 50 000 mobile users/mois (en décembre 2016); 600 geocode requests/minute, 5 GB tileset storage, 250 MB dataset storage, 20 Mapbox Studio styles. Cet ensemble de limite est le principal défaut de l'hébergement/usage sur mapBox. Sinon on a accès à tout le reste  (Geocoding,  Satellite & street maps, full Mapbox Studio, Directions, les librairies javascripts).
    A map view is 
    • four map tiles when using Mapbox Studio styles, or 
    • 15 smaller map tiles when using Mapbox Studio Classic or Mapbox Editor Classic. 
    • One Static API request also counts as one map view.
  7. faire "add to style". Vous avez enfin votre solution où vous pouvez tout personnaliser.vous avez le lien vers ce style de type:
    https://www.mapbox.com/studio/styles/username/mapId/
    avec votre username et votre mapid.
    Si vous avez choisi la base: "Mapbox Streets V7 + Vector Terrain V2(Composite source)"
    vous aurez un très grand choix des layers (à afficher ou non). Pour l'instant allons dans le symbol "menu" juste à droite du bouton "edit" et sélectionner "share". 
  8. Les 4 choix du sharing/partage:
    1. faire un lien (URL) .html (la carte est déplaçable, zoomable et on a la rotation du plan)
      par contre on a un gros logo en haut à droite pas beau...
    2. "Develop with this style"
      1. mapbox: pour utiliser avec leur librairie javascript; voir exemple:
        https://www.mapbox.com/mapbox-gl-js/example/setstyle/
        Cet exemple permet aussi de comparer les styles de base de mapbox.
      2. leaflet:
        https://api.mapbox.com/styles/v1/stef4250/ciw6uszpd000e2pmkuzzzqlln/tiles/256/{z}/{x}/{y}?access_token=XXmyTokenXX
        C'est cette URL de tuiles qu'il faut utiliser pour odyssey.jspour avoir une carte personnalisée (et avec un import/export interopérable)
        http://leafletjs.com/reference.html#tilelayer
        Voir les nombreuse options...
        Used to load and display tile layers on the map, implements ILayer interface:
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);
        dans odyssey.js:
        var baseurl = this.baseurl = 'http://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
        var         basemap = this.basemap = L.tileLayer(baseurl, { attribution: 'data OSM - map CartoDB'}).addTo(map);
        Rem: C'est ici qu'est inséré    comme attribution le string  'data OSM - map CartoDB'
      3. on peut personnaliser ses "points"
        • Title                    Eglise
        • marker-color       #7e7e7e
        • marker-size         medium
        • marker-symbol  village

Add your map style as a layer in ArcGIS and QGIS with WMTS:
https://www.mapbox.com/help/mapbox-arcgis-qgis/

Outils

Faire son tuillage

On peut aussi faire son propre tiling:

outils de conversion entre le format X/Y/Z et TMS

Il existe des outils de conversion entre le format X/Y/Z et TMS:
The difference between XYZ and TMS tiles and how to convert between them

ajout de layers

Par exemple avec google fusion:

design a specific layer-basemap

Most web maps are made up of many small, square images called tiles. These tiles are typically 256×256 pixels and are placed side-by-side in order to create the illusion of a very large seamless image. There are several different tiling schemes, but among the most popular is the standard XYZ tile scheme, used by Google, OpenStreetMap, CARTO, Mapbox, and others. Tile images are are served through a REST API with a URL like http://.../Z/X/Y.png, where Z is the zoom level, and X and Y identify the tile.
Mapbox now supports directly accessing raster tile endpoints for Mapbox studio styles. This means you can design custom maps in Mapbox Studio and access them directly in Fulcrum!
From the Styles page in Mapbox Studio, click on either a Mapbox style or one of your own custom styles.
Scroll down the style page until you see the “Use style in GIS apps” section and click on the CARTO tab (Fulcrum uses the same scheme as CARTO).
Copy the Integration URL and proceed with adding the map layer to Fulcrum.


----------

Posted by at
Labels: , , , , , , , , , , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)