<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Steven Rockarts</title>
    <description>The latest articles on DEV Community by Steven Rockarts (@rockarts).</description>
    <link>https://dev.to/rockarts</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F88343%2Faf97ebe3-509f-4b07-9ca1-d6ceac5d9963.jpeg</url>
      <title>DEV Community: Steven Rockarts</title>
      <link>https://dev.to/rockarts</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/rockarts"/>
    <language>en</language>
    <item>
      <title>Running Android Emulators on an M1 Mac</title>
      <dc:creator>Steven Rockarts</dc:creator>
      <pubDate>Wed, 07 Jul 2021 23:43:49 +0000</pubDate>
      <link>https://dev.to/rockarts/running-android-emulators-on-an-m1-mac-3h37</link>
      <guid>https://dev.to/rockarts/running-android-emulators-on-an-m1-mac-3h37</guid>
      <description>&lt;p&gt;To run an Android Emulator on an M1 Mac. Complete the following steps: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Make sure you have the Android S preview installed using the SDK manager. Select the show package details checkbox and select Google APIs ARM 64 v8 system image and click OK&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FInOKuRr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9k0wtrbywvfb8koy6du4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FInOKuRr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9k0wtrbywvfb8koy6du4.png" alt="Screen Shot 2021-07-07 at 1.47.36 PM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create a new device in the AVD Manager and select the other images tab. Your ARM images should now be listed.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--uErTBe8g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dv8qt5c78h61l9tdivg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--uErTBe8g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dv8qt5c78h61l9tdivg.png" alt="Screen Shot 2021-07-07 at 1.48.28 PM"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>android</category>
      <category>mac</category>
    </item>
    <item>
      <title>We Made a Free Open Source COVID Assesment App</title>
      <dc:creator>Steven Rockarts</dc:creator>
      <pubDate>Thu, 02 Apr 2020 00:50:29 +0000</pubDate>
      <link>https://dev.to/rockarts/we-made-a-free-open-source-covid-assesment-app-191b</link>
      <guid>https://dev.to/rockarts/we-made-a-free-open-source-covid-assesment-app-191b</guid>
      <description>&lt;p&gt;Today we released a tool designed to allow health authorities to quickly create and distribute COVID-19 (Coronavirus) assessments for their jurisdictions. The underlying technology uses &lt;strong&gt;React&lt;/strong&gt;, &lt;strong&gt;React Native&lt;/strong&gt; and &lt;strong&gt;Typescript&lt;/strong&gt;. Our goal is to allow various health authorities to white label the tool for their jurisdiction.&lt;/p&gt;

&lt;p&gt;Please let me know if you have any questions about the code or need help getting started. Let me know what you build with it!&lt;/p&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qF2jUiUG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/github-logo-6a5bca60a4ebf959a6df7f08217acd07ac2bc285164fae041eacb8a148b1bab9.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/gopunchcard"&gt;
        gopunchcard
      &lt;/a&gt; / &lt;a href="https://github.com/gopunchcard/CovidAssessment"&gt;
        CovidAssessment
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;h2&gt;
What is the COVID-19 Assessment Framework&lt;/h2&gt;
&lt;p&gt;The COVID Assessment Framework provides a web site, Android app, and iOS app to do simple COVID-19 (Novel Coronavirus) pre-screening assessments. The screening is driven by a simple JSON document which allows fast updates and keeps all the applications in sync.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://covidassessmentapi.punchcard.dev/" rel="nofollow"&gt;See it in action&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
Why?&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;You cannot fight a fire blindfolded. And we cannot stop this pandemic if we don't know who is infected," Dr. Tedros Adhanom Ghebreyesus, the WHO's director-general&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;Key word is test, test, test. But that does not mean “mass testing” because it would be scientifically and logistically useless – WHO deputy director Raniero Guerra explained&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;
Who is this for&lt;/h2&gt;
&lt;p&gt;The tool is designed to allow health authorities to quickly create and distribute COVID-19 (Coronavirus) assessments for their jurisdictions.&lt;/p&gt;
&lt;h2&gt;
Features&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Simple yes or no quiz engine to provide a recommendation for COVID-19 (Coronavirus) testing&lt;/li&gt;
&lt;li&gt;Optionally submit COVID-19 (Coronavirus) assessment results…&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/gopunchcard/CovidAssessment"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


