Visual Studio Code with Xamarin on a Mac

Microsoft just announced a new cross-platform editor that has many of the features of Visual Studio called Visual Studio Code. I downloaded it on my Mac to try out with a Xamarin.iOS project and see if it works. I was pleased discover it works out of the box (as far as I can tell on a first look).

Visual Studio Code works against files and folders. When you open a folder where a Xamarin.iOS project lives, all the files load fine and features such as links to references and even intellisense on iOS classes work great.

Here’s a class that implements a UIView subclass for example showing intellisense¬†on CALayer:

vscode

You can download Visual Studio Code at: https://code.visualstudio.com/Download

Use Nokia X HERE Maps with Xamarin.Android

Earlier this week Nokia announced their new line of Nokia X Android phones. C# developers using Xamarin can target this platform via the Nokia components in the Xamarin Component Store.

Let’s take a look at using the Nokia HERE Maps API in a Xamarin.Android applcation.

Nokia HERE Maps have a wealth of features ranging from 3D landmarks, to street-level imagery and venue maps.

here_map

See the HERE Maps section of the Nokia developer site for more information on the entire feature set.

The first thing you need to do is set up the Nokia X Platform, which can be done via the Android SDK Manager. The following doc on the Nokia developer site explains how to do this:

http://developer.nokia.com/resources/library/nokia-x/getting-started/environment-setup.html

Note, when you create a Nokia X emulator, be sure to set the target to Nokia X services (Nokia) – API Level 16 as shown below:

nokiax_emulator_setup

Once you have your environment set up, create a new Android project that targets API level 16. To use Nokia HERE Maps from Xamarin, simply add the Xamarin component:

http://components.xamarin.com/view/NokiaHERE

The component brings everything you need directly into the project in either Visual Studio or Xamarin Studio. The sample projects included with the component show you how to get started.

Adding a Map

Basically, to include a map:

  1. Add your AppID and AppToken
  2. Set the required permissions
  3. Add a MapFragment
  4. Initialize the MapFragment
  5. Setup the map after the fragment has been initialized

AppID and AppToken

The AppID and AppToken can be set using attributes:

[assembly: MetaData("com.here.android.maps.appid", Value = "YourAppID")]
[assembly: MetaData("com.here.android.maps.apptoken", Value = "YourAppToken")]

Also, enable hardware-accelerated rendering:

[assembly: Application(HardwareAccelerated = true)]

Required Permissions

Next, the following required permissions need to be set in the Android manifest:

  • AccessFineLocation
  • AccessNetworkState
  • AccessWifiState
  • ChangeNetworkState
  • Internet
  • WriteExternalStorage

MapFragment

The Sample.HERE application included with the component adds the MapFragment in code via the FragmentManager:

fragment = new MapFragment ();
FragmentManager.BeginTransaction ()
  .Replace (Resource.Id.fragmentcontainer, fragment).Commit();

Additionally, you can add the MapFragment in the axml file, which is what I’ve done in this example:

Then in the Activity’s OnCreate method, retrieve the MapFragment and initialize it as follows:

mapFragment = FragmentManager.FindFragmentById (Resource.Id.mapfragment);
mapFragment.Init (this, this);

Accessing the Map Object

To get a reference to the map itself after the fragment initialization has completed, implement the IFragmentInitListener from the Nokia.Here.Mapping namespace, where you can access the map via the MapFragment’s Map property. Then you can call methods on the map such as SetCenter and SetZoomLevel:

public void OnFragmentInitializationCompleted (InitError error)
{
  if (error == InitError.None) {
    map = mapFragment.Map;

    double lat = 30.2652233534254;
    double lon = -97.73815460962083;

    map.SetCenter (MapFactory.CreateGeoCoordinate (lat, lon, 0.0), MapAnimation.None);
    map.SetZoomLevel (18.0, MapAnimation.None);
  }
}

This displays a map in the application as shown below:

nokiax_map

There are variety of map schemes that can be easily set via the MapScheme property. For example, setting map.MapScheme = MapScheme.SatelliteDay will show a map with daytime satellite imagery:

nokiax_satellite

See Nokia Map Schemes documentation for the other schemes that are available.

As you can see, it’s pretty easy to get started. There are wealth of additional feature as well. For example, you can add a polygon to a map using the MapFactory class to create an IMapPolygon:

var geoPolygon = MapFactory.CreateGeoPolygon (new JavaList {
  MapFactory.CreateGeoCoordinate (30.2648461170005, -97.7381627734755),
  MapFactory.CreateGeoCoordinate (30.2648355402574, -97.7381750192576),
  MapFactory.CreateGeoCoordinate (30.2647791309417, -97.7379872505988),
  MapFactory.CreateGeoCoordinate (30.2654525150319, -97.7377341711021),
  MapFactory.CreateGeoCoordinate (30.2654807195004, -97.7377994819399),
  MapFactory.CreateGeoCoordinate (30.2655089239607, -97.7377994819399),
  MapFactory.CreateGeoCoordinate (30.2656428950368, -97.738346460207),
  MapFactory.CreateGeoCoordinate (30.2650364981811, -97.7385709662122),
  MapFactory.CreateGeoCoordinate (30.2650470749025, -97.7386199493406)
});

MapPolygon’s are one of many MapObjects. These are added to the map by calling AddMapObject:

map.AddMapObject (mapPolyline);

With this, we get an overlay of the specified coordinates:

nokiax_mappolygon

You can download the sample code shown here from my github repo.

MonkeySpace 2013

Last week I was lucky enough to attend the MonkeySpace conference, where I got to present 3 different talks. This is one of my favorite conferences as the attendees tend to work on some very interesing projects and have an affinity for sharing information.

The first talk I gave was about collection views. This is a very interesting technology that allows you to easily create grid-like layouts of items in iOS. Additionally, they are easy enough to extend to create any sort of layout you can imagine.

Here’s one of the examples I demonstrated during my talk. It creates a layout over a baseball field where you can toggle between the home and away teams:

BaseballLayout

The code is available here:

https://github.com/mikebluestein/CVLayoutsDemo

Up next, I presented the latest version of the excellent Xamarin.Mobile API, showing the new changes to the MediaPicker among other things. What’s particularly exciting about this is the API was open-sourced just before my talk, so I was able to demonstrate from the latest source.

Finally, for my third talk, I showed how to make a small game using the new Cocos2D-XNA API, a C# port of the widely used Cocos2D iOS API. What’s interesting about Cocos2D-XNA is that it builds on MonoGame, so it allows you to reach many platforms with the same code base.

http://www.slideshare.net/mikebluestein1/cocos2-d-xna

More information, along with sample code can be found in the article I wrote on the Xamarin site:

http://docs.xamarin.com/guides/cross-platform/cocos2d_xna/cocos2dxna_tutorial

Beyond my talks, I really enjoyed meeting so many new people and hearing about all the exciting work everyone is doing. I’m looking forward to MonkeySpace again next year!