diff options
Diffstat (limited to 'platform/ios/docs')
18 files changed, 544 insertions, 6 deletions
diff --git a/platform/ios/docs/doc-README.md b/platform/ios/docs/doc-README.md index 22493b1502..e91bc0b1cc 100644 --- a/platform/ios/docs/doc-README.md +++ b/platform/ios/docs/doc-README.md @@ -2,7 +2,7 @@ The Mapbox iOS SDK is an open-source framework for embedding interactive map views with scalable, customizable vector maps into Cocoa Touch applications on iOS 7.0 and above using Objective-C, Swift, or Interface Builder. It takes stylesheets that conform to the [Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/), applies them to vector tiles that conform to the [Mapbox Vector Tile Specification](https://www.mapbox.com/developers/vector-tiles/), and renders them using OpenGL. - + For setup information, check out the [Mapbox iOS SDK homepage](https://www.mapbox.com/ios-sdk/). For detailed usage instructions, read “[First steps with the Mapbox iOS SDK](https://www.mapbox.com/help/first-steps-ios-sdk/)” and consult the [online examples](https://www.mapbox.com/ios-sdk/examples/). A [full changelog](https://github.com/mapbox/mapbox-gl-native/blob/master/platform/ios/CHANGELOG.md) is also available. diff --git a/platform/ios/docs/guides/Adding Points to a Map.md b/platform/ios/docs/guides/Adding Points to a Map.md new file mode 100644 index 0000000000..17e8ad3592 --- /dev/null +++ b/platform/ios/docs/guides/Adding Points to a Map.md @@ -0,0 +1,83 @@ +# Adding Points to a Map + +Mapbox offers a few different ways to add points to a map, each with different tradeoffs. + +## MGLPointAnnotation + +It’s straightforward to add an annotation to a map. You can use `MGLPointAnnotation` as is, or you can subclass it to add annotations with richer data. + +```swift +let annotation = MGLPointAnnotation() +annotation.coordinate = CLLocationCoordinate2D(latitude: 45.5076, longitude: -122.6736) +annotation.title = "Bobby's Coffee" +annotation.subtitle = "Coffeeshop" +mapView.addAnnotation(annotation) +``` + +See the `MGLMapViewDelegate` method `-mapView:annotationCanShowCallout:` and similar methods for allowing interaction with a callout ([example](https://www.mapbox.com/ios-sdk/examples/callout-delegate/)). + +## Displaying annotations + +There are two basic ways to display the annotations you’ve added to a map, each with their own tradeoffs. + +### Annotation Images (`MGLAnnotationImage`) + +Annotation images are the quickest and most performant way to display annotations, but are also the most basic. + +By default, annotations added to the map are displayed with a red pin ([example](https://www.mapbox.com/ios-sdk/examples/marker/)). To use custom images, you can implement `MGLMapViewDelegate` `-mapView:imageForAnnotation:` ([example](https://www.mapbox.com/ios-sdk/examples/marker-image/)). + +**Pros** + +* The easiest way to display a marker on a map +* Easily customizable with any `UIImage` +* High performance, as the images are rendered directly in OpenGL + +**Cons** + +* Annotation images are purely static and cannot be animated +* No control over z-ordering +* Limits to the number and size of images you can add + +### Annotation Views (`MGLAnnotationView`) + +If you’re looking to add custom `UIView`s or have annotations that are dynamic or animatable, consider an `MGLAnnotationView` instead of an `MGLAnnotationImage` ([example](https://www.mapbox.com/ios-sdk/examples/annotation-views/)). + +Annotation views have significant advantages over annotation images when you need every annotation to be unique. For example, annotation views are ideal for showing user locations on a map using high-resolution profile pictures. + +To use annotation views, implement `MGLMapViewDelegate` `-mapView:viewForAnnotation` and provide a custom `MGLAnnotationView` (`UIView`) subclass. + +**Pros** + +* Custom, native UIViews +* No limit on style or image size +* Full support for animations +* Relative control over z-ordering using the `zPosition` property on `CALayer` +* [Familiar API for MapKit users](https://www.mapbox.com/help/switch-mapkit/#annotations-pins) + +**Cons** + +* Performance implications: + * `UIView`s are inherently slow to render compared to OpenGL, more apparent if you’re adding many views or moving the map rapidly + * In some cases, you might consider runtime styling + +## Advanced: Runtime Styling + +For absolute full control of how points are displayed on a map, consider [runtime styling](runtime-styling.html). + +You can use `MGLPointFeature` or any of the other [style feature subclasses](Style%20Features.html) to add points and shapes to an `MGLShapeSource`. + +From there, you can create one or many `MGLSymbolStyleLayer` or `MGLCircleStyleLayer` layers to filter and style points for display on the map ([example](https://www.mapbox.com/ios-sdk/examples/runtime-multiple-annotations)). + +**Pros** + +* Most powerful option +* Highest performance (rendered in GL directly) +* SDK-level support for labels rendered together with icons +* Finer control of z-ordering + * Rendering respects ordering within the data source + * Otherwise layers are lightweight so you can create a new layer for each level you need + +**Cons** + +* Currently you must implement your own tap gesture recognizer together with `MGLMapView.visibleFeaturesAtPoint` to recognize taps and manually show callouts ([example](https://www.mapbox.com/ios-sdk/examples/select-feature)). +* Currently no SDK support for animations. If you need animations, consider using an NSTimer and updating the layer properties accordingly. diff --git a/platform/ios/docs/guides/For Style Authors.md b/platform/ios/docs/guides/For Style Authors.md new file mode 100644 index 0000000000..753eb7200c --- /dev/null +++ b/platform/ios/docs/guides/For Style Authors.md @@ -0,0 +1,306 @@ +<!-- + This file is generated. + Edit platform/darwin/scripts/generate-style-code.js, then run `make style-code-darwin`. +--> +# Information for Style Authors + +A _style_ defines a map view’s content and appearance. If you’ve authored a +style using +[Mapbox Studio’s Styles editor](https://www.mapbox.com/studio/styles/) or as +JSON in a text editor, you can use that style in this SDK and manipulate it +afterwards in code. This document provides information you can use to ensure a +seamless transition from Mapbox Studio to your application. + +## Designing for iOS + +When designing your style, consider the context in which your application shows +the style. There are a number of considerations specific to iOS that may +not be obvious when designing your style in Mapbox Studio on the Web. A map view +is essentially a graphical user interface element, so many of same issues in +user interface design also apply when designing a map style. + +### Color + +Ensure sufficient contrast in your application’s user interface when your map +style is present. Standard user interface elements such as toolbars, sidebars, +and sheets often overlap the map view with a translucent, blurred background, so +make sure the contents of these elements remain legible with the map view +underneath. +The user location annotation view, the attribution button, any buttons in +callout views, and any items in the navigation bar are influenced by your +application’s tint color, so choose a tint color that constrasts well with your +map style. If you intend your style to be used in the dark, consider the impact +that Night Shift may have on your style’s colors. + +### Typography and graphics + +Choose font and icon sizes appropriate to iOS devices. iPhones and iPads have +smaller screens than the typical browser window in which you would use Mapbox +Studio, especially when multitasking is enabled. Your user’s viewing distance +may be shorter than on a desktop computer. Some of your users may use the Larger +Dynamic Type and Accessibility Text features to increase the size of all text on +the device. You can use the +[runtime styling API](#manipulating-the-style-at-runtime) to adjust your style’s +font and icon sizes accordingly. + +Design sprite images and choose font weights that look crisp on both +standard-resolution displays and Retina displays. This SDK supports the same +resolutions as iOS. +Standard-resolution displays are limited to older devices that your application +may or may not support, depending on its minimum deployment target. + +Icon and text labels should be legible regardless of the map’s orientation. +By default, this SDK makes it easy for your users to rotate or tilt the map +using multitouch gestures. +If you do not intend your design to accommodate rotation and tilting, disable +these gestures using the `MGLMapView.rotateEnabled` and +`MGLMapView.pitchEnabled` properties, respectively, or the corresponding +inspectables in Interface Builder. + +### Interactivity + +Pay attention to whether elements of your style appear to be interactive. +A text label may look like a tappable button merely due to matching your +application’s tint color or the default blue tint color. +You can make an icon or text label interactive by installing a gesture +recognizer and performing feature querying (e.g., +`-[MGLMapView visibleFeaturesAtPoint:]`) to get details about the selected +feature. + +Make sure your users can easily distinguish any interactive elements from the +surrounding map, such as pins, the user location annotation view, or a route +line. Avoid relying on hover effects to indicate interactive elements. Leave +enough room between interactive elements to accommodate imprecise tapping +gestures. + +For more information about user interface design, consult Apple’s +[_iOS Human Interface Guidelines_](https://developer.apple.com/ios/human-interface-guidelines/). + +## Applying your style + +You set an `MGLMapView` object’s style either in code, by setting the +`MGLMapView.styleURL` property, or in Interface Builder, by setting the “Style +URL” inspectable. The URL must point to a local or remote style JSON file. The +style JSON file format is defined by the +[Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/). This +SDK supports the functionality defined by version 8 of the specification unless +otherwise noted in the +[style specification documentation](https://www.mapbox.com/mapbox-gl-style-spec/). + +## Manipulating the style at runtime + +The _runtime styling API_ enables you to modify every aspect of a style +dynamically as a user interacts with your application. The style itself is +represented at runtime by an `MGLStyle` object, which provides access to various +`MGLSource` and `MGLStyleLayer` objects that represent content sources and style +layers, respectively. +For more information about the capabilities exposed by the runtime styling API, +see “[Runtime Styling](runtime-styling.html)”. + +The names of runtime styling classes and properties on iOS are generally +consistent with the style specification and Mapbox Studio’s Styles editor. Any +exceptions are listed in this document. + +To avoid conflicts with Objective-C keywords or Cocoa terminology, this SDK uses +the following terms for concepts defined in the style specification: + +In the style specification | In the SDK +---------------------------|--------- +class | style class +filter | predicate +id | identifier +image | style image +layer | style layer +property | attribute +SDF icon | template image +source | content source + +## Specifying the map’s content + +Each source defined by a style JSON file is represented at runtime by a content +source object that you can use to initialize new style layers. The content +source object is a member of one of the following subclasses of `MGLSource`: + +In style JSON | In the SDK +--------------|----------- +`geojson` | `MGLShapeSource` +`raster` | `MGLRasterSource` +`vector` | `MGLVectorSource` + +`image` and `video` sources are not supported. + +### Tile sources + +Raster and vector sources may be defined in TileJSON configuration files. This +SDK supports the properties defined in the style specification, which are a +subset of the keys defined in version 2.1.0 of the +[TileJSON](https://github.com/mapbox/tilejson-spec/tree/master/2.1.0) +specification. As an alternative to authoring a custom TileJSON file, you may +supply various tile source options when creating a raster or vector source. +These options are detailed in the `MGLTileSourceOption` documentation: + +In style JSON | In TileJSON | In the SDK +--------------|---------------|----------- +`url` | — | `configurationURL` parameter in `-[MGLTileSource initWithIdentifier:configurationURL:]` +`tiles` | `tiles` | `tileURLTemplates` parameter in `-[MGLTileSource initWithIdentifier:tileURLTemplates:options:]` +`minzoom` | `minzoom` | `MGLTileSourceOptionMinimumZoomLevel` +`maxzoom` | `maxzoom` | `MGLTileSourceOptionMaximumZoomLevel` +`tileSize` | — | `MGLTileSourceOptionTileSize` +`attribution` | `attribution` | `MGLTileSourceOptionAttributionHTMLString` (but consider specifying `MGLTileSourceOptionAttributionInfos` instead for improved security) +`scheme` | `scheme` | `MGLTileSourceOptionTileCoordinateSystem` + +### Shape sources + +Shape sources also accept various options. These options are detailed in the +`MGLShapeSourceOption` documentation: + +In style JSON | In the SDK +-----------------|----------- +`data` | `url` parameter in `-[MGLShapeSource initWithIdentifier:URL:options:]` +`maxzoom` | `MGLShapeSourceOptionMaximumZoomLevel` +`buffer` | `MGLShapeSourceOptionBuffer` +`tolerance` | `MGLShapeSourceOptionSimplificationTolerance` +`cluster` | `MGLShapeSourceOptionClustered` +`clusterRadius` | `MGLShapeSourceOptionClusterRadius` +`clusterMaxZoom` | `MGLShapeSourceOptionMaximumZoomLevelForClustering` + +To create a shape source from local GeoJSON data, first +[convert the GeoJSON data into a shape](working-with-geojson-data.html#converting-geojson-data-into-shape-objects), +then use the `-[MGLShapeSource initWithIdentifier:shape:options:]` method. + +## Configuring the map content’s appearance + +Each layer defined by the style JSON file is represented at runtime by a style +layer object, which you can use to refine the map’s appearance. The style layer +object is a member of one of the following subclasses of `MGLStyleLayer`: + +In style JSON | In the SDK +--------------|----------- +`background` | `MGLBackgroundStyleLayer` +`circle` | `MGLCircleStyleLayer` +`fill` | `MGLFillStyleLayer` +`line` | `MGLLineStyleLayer` +`raster` | `MGLRasterStyleLayer` +`symbol` | `MGLSymbolStyleLayer` + +You configure layout and paint attributes by setting properties on these style +layer objects. The property names generally correspond to the style JSON +properties, except for the use of camelCase instead of kebab-case. Properties +whose names differ from the style specification are listed below: + +### Circle style layers + +In style JSON | In Objective-C | In Swift +--------------|----------------|--------- +`circle-pitch-scale` | `MGLCircleStyleLayer.circleScaleAlignment` | `MGLCircleStyleLayer.circleScaleAlignment` +`circle-translate` | `MGLCircleStyleLayer.circleTranslation` | `MGLCircleStyleLayer.circleTranslation` +`circle-translate-anchor` | `MGLCircleStyleLayer.circleTranslationAnchor` | `MGLCircleStyleLayer.circleTranslationAnchor` + +### Fill style layers + +In style JSON | In Objective-C | In Swift +--------------|----------------|--------- +`fill-antialias` | `MGLFillStyleLayer.fillAntialiased` | `MGLFillStyleLayer.isFillAntialiased` +`fill-translate` | `MGLFillStyleLayer.fillTranslation` | `MGLFillStyleLayer.fillTranslation` +`fill-translate-anchor` | `MGLFillStyleLayer.fillTranslationAnchor` | `MGLFillStyleLayer.fillTranslationAnchor` + +### Line style layers + +In style JSON | In Objective-C | In Swift +--------------|----------------|--------- +`line-dasharray` | `MGLLineStyleLayer.lineDashPattern` | `MGLLineStyleLayer.lineDashPattern` +`line-translate` | `MGLLineStyleLayer.lineTranslation` | `MGLLineStyleLayer.lineTranslation` +`line-translate-anchor` | `MGLLineStyleLayer.lineTranslationAnchor` | `MGLLineStyleLayer.lineTranslationAnchor` + +### Raster style layers + +In style JSON | In Objective-C | In Swift +--------------|----------------|--------- +`raster-brightness-max` | `MGLRasterStyleLayer.maximumRasterBrightness` | `MGLRasterStyleLayer.maximumRasterBrightness` +`raster-brightness-min` | `MGLRasterStyleLayer.minimumRasterBrightness` | `MGLRasterStyleLayer.minimumRasterBrightness` +`raster-hue-rotate` | `MGLRasterStyleLayer.rasterHueRotation` | `MGLRasterStyleLayer.rasterHueRotation` + +### Symbol style layers + +In style JSON | In Objective-C | In Swift +--------------|----------------|--------- +`icon-allow-overlap` | `MGLSymbolStyleLayer.iconAllowsOverlap` | `MGLSymbolStyleLayer.iconAllowsOverlap` +`icon-ignore-placement` | `MGLSymbolStyleLayer.iconIgnoresPlacement` | `MGLSymbolStyleLayer.iconIgnoresPlacement` +`icon-image` | `MGLSymbolStyleLayer.iconImageName` | `MGLSymbolStyleLayer.iconImageName` +`icon-optional` | `MGLSymbolStyleLayer.iconOptional` | `MGLSymbolStyleLayer.isIconOptional` +`icon-rotate` | `MGLSymbolStyleLayer.iconRotation` | `MGLSymbolStyleLayer.iconRotation` +`icon-size` | `MGLSymbolStyleLayer.iconScale` | `MGLSymbolStyleLayer.iconScale` +`icon-keep-upright` | `MGLSymbolStyleLayer.keepsIconUpright` | `MGLSymbolStyleLayer.keepsIconUpright` +`text-keep-upright` | `MGLSymbolStyleLayer.keepsTextUpright` | `MGLSymbolStyleLayer.keepsTextUpright` +`text-max-angle` | `MGLSymbolStyleLayer.maximumTextAngle` | `MGLSymbolStyleLayer.maximumTextAngle` +`text-max-width` | `MGLSymbolStyleLayer.maximumTextWidth` | `MGLSymbolStyleLayer.maximumTextWidth` +`symbol-avoid-edges` | `MGLSymbolStyleLayer.symbolAvoidsEdges` | `MGLSymbolStyleLayer.symbolAvoidsEdges` +`text-field` | `MGLSymbolStyleLayer.text` | `MGLSymbolStyleLayer.text` +`text-allow-overlap` | `MGLSymbolStyleLayer.textAllowsOverlap` | `MGLSymbolStyleLayer.textAllowsOverlap` +`text-font` | `MGLSymbolStyleLayer.textFontNames` | `MGLSymbolStyleLayer.textFontNames` +`text-size` | `MGLSymbolStyleLayer.textFontSize` | `MGLSymbolStyleLayer.textFontSize` +`text-ignore-placement` | `MGLSymbolStyleLayer.textIgnoresPlacement` | `MGLSymbolStyleLayer.textIgnoresPlacement` +`text-justify` | `MGLSymbolStyleLayer.textJustification` | `MGLSymbolStyleLayer.textJustification` +`text-optional` | `MGLSymbolStyleLayer.textOptional` | `MGLSymbolStyleLayer.isTextOptional` +`text-rotate` | `MGLSymbolStyleLayer.textRotation` | `MGLSymbolStyleLayer.textRotation` +`icon-translate` | `MGLSymbolStyleLayer.iconTranslation` | `MGLSymbolStyleLayer.iconTranslation` +`icon-translate-anchor` | `MGLSymbolStyleLayer.iconTranslationAnchor` | `MGLSymbolStyleLayer.iconTranslationAnchor` +`text-translate` | `MGLSymbolStyleLayer.textTranslation` | `MGLSymbolStyleLayer.textTranslation` +`text-translate-anchor` | `MGLSymbolStyleLayer.textTranslationAnchor` | `MGLSymbolStyleLayer.textTranslationAnchor` + +## Setting attribute values + +Each property representing a layout or paint attribute is set to an +`MGLStyleValue` object, which is either an `MGLStyleConstantValue` object (for +constant values) or an `MGLStyleFunction` object (for zoom level functions). The +style value object is a container for the raw value or function parameters that +you want the attribute to be set to. + +In contrast to the JSON type that the style specification defines for each +layout or paint property, the style value object often contains a more specific +Foundation or Cocoa type. General rules for attribute types are listed below. +Pay close attention to the SDK documentation for the attribute you want to get +or set. + +In style JSON | In Objective-C | In Swift +--------------|-----------------------|--------- +Color | `UIColor` | `UIColor` +Enum | `NSValue` (see `NSValue(MGLAdditions)`) | `NSValue` (see `NSValue(MGLAdditions)`) +String | `NSString` | `String` +Boolean | `NSNumber.boolValue` | `Bool` +Number | `NSNumber.floatValue` | `Float` +Array (`-dasharray`) | `NSArray<NSNumber>` | `[Float]` +Array (`-font`) | `NSArray<NSString>` | `[String]` +Array (`-offset`, `-translate`) | `NSValue.CGVectorValue` | `NSValue.cgVectorValue` +Array (`-padding`) | `NSValue.UIEdgeInsetsValue` | `NSValue.uiEdgeInsetsValue` + +For padding attributes, note that the arguments to +`UIEdgeInsetsMake()` in Objective-C and +`EdgeInsets(top:left:bottom:right:)` in Swift are specified in counterclockwise +order, in contrast to the clockwise order defined by the style specification. + +## Filtering sources + +You can filter a shape or vector source by setting the +`MGLVectorStyleLayer.predicate` property to an `NSPredicate` object. Below is a +table of style JSON operators and the corresponding operators used in the +predicate format string: + +In style JSON | In the format string +--------------------------|--------------------- +`["has", key]` | `key != nil` +`["!has", key]` | `key == nil` +`["==", key, value]` | `key == value` +`["!=", key, value]` | `key != value` +`[">", key, value]` | `key > value` +`[">=", key, value]` | `key >= value` +`["<", key, value]` | `key < value` +`["<=", key, value]` | `key <= value` +`["in", key, v0, …, vn]` | `key IN {v0, …, vn}` +`["!in", key, v0, …, vn]` | `NOT key IN {v0, …, vn}` +`["all", f0, …, fn]` | `p0 AND … AND pn` +`["any", f0, …, fn]` | `p0 OR … OR pn` +`["none", f0, …, fn]` | `NOT (p0 OR … OR pn)` + +See the `MGLVectorStyleLayer.predicate` documentation for a full description of +the supported operators and operand types. diff --git a/platform/ios/docs/Info.plist Keys.md b/platform/ios/docs/guides/Info.plist Keys.md index 34d3da9e29..c5c7cf1d85 100644 --- a/platform/ios/docs/Info.plist Keys.md +++ b/platform/ios/docs/guides/Info.plist Keys.md @@ -1,6 +1,6 @@ # Info.plist Keys -The Mapbox iOS SDK supports custom `Info.plist` keys in your application in order to configure various settings. +The Mapbox iOS SDK supports custom `Info.plist` keys in your application in order to configure various settings. ## MGLMapboxAccessToken @@ -8,13 +8,13 @@ Set the [Mapbox access token](https://www.mapbox.com/help/define-access-token/) Mapbox-hosted vector tiles and styles require an API access token, which you can obtain from the [Mapbox account page](https://www.mapbox.com/studio/account/tokens/). Access tokens associate requests to Mapbox’s vector tile and style APIs with your Mapbox account. They also deter other developers from using your styles without your permission. -As an alternative, you can use `+[MGLAccountManager setAccessToken:]` to set a token in code. See [our guide](https://www.mapbox.com/help/ios-private-access-token/) for some tips on keeping access tokens in open source code private. +As an alternative, you can use `+[MGLAccountManager setAccessToken:]` to set a token in code. See [our guide](https://www.mapbox.com/help/ios-private-access-token/) for some tips on keeping access tokens in open source code private. ## MGLMapboxAPIBaseURL -Use this key if you need to customize the API base URL used throughout the SDK. If unset, the default Mapbox API is used. +Use this key if you need to customize the API base URL used throughout the SDK. If unset, the default Mapbox API is used. -The default value is `https://api.mapbox.com`. +The default value is `https://api.mapbox.com`. ## MGLMapboxMetricsEnabledSettingShownInApp diff --git a/platform/ios/docs/guides/Runtime Styling.md b/platform/ios/docs/guides/Runtime Styling.md new file mode 100644 index 0000000000..e85b466c65 --- /dev/null +++ b/platform/ios/docs/guides/Runtime Styling.md @@ -0,0 +1,53 @@ +# Runtime Styling + +Mapbox’s runtime styling features allow you direct control over every layer in your maps with code. It’s now possible to create dynamic maps and visualizations that aren’t possible with other mobile maps SDKs. + +Runtime styling expands upon the design power of [Mapbox Studio](https://www.mapbox.com/mapbox-studio/) and exposes all of the same properties and attributes directly to mobile developers in our SDK. + +Beyond the custom styled maps that you can create with Mapbox Studio, you can now change the look and feel of your map on the fly having maps in your app visually respond to user interaction or or context. Or leverage the power of OpenGL for highly performant and complex data visualizations. Now it’s possible to mix in your own data and bring your map to life. + +## Example use cases + +As an example of what’s possible with runtime styling, consider some of the following use cases: + +### Styling maps on the fly + +At runtime, you can tailor the map specifically to your user interface. Tweak colors, text, and icons to match the style to your brand. + + + +For maps that aren’t going to change in response to custom data or user interaction, consider creating a custom map style with [Mapbox Studio](https://www.mapbox.com/mapbox-studio/). + +### Map interactivity + +You can customize the map to the point of having it respond dynamically based on the actions your users are taking. Increase the text size of streets while a user is driving, emphasize points of interest tailored to a user’s preferences, or change your UI if users are at parks, trails, landmarks, or rivers. + + + +### Powerful data visualization + +Mapbox maps are built on top of OpenGL and can support rendering data without the traditional overhead of `UIView`-based map annotations. + +Mapbox can support data visualizations that were slow or impossible with traditional map SDKs. Render heatmaps, visualize population density, or even go so far as updating the snow levels in the mountains to match recent snowfall. + + + + + +### Powerful annotations + +The Mapbox SDK gives you access to all of the same tools we use to render our default map styles. Instead of using generic pin markers, enrich your place data or custom polygons with icons and labels that make your maps stand out. + + + +### Custom shapes + +Draw custom shapes on the map the same way you would a custom `UIView` or `CALayer`. These shapes keep their geographic scale and are perfect for visualizing everything from indoor floor plans to metro systems to hurricane tracks. + +## Resources + +* [Information for style authors](for-style-authors.html) +* [Mapbox Streets source reference](https://www.mapbox.com/vector-tiles/mapbox-streets-v7/) +* [Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/) +* [Mapbox Studio](https://www.mapbox.com/mapbox-studio/) +* [iOS code examples](https://www.mapbox.com/ios-sdk/examples/) diff --git a/platform/ios/docs/guides/Working with Mapbox Studio.md b/platform/ios/docs/guides/Working with Mapbox Studio.md new file mode 100644 index 0000000000..959731a3a7 --- /dev/null +++ b/platform/ios/docs/guides/Working with Mapbox Studio.md @@ -0,0 +1,96 @@ +# Working with Mapbox Studio + +[Mapbox Studio’s Styles editor](http://mapbox.com/studio) is Mapbox’s tool for creating custom map styles. It also serves as an excellent tool for rapidly prototyping dynamic maps and [runtime styling](runtime-styling.html) interactions for iOS. + +## Creating a base style + +Start by heading to [mapbox.com/studio](https://www.mapbox.com/studio) and creating a new style. Any style that’s close to what you’ll be using in your app is ideal. + +## Prototyping with data + +The goal in using Mapbox Studio for prototyping runtime styling implementations is to test data presentation assumptions as quickly as possible. With the Mapbox Studio tools, you can import a small subset of your own real data, fake data as a placeholder, or prototype with existing Mapbox data. + +### Prototyping with Mapbox data +The default [Mapbox Streets tileset](https://www.mapbox.com/studio/tilesets/mapbox.mapbox-streets-v7/) might offer data similar to your own that you can use to style before you swap in your own data at runtime. + +For example, if you’re looking to prototype points of interest, consider the `poi_label` layer; if you want to style GPS traces, the `roads` layer might be a good proxy. Take a look at what’s available in [Mapbox Streets](https://www.mapbox.com/studio/tilesets/mapbox.mapbox-streets-v7/): there’s probably a layer that closely matches your data. + +### Importing real data +If you can’t find a good approximation for your data in Mapbox Streets, consider uploading a small subset of your data into Mapbox Studio as a custom tileset. + +From the [Mapbox Studio Dashboard](https://www.mapbox.com/studio/), click `Tilesets` in the sidebar, then click `New Tileset` to get started with most common geo file formats including KML, GPX, GeoJSON, Shapefiles, and CSV. + +### Faking placeholder data +If you don’t have any custom data on hand in a format that works easily with the Tileset importer, you can fake placeholder data with the Dataset Editor. + +From the [Mapbox Studio Dashboard](https://www.mapbox.com/studio/), click `Datasets` in the sidebar, then click on `New Dataset` to get started. + +Zoom into your desired location and use the draw tools on the left to start creating a set of sample data. + + + +Next, add data properties you’d like to use to drive your style. Consider categorical properties or numeric properties that you’d use to filter and group your data. Text properties can be used to display icons or labels. + + + +**General Guidelines:** + +* Text along a line: add line with a text property +* Text at specific points on a line or polygon: in addition to the line, create points at the specific points you’d like with text properties +* If you want circles where scale doesn’t matter relative to the geography (e.g. always 20 pixels), you can add as a point and style with a circle layer or a symbol +* If you want circles or arcs where the scale matters (e.g. 10 mile radius), you’ll need to approximately freehand a polygon that you can create more precisely later in code. + +When you’re done, save your dataset and export as a tileset. When that’s complete, add your tileset to your style. + +### Import into your style + +1. Click `New Layer` +2. Select your tileset +3. Select your shape type: + * `Symbol`: best for text and icons + * `Line`: best for lines or adding strokes to polygons + * `Fill`: best for filling polygons + * `Circle`: for styling points or nodes along a line or polygon as circles. If you need circles of a fixed radius (e.g. 1 mile radius), you should model your data as a polygon. +4. Add filters if necessary + * You can selectively filter your data by their properties to group and style separately +5. Click on `Create Layer` + +## Styling with Mapbox Studio + +Mapbox Studio shines for styling your data and the process is much faster than attempting to style natively. + +There are some nuances to understand between the different layer types and how they work together. Don’t be afraid to use the layers sidebar to peek into the techniques used to style the stock Mapbox maps. You can duplicate these layers, re-point the source to your own data, and tweak as needed. + +**Best Practices:** + +* Layers are cheap, so duplicate and update filters liberally. +* If you’d like to stroke polygons you’ll need to use two layers: one a fill and one a stroked line. +* If you want to stroke a line, create two layers, one for the default stroke and one with a wider width for its casing +* If you intend to animate properties or transition between values, consider creating separate layers for each state and toggling visibility to visualize the difference. + +## Implement on iOS with runtime styling + +Once you’re happy with the styles you’ve created, it’s time to [get setup with Mapbox in your app](https://www.mapbox.com/ios-sdk/). + +To implement your prototypes with runtime styling: + +1. Implement `-[MGLMapViewDelegate mapView:didFinishLoadingStyle:]`. +2. Add your real data as a source: + * This can be done using vector data from tileset editor ([example](https://www.mapbox.com/ios-sdk/examples/runtime-circle-styles)), custom vector tiles, added as GeoJSON ([example](https://www.mapbox.com/ios-sdk/examples/runtime-add-line), or added manually through the app via `MGLShapeSource` ([example](https://www.mapbox.com/ios-sdk/examples/runtime-multiple-annotations)) +3. For each layer you’ve prototyped in Studio, add its corresponding `MGLStyleLayer` subclass. See [“Configuring the map content’s appearance”](for-style-authors.html#configuring-the-map-content-s-appearance) for the available style layer classes. + +**Translating style attributes from Studio** +For each property you’ve edited in Studio, you can hover over the property name to find the corresponding property in the iOS SDK. It’ll generally be the camelCased version of the Property ID, but see [“Configuring the map content’s appearance”](for-style-authors.html#configuring-the-map-content-s-appearance) for a table of properties that differ between Mapbox Studio and the iOS SDK. + + + +**Translating stop functions** +It’s possible to use stop functions in Mapbox Studio to transition the style of a layer by its zoom level (e.g. a line that gets wider as you zoom in). These can be translated in the mobile SDKs using `+[MGLSyleValue valueWithInterpolationBase:stops:]`. The rate of change between stops in Studio is represented by `interpolationBase`. + + + +## Resources + +* [Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/) +* [Mapbox Studio](https://www.mapbox.com/mapbox-studio/) +* [iOS code examples](https://www.mapbox.com/ios-sdk/examples/) diff --git a/platform/ios/docs/img/runtime-styling/CustomAnnotations.gif b/platform/ios/docs/img/runtime-styling/CustomAnnotations.gif Binary files differnew file mode 100644 index 0000000000..dee99d01fd --- /dev/null +++ b/platform/ios/docs/img/runtime-styling/CustomAnnotations.gif diff --git a/platform/ios/docs/img/runtime-styling/DynamicStyles.gif b/platform/ios/docs/img/runtime-styling/DynamicStyles.gif Binary files differnew file mode 100644 index 0000000000..b42d30c602 --- /dev/null +++ b/platform/ios/docs/img/runtime-styling/DynamicStyles.gif diff --git a/platform/ios/docs/img/runtime-styling/Emoji.gif b/platform/ios/docs/img/runtime-styling/Emoji.gif Binary files differnew file mode 100644 index 0000000000..fc50b28972 --- /dev/null +++ b/platform/ios/docs/img/runtime-styling/Emoji.gif diff --git a/platform/ios/docs/img/runtime-styling/HexBins.gif b/platform/ios/docs/img/runtime-styling/HexBins.gif Binary files differnew file mode 100644 index 0000000000..c810085f22 --- /dev/null +++ b/platform/ios/docs/img/runtime-styling/HexBins.gif diff --git a/platform/ios/docs/img/runtime-styling/Population.gif b/platform/ios/docs/img/runtime-styling/Population.gif Binary files differnew file mode 100644 index 0000000000..81b6c6310f --- /dev/null +++ b/platform/ios/docs/img/runtime-styling/Population.gif diff --git a/platform/ios/docs/img/runtime-styling/SnowLevels.gif b/platform/ios/docs/img/runtime-styling/SnowLevels.gif Binary files differnew file mode 100644 index 0000000000..8ee2f9fddd --- /dev/null +++ b/platform/ios/docs/img/runtime-styling/SnowLevels.gif diff --git a/platform/ios/docs/img/screenshot.png b/platform/ios/docs/img/screenshot.png Binary files differnew file mode 100644 index 0000000000..62c04746d4 --- /dev/null +++ b/platform/ios/docs/img/screenshot.png diff --git a/platform/ios/docs/img/studio-workflow/add-properties.gif b/platform/ios/docs/img/studio-workflow/add-properties.gif Binary files differnew file mode 100644 index 0000000000..740fae655b --- /dev/null +++ b/platform/ios/docs/img/studio-workflow/add-properties.gif diff --git a/platform/ios/docs/img/studio-workflow/create-polygons.gif b/platform/ios/docs/img/studio-workflow/create-polygons.gif Binary files differnew file mode 100644 index 0000000000..6eb2c0afb8 --- /dev/null +++ b/platform/ios/docs/img/studio-workflow/create-polygons.gif diff --git a/platform/ios/docs/img/studio-workflow/property-values.png b/platform/ios/docs/img/studio-workflow/property-values.png Binary files differnew file mode 100644 index 0000000000..95704241f9 --- /dev/null +++ b/platform/ios/docs/img/studio-workflow/property-values.png diff --git a/platform/ios/docs/img/studio-workflow/stop-functions.png b/platform/ios/docs/img/studio-workflow/stop-functions.png Binary files differnew file mode 100644 index 0000000000..4affecf005 --- /dev/null +++ b/platform/ios/docs/img/studio-workflow/stop-functions.png diff --git a/platform/ios/docs/pod-README.md b/platform/ios/docs/pod-README.md index 78647b2603..b1a763bcf1 100644 --- a/platform/ios/docs/pod-README.md +++ b/platform/ios/docs/pod-README.md @@ -4,7 +4,7 @@ The Mapbox iOS SDK is an open-source framework for embedding interactive map vie For more information, check out the [Mapbox iOS SDK homepage](https://www.mapbox.com/ios-sdk/) and the [full changelog](https://github.com/mapbox/mapbox-gl-native/blob/master/platform/ios/CHANGELOG.md) online. -[]() +[]() ## Installation |
