---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/index.md
  - https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/index.md
title: Code examples
description: This article includes links to Vanilla, React JS or Vue JS code samples.
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt


# Code examples

{% note info %}

You can fork and edit all examples as you like, this will not break them.

{% endnote %}

## Map



- [Resizing the map](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/fillcontainer.md)
- [Hosting maps in the hidden container](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/hiddendiv.md)
- [Creating and deleting](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/mapbasics.md)
- [General parameters](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/mapparams.md)
- [Map margins manager](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/margin_manager.md)
- [Creating maps on demand](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/request_map.md)

## User's location



- [Creating a map with the user's location](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/geolocated_map.md)
- [Detecting user location](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/geolocation.md)
- [Adding the "Geolocation" button](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/geolocation_control.md)

## GeoXML



- [Displaying GPX and KML](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/geoxml_display.md)

## Geoobjects



- [The arrow on the map](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/arrow.md)
- [Circle](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/circle.md)
- [Specifying images for the polyline editor](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/editor_icon_layout.md)
- [Changing a placemark icon when hovering over it](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/event_rollover.md)
- [Adding geo objects to a collection](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/geo_object_collection.md)
- [Geo link](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/geolink.md)
- [Changing the placemark settings](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/geoobject_contextmenu.md)
- [Geo object events](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/geoobject_events.md)
- [Setting a custom placemark image](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/icon_customImage.md)
- [Glyph icons](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/icon_glyph.md)
- [Multistroke outline](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/multystroke.md)
- [Getting the list of map objects](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/object_list.md)
- [Placemark](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/placemark.md)
- [Setting a hotspot shape of the HTML layout of the placemark](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/placemark_shape.md)
- [Polygon](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/polygon.md)
- [Polygon editor](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/polygonEditor.md)
- [Filling a polygon with the image](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/polygon_with_image.md)
- [Polyline](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/polyline.md)
- [Polyline editor](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/polylineEditor.md)
- [Rectangle](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/rectangle.md)

## GeoQuery



- [Positioning the map to display geocoding results and clustering](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/apply_bounds_and_clusterize.md)
- [Loading geo data using jQuery and adding it to the map](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/data_load_jquery.md)
- [Searching for the nearest object.](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/find_closest_object.md)
- [Filtering objects by various attributes](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/geoobjects_menu.md)
- [Points falling within a circle](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/placemarks_in_circle.md)
- [The intersection of a route with a polygon using the example of the Moscow Ring Road](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/route_inside_polygon.md)
- [Adding objects to the visible area of the map](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/show_visible_objects.md)

## Balloon and hint



- [Dynamically loading balloon content](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/balloon_ajax.md)
- [Balloon and hint](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/balloon_and_hint.md)
- [Custom balloon layout with autopositioning](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/balloon_autopan.md)
- [Balloon that goes off the map](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/balloon_out_of_map.md)
- [Placemark and balloon panel](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/placemark_balloon.md)
- [The layout of the placemark balloon](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/placemark_balloon_layout.md)
- [The layout of the placemark hint](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/placemark_hint_layout.md)

## Behaviors and events



- [Map behavior](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/behaviors.md)
- [Subscribing to the DOM element events](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/dom_event_manager.md)
- [Using the dragger](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/dragger.md)
- [Event properties. Click coordinates](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/event_properties.md)

## Clustering



- [Layout for cluster balloon "Accordion"](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/cluster_balloon_accordion.md)
- [Layout for cluster balloon "Carousel"](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/cluster_balloon_carousel.md)
- [Layout for cluster balloon "Two columns"](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/cluster_balloon_twoColumns.md)
- [Custom cluster balloon layout](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/cluster_custom_balloon_content_layout.md)
- [Opening the cluster balloon with the selected object](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/clusterer_balloon_open.md)
- [Creating a clusterer](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/clusterer_create.md)
- [Creating a clusterer with arbitrary icons](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/clusterer_custom_icon.md)
- [Changing the clusterer cell size](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/clusterer_gridSize.md)
- [Changing the color of clusters and placemarks when hovering](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/clusterer_icon_hover.md)
- [Layout in the form of a pie chart](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/clusterer_pie_chart.md)

## Controls



- [Adding buttons to the map](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/button.md)
- [Custom button layout](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/button_layout.md)
- [Adding individual controls](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/customSet_controls.md)
- [Custom control](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/custom_control.md)
- [Standard sets of controls](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/default_controls.md)
- [Creating a custom drop-down list layout](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/list_box_layout.md)
- [Custom layout for the zoom control](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/zoom_layout.md)

## External module



- [Heatmap with CCTV cameras](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/security_cameras.md)

## Modular system



- [Creating your own module](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/custom_module.md)
- [Loading the module on demand](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/module_request.md)

## ObjectManager



- [Adding objects to the map via ObjectManager](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/object_manager.md)
- [Opening the balloon on the placemark in ObjectManager](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/object_manager_balloon.md)
- [Loading the placemark balloon data on demand](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/object_manager_balloon_async.md)
- [Event handling in objects of ObjectManager](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/object_manager_events.md)
- [Filtering objects](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/object_manager_filter.md)
- [Adding a GeoJSON file to the map from the maps constructor](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/object_manager_geojson.md)
- [Adding placemarks with various options and content to the ObjectManager](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/object_manager_options.md)
- [Adding objects with different geometries to the map.](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/object_manager_spatial.md)

## Panoramas



- [Inserting into the Yandex panoramas page](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/panorama_basics.md)
- [Displaying a panorama in the balloon](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/panorama_in_balloon.md)

## Routing



- [Calculating delivery cost](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/deliveryCalculator.md)
- [Custom layout for the multiroute balloon](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/multiroute_custom_balloon_layout.md)
- [Working with the multiroute model data and events](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/multiroute_data_access.md)
- [Building a driving multiroute](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/multiroute_driving.md)
- [Editing a multiroute](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/multiroute_edit.md)
- [Building a multiroute on public transport](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/multiroute_masstransit.md)
- [Building a pedestrian multiroute](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/multiroute_pedestrian.md)
- [Working with multiroute data and events](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/multiroute_view_access.md)
- [Configuring the view of a multiroute](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/multiroute_view_options.md)
- [Building a route](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/router.md)
- [Editing a route](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/router_editor.md)
- [Route to the point on the map](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/routes_to_point.md)

## Search on a map



- [Searching across your own objects](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/custom_search.md)
- [Custom display for search results](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/custom_search_results.md)
- [Direct geocoding](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/direct_geocode.md)
- [Determining the address of a click on the map using reverse geocoding](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/event_reverse_geocode.md)
- [Reverse geocoding](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/reverse_geocode.md)
- [Searching for organizations](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/search_control_ppo.md)

## Traffic



- [Traffic control](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/traffic_control.md)
- [Traffic layer on the map without buttons added](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/traffic_provider.md)

## YMapsML



- [Changing the balloon content template.](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/ymapsml_ballooncontentstyle.md)
- [Converting GeoRSS to YMapsML](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/ymapsml_georss.md)
- [Closed polyline](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/ymapsml_linearring.md)
- [Polyline](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/ymapsml_linestring.md)
- [Loading styles from a separate file](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/ymapsml_loadstyles.md)
- [Changing the map type](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/ymapsml_maptype.md)
- [Creating a menu for displaying groups of objects](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/ymapsml_menu.md)
- [Style inheritance](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/ymapsml_parentstyle.md)
- [Polygon](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/ymapsml_polygon.md)
- [Setting the object style](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/ymapsml_setstyle.md)
- [Displaying geocoding results](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/ymapsml_showhttpgeocoderresult.md)
- [Adding placemarks to the map](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/ymapsml_simpleobject.md)