Log in
Log in
Version:
Popular examples
Using a custom image for the placemarkEfficiently adding lots of placemarks to the mapRoute to the point on the mapSearching for organizationsCalculating delivery costGeo link
Map
Creating and deletingHosting maps in the hidden containerGeneral parametersCreating maps on demandResizing the mapCreating your own mapMap margins managerThe polar azimuthal equidistant projection
Geo objects
PlacemarkSetting a custom placemark imageDefining placemark images using CSS spritesPolylineRectanglePolygonFilling a polygon with the imageSpecifying images for the polyline editorCircleThe arrow on the mapMultistroke outlineAdding geo objects to a collectionPolyline editorPolygon editorGetting the list of map objectsGeo object eventsChanging the placemark settingsChanging a placemark icon when hovering over itSetting a hotspot shape of the HTML layout of the placemarkGlyph icons
Balloon and hint
Balloon and hintBalloon that goes off the mapDynamically loading balloon contentPlacemark and balloon panelThe layout of the placemark hintThe layout of the placemark balloonCustom balloon layout with autopositioning
Controls
Standard sets of controlsAdding individual controlsAdding buttons to the mapCustom button layoutCustom layout for the zoom controlCreating a custom drop-down list layoutCustom control
Hotspots
Clustering
Creating a clustererCreating a clusterer with arbitrary iconsChanging the color of clusters and placemarks when hoveringOpening the cluster balloon with the selected objectChanging the clusterer cell sizeLayout for cluster balloon "Two columns"Layout for cluster balloon "Accordion"Layout for cluster balloon "Carousel"Custom cluster balloon layoutLayout in the form of a pie chart
GeoQuery
Points falling within a circleSearching for the nearest object.Adding objects to the visible area of the mapThe intersection of a route with a polygon using the example of the Moscow Ring RoadFiltering objects by various attributesPositioning the map to display geocoding results and clusteringLoading geo data using jQuery and adding it to the map
Behaviors and events
Map behaviorSubscribing to the DOM element eventsEvent properties. Click coordinatesUsing the dragger
Search on a map
Direct geocodingReverse geocodingDetermining the address of a click on the map using reverse geocodingSearching for organizationsSearching across your own objectsCustom display for search results
Traffic
User's location
Routing
Building a driving multirouteBuilding a multiroute on public transportBuilding a pedestrian multirouteConfiguring the view of a multirouteCustom layout for the multiroute balloonWorking with multiroute data and eventsWorking with the multiroute model data and eventsEditing a multirouteBuilding a routeEditing a routeCalculating delivery cost
YMapsML
Changing the map typeAdding placemarks to the mapChanging a placemark iconPolylineClosed polylinePolygonSetting the object styleStyle inheritanceLoading styles from a separate fileChanging the balloon content template.Displaying geocoding resultsCreating a menu for displaying groups of objectsConverting GeoRSS to YMapsML
GeoXML
ObjectManager
Adding objects to the map via ObjectManagerEvent handling in objects of ObjectManagerOpening the balloon on the placemark in ObjectManagerLoading the placemark balloon data on demandAdding objects with different geometries to the map.Adding placemarks with various options and content to the ObjectManagerAdding a GeoJSON file to the map from the maps constructorFiltering objects
Modular system
Panoramas
Inserting into the Yandex panoramas pageCreating your own panoramaAdding markers to the panoramaCreating connections between custom panoramasDisplaying a panorama in the balloon
External modules
Adding markers to the panorama
Save as filesEdit on JSFiddle
Пишете на JavaScript? У нас есть вакансии
Mon Oct 31 2022 13:07:25 GMT+0300 (Moscow Standard Time)
This example shows how to display markers on a custom panorama.
To add a marker to the panorama, create a class that describes the marker (in the example, this is the Marker class). This class must implement the IPanoramaMarker interface. In addition, add the getMarkers method to the panorama class (MyPanorama in the example). This method should return instances of the Marker class.
Note that the API doesn't have any marker images, so you have to create them yourself.
Depending on the user's actions, the marker can have one of the following states: 'default', 'hovered', 'expanded' or 'expandedHovered'.
In order for the marker's appearance to change for different states, you need to define images for these states. The image for the 'default' state is always required.
This example sets images for three marker states: 'default', 'hovered' and 'expanded'. Images for the first two states are stored on the server, and the image for the 'expanded' state is drawn in Canvas.
Note that the example shows a panorama without a full vertical view. The documentation discusses projecting this panorama on a sphere, and explains how to set the geometry of this panorama.