Map
- Last Updated: May 5, 2026
- 4 minute read
- MarkLogic Server
- Documentation
The FastTrack Map widget is based on the KendoReact Map component and displays geospatial data on an interactive map. Developers can configure these layer types for the widget:
-
Tile Layer: Displays raster tiles from popular online providers such as OpenStreetMap.
-
Marker Layer: Displays icon markers at points of interest based on latitude and longitude coordinates.
-
Shape Layer: Displays vector-based shapes encoded in the industry-standard GeoJSON format.
Note:
A Map widget may have multiple layers of the same type defined. For example, to display different marker icon styles on a single map, you can define a marker layer for each icon style.
Tile layer
This code defines a MapTiles object to display a tile layer from OpenStreetMap. For more information, see the KendoReact documentation for Tile Layer. The map also has default center and zoom values.
import { Map } from "ml-fasttrack";
// ...
<Map
center={[33, -98]}
zoom={4}
layers={{
MapTiles: {
urlTemplate: (e) =>
`https://${e.subdomain}.tile.openstreetmap.org/${e.zoom}/${e.x}/${e.y}.png`,
subdomains: ["a", "b", "c"],
attribution:
'© <a href="https://osm.org/copyright">OpenStreetMap contributors</a>',
},
}}
/>
// ...
Example rendering:
 |
Marker layer
This code defines a MapMarkers object that displays a map with a marker layer along with a tile layer. Markers in the Map widget are defined with their latitude and longitude coordinates in a data property. For more information, see the KendoReact documentation for Marker Layer.
import { Map } from "ml-fasttrack";
// ...
<div style={{ width: "800px", height: "400px", overflow: "hidden" }}>
<Map
center={[37.9100, -122.0652]}
zoom={10}
layers={{
MapTiles: // see Tile Layer example above
MapMarkers: [
{
props: {
data: [
{ latlng: [ 38.1040, -122.2566 ], name: 'Venus Cleaners' }
],
locationField: 'latlng',
shape: 'car',
titleField: 'name'
}
},
{
props: {
data: [
{ latlng: [ 38.0050, -121.8058 ], name: 'Acme Gas' }
],
locationField: 'latlng',
titleField: 'name'
}
},
{
props: {
data: [
{ latlng: [ 37.9100, -122.0652 ], name: 'Wilson Cafe' }
],
locationField: 'latlng',
shape: 'alert',
titleField: 'name'
}
}
]
}}
/>
</div>
// ...
Example rendering:
 |
Marker shapes
- alert
- anchor
- bag
- bed
- beer
- bell
- bicycle
- bolt
- book
- bus
- camera
- car
- cart
- chess
- coffee
- compass
- cross
- dog
- dollar
- envelope
- film
- fire
- flag
- flag-checkered
- gas
- gift
- globe
- graduation
- heart
- home
- hospital
- leaf
- lightbulb
- lock
- magnet
- medkit
- microphone
- moon
- mountain
- music
- organization
- palette
- palm
- parking
- paw
- person
- pin
- plane
- puzzle
- rocket
- scissors
- school
- shield
- ship
- snowflake
- star
- stethoscope
- store
- sun
- tooth
- train
- tree
- trophy
- users
- utensils
- water
- wrench
To define a custom shape, specify an identifying string for the custom shape in the shape property, for example “my-shape”. A CSS class name will be defined for the shape with the following format .k-i-marker-my-shape.
You can style a CSS class to display the custom shape, for example:
.k-i-marker-my-shape::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f7a6'; /* Guitar icon */
}
This example assumes you have the appropriate fonts from Font Awesome installed for your application.
Similarly, you can override the predefined shapes with CSS. For example, to define the color of the “alert” icon:
.k-i-marker-alert::before {
color: blue;
}
Shape layer
This code defines a MapShapes object that displays a map with a shape layer along with marker and tile layers. Shapes in the Map widget are encoded in the GeoJSON format. For more information, see the KendoReact documentation for Shape Layer.
import { Map } from "ml-fasttrack";
// ...
<div style={{ width: "800px", height: "400px", overflow: "hidden" }}>
<Map
center={[37.9100, -122.0652]}
zoom={10}
layers={{
MapTiles: // see Tile Layer example above
MapMarkers: // see Markers Layer example above
MapShapes: [{
props: {
data: {
features: [
{
geometry: {
coordinates: [
[
[ -122.2566, 38.1040 ],
[ -121.8058, 38.0050 ],
[ -122.0652, 37.9100 ]
]
],
type: 'Polygon'
},
properties: { name: 'Triangle' },
type: 'Feature'
}
],
type: 'FeatureCollection'
},
style: {
fill: { color: 'rgba(0,128,0,0.4)' },
stroke: { color: 'green', width: 2 }
}
}
}],
}}
/>
</div>
// ...
Example rendering:
 |
Event handling
The Map widget emits events for various user interactions, and you can recognize those events with callbacks. This example handles events for map, marker, and shape clicks:
import { Map } from "ml-fasttrack";
// ...
<div style={{ width: "800px", height: "400px", overflow: "hidden" }}>
<Map
center={[37.9100, -122.0652]}
zoom={10}
onMapClick={(e) => console.log("Map clicked at: ", e.location.lat, e.location.lng)}
onMarkerClick={(e) => console.log("Marker clicked: ", e.marker.dataItem.name)}
onShapeClick={(e) => console.log("Shape clicked: ", e.shape.dataItem.properties.name)}
layers= // see previous examples above
/>
</div>
// ...
For a description of all the available Map events, see the KendoReact documentation for Map Events.
For more examples and information about the Map widget, see FastTrack Storybook.