Built on top of Leaflet: http://leafletjs.com/
many examples
basics
https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/
scroll-driven story map
A very quick way to create an effective scroll-driven story map is to use Mapbox GL. The advantage of using Mapbox GL over some other mapping libraries is that Mapbox GL allows you not only to zoom and pan the map but to rotate the map to provide different perspectives on your featured locationsIf you want to create a Mapbox GL story map there is also the added advantage that Mapbox has provided a great template in their list of 'example' maps. The Fly to a location based on scroll position map in the Mapbox GL examples (https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/) provides a neat demo of the possibilities of a Mapbox GL story map (all you have to do to create your own story map is copy & paste the provided code and change the content to suit the story you want to tell).
An example of story map (without UI events):
https://www.mapbox.com/mapbox.js/example/v1.0.0/scroll-driven-navigation/
An example: Slideshow gallery in a marker tooltip; Add a custom slideshow to a marker's tooltip.
https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-with-image-slideshow/
This JavaScript library uses WebGL to render interactive maps from vector tiles and Mapbox styles. We found out how to to configure the color mapping on the client side and minimize data traffic while rendering a lot of data (https://www.ubilabs.net/en/news/data-driven-raster-layer-mapbox-lg-2016-09-05).
A very good example:
http://carlapedret.github.io/jewellerymap/A beautiful example of a Mapbox GL story map is Birmingham Eastside's Gentrification in Birmingham’s Jewellery Quarter. Birmingham Eastside has used the Mapbox GL demo map to create a mapped guide to how gentrification is affecting Birmingham's Jewellery Quarter.
As you scroll through the map you are taken on a tour of the neighborhood, highlighting some of the biggest changes in the area. The Gentrification in Birmingham's Jewellery Quarter map also features map markers which provide another level of interactivity to the map. These markers provide additional information and media - such as audio recordings of interviews with some of the individuals featured in the side-panel content:
(iframe of soundclound like this:
<iframe width='100%' height='275' scrolling='no' frameborder='no' src='https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/259889010&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true'></iframe>",
(iframe XXXX below)
in this GeoJSON structure:
{
"type": "Feature",
"properties": {
"title": "Matthew why",
"description": "<div class='marker-title'>A central location and an historic flavour</div> \
<p>Matthew Bott is from Birmingham and lives in the Jewellery Quarter since 2007. The privilege to walk to his work place and the special character of the area are his reason to live in the neighbourhood. (Image: Flickr/Roland Turner).</p> \
<iframe XXXX </iframe>",
"marker-symbol": "marker",
},
"geometry": {
"type": "Point",
"coordinates": [-1.907828, 52.486782]
}
},
https://github.com/carlapedret
only copy/paste the example's html of mapbox.js (put in GitHub and after to github.io hosted pages http://carlapedret.github.io/jewellerymap/).
other example
https://www.mapbox.com/bites/00110/Mapbox have also used their own story map format to create a map of the intriguing case of Robert Durst. Durst was arrested on a first-degree murder warrant. If convicted he could face the death penalty.
Following the Life and Death of Robert Durst plots the key movements and actions of Robert Durst since his first wife 'disappeared' three decades ago up until his arrest in New Orleans. As well as the scroll-driven narration and up-dating map 'Following the Life and Death of Robert Durst' uses map markers and polylines to track Durst's movements around the country and to connect all the featured locations together.
-->no UI events on the map.
Video embeds in tooltips
Embedding iframe videos in feature tooltips:
https://www.mapbox.com/mapbox.js/example/v1.0.0/video/
Timeline with scaled markers
Use d3 to brush through a timeline of scaled markers with popups:
https://www.mapbox.com/mapbox.js/example/v1.0.0/timeline-scaled-markers/
import/export: Leaflet-Omnivore plug-in
avec https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.jsSome examples:
CSV
https://www.mapbox.com/mapbox.js/example/v1.0.0/omnivore-csv-simplestyle/
KML
https://www.mapbox.com/mapbox.js/example/v1.0.0/omnivore-kml-tooltip/
https://www.mapbox.com/mapbox.js/example/v1.0.0/omnivore-kml/
GPX, or WKT
https://www.mapbox.com/mapbox.js/example/v1.0.0/omnivore-wkt/
many plug-ins:
https://www.mapbox.com/mapbox.js/plugins/https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-fullscreen/
Leaflet Fullscreen
Add a control to enable a map to be in full screen mode.
Adds a button to your map that enables it to fill the screen using the HTML5 Fullscreen API.
intro studio
In Mapbox Studio, the dataset editor and style editor work together to help you make powerful custom maps. The dataset editor allows you to manage and edit geospatial data, and the style editor allows you to create custom map styles to your exact specifications. This guide will focus on the dataset editor, covering the basics of how a dataset is uploaded to your Mapbox account and the options in the dataset editor interface.csv
many problems occur.
When uploading CSV files, keep the following in mind:
CSV files must be in UTF-8 encoding.
CSV files must contain coordinates (latitude and longitude) when uploading in Mapbox Studio or Mapbox Studio Classic.
Only Mapbox Editor will geocode addresses found in a CSV file.
CSV files are for point data only.
geoJSON
no problem...example for two points:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"hover": "Yssingeaux"
},
"geometry": {
"type": "Point",
"coordinates": [
4.123724699020386,
45.142269883456066
]
}
},
{
"type": "Feature",
"properties": {
"hover": "Eglise"
},
"geometry": {
"type": "Point",
"coordinates": [
4.12424772977829,
45.14296420392794
]
}
}
]
}
GeoJSON is a file format for map data served by Mapbox web services and APIs. As a subset of the JSON format, it can be parsed in modern software and native to the JavaScript language.
When you create features in the Mapbox Studio dataset editor, you are creating GeoJSON that you can use with other Mapbox tools and APIs. These datasets can be accessed as GeoJSON by downloading directly from the Mapbox Studio Datasets page or by using the Datasets API.
If you have GeoJSON data you wish to put on a map, you can upload GeoJSON to your Mapbox account using Mapbox Studio. You can add this either as a dataset for quick updates or geometry changes or as a tileset for styling in your custom map.
The Mapbox Studio dataset editor is a tool for editing datasets. A dataset is an editable collection of GeoJSON features. Datasets can be uploaded to Mapbox via Mapbox Studio or the Datasets API.
Datasets are different than tilesets. It’s possible to modify dataset feature geometries and properties in the Mapbox Studio dataset editor and export to a tileset for styling. However, datasets themselves cannot be styled. Tilesets can be styled, but cannot be edited.
Export a dataset to a tileset and a style
After you have finished editing your dataset, click Save to review the changes you have made and click Export to export your dataset as a vector tileset. A vector tileset is a collection of data broken up into a uniform grid of square tiles at up to 22 preset zoom levels. Your tilesets are stored on the Tilesets page in your Mapbox account.See my post:
http://stephane-mottin.blogspot.fr/2016/11/faire-un-fichier-csv-ou-de-transcodage.html
No comments:
Post a Comment