JavaScript Maps Library - A Feature Rich Maps Component

GeoJSON layer

Bind GeoJSON data to the maps to render any geometric shape in SVG (Scalable Vector Graphics) for data visualization of shapes. For example, render the world map or US map and customize it to the desired look using built-in options in the JavaScript Maps control. Add any number of layers to the maps.

• GeoJSON layer example
• GeoJSON layer documentation

Geometry types

GeoJSON data contains geometry objects with properties such as geometry types and coordinates. The geometry types are the values present in the geometry objects of the GeoJSON data that specify the type of shape to be rendered, along with the coordinates that help to draw the shape’s boundary line. Polygon, MultiPolygon, LineString, MultiLineString, Point, MultiPoint, and GeometryCollection are the supported geometry types.

Geo-imagery visuals

Built-in support for external geospatial imagery services, such as Bing Maps and OpenStreetMap, is used to visualize satellite, aerial, and street maps, or other kinds of imagery tiles without any external shape inputs. Apart from Bing Maps and OpenStreetMap, users can also render maps from various map providers, for example, Google Maps Tile API, TomTom, Mapbox, Esri’s ArcGIS, etc. By using these external services, map data can be located easily.

• OpenStreetMap example
• OpenStreetMap, Bing Maps and other map providers documentation

Multi-layers

Using sublayer, a JavaScript Map can be created with multiple geometric layers in a single view. For example, render additional geographic features of a country such as rivers, valleys, and more as sublayer. You can also drill each layer.

• Multi-layers example
• Multi-layers documentation

Marker

Denote a place with symbols or mark messages at the desired latitude and longitude on a map using markers. For example, indicate a particular place on the US map using a balloon marker shape. Also, place any HTML element as a marker and add multiple markers to the map.

• Default marker example
• Marker template example
• Marker documentation

Marker clustering

Display multiple markers in the same location by clustering the markers overlapping one another. For example, use markers to indicate the top 50 cities in the world. If a marker overlaps another, it will be clustered, and the total number of markers will be displayed over the cluster.

• Marker clustering example
• Marker clustering documentation

Data labels

Data labels on the map provide identification for the shapes by displaying their names. Trim or hide the labels at intersections with other labels and when they exceed shape bounds.

• Data labels example
• Data labels documentation

Bubble

Create a simple JavaScript Map with bubbles to represent additional information about shapes such as population density, land area, and more. Bubbles are rendered with various magnitudes and colors based on the underlying data values of the shape.

• Bubbles example
• Bubbles documentation

Navigation lines

Denote flight routes or ship routes on a geographic map between two places. These connector lines link points on a map and can also be curved.

• Navigation lines example
• Navigation lines documentation

Zooming and panning

Zoom the JavaScript Map for close-up analysis by pinching the map, scrolling the mouse wheel, clicking the shapes, or by using zooming toolbar; and pan the map for easy navigation across regions. Also change the zoom level of the initial rendering.

• Zooming and panning example
• Zooming and panning documentation

Tooltip

The tooltip displays details about the shape value on mouse hover. Tooltips are also displayed for markers and bubbles on a map.

• Tooltip example
• Tooltip documentation

Drill-down

Drill-down the rendered JavaScript Maps to display a different shape data located on another layer. For example, in the initial layer render the world map and on clicking a particular continent, render it separately on another layer.

• Drill-down example
• Drill-down documentation

Selection and highlight

Select a particular shape on mouse click or highlight on mouse hover to bring the focus to the other shapes on a map.

• Selection and highlight example
• Selection documentation
• Highlight documentation

Custom shapes

Create a JavaScript Map with custom shapes by rendering personalized GeoJSON data to indicate building infrastructure, points of interest, flight/bus seat arrangement, cricket stadium, and more.

• Custom shapes example

Annotation

Display any HTML element as an annotation at a specific point of interest on a map. For example, place a direction compass image on the map using annotation. Also add multiple annotations to a map.

• Annotation example
• Annotation documentation

State persistence

State persistence allows the Maps component to maintain state by storing the most recent model value in browser cookies. When the appropriate setting is enabled, some of the Maps component model values are preserved even after the page is refreshed.

• State persistence documentation

Title and subtitle

Add title and subtitle to visualize additional information on the Maps. Fonts and alignment of the title and subtitle can also be customized.

Appearance

Customize the look and feel of a JavaScript Map by changing the fill color, background, border, and opacity of shapes. Almost all the elements in the JavaScript Maps are customizable. This control also provides built-in palettes with customizable options, by default.

• Appearance documentation

Localization

Users can localize all the strings used in the Maps user interface as needed. The localization (l10n) library is used to localize UI strings.

• Localization documentation