</description>
      <category>ios</category>
      <category>typescript</category>
      <category>reactnative</category>
      <category>react</category>
    </item>
    <item>
      <title>View App Entitlements </title>
      <dc:creator>Steven Rockarts</dc:creator>
      <pubDate>Thu, 26 Mar 2020 22:54:25 +0000</pubDate>
      <link>https://dev.to/rockarts/view-app-entitlements-3dfl</link>
      <guid>https://dev.to/rockarts/view-app-entitlements-3dfl</guid>
      <description>&lt;p&gt;I was given this great tip today from Apple. If you want to view what entitlements the App Store is expecting from your App. You can download your provisioning profile from the developer.apple.com and use the following command from terminal to see what it expects. &lt;/p&gt;

&lt;p&gt;security cms -D -i ./YourProvisioningProfile.mobileprovision&lt;/p&gt;

</description>
      <category>ios</category>
    </item>
    <item>
      <title>Ditch Console Log </title>
      <dc:creator>Steven Rockarts</dc:creator>
      <pubDate>Wed, 24 Jul 2019 20:15:50 +0000</pubDate>
      <link>https://dev.to/rockarts/ditch-console-log-13kg</link>
      <guid>https://dev.to/rockarts/ditch-console-log-13kg</guid>
      <description>&lt;p&gt;People love using console.log to quickly debug values but starting with Chrome 73 there is a faster way. You can view the source of a file and then instead of setting a breakpoint you can right click in the same spot and choose Add Logpoint. When the logpoint is hit, the output will be displayed in the console window. You can also add logpoints to production code. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2Fimages%2F2019%2F01%2Fadd-logpoint.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2Fimages%2F2019%2F01%2Fadd-logpoint.png" alt="Add logpoint"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2Fimages%2F2019%2F01%2Flogpoint-expression.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2Fimages%2F2019%2F01%2Flogpoint-expression.png" alt="Add logpoint expression"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2Fimages%2F2019%2F01%2Flogpoint-result.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2Fimages%2F2019%2F01%2Flogpoint-result.png" alt="Logpoint console"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you use Firefox you can also add log points by right clicking and selecting Add Log&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>typescript</category>
      <category>react</category>
      <category>chrome</category>
    </item>
    <item>
      <title>Take Home Assignments and the Interview Process</title>
      <dc:creator>Steven Rockarts</dc:creator>
      <pubDate>Tue, 05 Mar 2019 22:54:08 +0000</pubDate>
      <link>https://dev.to/rockarts/take-home-assignments-and-the-interview-process-4jhl</link>
      <guid>https://dev.to/rockarts/take-home-assignments-and-the-interview-process-4jhl</guid>
      <description>&lt;p&gt;Last week I went for a job interview at a company in the city. The interview itself went well I thought. We talked about my past experience, I gave my opinion on various trends in the mobile space and then I completed a coding problem in the interview and was able to talk through it with the interviewers. I was able to make everyone laugh a couple times and spoke with confidence, the public speaking courses I've been taking to improve myself seemed to have been paying off!&lt;/p&gt;

&lt;p&gt;At the end of the interview we all shook hands and then I was presented with a take home assignment. Take home assignments seem to be becoming a trend more and more these days. I like the challenge of getting them and having something to work on but on the other hand, I feel these assignments are becoming problematic in our industry. Here are some things to think about as both an interviewee and a potential employer if you are going down this path.&lt;/p&gt;

&lt;h1&gt;
  
  
  &lt;strong&gt;As the Interviewee&lt;/strong&gt;
&lt;/h1&gt;

&lt;h2&gt;
  
  
  At the time you are given the assignment, try to evaluate whether it is going to be worth your time.
&lt;/h2&gt;

&lt;p&gt;The first thing that jumped out at me was how large this assignment seemed to be. It asked for a backend, API and mobile frontend all unit tested. Holy moly! On showing the requirements to one of my friends, his first impression was that it was a lot of work. My first thought was to not do it, on the other hand, there aren't a lot of mobile developers in the city let alone a mobile developer that could pull this off. Part of me wanted to prove to them that I was a rockstar!&lt;/p&gt;

&lt;h2&gt;
  
  
  Realize that you own the copyright to the code.
&lt;/h2&gt;

&lt;p&gt;I'm no lawyer but if there wasn't an NDA signed and they aren't paying you to write the assignment, then you own the code. If it is blatantly obvious that the code is directly related to their problem domain, they may have to compensate you for using it! This developer owns this code and is entitled to potential royalties! &lt;a href="https://softwareengineering.stackexchange.com/questions/98619/submit-code-during-interview"&gt;https://softwareengineering.stackexchange.com/questions/98619/submit-code-during-interview&lt;/a&gt; &lt;/p&gt;

&lt;h2&gt;
  
  
  Ask for feedback
&lt;/h2&gt;

