- Products ProductsLocation Services
Solve complex location problems from geofencing to custom routing
PlatformCloud environments for location-centric solution development, data exchange and visualization
Tracking & PositioningFast and accurate tracking and positioning of people and devices, indoors or outdoors
APIs & SDKsEasy to use, scaleable and flexible tools to get going quickly
- Documentation
- Pricing
- Resources ResourcesTutorials TutorialsExamples ExamplesBlog & Release Announcements Blog & Release AnnouncementsChangelog ChangelogDeveloper Newsletter Developer NewsletterKnowledge Base Knowledge BaseFeature List Feature ListSupport Plans Support PlansSystem Status System StatusLocation Services Coverage Information Location Services Coverage InformationSample Map Data for Students Sample Map Data for Students
- Maps
- Data display
- Styles and Layers
- Markers
- Geoshapes
- Resizable Geoshapes
- Clustering
- Events
- Info Bubbles
- Services - Routing, Geocoding
- Map with Driving Route from A to B
- Map with Pedestrian Route from A to B
- Truck routing road restrictions
- Map with Route from A to B using Public Transport
- Map with isoline route
- Search for a Location based on an Address
- Search for a Location given a Structured Address
- Search for the Address of a Known Location
- Search for a Landmark
- Integration of Fleet Telematics Services
- Integration with the HERE Style Editor
- Indoor Map
- JavaScript
- HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Context menu</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="../template.css" />
<script type="text/javascript" src='../test-credentials.js'></script>
<script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script>window.ENV_VARIABLE = 'developer.here.com'</script><script src='../iframeheight.js'></script></head>
<body id="markers-on-the-map">
<div class="page-header">
<h1>Context menu</h1>
<p>Adding a context menu to map objects</p>
</div>
<p>This example shows how to add a context menu for the map and map objects. Map has a default context items to show the click position, centring the map and creating a circle. Circles have their own context menu item to remove them.
</p>
<div id="map"></div>
<h3>Code</h3>
<p>In order to add context menu items, first you need to subscribe to contextmenu event. ContextMenuEvent has a special items property, where menu items are stored. Each menu item is an instance of H.util.ContextItem class.
</p>
<p>By default new menu items does not replace the previous ones, instead all items are collected and displayed together. However you can easily modify the items array to change this behaviour. </p>
<p>Context items can be visually separated from each other by using the H.util.ContextItem.SEPARATOR.
</p>
<script type="text/javascript" src='demo.js'></script>
</body>
</html>
