API Спутник/КартыJavaScript API Спутник/Карты

JavaScript API Спутник/Карты

Список маркеров

Создаем карту и описываем множество маркеров в формате GeoJson. В features[i].geometry.type задается значение Point, а в features[i].properties задаются тип иконки iconType, подпись маркера title для попапа и другие свойства точки.

Верстку попапа можно задать шаблоном в поле features[i].popupTemplate. В шаблоне можно использовать HTML и подставлять значения из объекта features[i].properties, указав имя свойства в фигурных скобках.

Пример:


<div id="map1" class="user-map map"></div>

<script>
    var map1 = L.sm.map('map1', {center: [55.775, 37.624], zoom: 12});

    var markers1 = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [37.5838, 55.7767]
                },
                "properties": {
                    "iconType": "alt3",
                    "title": "Станция метро Белорусская"
                },
                "popupTemplate": "<p>{title}</p>"
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [37.6559, 55.7732]
                },
                "properties": {
                    "title": "Казанский вокзал"
                },
                "popupTemplate": "<p>{title}</p>"
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [37.6322, 55.7943]
                },
                "properties": {
                    "markerType": "alt2",
                    "title": "Рижский вокзал"
                },
                "popupTemplate": "<b>{title}</b>"
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [37.5922, 55.7433]
                },
                "popupTemplate": "{title}",
                "properties": {
                    "title": "просто точка"
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [37.6611, 55.7569]
                },
                "properties": {
                    "title": "Курский вокзал"
                },
                "popupTemplate": "<u>{title}</u>"

            }
        ]
    };

    L.sm.geoJson(markers1).addTo(map1);

</script>

Отображение геометрии

GeoJson позволяет описывать геометрические фигуры разных типов. А плагин GeoJsonCSS стилизует фигуры при помощи свойств:

  • features[i].className - CSS-класс
  • features[i].style - SVG-style

Здесь также можно использовать попапы и подстановку значений.

<div id="map2" class="user-map map"></div>

<script>
    var map2 = L.sm.map('map2', {center: [55.755, 37.624], zoom: 13});
    var geoJsonCssData2 = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {
                    "title": "Kremlin"
                },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[
                        [37.61489152908325,55.752586015356876],
                        [37.61577129364014,55.7539867694403],
                        [37.616543769836426,55.75506145183324],
                        [37.6177453994751,55.75443355110991],
                        [37.619526386260986,55.753491681072205],
                        [37.62143611907959,55.75252563689488],
                        [37.62117862701416,55.75211506087468],
                        [37.61875391006469,55.750762544596384],
                        [37.61813163757324,55.749989657097],
                        [37.61302471160889,55.749035602973365],
                        [37.612552642822266,55.74907183330299],
                        [37.6134967803955,55.750641781933986],
                        [37.61489152908325,55.752586015356876]
                    ]]
                },
                "className": "wow",
                "style": {
                    "color": "#CC0000",
                    "weight": 2,
                    "fill-opacity": 0.6,
                    "opacity": 1,
                    "dashArray": "3, 5"
                },
                "popupTemplate": "<strong>{title}</strong>"
            },
            {
                "type": "Feature",
                "properties": {
                    "title": "Kremlin embankment"
                },
                "geometry": {
                    "type": "MultiLineString",
                    "coordinates": [[[37.611907,55.747355],[37.612639,55.747611],[37.613671,55.747839],[37.614446,55.748040],[37.616002,55.748446],[37.616364,55.748537],[37.616573,55.748585],[37.616779,55.748627],[37.617038,55.748677],[37.618375,55.748887],[37.620201,55.749173],[37.620494,55.749215],[37.620723,55.749246],[37.621209,55.749296],[37.622037,55.749388],[37.622402,55.749421],[37.622745,55.749461],[37.622990,55.749484],[37.623206,55.749507],[37.623680,55.749562],[37.624266,55.749640]],[[37.624245,55.749770],[37.623771,55.749678],[37.623476,55.749623],[37.623147,55.749577],[37.621484,55.749414],[37.620021,55.749222],[37.618740,55.749021],[37.617359,55.748819],[37.616927,55.748750],[37.616755,55.748721],[37.616592,55.748691],[37.616413,55.748652],[37.616225,55.748608],[37.614894,55.748251],[37.614139,55.748055],[37.613795,55.747971],[37.613487,55.747906],[37.612526,55.747741],[37.612248,55.747656],[37.611791,55.747497]]]
                },
                "style": {
                    "weight": 4,
                    "color": "#2222DD",
                    "opacity": 1
                },
                "popupTemplate": "<i>{title}</i>"
            },
            {
                "type": "Feature",
                "properties": {
                    "title": "Alexandrovskiy sad"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [37.61001, 55.752301]
                },
                "style": {
                    "icon": {
                        "iconUrl": "https://raw.githubusercontent.com/albburtsev/Leaflet.geojsonCSS/master/demo/metro.png",
                        "iconSize": [32, 32],
                        "iconAnchor": [16, 16]
                    }
                },
                "popupTemplate": "{title}"
            },
            {
                "type": "Feature",
                "properties": {
                    "title": "Okhotny ryad"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [37.617317, 55.75725]
                },
                "style": {
                    "icon": {
                        "iconUrl": "https://raw.githubusercontent.com/albburtsev/Leaflet.geojsonCSS/master/demo/metro.png",
                        "iconSize": [32, 32],
                        "iconAnchor": [16, 16]
                    }
                },
                "popupTemplate": "{title}"
            },
            {
                "type": "Feature",
                "properties": {
                    "title": "Ploschad Revolutsii"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [37.622674, 55.756922]
                },
                "style": {
                    "icon": {
                        "iconUrl": "https://raw.githubusercontent.com/albburtsev/Leaflet.geojsonCSS/master/demo/metro.png",
                        "iconSize": [32, 32],
                        "iconAnchor": [16, 16]
                    }
                },
                "popupTemplate": "{title}"
            }
        ]
    };

    L.sm.geoJson(geoJsonCssData2).addTo(map2);

</script>

Пример на отдельной странице

Дополнительная информация