&lt;p&gt;If they don't hire you, ask for feedback on what was wrong with your code and use it as a learning experience. This will only make you stronger. They owe it to you.&lt;/p&gt;

&lt;h2&gt;
  
  
  Open source it after!
&lt;/h2&gt;

&lt;p&gt;If you don't get the job and haven't signed an agreement, open source your work somewhere and showcase it in your portfolio. This will help you with future job searches. I had a bad experience in the past where I went through two phone interviews, solved the first take home assignment (making tests pass of the Game of Life) and then wrote the frontend in Ruby on Rails. The only feedback I got for not being hired was "there is a bug in your code". This was 5 years ago and the code still lives on somewhere on my github profile. My project used to come up when you would search for the employer. If you spend your own time working on something save it somewhere so you can use it in the future.&lt;/p&gt;

&lt;h1&gt;
  
  
  &lt;strong&gt;As the Employer&lt;/strong&gt;
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Be Respectful of the Candidate's Time
&lt;/h2&gt;

&lt;p&gt;Be realistic in what you think someone can achieve in their spare time. Don't make the take home assignment large. If someone is currently employed, be aware that you are asking them to potentially give up time with their family, exercise or just their downtime for you. We just got a new puppy this past weekend and it was hard for me to choose to write code over spending time with him. Get one of your current employees to do the assignment, it'll give you an idea of how long you can expect it to take and your current employee will get the chance to learn something new!&lt;/p&gt;

&lt;h2&gt;
  
  
  Pay the Candidate and Get them to Sign an Agreement
&lt;/h2&gt;

&lt;p&gt;You could potentially give them an assignment that has nothing to do with your problem space but why risk it? You may be in a world of hurt if the candidate sends along their code with a GPL license. Pay the candidate for their time and keep the code. You'll have a happy candidate and potentially benefit even if they aren't the right fit.  &lt;/p&gt;

&lt;h2&gt;
  
  
  Be cognizant of the fact the take home assignment might not make you a desirable place to work anymore.
&lt;/h2&gt;

&lt;p&gt;In my case, I had a great interview experience and the people all seemed nice. I'm a little wary of the company and potential internal timelines because I was given such a big assignment and given a week to do it. Try to put yourself in the candidate's shoes and reflect on if you are giving the wrong impression. Most developer's tend to look at companies in an unfavourable light after they've been given a take home assignment. &lt;/p&gt;

&lt;h2&gt;
  
  
  Realize People Aren't Perfect
&lt;/h2&gt;

&lt;p&gt;Is there a bug in the code that was submitted by the candidate? Ask yourself whether or not you as the employer could live with it and turn it into a teachable moment. The best potential employees in this industry are going to be the ones that crave learning. &lt;/p&gt;

&lt;h2&gt;
  
  
  Don't Give Take Home Assignments
&lt;/h2&gt;

&lt;p&gt;To be honest, I think it makes you look bad as an employer. There aren't many other industries that make employees do take home assignments. In fact, I can't think of any other industries that make potential employees work for free in their spare time before offering them a job. If you don't really trust people after an interview, re-evaluate your interview process or hire on people after bringing them on as a freelancer. &lt;/p&gt;

&lt;h1&gt;
  
  
  Parting Thoughts
&lt;/h1&gt;

&lt;p&gt;My experience with this take home assignment was mixed. I had a lot of fun solving the challenges that were given to me even though it stressed me out at times. I built an iOS app that has a backend API with updates reflected in realtime, shows remote notifications and works offline all in a weekend! &lt;/p&gt;

&lt;p&gt;There are still many personal takeaways for me if I don't get offered a position. At least I got to learn how to use Firebase's realtime database, write cloud functions, and use Google Cloud Messaging. I got some experience with a Swift charting library. I got this blog post for dev.to out of my experience (potentially more on how to build this project). I will also be presenting this blog post as a presentation tonight as part of my public speaking course!&lt;/p&gt;

&lt;p&gt;Once I submit the project I figure I'll have a lot of leverage in the negotiation process. I believe that there will be very few people in the city that can pull off a project in the timeline I was given. On the other hand I'm torn over whether or not I want to work at this company. If I don't get the job and you're looking for a mobile developer, let me know!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Let me know what you think in the comments! Do you have any tips for employers or job searchers regarding take home assignments that I might've missed?&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>interview</category>
    </item>
    <item>
      <title>Quick XCode Editing Tip</title>
      <dc:creator>Steven Rockarts</dc:creator>
      <pubDate>Tue, 23 Oct 2018 21:44:54 +0000</pubDate>
      <link>https://dev.to/rockarts/quick-xcode-editing-tip-5fb9</link>
      <guid>https://dev.to/rockarts/quick-xcode-editing-tip-5fb9</guid>
      <description>&lt;p&gt;One of the biggest issues people have with XCode is that storyboards can take long to load over time (there are ways to fix it but that's for another day). When you switch back and forth between storyboards and controllers the loading time can get quite painful. &lt;/p&gt;

&lt;p&gt;Some people open the assistant editor and edit the corresponding file in the tiny little window below. It can get annoying trying to constantly resize it.&lt;/p&gt;

&lt;p&gt;It gets even worse when the debug window opens up. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--15HEXgin--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/5tscddcxnpq03n8ln0na.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--15HEXgin--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/5tscddcxnpq03n8ln0na.png" alt="No space"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here is a tip that I accidentally stumbled upon the other day. I was trying to open a new tab in Chrome using the shortcut Command+T and didn't realize I was still in XCode. I didn't know that XCode supports tabbed windows! &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iEhShNHr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/6zrgasoy3rcby6c2zy79.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iEhShNHr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/6zrgasoy3rcby6c2zy79.png" alt="Command Tab View"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can open your storyboard once and close all the windows for more space and then you don't have to worry about opening it again and waiting forever! Look at all that space you gain!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--z_QP17cr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/9ygf1qw41uqj2vx8znub.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--z_QP17cr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/9ygf1qw41uqj2vx8znub.png" alt="So much real estate"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>xcode</category>
      <category>ios</category>
      <category>swift</category>
    </item>
    <item>
      <title>Generative Art Using Swift</title>
      <dc:creator>Steven Rockarts</dc:creator>
      <pubDate>Fri, 05 Oct 2018 04:25:27 +0000</pubDate>
      <link>https://dev.to/rockarts/generative-art-using-swift-4aa5</link>
      <guid>https://dev.to/rockarts/generative-art-using-swift-4aa5</guid>
      <description>&lt;p&gt;A couple weeks ago a post by Ali Spittel came across my feed that showed how you can make generative art using Javascript: &lt;/p&gt;
&lt;div class="ltag__link"&gt;
  &lt;a href="/aspittel" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F38627%2F77a2a5e7-603e-41b4-afcc-f7aff468ae2f.jpg" alt="aspittel"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="/aspittel/intro-to-generative-art-2hi7" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Intro to Generative Art&lt;/h2&gt;
      &lt;h3&gt;Ali Spittel ・ Sep 25 '18&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#art&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#frontend&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#showdev&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


&lt;p&gt;The post had some good inspirational timing and I set out to convert the Javascript examples to Swift and display them on my iPhone. For this post I'm going to convert the &lt;a href="https://generativeartistry.com/tutorials/tiled-lines/" rel="noopener noreferrer"&gt;tiled lines Javascript&lt;/a&gt;  from the generative artistry tutorials to Swift. We'll make it a bit more Swifty!&lt;/p&gt;

&lt;p&gt;To start off: Create a single view app in XCode and follow along!&lt;/p&gt;

&lt;h2&gt;
  
  
  Drawing in Swift
&lt;/h2&gt;

&lt;p&gt;In order to draw in Swift we will need a custom UIView that we can add to our ViewController. Let's create one named DrawView, it will inherit from UIView. We will add two init methods, override the draw and add a method stub to draw a line like so:&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Don't forget to add your custom view to your ViewController in the ViewDidLoad!&lt;/p&gt;

&lt;p&gt;Now lets draw a line from the top corner to the bottom corner. To get the top left corner we can use the bounds of the frame: bounds.origin.x and bounds.origin.y this gives use the coordinates of (0,0). To get the bottom corner we can get the width and height of the device by using bounds.width and bounds.height.&lt;/p&gt;

&lt;p&gt;To draw the line we will use the UIBezierPath class to create a path and tell it to start at the top left and draw a path to the bottom right, we will also set the colour to red and call the stroke to draw the line on the path and fill to fill the line with the current drawing properties (the red in this case):&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Here is how it looks:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fi7ez7pctd2fgltt8tnom.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fi7ez7pctd2fgltt8tnom.png" alt="Diagonal Line"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Converting to things to Swift
&lt;/h2&gt;

&lt;p&gt;The next step in the Javascript tutorial is to use this code to come up with a random boolean which will draw a line from either the top left or the top right diagonally.&lt;/p&gt;

&lt;p&gt;var leftToRight = Math.random() &amp;gt;= 0.5;&lt;/p&gt;

&lt;p&gt;Luckily for us Swift developers we can just make use of the Bool.Random function to return us a random boolean value.&lt;/p&gt;

&lt;p&gt;let leftToRight:Bool = Bool.random()&lt;/p&gt;

&lt;p&gt;Lets change our drawLine method to randomly draw a diagonal line&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;After a couple tries reloading the simulator I finally got a right to left line:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F5pxxt4e4zljgr0mdw4n7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F5pxxt4e4zljgr0mdw4n7.png" alt="Random Diagonal Line"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Converting More Javascript to Swift
&lt;/h2&gt;

&lt;p&gt;Now let's draw the rest of the owl...er the random tiles. The Javascript code introduces a step variable and steps through the x and y values by the step variable. &lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;The Swift way to do this is to use the stride function. In the code below the start is the x value, through to the width of the screen by the step value.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;This is what we end up with! The best part is it will work on any size device!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fyod9mdgs3q20g7czig66.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fyod9mdgs3q20g7czig66.jpg" alt="End Result"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


</description>
      <category>swift</category>
      <category>art</category>
    </item>
    <item>
      <title>Mapbox Explore Outdoors Final Challenge</title>
      <dc:creator>Steven Rockarts</dc:creator>
      <pubDate>Mon, 03 Sep 2018 05:47:34 +0000</pubDate>
      <link>https://dev.to/rockarts/mapbox-explore-outdoors-final-challenge-2fjl</link>
      <guid>https://dev.to/rockarts/mapbox-explore-outdoors-final-challenge-2fjl</guid>
      <description>&lt;p&gt;As part of the &lt;a href="https://www.mapbox.com/explore-outdoors/" rel="noopener noreferrer"&gt;explore outdoors challenge&lt;/a&gt; from &lt;a href="http://mapbox.com" rel="noopener noreferrer"&gt;Mapbox&lt;/a&gt;, our final task was to create a blog post detailing our journey through the challenges. I've created 3 different blog posts (even some screencasts!). Please be patient, GIFs may take awhile to load. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;An overview of any Mapbox tools and third-party tools you used (if applicable).&lt;/strong&gt;&lt;br&gt;
I only used Mapbox! No other 3rd party software.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A link to your Studio Map with your hometown POIs&lt;/strong&gt; &lt;br&gt;
Here is the map I created in Mapbox Studio: &lt;a href="https://api.mapbox.com/styles/v1/stevenrockarts/cjkn6ey1f4ihs2sowkr1bxh00.html?fresh=true&amp;amp;title=true&amp;amp;access_token=pk.9ja2FydHMiLCJhIjoiY2l3ZjYyMDY4MDR2MjJ0bm1tZHlnZGk4OSJ9.l0jd-Q5Mx4sUDIuUudkldQ#8.9/52.836350/-118.036451/0" rel="noopener noreferrer"&gt;https://api.mapbox.com/styles/v1/stevenrockarts/cjkn6ey1f4ihs2sowkr1bxh00.html?fresh=true&amp;amp;title=true&amp;amp;access_token=pk.9ja2FydHMiLCJhIjoiY2l3ZjYyMDY4MDR2MjJ0bm1tZHlnZGk4OSJ9.l0jd-Q5Mx4sUDIuUudkldQ#8.9/52.836350/-118.036451/0&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here is the blog post I wrote explaining how to build it! &lt;br&gt;
&lt;a href="https://dev.to/rockarts/building-a-custom-map-using-mapbox-studio-to-add-to-your-apps-3oi6"&gt;https://dev.to/rockarts/building-a-custom-map-using-mapbox-studio-to-add-to-your-apps-3oi6&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;two screenshots (or a screengrab/gif) of your navigation app + a code snippet&lt;/strong&gt;&lt;br&gt;
Here is the app I created. The blog post I wrote contains all the code to create it and explains it every step of the way. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/rockarts/using-your-custom-mapbox-map-and-adding-navigation-using-swift-1dje"&gt;https://dev.to/rockarts/using-your-custom-mapbox-map-and-adding-navigation-using-swift-1dje&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fmdrsvv0ymc9da5pa5fji.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fmdrsvv0ymc9da5pa5fji.gif" alt="Navigation"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;two screenshots (or a screengrab/gif) of your 3D visualization + a code snippet&lt;/strong&gt;&lt;br&gt;
Here is the app I created. The blog post I wrote contains all the code to create it and explains it every step of the way. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/rockarts/build-a-3d-map-using-mapbox-and-scenekit-515p"&gt;https://dev.to/rockarts/build-a-3d-map-using-mapbox-and-scenekit-515p&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fu3ayd36dc813zlhhdjfo.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fu3ayd36dc813zlhhdjfo.gif" alt="3D Map"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>mapbox</category>
      <category>swift</category>
    </item>
    <item>
      <title>Build a 3D Map Using Mapbox and Scenekit</title>
      <dc:creator>Steven Rockarts</dc:creator>
      <pubDate>Mon, 03 Sep 2018 05:32:34 +0000</pubDate>
      <link>https://dev.to/rockarts/build-a-3d-map-using-mapbox-and-scenekit-515p</link>
      <guid>https://dev.to/rockarts/build-a-3d-map-using-mapbox-and-scenekit-515p</guid>
      <description>&lt;p&gt;In the final challenge for the Mapbox Explore Outdoors 2018 challenge we were asked to create a 3D map of our hometown POIs. For this challenge, I created a 3D visualization of the &lt;a href="https://en.wikipedia.org/wiki/Valley_of_the_Ten_Peaks"&gt;Valley of the 10 Peaks&lt;/a&gt; in Banff National Park (aka Reddit Lake).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--owzv6_BK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/f0ixk69yoel9unq7jujm.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--owzv6_BK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/f0ixk69yoel9unq7jujm.jpg" alt="By Gorgo - Photo taken by author, Public Domain, https://commons.wikimedia.org/w/index.php?curid=334627"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To get you excited, this is what the final product will look like (gif may take a bit to load)!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Xa9oQVsu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/u3ayd36dc813zlhhdjfo.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Xa9oQVsu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/u3ayd36dc813zlhhdjfo.gif" alt="3D Map"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;First let's create a single view application named ExploreOutdoors. Close XCode, navigate to your project directory and create this podfile.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Open the terminal and run: pod repo update &amp;amp;&amp;amp; pod install&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gf3s_c0---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/09tfx74yjrhgcesb5d3b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gf3s_c0---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/09tfx74yjrhgcesb5d3b.png" alt="3D Map"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now open up XCode and make sure it compiles. &lt;a href="https://www.mapbox.com/install/ios/cocoapods-permission/"&gt;Also, don't forget to add your Mapbox access token to your info.plist&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Alright, once everything is compiling we are ready to get coding. Let's start by creating a SceneView.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Setting up a scene is simple, we need a scene, a view to add that scene to and a camera. A camera is a sceneview node and it uses a SCNVector3. This sounds intimidating but X is your horizontal axis (left and right), Y is your vertical access (up and down) and Z is your depth (forward and backwards). We setup our camera to be staring straight at our map and a couple of steps back (that's where we get the Z: 3). &lt;/p&gt;

&lt;p&gt;We also add some light to our scene. After we've setup our camera and light we add them to the sceneview with scene.rootNode.addChildNode(cameraNode). You should be able to build and run your app now and see absolutely nothing. HOW EXCITING!&lt;/p&gt;

&lt;p&gt;Ok, now that we got that out of the way let's make our scene do something fun that will impress people at parties. I'm going to throw a lot of code at you but don't worry, I'll try my best to explain it!&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Yikes! Let me explain.&lt;/p&gt;

&lt;p&gt;var minLat = 51.20&lt;br&gt;
var minLon = -116.28&lt;br&gt;
var maxLat = 51.32&lt;br&gt;
var maxLon =   -116.12&lt;/p&gt;

&lt;p&gt;This is just the NW and SE corners latitudes and longitudes of the bounds of our 3D map. &lt;/p&gt;

&lt;p&gt;A terrainNode is a special SceneKit node that Mapbox has built which allows us to put a map image onto a 3D Node. We set it up with the bounds of our map using this line : terrainNode = TerrainNode(minLat: minLat, maxLat: maxLat, minLon: minLon, maxLon: maxLon)&lt;/p&gt;

&lt;p&gt;Next we scale it down a bit, this is because if the images are too big they take forever to render on a phone. Then we add what the side, bottom and ground will look like for out terrain using this method: terrainNode.geometry?.materials = defaultMaterials() we've picked some lovely tones of gray and black. Next let's add it to the scene with the familiar scene.rootNode.addChildNode(terrainNode).&lt;/p&gt;

&lt;p&gt;Now comes the magic! We use the Mapbox function fetchTerrainHeights to grab the 3D heights of the terrain. They've done all the hard work for us! The we use the fetchTerrainTexture to grab the mapbox satellite map of our area and place the images onto our terrain. If you build and run the app now you should get a 3D view of the Valley of the 10 Peaks! How neat is that? That's pretty neat.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UW0nMRz2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/g0w2aifi1wzsrva3vchm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UW0nMRz2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/g0w2aifi1wzsrva3vchm.png" alt="10 Peaks Screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ok, one last thing to do. Let's label each peak and add the labels to the 3D map. Add this method to your ViewController:&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;This code builds a dictionary of each peak using the peak name and it's GPS coordinates. We create a marker above the map, set the name to the name of the peak and set the text colour to red. We then set it's scale and height above the terrain so it floats above the map. Don't forget to call this method in the completion block of fetchTerrainHeights&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;That's it! You've made a 3D Map! Let me know if you have any questions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Code
&lt;/h2&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


</description>
      <category>swift</category>
      <category>scenekit</category>
      <category>mapbox</category>
      <category>exploreoutdoors2018</category>
    </item>
    <item>
      <title>Using Your Custom Mapbox Map and Adding Navigation Using Swift</title>
      <dc:creator>Steven Rockarts</dc:creator>
      <pubDate>Mon, 03 Sep 2018 04:10:17 +0000</pubDate>
      <link>https://dev.to/rockarts/using-your-custom-mapbox-map-and-adding-navigation-using-swift-1dje</link>
      <guid>https://dev.to/rockarts/using-your-custom-mapbox-map-and-adding-navigation-using-swift-1dje</guid>
      <description>&lt;p&gt;In the &lt;a href="https://dev.to/rockarts/building-a-custom-map-using-mapbox-studio-to-add-to-your-apps-3oi6"&gt;last post we created a custom map using Mapbox Studio&lt;/a&gt;, in this blog post we will use that custom made map in an iOS app written in Swift and add some Navigation to it.&lt;/p&gt;

&lt;p&gt;If you would prefer to watch a screencast about this instead you can view it below.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/YKjbJqp4Wbc"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;First we need to create a new project in XCode. Go to File-&amp;gt;New-&amp;gt;Project (Single View App) and name your project ExploreOutdoors. Now in the directory you saved the project in we will need to create a PodFile so that we can install the Mapbox and Mapbox Navigation apis. My directory layout looks like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F2z9bnxtp19y48fa3lwr8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F2z9bnxtp19y48fa3lwr8.png" alt="Directory layout"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Create a file named PodFile and add the following code.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Open up a terminal and run pod install to install the Mapbox and Navigation API.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fg0m1h2du3v077riwl6hq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fg0m1h2du3v077riwl6hq.png" alt="Pod install"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Now, make sure to close XCode and open up ExploreOutdoors.xcworkspace and not ExploreOutdoors.xcodeproj make sure you can build and run your app with the Mapbox pods installed.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If everything is working, in ViewController.swift add the following code:&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;If you build and run your app right now it won't work, we need to add some entries to our Info.plist file. Lets add our mapbox key, you can get this by visiting the following URL: &lt;a href="https://www.mapbox.com/install/ios/cocoapods-permission/" rel="noopener noreferrer"&gt;https://www.mapbox.com/install/ios/cocoapods-permission/&lt;/a&gt; they even have a handy animated gif on how to add it.&lt;/p&gt;

&lt;p&gt;Next while you are in the Info.plist we need to add 2 more entries. "Required background modes" and for the value type in audio. Also add in "Privacy - Location When In Use Usage Description" and tell the user that we need access to their location so we can show them on the map. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fjsh4p9hgitbhgewsymmn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fjsh4p9hgitbhgewsymmn.png" alt="Infoplist entries"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now for the cool part! We will add our custom built map from the last blog post. Go to &lt;a href="https://www.mapbox.com/studio/" rel="noopener noreferrer"&gt;https://www.mapbox.com/studio/&lt;/a&gt; and select the share and use button. Select iOS on the side and copy your style URL. Paste it underneath the comment that says  //PASTE YOUR STYLE URL IN THE STRING!&lt;/p&gt;

&lt;p&gt;Now you should be able to launch your app and see your custom maps being displayed! Check out my custom map of rock climbs in Jasper National Park!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F8dcg4wijs1urkp5sg4a3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F8dcg4wijs1urkp5sg4a3.png" alt="rock climbs"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Add Some Navigation
&lt;/h2&gt;

&lt;p&gt;Now let's add navigation to the app. We are going to make it so the user can tap on the screen to add navigation points. For that add these two lines above your viewDidLoad() method:&lt;/p&gt;

&lt;p&gt;var button: UIButton!&lt;br&gt;
var points = &lt;a href=""&gt;CLLocationCoordinate2D&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we will add a gesture recognizer to the map to recognize when the user taps on the map. Add the following code to your ViewController. &lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;You should now be able to add annotations to your app by tapping the screen! &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F9hvl0p2zfc169zavcbe0.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F9hvl0p2zfc169zavcbe0.gif" alt="Adding annotations"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let's explain the code step by step:&lt;/p&gt;

&lt;p&gt;This code sets up a single tap gesture recognizer, binds it to the method handleTap and then adds it to the mapview.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Now this code is really cool, it gets the point on the map where the user tapped, converts it from a point into a GPS coordinate and then creates an annotation and adds it to the map!&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Alright, now once the user has added 2 points to the map we can give them navigation instructions. &lt;/p&gt;

&lt;p&gt;Let's add a button to the screen in our viewDidLoad so that the user can trigger starting the navigation.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;One thing to remember when adding buttons to mapviews, is that if you want them to appear above the map, you need to add them to the map subview after it has been added to the parent view.&lt;/p&gt;

&lt;p&gt;Now let's handle the tap and fetch the Navigation instructions from Mapbox. Add this code to the ViewController.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;This code looks at our points and sets the options to .automobile for directions, then using those waypoints it calculates the best route and presents the NavigationViewController from Mapbox. One last modification we need to do is enable the navigation button if there are more than 2 points on the map by adding a couple lines to our handleMapTap methond&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;You should now be able to navigate in your app! I've posted the finished code at the bottom of this post. Let me know if you have any questions!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F0zggu141ynl3nuwshfkg.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F0zggu141ynl3nuwshfkg.gif" alt="Adding annotations"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Finished Code
&lt;/h2&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


</description>
      <category>swift</category>
      <category>ios</category>
      <category>mapbox</category>
      <category>exploreoutdoors2018</category>
    </item>
    <item>
      <title>Building a Custom Map Using Mapbox Studio to Add to Your Apps</title>
      <dc:creator>Steven Rockarts</dc:creator>
      <pubDate>Sun, 02 Sep 2018 17:01:26 +0000</pubDate>
      <link>https://dev.to/rockarts/building-a-custom-map-using-mapbox-studio-to-add-to-your-apps-3oi6</link>
      <guid>https://dev.to/rockarts/building-a-custom-map-using-mapbox-studio-to-add-to-your-apps-3oi6</guid>
      <description>&lt;p&gt;I've been competing in the Mapbox Explore Outdoors Challenges the past few weeks. I enjoy their challenges because they often get me to branch out a bit and create some apps I wouldn't normally make. &lt;/p&gt;

&lt;p&gt;The first round was building a map of your favourite hometown spots. Since it the challenge was titled "explore outdoors" I decided to build a custom map of my favourite rock climbing spots in Jasper National Park. &lt;/p&gt;

&lt;p&gt;If you'd prefer to watch a screencast over reading this how-to you can watch it below&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/6FeZoqxdVSE"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Step 1 - Create a Dataset: Go to http:://mapbox.com/studio and login. The studio can be a little intimidating but you should be able to go to Datasets in the upper right corner. You can create one from scratch or use a GeoJSON file. To learn the ins and outs and creating a dataset we're going to do both. Click the new dataset button and click upload to upload this GeoJson file (click view raw to grab the actual data).&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;All of the GPS points are now imported into our dataset. To manually add one you can click the draw a point button and click on the map. Make sure the add a property for Name and the name of the rock climb.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffotemmbjg8cktdawrs1x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffotemmbjg8cktdawrs1x.png" alt="Draw Point" width="590" height="558"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Step 2 - Add the Dataset to a Style: Now that we are done with our dataset we can add it to a style. In mapbox studio go to Styles and select the "pick a template or upload a style" button. You should see this screen and we will select the outdoors style template.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgd78mdt5wpxu228mhhtf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgd78mdt5wpxu228mhhtf.png" alt="Outdoors Template" width="800" height="446"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the style editor, click the Add Layer button and then find the rock climb datasource we just created and select it. Don't forget to click the Go to data button. You should see all the points in your new style. You can play around with colours using the side bar.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3qro4xu3doilnibpqi47.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3qro4xu3doilnibpqi47.png" alt="Add Layer" width="565" height="563"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Click the publish button in the top right and now our map is ready to use in our apps! Click the Share &amp;amp; Use button and you will get links to Javascript, iOS, Android, Unity and Third Party so you can use your custom map wherever you want!!!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqme39tmmo0azupbbvh1a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqme39tmmo0azupbbvh1a.png" alt="Share and Use" width="" height=""&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>mapbox</category>
      <category>ios</category>
      <category>android</category>
      <category>howto</category>
    </item>
  </channel>
</rss>
