Updating iOS SDK docs

[tatsvc]

@katydecorah I added css for both a light and a dark iphone frame:

The setup for an image looks like this now:

<div class='pad4 fill-light clearfix'>
  <div class='device device-phone-h contain'>
      <img src="{{site.baseurl}}/images{{page.url | replace:'examples/',''}}.png" />
     <div class='device-details'></div>
   </div>
</div>

You can make a device white by adding the .device-white class:

<div class='pad4 fill-light clearfix'>
  <div class='device device-phone-h device-white contain'>
      <img src="{{site.baseurl}}/images{{page.url | replace:'examples/',''}}.png" />
     <div class='device-details'></div>
   </div>
</div>

If you would need a vertical device you can change .device-phone-h to .device-phone-v

[katydecorah]

@tatsvc awesome! I just added logic so those new classes are applied based on a page's front matter.

For example, by default all examples will be dark and horizontal.

• If you add: device: white to a page's front matter, then you'll get the white frame.
• If you add rotation: vertical to a page's front matter, then you'll get a vertical frame.

Likewise, you can add device: white and rotation: vertical in the front matter to get a white and vertical frame.

[katydecorah]

Just noting ideas for new examples:

• Handling rotation
• Specifying center and zoom level

[tatsvc]

Handling rotation Specifying center and zoom level

Shouldn't this be in the first example? Because this is something you will probably need for every map?

[katydecorah]

@tatsvc that's a good point! Without the rotation and center/zoom level, the example images don't reflect the code. We should make sure these sync up.

[katydecorah]

Tracking progress:

• [x] A simple map view
• [x] new Handling rotation
• [x] Custom style
• [x] Layered styles
• [x] Drawing a Mapbox marker
• [x] Custom image and color on Mapbox marker
• [x] Custom image marker
• [x] Clustering points
• [x] new Clustering points and centering labels
• [x] Custom accessory view in a marker callout
• [x] Drawing a shape
• [x] Drawing a circle
• [x] Drawing a GeoJSON-based line
• [x] new Drawing a GeoJSON-based shape
• [x] Converting points

To do

• [x] Make devices look good on mobile as well

[tatsvc]

Up next:

• [x] @katydecorah checks all comments for typos / adds comments
• [ ] @tatsvc tests all projects to make sure nothing went wrong from copy/pasting to sublime

[tatsvc]

Final check:

• [x] A simple map view
• [x] Handling rotation
• [x] Custom style
• [x] Layered styles
• [x] Drawing a Mapbox marker
• [x] Custom icon and color on Mapbox marker
• [x] Custom image marker
• [x] Clustering points
• [x] Clustering points and centering labels
• [x] Custom accessory view in a marker callout
• [x] Drawing a shape
• [x] Drawing a circle
• [x] Drawing a GeoJSON line
• [x] Drawing a GeoJSON shape
• [x] Converting points

[incanus]

:heart_eyes: :heart_eyes: :heart_eyes: