Map: Runtime Features

INTRO

It has always been possible, since the introduction of the map component, to create runtime features, but I believe I am the first to write a guide about how to create them, and which features you can create.

Why have runtime features ? It saves the developer having to create features at design time, and gives more freedom to developers and users to generate features as and when they need them.

There are only three map features in geojson available to use with the map component, namely: linestring, marker and polygon. However it is also possible to create runtime circles and rectangles (but these are from polygons, and are not the same as the circle and rectangle components in Map).

The marker is the only feature that has  blocks for creating runtime markers, but for consistency of approach, and given their use is covered elsewhere, I will stick to creating markers with FeatureFromDescription 

Features can be created individually using the "FeatureFromDescription" block, I will focus on that here. Of course one can also use FeatureCollections to create a single feature or multiple features at runtime, you would need to provide a url to a geojson file to do this.

Note: 

• my map is centred on the City of Westminster, London, United Kingdom.

• an aia project, as seen in the video, is available for download at the end of this guide

• in the aia/blocks, you will see I create a list of lists in order to be able to identify each created runtime marker, giving each a name and relating it to the component

• in the aia, in order to delete the last feature in the display, I found I needed to "jiggle" the map, hence the use of a "zoom shuffle"

VIDEO

FeatureFromDescription

This block requires you to provide a list of lists (of lists) in order to generate a feature. At time of writing, it is not possible to use a dictionary with the FeatureFromDescription block, but this may be forthcoming at some point in the future.

The method I will show you will create very basic features, with its coordinates set to the Equator and Prime Meridian [0,0], I therefore hope that your intended map work will not be centred on a empty piece of ocean in the Atlantic, off the coast of West Africa! Once the basic feature is created, it can then be augmented using Anycomponent blocks and procedures. It will then also be possible to change the settings of the feature using blocks, and to delete the feature, if no longer needed.

I use the anyComponent blocks to set the points/coordinates for the feature, because this is far less complicated than attempting to do so in FeaturefromDescription, which will require the points/coordinates to be in the correct order (northings/eastings etc.) and to set the longitude first and the latitude second!

Circles and Rectangles

At design time, there are two special feature components for creating circles and rectangles. (Circle is based upon a marker, Rectangle is based upon a polygon) At time of writing, it is not possible to recreate these two components like for like at runtime. To compensate for this, I will show methods for creating runtime circles, rectangles and squares using the Haversine formula, which will generate polygon points based on a provided centre point (coordinates) and a specified radius. 

BLOCKS

Enough talk, let us get on with it!

Linestring:

After creating the basic linestring, anyComponent blocks are used to set to location, colour and width of the linestring. You should see that you can create a multi-point linestring, not just a single line. In this case it shows a path along Buckingham Palace Road, then along The Mall to Admiralty Arch.

Marker:

Once the basic runtime marker is created, I use an anyComponent block to set the latitude and longitude for the marker. Here, the marker is set to Buckingham Palace.

Polygon:

Once the basic polygon marker is created (note the need for an extra "make a list" block for the coordinates), the anyComponent blocks are used to set the points for the polygon. The polygon covers The Palace of Westminster (Houses of Parliament). It is worth noting that when setting points with the anyComponent blocks, you do not need a closing set of points that are the same as the first set of points, AI2 takes care of that for you.

Now we move on to the features that require the Haversine formula. This procedure allows us to create a pre-determined set of points for a polygon based upon a centre set of coordinates. For a more runtime/user-centric approach, the user can set the centre point using the Map's "TapAtPoint", "DoubleTapAtPoint" or "LongClickAtPoint" events.

Circle:

We use a polygon for the basic feature, then generate a circle of points, having defined a radius in metres, using the haversine formula. This circle is centred on Holborn, perhaps best known as the location for Fagin's den of pickpockets in Dickens' Oliver Twist.

Rectangle (Landscape):

We use a polygon for the basic feature, then generate the four corner points, having defined a radius in metres, using the haversine formula. The rectangle drawn is of the same ratio (2:1 or 1:2) as the component rectangle. This landscape rectangle covers an area between Marylebone and Mayfair.

Rectangle (Portrait):

We use a polygon for the basic feature, then generate the four corner points, having defined a radius in metres, using the haversine formula. The rectangle drawn is of the same ratio (2:1 or 1:2) as the component rectangle. This portrait rectangle covers an area inside Regents Park, next to London Zoo.

Square (a regular rectangle):

We use a polygon for the basic feature, then generate the four corner points, having defined a radius in metres, using the haversine formula. This "square" rectangle covers an area of the South Bank, between Waterloo and The Borough (my old stomping ground!).

The Haversine formula:

Download Draggable Block

AIA

RunTimeMapFeatures