Draw maps

From Impure Wiki

Drawing Maps in Impure

Drawing a Simple Map Around the Empire State Building

First let's see how we can draw a simple map of a location using the Google API in Impure. For this we will use the GeocoderGoogleMaps api and the GoogleMapVisor

First we need to find the GEO coordinates of the center of our map. For example, let's say that we want to draw a map around the Empire State Building in New York. We pass this address as a String to the GeocoderGoogleMaps. In order to check the output we will use a TableVisualizator (Note: we set the optional parameter "column's width" of the TableVisualizator to 300 to see the entire string of the columns).

Now we need to use the GoogleMapVisor to draw the map. As in put, we need to pass the first cell of the Table returned by GeocoderGoogleMaps; we do this using a getElementFromTable (with input 0,0). We use a zoom level of 16 and a map type of 1 which draws the buildings in 3D.

Drawing a Marker on the Map

Now let's draw a marker in this map. We do this by superimposing, on the map that we have, a drawing of a polygon at the desired coordinate. We do this using a Polygon2DSimpleVisualizator. Let's discuss each of the input parameters coming to this module:

1. The first input to this visualizator is a polygon for the Marker. Since our marker is a single point, we use a listAssembler to construct a polygon with the single point coming form the GeocodeGoogleMaps module. 2. The bounding rectangle for this visualizator should be the same as the rectangle outputted by our existing GoogleMapVisor. 3. The radius of the marker is given by a NumberList (one for each point in the polygon; in our case there is a single point but we still need to create a list).

This gives us the following image:

If you now move the new visualizator exactly over the map, and then go to the view (eye) menu (top left of Impure) and tick off "visualizator panels", you will be able to see the map, with the marker superimposed!

Notice that if you move the map (dragging with the mouse) left and right, the marker moves correctly. However if you move up and down the marker gets misaligned. This is because the GoogleMapVisor uses mercator projected coordinates, whereas the Polygon2DSimpleVisualizator uses standard geometric coordinates. We will fix this in the next section.

Transformations

Geo coordinates in Google are returned using the Mercator coordinate system, which is different form the normal Impure coordinate system, for several reasons: the cover the surface of a sphere (the Earth) rather than a plane, and zero designates the equator. In order to represent properly in Impure a coordinate given in Mercator we need to use a universalProjectionOnTransformationGeo module. Here is an example:

We will need to use this technique to transform both the Geo coordinate of the place being marked and the coordinates of the Rectangle given by the GoogleMapVisor before passing them to the Polygon2DSimpleVisualizator. If we do this we will finally obtain a properly marked map which can be moved:

(We cheated a little bit in the image above: we painted the marker red instead of the default grey. You can do this providing a color to the 'color' parameter of the Polygon2DSimpleVisualizator. To learn more about colors you can see color

Multiple Markers

Once we have this schema for drawing a single marker, it is extremely easy to extend it to multiple markers. All it takes is to change the GeocoderGoogleMaps to a GeocoderMultiGoogleMaps and to provide multiple addresses! Here is the final schema (we highlighted in blue the changes from the last one, to emphasize how little we changed!).

Impure code source:

0 String Empire State building, NY 411 528
1 Number 0 336 809
2 Number 0 336 834
3 Number 17 559 685
4 Number 1 559 710
5 Number 300 322 181
6 Boolean false 498 1089
7 Number 10 393 949
8 getElementFromTable 388 784
9 listAssembler5 506 791
10 listAssembler5 501 950
11 GoogleMapsVisor 617 385 340 340
12 TableVisualizator 400 51 539 217
13 GeocoderGoogleMaps 261 613
14 Polygon2DSimpleVisualizator 617 385 338 342
0 13
13 8
1 8 1
2 8 2
8 11
3 11 1
4 11 2
13 12
5 12 1
6 14 6
11 14 1
8 9
9 14
7 10
10 14 2