GithubHelp home page GithubHelp logo

orlac / angular-ymaps Goto Github PK

View Code? Open in Web Editor NEW

This project forked from just-boris/angular-ymaps

0.0 2.0 0.0 127 KB

Yandex Maps API as an Angular JS direcitive

Home Page: http://catatron.com/angular-ymaps/

JavaScript 100.00%

angular-ymaps's Introduction

Angular-ymaps Build Status

Yandex Maps API as an Angular JS direcitive.

Это модуль для Angular JS, предназначенный для простого подключения и работы с Яндекс-картами. С его помощью можно вставлять Яндекс карту на страницу через html-тег, так же просто как img или button

###Документация и пример использования

###Подключение

  • Скачать библиотеку или ее упакованную версию
  • Подключить скрипт на страницу <script src="angular-ymaps.js"></script>
  • Добавить модуль ymaps в зависимости своего angular-приложения angular.module('MyApp', ['ymaps'])
  • Теперь можно использовать в HTML новые теги
    • <yandex-map> - Яндекс-карта
    • <ymap-marker> - маркер на карте, вставляется только внутрь тега <yandex-map>

Bower

Можно установить библиотеку из bower:

bower install angular-ymaps --save

API

####Тег yandex-map:

<yandex-map center="map.center" zoom="map.zoom"></yandex-map>

Добавляет Яндекс-карту на страницу. Размеры карты определяются размерами элемента, их можно задать в css. При создании нужно указать два обязательных атрибута:

  • center(Array) - массив из двух чисел, широта и долгота центра карты
  • zoom(Number) - число, от 0 до 23, масштаб карты. Во избежание ошибок нужно задавать разрешенный масштаб для указанной области

####Тег ymap-marker:

Может использоваться только внутри тега карты, добавляет на нее точку. Имеются следующие атрибуты

  • coordinates(Array) - массив из двух чисел, широта и долгота маркера на карте (обязательный)
  • index(String) - текст, который пишется на маркере
  • properties(Object) - свойства метки, передаются в ymaps.GeoObject. Здесь может быть текст балуна, который открывается при нажатии на метку, или всплывающей при наведении подсказки. Подробнее - в документации Яндекс, описание параметра properties.

####Глобальные настройки

Можно управлять видом и функциоальностью карты через свойства, вынесенные в константу ymapsConfig:

  • apiUrl (String) - ссылка для загрузки API карт. Может переопределяться для загрузки другой версии. По умолчанию загружается 2.1-stable
  • mapBehaviors (Array) - возможные поведения карты, массив ключей, которые принимает ymaps.map.behavior.Manager. Стандартное значение: ['default']
  • markerOptions (Object) - опции, передаваемые ymaps.GeoObject, то есть настройки внешнего вида и поведения маркеров на карте. Стандартное значение: {preset: 'islands#darkgreenIcon'}
  • clusterize (Boolean) – объединять ли маркеры в кластеры. По умолчанию false
  • clusterOptions (Object) - опции кластера ymaps.Clusterer, применяются если включена кластеризация. Стандартное значение: {preset: 'islands#darkGreenClusterIcons'}
  • fitMarkers (Boolean) - автоматически подстраивать видимую область и масштаб карты, чтобы было видно все точки на карте. Стандартное значение: true
  • fitMarkersZoomMargin (Boolean) – отступ от границ карты при подстраивании масштаба под маркеры. Стандартное значение: 40 (px)

angular-ymaps's People

Contributors

bopm avatar just-boris avatar orlac avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.