Map Control
- 5 minutes to read
The ExpressMap Control (Map Control for short) allows you to render a map using raster, vector, or a combination of both map data, add various overlays, and pinpoint specific locations on your map with indicators of your choice. In addition, the Map Control provides a comprehensive set of customization options, built-in navigation tools and animation support with which you can easily create interactive map interfaces without having to write a singe line of code.
Map Layers
A map is comprised of one or more layers that contain specific types of data, such as image tiles, vector shapes, indicators, etc. Layers are stacked one on top of the other to produce the final image at runtime. You can create any number of layers and switch their visibility and/or transparency level to adjust the layer information (also called overlays) displayed in the map.
The current Map Control version supports the following layer types:
Image Tile Layer. This layer draws maps that consist of image tiles obtained from one of the supported online map providers (either Bing Maps or OpenStreetMap). Use the layer’s Provider, ProviderClass, or ProviderClassName property to select the required provider. At design time, you can expand the Provider property in the Object Inspector to display the settings that are relevant to the selected provider type. Refer to the Online Map Provider Specifics section below to learn about provider and connection specifics.
Item Layer. This layer draws map items (predefined vector items and custom elements) on a map. Vector items are perfect for pinpointing specific locations on a map, while custom elements help you add image and text overlays. Predefined vector items include: dots, rectangles, ellipses, polylines, polygons, paths, and pushpins. To manage map items rendered by the layer, use its MapItems collection property.
Item File Layer. This layer draws geographic data (placemarks, polygons, images, textual descriptions, etc.) stored in Esri shapefiles or KML (Keyhole Markup Language) files. Refer to the “Shapefile” and “Keyhole Markup Language” online articles at https://en.wikipedia.org/wiki/Shapefile and https://en.wikipedia.org/wiki/Keyhole_Markup_Language to learn about these file formats.
You can manage layers in the Map Control using its Layers collection property. Refer to the property description to learn how to invoke the design-time collection editor.
Online Map Provider Specifics
The Bing Maps service requires that you specify a valid Bing Maps key to be able to use Bing Maps tile images in your applications. For more information, refer to the “Create a Bing Maps Key” webpage at https://www.microsoft.com/en-us/maps/bing-maps/create-a-bing-maps-key and the “Getting a Bing Maps Key” online article at https://docs.microsoft.com/en-us/bingmaps/getting-started/bing-maps-dev-center-help/getting-a-bing-maps-key.
To enable the Map Control to communicate with online map providers via a proxy server, use a TIdProxyConnectionInfo singleton object returned by the global dxMapControlHttpDefaultProxyInfo function to specify proxy settings. Refer to the function description for a code example.
Visual Elements
The Map Control includes the following main elements that you see on screen.
A key element of the Map Control is the map area. It is represented by a rectangle that displays a map rendered using the data provided by all visible map layers. Note that to improve performance when designing a form in the IDE, the map is rendered only at runtime.
The navigation panel is painted over the map area. This panel contains various UI elements that allow end-users to scroll, zoom in/out of the map area, view the coordinates of the map point located under the mouse pointer, and evaluate the distance between points on the map using the kilometers and miles scales.
You can customize the height, appearance, and visibility of the navigation panel and its individual elements using the Map Control’s NavigationPanel sub-properties.
Map Interaction
The Map Control allows users to perform the following actions with the map:
- Positioning/Scrolling. Center the map area on a specified point using the Map Control’s CenterPoint property. End-users can scroll the current view using any of the following methods:
Dragging the map area;
Clicking the scroll buttons provided by the navigation panel;
Pressing arrow keys and their combinations.
Handle the OnCenterPointChanged and OnCenterPointChanging events to track and restrict end-user scrolling, and keep the map centered on a specific point or area.
- Zooming. Specify the Map Control’s ZoomLevel property, or call the Zoom, ZoomAsync, ZoomIn, or ZoomOut method. To zoom the map on specific map items or a geographic rectangle, call the ZoomToFitItems, ZoomToFitLayerItems, or ZoomToGeoRect method. End-users can adjust the current zoom level using any of the following methods:
Scrolling the mouse wheel;
Selecting a rectangular area with the mouse while holding down the Ctrl and Shift keys (a blue box is displayed to highlight the selected area) to zoom in, making this area occupy the entire map control;
Using the navigation panel’s zoom track bar and/or its change buttons;
Pressing the Plus and Minus keys.
Handle the OnZoomLevelChanged and OnZoomLevelChanging events to respond to zoom level changes and prohibit the Map Control from zooming in/out.
- Item Selection. Switch a map item’s Selected property value, or call the Select, Deselect, and ClearSelection methods provided by the Map Control. End-users can modify the selection as specified by the Map Control’s OptionsBehavior.MapItemSelectMode property setting. Handle the OnSelectionChanged and OnSelectionChanging events to respond to selection changes and prohibit certain map items from being selected/deselected.
The Map Control is implemented by the TdxMapControl component. The table below lists TdxMapControl members that affect main Map Control characteristics.
Characteristic | Description |
|---|---|
Contents | The Layers collection property. Call the AddImageTileLayer, AddItemFileLayer, or AddItemLayer function to create a corresponding layer type within the Layers collection. |
Appearance | The LookAndFeel and Color properties. For the Item layers and Item File layers, you can change the appearance of their map items using the following options:
For navigation panel elements, use the NavigationPanel.Style property set. |
Behavior | The OptionsBehavior property set. |
Animation | The OptionsBehavior.Animation and OptionsBehavior.InertialScrolling properties. |
Layout | The NavigationPanel property set. |
HitTest Information | The HitTest property. |