In following examples, Vector Elements - Markers, Points, Lines, Polygons, Texts, BalloonPopups and a 3D model - are added by the application.
For each object, the styling is defined and objects are created based on given coordinates.
In the first example there is creatio of LocalVectorVectorDataSource object named ‘vectorDataSource1’ that is attached to a VectorLayer which is added to a MapView. Other samples do not repeat this.
Note: A popup (callout, bubble) which appears when you click on map is a vector element of its own, and should be added using map click listener.
Marker
Add a marker and apply marker styling using the following code:
// Preparation - create layer and datasource// this will be used later in several placesProjectionproj=mapView.getOptions().getBaseProjection();// 1. Initialize an vector data source where to put the elementsLocalVectorDataSourcevectorDataSource1=newLocalVectorDataSource(proj);// 2. Initialize a vector layer with the previous data sourceVectorLayervectorLayer1=newVectorLayer(vectorDataSource1);// 3. Add the previous vector layer to the mapmapView.getLayers().add(vectorLayer1);// Now real adding objects// 1. Create marker styleMarkerStyleBuildermarkerStyleBuilder=newMarkerStyleBuilder();markerStyleBuilder.setSize(30);markerStyleBuilder.setColor(newColor(0xFF00FF00));// greenMarkerStylemarkerStyle1=markerStyleBuilder.buildStyle();// 2. Add markerMapPospos1=proj.fromWgs84(newMapPos(24.646469,59.426939));// TallinnMarkermarker1=newMarker(pos1,markerStyle1);// 3. Add the marker to the datasourcevectorDataSource1.add(marker1);
// Preparation - create layer and datasource// projection will be needed laterProjectionproj=MapView.Options.BaseProjection;// 1. Initialize an local data source - a bucket for your objects created in codeLocalVectorDataSourcevectorDataSource1=newLocalVectorDataSource(proj);// 2. Initialize a vector layer with the previous data sourceVectorLayervectorLayer1=newVectorLayer(vectorDataSource1);// 3. Add the previous vector layer to the mapMapView.Layers.Add(vectorLayer1);// Now real adding objects// 1. Create marker styleMarkerStyleBuildermarkerStyleBuilder=newMarkerStyleBuilder();markerStyleBuilder.Size=30;markerStyleBuilder.Color=newColor(0,255,0,255);// greenMarkerStylemarkerStyle1=markerStyleBuilder.BuildStyle();// 2. Define marker position and create the markerMapPospos1=proj.FromWgs84(newMapPos(24.646469,59.426939));// TallinnMarkermarker1=newMarker(pos1,markerStyle1);// 3. Add the marker to the datasourcevectorDataSource1.Add(marker1);
// Preparation - create layer and datasource// we'll need projection laterNTEPSG3857*proj=[[NTEPSG3857alloc]init];// 1. Create a vector data source, bucket where we'll put objectsNTLocalVectorDataSource*vectorDataSource1=[[NTLocalVectorDataSourcealloc]initWithProjection:proj];// 2. Initialize a vector layer with the previous data sourceNTVectorLayer*vectorLayer1=[[NTVectorLayeralloc]initWithDataSource:vectorDataSource1];// 3. Add the previous vector layer to the map[[selfgetLayers]add:vectorLayer1];// Now real adding objects// 1. Create a marker style, using default marker bitmap hereNTMarkerStyleBuilder*markerStyleBuilder=[[NTMarkerStyleBuilderalloc]init];[markerStyleBuildersetSize:30];[markerStyleBuildersetColor:[[NTColoralloc]initWithColor:0xFF00FF00]];// greenNTMarkerStyle*markerStyle1=[markerStyleBuilderbuildStyle];// 2. Define marker position and create the markerNTMapPos*pos1=[projfromWgs84:[[NTMapPosalloc]initWithX:24.651488y:59.423581]];// TallinnNTMarker*marker1=[[NTMarkeralloc]initWithPos:pos1style:markerStyle1];// 3. Add the marker to the data source[vectorDataSource1add:marker1];
// Preparation - create layer and datasource// Get base projection from mapViewletprojection=mapView?.getOptions().getBaseProjection();// Create a vector data source, bucket where we'll put objectsletsource=NTLocalVectorDataSource(projection:projection);// Initialize layerletlayer=NTVectorLayer(dataSource:source);// Add layermapView?.getLayers().add(layer);// Now real adding objects// 1. Create a marker style, using default marker bitmap hereletmarkerStyleBuilder=NTMarkerStyleBuilder();markerStyleBuilder?.setSize(30);markerStyleBuilder?.setColor(NTColor.init(r:0,g:255,b:0,a:255));// greenletmarkerStyle1=markerStyleBuilder?.buildStyle();// 2. Define marker position and create the markerletpos1=projection?.fromWgs84(NTMapPos(x:24.651488,y:59.423581));// Tallinnletmarker1=NTMarker(pos:pos1,style:markerStyle1);// 3. Add the marker to the data sourcevectorDataSource1?.add(marker1);
// Preparation - create layer and datasource// Get base projection from mapView, we'll need it latervalprojection=mapView?.options?.baseProjection//1. Create a vector data source where to put the elementsvalsource=LocalVectorDataSource(projection)// 2. Initialize layer, add to MapViewvallayer=VectorLayer(source)mapView?.layers?.add(layer)// Now real adding objects // 1. Create a marker style, using default marker bitmap herevalmarkerStyleBuilder=MarkerStyleBuilder()markerStyleBuilder.size=30FmarkerStyleBuilder.color=Color(0,255,0,255)// greenvalmarkerStyle1=builder.buildStyle()// 2. Define marker position and create the markervalpos1=projection?.fromWgs84(MapPos(24.651488,59.423581))// Tallinnvalmarker1=Marker(pos1,markerStyle1)// 3. Add the marker to the data sourcevectorDataSource1.add(marker1)
Point
Points are used to indicating specific location points on a map, similar to Markers. However, Points do not have overlapping controls and cannot be use with billboard style version 2.5D. If you have a lot of data (thousands of points) and are not using 2.5D views, use Points as an alternative to Markers. Your rendering time will be significantly faster.
You can add any type of vector objects to the same Layer and LocalVectorDataSource. This enables you to reuse settings for a defined Marker. It is recommended to define different Layers and DataSources for managing your objects, as it allows you to:
Select and delete all objects of DataSource
Specify the drawing order of layers. The drawing order within a single Layer is undefined. For multiple layers, layers that are added are drawn underneath the initial map layer
Add a point and apply point styling using the following code:
// 1. Set marker positionMapPostallinn=proj.FromWgs84(newMapPos(24.646469,59.426939));// 2. Create style and position for the PointPointStyleBuilderpointStyleBuilder=newPointStyleBuilder();pointStyleBuilder.setColor(newColor(0xFF00FF00));pointStyleBuilder.setSize(16);// 3. Create Point, add to datasource with metadataPointpoint1=newPoint(tallinn,pointStyleBuilder.buildStyle());point1.setMetaDataElement("ClickText","Point nr 1");vectorDataSource1.add(point1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1. Set point positionMapPostallinn=proj.FromWgs84(newMapPos(24.646469,59.426939));// 2. Create style and position for the PointvarpointStyleBuilder=newPointStyleBuilder();pointStyleBuilder.Color=newColor(0,255,0,255);pointStyleBuilder.Size=16;// 3. Create Point, add to datasource with metadataPointpoint1=newPoint(tallinn,pointStyleBuilder.BuildStyle());point1.SetMetaDataElement("ClickText",newVariant("Point nr 1"));vectorDataSource1.Add(point1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1. Set point positionNTMapPos*tallinn=[projfromWgs84:[[NTMapPosalloc]initWithX:24.646469y:59.426939]];// 2. Create style and position for the PointNTPointStyleBuilder*pointStyleBuilder=[[NTPointStyleBuilderalloc]init];[pointStyleBuildersetColor:[[NTColoralloc]initWithColor:0xFF00FF00]];[pointStyleBuildersetSize:16];// 3. Create Point, add to datasource with metadataNTPoint*point1=[[NTPointalloc]initWithPos:tallinnstyle:[pointStyleBuilderbuildStyle]];[point1setMetaDataElement:@"ClickText"element:[[NTVariantalloc]initWithString:@"Point 1"]];[vectorDataSource1add:point1];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1. Set marker positionlettallinn=projection?.fromWgs84(NTMapPos(x:24.646469,y:59.426939))// 2. Create style and position for the PointletpointStyleBuilder=NTPointStyleBuilder()pointStyleBuilder?.setColor(NTColor(r:0,g:255,b:0,a:255))pointStyleBuilder?.setSize(16)// 3. Create Point, add to datasource with metadataletpoint1=NTPoint(pos:tallinn,style:pointStyleBuilder?.buildStyle())point1?.setMetaData("ClickText",element:NTVariant(string:"Point nr 1"));vectorDataSource1?.add(point1)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1. Set marker positionvaltallinn=projection?.fromWgs84(MapPos(24.646469,59.426939))// 2. Create style and position for the PointvalpointStyleBuilder=PointStyleBuilder()pointStyleBuilder.color=Color(0,255,0,255)pointStyleBuilder.size=16F// 3. Create Point, add to datasource with metadatavalpoint1=Point(tallinn,pointStyleBuilder.buildStyle())point1.setMetaDataElement("ClickText",Variant("Point nr 1"))vectorDataSource1.add(point1)
Line or Polyline
Lines can be added to the same VectorDataSource, it is defined by an array of MapPos locations, which goes to MapPosVector object:
// 1. Create line style, and line posesLineStyleBuilderlineStyleBuilder=newLineStyleBuilder();lineStyleBuilder.setColor(newColor(0xFFFF0000));lineStyleBuilder.setLineJointType(LineJointType.LINE_JOINT_TYPE_ROUND);lineStyleBuilder.setWidth(8);// 2. Special MapPosVector must be used for coordinatesMapPosVectorlinePoses=newMapPosVector();MapPosinitial=proj.fromWgs84(newMapPos(24.645565,59.422074));// 3. Add positionslinePoses.add(initial);linePoses.add(proj.fromWgs84(newMapPos(24.643076,59.420502)));linePoses.add(proj.fromWgs84(newMapPos(24.645351,59.419149)));linePoses.add(proj.fromWgs84(newMapPos(24.648956,59.420393)));linePoses.add(proj.fromWgs84(newMapPos(24.650887,59.422707)));// 4. Add a lineLineline1=newLine(linePoses,lineStyleBuilder.buildStyle());line1.setMetaDataElement("ClickText",newVariant("Line nr 1"));vectorDataSource1.add(line1);
// 1. Create line style, and line posesvarlineStyleBuilder=newLineStyleBuilder();lineStyleBuilder.Color=newColor(255,0,0,255);// RedlineStyleBuilder.LineJoinType=LineJoinType.LineJoinTypeRound;lineStyleBuilder.Width=8;varpositions=newMapPosVector();MapPosinitial=proj.FromWgs84(newMapPos(24.645565,59.422074));// 2. Add positionspositions.Add(initial);positions.Add(proj.FromWgs84(newMapPos(24.643076,59.420502)));positions.Add(proj.FromWgs84(newMapPos(24.645351,59.419149)));positions.Add(proj.FromWgs84(newMapPos(24.648956,59.420393)));positions.Add(proj.FromWgs84(newMapPos(24.650887,59.422707)));// 3. Add line to sourcevarline=newLine(positions,lineStyleBuilder.BuildStyle());vectorDataSource1.Add(line);
// 1. Define line styleNTLineStyleBuilder*lineStyleBuilder=[[NTLineStyleBuilderalloc]init];[lineStyleBuildersetColor:[[NTColoralloc]initWithColor:0xFFFF0000]];[lineStyleBuildersetLineJointType:NT_LINE_JOINT_TYPE_ROUND];[lineStyleBuildersetWidth:8];// 2. Define line positions, here as fixed locationsMapPosVector*linePoses=[[MapPosVectoralloc]init];NTMapPos*initial=[projfromWgs84:[[NTMapPosalloc]initWithX:24.645565y:59.422074]][linePosesadd:initial];[linePosesadd:[projfromWgs84:[[NTMapPosalloc]initWithX:24.643076y:59.420502]]];[linePosesadd:[projfromWgs84:[[NTMapPosalloc]initWithX:24.645351y:59.419149]]];[linePosesadd:[projfromWgs84:[[NTMapPosalloc]initWithX:24.648956y:59.420393]]];[linePosesadd:[projfromWgs84:[[NTMapPosalloc]initWithX:24.650887y:59.422707]]];// 3. Create line, add metadata and add to the datasourceNTLine*line1=[[NTLinealloc]initWithGeometry:[[NTLineGeometryalloc]initWithPoses:linePoses]style:[lineStyleBuilderbuildStyle]];[line1setMetaDataElement:@"ClickText"element:[[NTVariantalloc]initWithString:@"Line 1"]];[vectorDataSource1add:line1];
// 1. Create line style, and line posesletlineStyleBuilder=NTLineStyleBuilder()lineStyleBuilder?.setColor(NTColor(r:255,g:0,b:0,a:255))lineStyleBuilder?.setLineJoinType(NTLineJoinType.LINE_JOIN_TYPE_ROUND)lineStyleBuilder?.setWidth(8)// 2. Special MapPosVector must be used for coordinatesletlinePoses=NTMapPosVector()letinitial=projection?.fromWgs84(NTMapPos(x:24.645565,y:59.422074))// 3. Add positionslinePoses?.add(initial)linePoses?.add(projection?.fromWgs84(NTMapPos(x:24.643076,y:59.420502)));linePoses?.add(projection?.fromWgs84(NTMapPos(x:24.645351,y:59.419149)));linePoses?.add(projection?.fromWgs84(NTMapPos(x:24.648956,y:59.420393)));linePoses?.add(projection?.fromWgs84(NTMapPos(x:24.650887,y:59.422707)));// 4. Add a lineletline1=NTLine(poses:linePoses,style:lineStyleBuilder?.buildStyle());line1?.setMetaData("ClickText",element:NTVariant(string:"Line nr 1"))vectorDataSource1?.add(line1)
// 1. Create line style, and line posesvallineStyleBuilder=LineStyleBuilder()lineStyleBuilder.color=Color(255,0,0,255)// Define how lines are joinedlineStyleBuilder.lineJoinType=LineJoinType.LINE_JOIN_TYPE_ROUNDlineStyleBuilder.width=8F// 2. Special MapPosVector must be used for coordinatesvallinePoses=MapPosVector()valinitial=projection?.fromWgs84(MapPos(24.645565,59.422074))// 3. Add positionslinePoses.add(initial)linePoses.add(projection?.fromWgs84(MapPos(24.643076,59.420502)));linePoses.add(projection?.fromWgs84(MapPos(24.645351,59.419149)));linePoses.add(projection?.fromWgs84(MapPos(24.648956,59.420393)));linePoses.add(projection?.fromWgs84(MapPos(24.650887,59.422707)));// 4. Add a linevalline1=Line(linePoses,lineStyleBuilder.buildStyle());line1.setMetaDataElement("ClickText",Variant("Line nr 1"))vectorDataSource1.add(line1)
Polygon or Multi-Polygon
Add a polygon and apply polygon styling using the following code. The following examples add a polygon with polygon holes, note that you need to use MapPosVector object for polygon coordinate arrays :
// 1. Create polygon style and posesPolygonStyleBuilderpolygonStyleBuilder=newPolygonStyleBuilder();polygonStyleBuilder.Color=newColor(255,0,0,255);// redvarlineStyleBuilder=newLineStyleBuilder();lineStyleBuilder.Color=newColor(0,0,0,255);// blacklineStyleBuilder.Width=1.0f;polygonStyleBuilder.LineStyle=lineStyleBuilder.BuildStyle();// 2. Define coordinates of outer ringMapPosVectorpolygonPoses=newMapPosVector();MapPosinitial=proj.FromWgs84(newMapPos(24.650930,59.421659));polygonPoses.Add(initial);polygonPoses.Add(proj.FromWgs84(newMapPos(24.657453,59.416354)));polygonPoses.Add(proj.FromWgs84(newMapPos(24.661187,59.414607)));polygonPoses.Add(proj.FromWgs84(newMapPos(24.667667,59.418123)));polygonPoses.Add(proj.FromWgs84(newMapPos(24.665736,59.421703)));polygonPoses.Add(proj.FromWgs84(newMapPos(24.661444,59.421245)));polygonPoses.Add(proj.FromWgs84(newMapPos(24.660199,59.420677)));polygonPoses.Add(proj.FromWgs84(newMapPos(24.656552,59.420175)));polygonPoses.Add(proj.FromWgs84(newMapPos(24.654010,59.421472)));// 3. Create polygon holes poses, note that special MapPosVectorVector must be usedMapPosVectorholePoses1=newMapPosVector();holePoses1.Add(proj.FromWgs84(newMapPos(24.658409,59.420522)));holePoses1.Add(proj.FromWgs84(newMapPos(24.658409,59.420522)));holePoses1.Add(proj.FromWgs84(newMapPos(24.662207,59.418896)));holePoses1.Add(proj.FromWgs84(newMapPos(24.662207,59.417411)));holePoses1.Add(proj.FromWgs84(newMapPos(24.659524,59.417171)));holePoses1.Add(proj.FromWgs84(newMapPos(24.657615,59.419834)));MapPosVectorholePoses2=newMapPosVector();holePoses2.Add(proj.FromWgs84(newMapPos(24.665640,59.421243)));holePoses2.Add(proj.FromWgs84(newMapPos(24.668923,59.419463)));holePoses2.Add(proj.FromWgs84(newMapPos(24.662893,59.419365)));MapPosVectorVectorpolygonHoles=newMapPosVectorVector();polygonHoles.Add(holePoses1);polygonHoles.Add(holePoses2);// 4. Add polygonPolygonpolygon=newPolygon(polygonPoses,polygonHoles,polygonStyleBuilder.BuildStyle());polygon.SetMetaDataElement("ClickText",newVariant("Polygon"));vectorDataSource1.Add(polygon);
// 1. Create polygon styleNTPolygonStyleBuilder*polygonStyleBuilder=[[NTPolygonStyleBuilderalloc]init];[polygonStyleBuildersetColor:[[NTColoralloc]initWithColor:0xFFFF0000]];lineStyleBuilder=[[NTLineStyleBuilderalloc]init];[lineStyleBuildersetColor:[[NTColoralloc]initWithColor:0xFF000000]];[lineStyleBuildersetWidth:1.0f];[polygonStyleBuildersetLineStyle:[lineStyleBuilderbuildStyle]];// 2. Define coordinates of outer ringNTMapPosVector*polygonPoses=[[MapPosVectoralloc]init];NTMapPos*initial=[projfromWgs84:[[NTMapPosalloc]initWithX:24.650930y:59.421659]];[polygonPosesadd:initial];[polygonPosesadd:[projfromWgs84:[[NTMapPosalloc]initWithX:24.657453y:59.416354]]];[polygonPosesadd:[projfromWgs84:[[NTMapPosalloc]initWithX:24.661187y:59.414607]]];[polygonPosesadd:[projfromWgs84:[[NTMapPosalloc]initWithX:24.667667y:59.418123]]];[polygonPosesadd:[projfromWgs84:[[NTMapPosalloc]initWithX:24.665736y:59.421703]]];[polygonPosesadd:[projfromWgs84:[[NTMapPosalloc]initWithX:24.661444y:59.421245]]];[polygonPosesadd:[projfromWgs84:[[NTMapPosalloc]initWithX:24.660199y:59.420677]]];[polygonPosesadd:[projfromWgs84:[[NTMapPosalloc]initWithX:24.656552y:59.420175]]];[polygonPosesadd:[projfromWgs84:[[NTMapPosalloc]initWithX:24.654010y:59.421472]]];// 3. Define polygon holes. This is two-dimensional array (MapPosVectorVector)// because Polygon can have several holes. In this sample there are twoNTMapPosVector*holePoses1=[[MapPosVectoralloc]init];[holePoses1add:[projfromWgs84:[[NTMapPosalloc]initWithX:24.658409y:59.420522]]];[holePoses1add:[projfromWgs84:[[NTMapPosalloc]initWithX:24.662207y:59.418896]]];[holePoses1add:[projfromWgs84:[[NTMapPosalloc]initWithX:24.662207y:59.417411]]];[holePoses1add:[projfromWgs84:[[NTMapPosalloc]initWithX:24.659524y:59.417171]]];[holePoses1add:[projfromWgs84:[[NTMapPosalloc]initWithX:24.657615y:59.419834]]];NTMapPosVector*holePoses2=[[MapPosVectoralloc]init];[holePoses2add:[projfromWgs84:[[NTMapPosalloc]initWithX:24.665640y:59.421243]]];[holePoses2add:[projfromWgs84:[[NTMapPosalloc]initWithX:24.668923y:59.419463]]];[holePoses2add:[projfromWgs84:[[NTMapPosalloc]initWithX:24.662893y:59.419365]]];NTMapPosVectorVector*polygonHoles=[[MapPosVectorVectoralloc]init];[holesadd:holePoses1];[holesadd:holePoses2];// 4. Create polygon, define metadata and add to datasourceNTPolygon*polygon=[[NTPolygonalloc]initWithGeometry:[[NTPolygonGeometryalloc]initWithPoses:polygonPosesholes:polygonHoles]style:[polygonStyleBuilderbuildStyle]];[polygonsetMetaDataElement:@"ClickText"element:[[NTVariantalloc]initWithString:@"Polygon"]];[vectorDataSource1add:polygon];
Text style parameters are similar to Markers, as both are Billboards - which are MapView objects that contain the following features:
Control and prohibit text overlapping, based on priority and the location of where the text appears
Display text as billboards in 2.5D (tilted) view by defining the OrientationMode parameter. There are 3 options: show on ground, and rotate with map (like street names), show on ground (do not rotate with map), or show as billboard (no rotation).
Add text and apply text styling using the following code.
// 1. Create text styleTextStyleBuildertextStyleBuilder=newTextStyleBuilder();textStyleBuilder.setColor(newColor(0xFFFF0000));textStyleBuilder.setOrientationMode(BillboardOrientation.BILLBOARD_ORIENTATION_FACE_CAMERA);// This enables higher resolution texts for retina devices, but consumes more memory and is slowertextStyleBuilder.setScaleWithDPI(false);// 2. Add textMapPosposition=proj.fromWgs84(newMapPos(24.653302,59.422269));Texttextpopup1=newText(position,textStyleBuilder.buildStyle(),"Face camera text");textpopup1.setMetaDataElement("ClickText",newVariant("Text nr 1"));vectorDataSource1.add(textpopup1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1. Create text styleTextStyleBuildertextStyleBuilder=newTextStyleBuilder();textStyleBuilder.setColor(newColor(0xFFFF0000));textStyleBuilder.setOrientationMode(BillboardOrientation.BILLBOARD_ORIENTATION_FACE_CAMERA);// This enables higher resolution texts for retina devices, but consumes more memory and is slowertextStyleBuilder.setScaleWithDPI(false);// 2. Add textMapPosposition=proj.fromWgs84(newMapPos(24.653302,59.422269));Texttextpopup1=newText(position,textStyleBuilder.buildStyle(),"Face camera text");textpopup1.setMetaDataElement("ClickText",newVariant("Text nr 1"));vectorDataSource1.add(textpopup1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1. Create text styleNTTextStyleBuilder*textStyleBuilder=[[NTTextStyleBuilderalloc]init];[textStyleBuildersetColor:[[NTColoralloc]initWithColor:0xFFFF0000]];[textStyleBuildersetOrientationMode:NT_BILLBOARD_ORIENTATION_FACE_CAMERA];// setScaleWithDPI enables higher resolution texts for retina devices,// but consumes more memory and is slower if you have many texts on map[textStyleBuildersetScaleWithDPI:false];// 2. Define text location and add to datasourceNTMapPos*position=[projfromWgs84:[[NTMapPosalloc]initWithX:24.653302y:59.422269]];NTText*textpopup1=[[NTTextalloc]initWithPos:positionstyle:[textStyleBuilderbuildStyle]text:@"Face camera text"];[textpopup1setMetaDataElement:@"ClickText"element:[[NTVariantalloc]initWithString:@"Text 1"]];[vectorDataSource1add:textpopup1];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1. Create text stylelettextStyleBuilder=NTTextStyleBuilder()textStyleBuilder?.setColor(NTColor(r:255,g:0,b:0,a:255))textStyleBuilder?.setOrientationMode(NTBillboardOrientation.BILLBOARD_ORIENTATION_FACE_CAMERA)// This enables higher resolution texts for retina devices, but consumes more memory and is slowertextStyleBuilder?.setScaleWithDPI(false)// 2. Add textletposition=projection?.fromWgs84(NTMapPos(x:24.653302,y:59.422269))lettextpopup1=NTText(pos:position,style:textStyleBuilder?.buildStyle(),text:"Face camera text")textpopup1?.setMetaData("ClickText",element:NTVariant(string:"Text nr 1"))vectorDataSource1.add(textpopup1)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1. Create text stylevaltextStyleBuilder=TextStyleBuilder()textStyleBuilder.color=Color(0xFFFF0000.toInt())textStyleBuilder.orientationMode=BillboardOrientation.BILLBOARD_ORIENTATION_FACE_CAMERA// This enables higher resolution texts for retina devices, but consumes more memory and is slowertextStyleBuilder.isScaleWithDPI=false// 2. Add textvalposition=projection?.fromWgs84(MapPos(24.653302,59.422269))valtextpopup1=Text(position,textStyleBuilder.buildStyle(),"Face camera text")textpopup1.setMetaDataElement("ClickText",Variant("Text nr 1"))vectorDataSource1.add(textpopup1)
BalloonPopup
A BalloonPopup appears often based on click event of an object, but you can use it also as stand-alone visual object instead of Marker, as you can define always-on text on it. Note that these examples contain several special styling elements, such as:
Image (info.png) as the “Left Image”
Arrow (arrow.png) as the “Right Image”
Styled appearance of tuned radius values
Tip: To use these styling elements as part of your own project, copy the above .png files, to your local map application project. These are in our sample apps in github.
// 1. Load bitmaps to show on the labelBitmapinfoImage=BitmapFactory.decodeResource(getResources(),R.drawable.info);BitmaparrowImage=BitmapFactory.decodeResource(getResources(),R.drawable.arrow);// 2. Add popupBalloonPopupStyleBuilderbuilder=newBalloonPopupStyleBuilder();builder.setCornerRadius(20);builder.setLeftMargins(newBalloonPopupMargins(6,6,6,6));builder.setLeftImage(BitmapUtils.createBitmapFromAndroidBitmap(infoImage));builder.setRightImage(BitmapUtils.createBitmapFromAndroidBitmap(arrowImage));builder.setRightMargins(newBalloonPopupMargins(2,6,12,6));builder.setPlacementPriority(1);MapPosposition=proj.fromWgs84(newMapPos(24.655662,59.425521));BalloonPopuppopup=newBalloonPopup(position,builder.buildStyle(),"Popup with pos","Images, round");popup.setMetaDataElement("ClickText",newVariant("Popup caption nr 1"));vectorDataSource1.add(popup);
// 1. Load bitmaps to show on the label// Android codeBitmapandroidInfoBitmap=BitmapFactory.DecodeResource(Resources,HelloMap.Resource.Drawable.info);Carto.Graphics.BitmapinfoBitmap=BitmapUtils.CreateBitmapFromAndroidBitmap(androidInfoBitmap);BitmapandroidArrowBitmap=BitmapFactory.DecodeResource(Resources,HelloMap.Resource.Drawable.arrow);Carto.Graphics.BitmaparrowBitmap=BitmapUtils.CreateBitmapFromAndroidBitmap(androidArrowBitmap);// iOS codevarinfoBitmap=BitmapUtils.CreateBitmapFromUIImage(UIImage.FromFile("info.png"));vararrowBitmap=BitmapUtils.CreateBitmapFromUIImage(UIImage.FromFile("arrow.png"));// 2. Add popup// Shared codevarbuilder=newBalloonPopupStyleBuilder();builder.LeftImage=infoBitmap;builder.RightImage=arrowBitmap;builder.LeftMargins=newBalloonPopupMargins(6,6,6,6);builder.RightMargins=newBalloonPopupMargins(2,6,12,6);builder.CornerRadius=20;builder.TitleFontName="Helvetica";builder.TitleFontSize=16;builder.TitleColor=newColor(200,0,0,255);builder.StrokeColor=newColor(200,120,0,255);builder.StrokeWidth=1;builder.PlacementPriority=1;MapPosposition=proj.FromWgs84(newMapPos(0,20));varpopup=newBalloonPopup(position,builder.BuildStyle(),"Popup Title","Description");popup.setMetaDataElement("ClickText",newVariant("Popup caption nr 1"));vectorDataSource1.Add(popup);
// 1. Load bitmaps to show on the labelUIImage*infoImage=[UIImageimageNamed:@"info.png"];UIImage*arrowImage=[UIImageimageNamed:@"arrow.png"];// 2. Add popupNTBalloonPopupStyleBuilder*balloonPopupStyleBuilder=[[NTBalloonPopupStyleBuilderalloc]init];[balloonPopupStyleBuildersetCornerRadius:20];[balloonPopupStyleBuildersetLeftMargins:[[NTBalloonPopupMarginsalloc]initWithLeft:6top:6right:6bottom:6]];[balloonPopupStyleBuildersetLeftImage:infoImage];[balloonPopupStyleBuildersetRightImage:arrowImage];[balloonPopupStyleBuildersetRightMargins:[[NTBalloonPopupMarginsalloc]initWithLeft:2top:6right:12bottom:6]];[balloonPopupStyleBuildersetPlacementPriority:1];NTMapPos*position=[projfromWgs84:[[NTMapPosalloc]initWithX:24.655662y:59.425521]];NTBalloonPopup*popup=[[NTBalloonPopupalloc]initWithPos:positionstyle:[balloonPopupStyleBuilderbuildStyle]title:@"Popup with pos"desc:@"Images, round"];[popupsetMetaDataElement:@"ClickText"element:[[NTVariantalloc]initWithString:@"Popup caption 1"]];[vectorDataSource1add:popup];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 1. Load bitmaps to show on the labelletinfoImage=NTBitmapUtils.createBitmap(from:UIImage(named:"info.png"));letarrowImage=NTBitmapUtils.createBitmap(from:UIImage(named:"arrow.png"));// 2. Add popupletbuilder=NTBalloonPopupStyleBuilder()builder?.setCornerRadius(20)builder?.setLeftMargins(NTBalloonPopupMargins(left:6,top:6,right:6,bottom:6))builder?.setLeftImage(infoImage)builder?.setRightImage(arrowImage)builder?.setRightMargins(NTBalloonPopupMargins(left:2,top:6,right:12,bottom:6))builder?.setPlacementPriority(1)letposition=projection?.fromWgs84(NTMapPos(x:24.655662,y:59.425521))letpopup=NTBalloonPopup(pos:position,style:builder?.buildStyle(),title:"Popup with pos",desc:"Images, round")popup?.setMetaData("ClickText",element:NTVariant(string:"Popup caption nr 1"))vectorDataSource1.add(popup)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 1. Load bitmaps to show on the labelvalinfoImage=BitmapFactory.decodeResource(resources,R.drawable.info)valarrowImage=BitmapFactory.decodeResource(resources,R.drawable.arrow)// 2. Add popupvalbuilder=BalloonPopupStyleBuilder()builder.cornerRadius=20builder.leftMargins=BalloonPopupMargins(6,6,6,6)builder.leftImage=BitmapUtils.createBitmapFromAndroidBitmap(infoImage)builder.rightImage=BitmapUtils.createBitmapFromAndroidBitmap(arrowImage)builder.rightMargins=BalloonPopupMargins(2,6,12,6)builder.placementPriority=1valposition=projection?.fromWgs84(MapPos(24.655662,59.425521))valpopup=BalloonPopup(position,builder.buildStyle(),"Popup with pos","Images, round")popup.setMetaDataElement("ClickText",Variant("Popup caption nr 1"))vectorDataSource1.add(popup)
3D Model Objects
One special feature of the Mobile SDK is that you can add 3D objects (3D models) to a mobile map. For example, you can add small moving car or other decorative or informative elements.
Note: 3D objects are added to the same LocalVectorDataSource as 2D objects. However, 3D objects are only supported using the Nutiteq 3D Model (NML) format. This custom format is optimized for the multi-resolution of 3D files on mobile apps.
The following procedure describes how to setup and add a 3D object to your mobile MapView:
Select a NML file. You can retrieve some free samples from Nutiteq’s NML sample page. If you have own model as Collada DAE (or KMZ) format, then you would need CARTO Mobile 3D converter to convert it to NML, so it can be used in mobile.
Adjust the file size of the 3D object for rendering. Typically, NML files are smaller than 100K. Anything larger than that takes too long to render. Consider applying lower detail models for your 3D objects, before you convert it to NML. You can then add these models to the res/raw folder of your Android app, or as a resource file in your iOS project.
Load the model file in the code to add it to your map application by using the following code:
// 1. Load NML model from a fileBinaryDatamodelData=AssetUtils.loadAsset("fcd_auto.nml");// 2. Set location for model, and create NMLModel object with thisMapPosposition=baseProjection.fromWgs84(newMapPos(24.646469,59.423939));NMLModelmodel=newNMLModel(position,modelData);model.setMetaDataElement("ClickText",newVariant("Single model"));// 3. Adjust the size- oversize it by 20*, just to make it more visible (optional)model.setScale(20);// 4. Add it to normal datasourcevectorDataSource1.add(model);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1. Load NML model from a filevarmodelData=AssetUtils.LoadAsset("fcd_auto.nml");// 2. Set location for model, and create NMLModel object with thisvarposition=proj.FromWgs84(newMapPos(24.646469,59.423939));varmodel=newNMLModel(position,modelData);model.SetMetaDataElement("ClickText",newVariant("Single model"));// 3. Adjust the size- oversize it by 20x, just to make it more visible (optional)model.Scale=20;// 4. Add it to normal datasourcevectorDataSource1.Add(model);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1. Load NML model from a fileNTBinaryData*modelData=[NTAssetUtilsloadAsset:@"fcd_auto.nml"];// 2. Set location for model, and create NMLModel object with thisNTMapPos*pos=[projfromWgs84:[[NTMapPosalloc]initWithX:24.646469y:59.424939]];NTNMLModel*model=[[NTNMLModelalloc]initWithPos:possourceModelData:modelData];[modelsetMetaDataElement:@"ClickText"element:[[NTVariantalloc]initWithString:@"My nice car"]];// 3. Adjust the size- oversize it by 20*, just to make it more visible (optional)[modelsetScale:20];// 4. Add it to normal datasource[vectorDataSource1add:model];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1. Load NML model from a file (be sure it's targeted by your application)letmodelData=NTAssetUtils.loadAsset("fcd_auto.nml")// 2. Set location for model, and create NMLModel object with thisletposition=projection?.fromWgs84(NTMapPos(x:24.646469,y:59.423939))letmodel=NTNMLModel(pos:position,sourceModelData:modelData)model?.setMetaData("ClickText",element:NTVariant(string:"Single model"))// 3. Adjust the size- oversize it by 20*, just to make it more visible (optional)model?.setScale(20)// 4. Add it to normal datasourcevectorDataSource1.add(model)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1. Load NML model from a filevalmodelData=AssetUtils.loadAsset("fcd_auto.nml")// 2. Set location for model, and create NMLModel object with thisvalposition=projection?.fromWgs84(MapPos(24.646469,59.423939))valmodel=NMLModel(position,modelData);model.setMetaDataElement("ClickText",Variant("Single model"))// 3. Adjust the size- oversize it by 20*, just to make it more visible (optional)model.scale=20F// 4. Add it to normal datasourcevectorDataSource1.add(model)