How to use this repository
- Clone or download as a ZIP
- Open Terminal, navigate to project folder and run
pod install
- Open OfflineMaps.xcworkspace
- Optional: Select team, if you want to run on device
- Run project
How to build a map source.
- Download Mapbox Studio Classic (https://www.mapbox.com/mapbox-studio-classic/#darwin)
- Create a new source
- Add some vector data (e.g. http://www.naturalearthdata.com)
- Save the project
- Go to settings -> Export to MBTiles
- Install mb-util (https://github.com/mapbox/mbutil)
- Convert MBTiles to PBF Files (More info https://github.com/klokantech/vector-tiles-sample)
mb-util --image_format=pbf countries.mbtiles countries
gzip -d -r -S .pbf *
find . -type f -exec mv '{}' '{}'.pbf \;
- Zip the folder
Structure of the style.json file
The Tiles-URL corresponds to your local server running on port 8080. The example zip file contains a top level folder countries. If you choose another zip structure or port, adjust the style.json.
"sources": {
"composite": {
"type": "vector",
"tiles": ["http://localhost:8080/countries/{z}/{x}/{y}.pbf"]
}
}
The layers object is responsible for the styling of the map. The id is unique for every element. Source corresponds to the name in your sources object and the layer corresponds to the name of the layer in your source mbtiles file. For possible styles, use the MapBox Online Editor (http://www.mapbox.com) and download the style file.
"layers": [{
"id": "background",
"type": "background",
"paint": {
"background-color": "hsl(190, 67%, 47%)"
}
}, {
"id": "countries",
"type": "fill",
"source": "composite",
"source-layer": "countries",
"layout": {
"visibility": "visible"
},
"paint": {
"fill-color": "hsl(0, 0%, 85%)",
"fill-outline-color": "#F8E81C"
}
}, {
"id": "countries-border",
"type": "line",
"source": "composite",
"source-layer": "countries",
"layout": {
"visibility": "visible"
},
"paint": {
"line-color": "#000000",
"line-width": 1.2
}
}, {
"id": "countries-deu",
"type": "fill",
"source": "composite",
"source-layer": "countries",
"filter": ["in", "ADM0_A3", "DEU"],
"layout": {
"visibility": "visible"
},
"paint": {
"fill-color": "#BD0FE1"
}
}]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent