Contact Us Today! | vcare@wdmtech.com

WDMtech

This section allows you to add Maps with lots of customization options. You can have different Maps with different customized settings for vMap. To manage Maps, please go to vMap => Maps (or go to Dashboard and click on Maps icon). On the page, you will see list of Maps which you created and you will be able to add/edit/delete/publish/unpublished Maps using the buttons on toolbar.

vMap Setup Modules

To create a Map, you can simply click on New button in the toolbar and fill-in necessary information.

vMap Setup Modules

The Map Settings is divided into various sections to make it easy to understand.

  • Map Configuration Section.
  • Map Center Options Section.
  • Control Options Section.
  • Marker Options Section.
  • Info Window Options Section.

All settings here apply to this Map of vMap Component. Be sure to review all the options here when setting up a Map to ensure that the all necessary settings of a Map matches what you want. There are many parameters, the meaning of each parameter is explained on their tooltip, and they are easy to understand. I will just explain the meaning of important parameters in the below section:

Map Configuration Section

In Map Configuration Section, you can set basic parameters of Map like Width, Height, and Map Type etc.

vMap Map Configuration

The table below list the important fields and its meaning which you need to enter when you create Map.

Property Description
Type of Map

Choose one from 05 map types as per your requirement

  • ROADMAP: - Displays the default road map view. This is the default map type.
  • TERRAIN: - Displays a physical map based on terrain information.
  • SATELLITE: - Displays Google Earth satellite images.
  • HYBRID: - Displays a mixture of normal and satellite views.
  • RELIF: - Indicates hills and valleys by shading rather than by contour lines alone
Map Title Enter the title of the Map
Google Map Width Enter the Google Map’s Width. You can set map width Unit either in pixels or in percentage.
Google Map Height Enter the Google Map’s Height. Unit: pixel
Published Set the Published field to YES.

Map Center Options Section

In Map Center Options Section, you can set map center position using Latitude-Longitude, Address or simply by dragging the marker on Map.

vMap Map Center Options

Property Description
Address Enter address of your location map.
Latitude Enter the latitude here to set coordinates of your location
Longitude Enter the longitude here to set coordinates of your location
Zoom Enter a size for zooming. Default size is 12
Set Center After entering either Address or Coordinates (Lat, Long), simply click on this button to set the center point of your location on the Map and vMap will find it automatically. You can also set the center by simply dragging the map.

Control Options

The control options section provides various parameters which allows you to control your map as per your requirement.

vMap Map Control Options

Several controls are configurable, allowing you to alter their behavior or change their appearance. The Map Type control, for example, may appear as a horizontal bar or a dropdown menu.

The Map Type Control may appear in one of the following STYLE options:

  • HORIZONTAL BAR - Displays the array of controls as buttons in a horizontal bar (one button for each map type).
  • DROPDOWN MENU - Displays a single button control allowing you to select the map type via a dropdown menu.
  • DEFAULT - Displays the "default" behavior (which depends on screen size).

The Zoom Control may appear in one of the following STYLE options:

  • SMALL - Displays a mini-zoom control (only + and - buttons).
  • LARGE - Displays the standard zoom slider control.
  • DEFAULT - Picks the best zoom control based on device and map size.

vMap Map Control Options

Most of the control options contain a position property which indicates where on the map to place the control. The following control POSITIONS are supported:

  • TOP CENTER indicates that the control should be placed along the top center of the map.
  • TOP LEFT indicates that the control should be placed along the top left of the map, with any sub-elements of the control "flowing" towards the top center.
  • TOP RIGHT indicates that the control should be placed along the top right of the map, with any sub-elements of the control "flowing" towards the top center.
  • LEFT TOP indicates that the control should be placed along the top left of the map, but below any TOP LEFT elements.
  • RIGHT TOP indicates that the control should be placed along the top right of the map, but below any TOP RIGHT elements.
  • LEFT CENTER indicates that the control should be placed along the left side of the map, centered between the TOP LEFT and BOTTOM LEFT positions.
  • RIGHT CENTER indicates that the control should be placed along the right side of the map, centered between the TOP RIGHT and BOTTOM RIGHT positions.
  • LEFT BOTTOM indicates that the control should be placed along the bottom left of the map, but above any BOTTOM LEFT elements.
  • RIGHT BOTTOM indicates that the control should be placed along the bottom right of the map, but above any BOTTOM RIGHT elements.
  • BOTTOM CENTER indicates that the control should be placed along the bottom center of the map.
  • BOTTOM LEFT indicates that the control should be placed along the bottom left of the map, with any sub-elements of the control "flowing" towards the bottom center.
  • BOTTOM RIGHT indicates that the control should be placed along the bottom right of the map, with any sub-elements of the control "flowing" towards the bottom center.

vMap Map Control Options

Property Description
Map Type Control

Show/Hide Map Type Controller. It lets the user toggle between map types (roadmap and satellite).

vMap also allows you to control its style and position.


Choose a Style for Map Type Controller.

vMap Map Control Options

Choose a Position for Map Type Controller

vMap Map Control Options

Zoom Control

Show/Hide Zoom Controller. It displays "+" and "-" buttons for changing the zoom level of the map.


Choose a Style for Map Type Controller.

vMap Map Control Options

Choose a Position for Map Type Controller

vMap Map Control Options

Pan Control

Show/Hide Pan Controller. It displays a pan control for panning the map. You can also choose the position form the dropdown list.

vMap Map Control Options

Street View Control

Enables/Disables the Pegman control that lets the user activate a Street View panorama. It displays a Pegman icon on Map which can be dragged to the map to enable Street View. You can choose its position as well.

vMap Map Control Options

Scale Control

Enables/Disables the Scale control on the Map that provides a simple map scale. You can also set its position to be display on the map.

vMap Map Control Options

Enable Direction Enable/Disable Direction Service on the Map. It communicates with the Google Maps API Directions Service which receives direction requests and returns computed results.
Enable Polyline Enable/Disable Polyline on the Map. Directions are displayed as a polyline drawing the route on a map. You can also set a custom color of polyline through a color picker tool.
Show Locate Me Enable/Disable Show Locate Me option to share your location which displays your current location on the Map
Map Layers

Layers may alter the presentation layer of the map itself, slightly altering the base tiles in a fashion consistent with the layer. When you calculate directions, you need to specify which Map Layer to use. The following Map Layers are currently supported:

  • The Traffic layer displays traffic conditions on the map.
  • The Transit layer displays the public transport network of your city on the map.
  • The Bicycling layer renders a layer of bike paths and/or bicycle-specific overlays into a common layer.

vMap Map Control Options

Marker Options

The Marker Options Section provides various parameters which allows you to control your Markers on the map.

vMap Map Marker Options

Property Description
Markers Data

If you want to include markers manually using vMap or want to use imported makers through CSV file, Keep #__vmap table selected but If you want to display the markers from your existing database then select table and its respective columns. On Selecting a table, some additional fields will be display to take further input

vMap Map Marker Options

  • Select a column Name for Title of the Marker.
  • Select column Name for the Address of the Marker. You can have multiple column name separated by semi colon.
  • Select a column Name for Latitude of the Marker.
  • Select a column Name for Longitude of the Marker.
  • Select a column name for Message of the Marker.
Dynamically Load Markers Set “YES” if you want to load markers as per the Map Viewport. Map View port changes when you drag, zoom in, zoom out etc. if it set to “No” all the markers available on the map will display all together in Map Viewport.
Marker Width Set the width of the marker. Unit: pixel
Marker Height Set the height of the marker. Unit: pixel
No. of Marker on Map Set the quantity of the markers you want to display on the map.
Marker Animation vMap allows you to set he Marker Animations. You can set the animation either to BOUNCE or DROP.
Default Marker Image Set the default marker image from the dropdown list. There are various marker icons VMap has got by default.

Info Window Options

The Info window Options Section provides various parameters which allows you to customize the Marker Info Window as per your need.

vMap Map Info Window Options

Property Description
Display Info Window Show/Hide Info-Window on the map. An Info-Window displays content (usually text or images) in a popup window above the map, at a given location.
Info Window width Set the width of the info window in pixels.
Info Window height Set the height of the info window in pixels.
Info Window opens On When you create an info window, it is not displayed automatically on the map. Choose the option from the list (i.e. click or mouse over) to make the info window visible on the map
Include in Info Window Please select the options you want to display in Info Window (you can select multiple option)