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
Hotspot layer
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
"Traffic" controlTraffic layer on the map without buttons added
User's location
Detecting user locationAdding the "Geolocation" buttonCreating a map with the 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
Displaying GPX and KML
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
Loading the module on demandCreating your own module
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
Heatmap with CCTV cameras

Defining placemark images using CSS sprites

Save as filesEdit on JSFiddle

You can define placemark images using CSS sprites.

In order to set the desired image from a sprite as the placemark icon, this placemark must have the following options set:

  • iconImageCliptRect — the position of the desired image in the sprite. It is defined by the pixel coordinates of the upper-left and lower-right corners of the rectangle the image is placed in.
  • iconImageHref — URL of the sprite.
  • iconImageSize — Icon size.
  • iconImageOffset — Offset of the icon relative to the anchor point of the object.
  • iconLayout — The icon layout. This option must have the 'default#image' value set.

For more information about using sprites, see the documentation.

Пишете на JavaScript? У нас есть вакансии
Mon Oct 31 2022 13:07:35 GMT+0300 (Moscow Standard Time)