maps-swpb.xksi.pl

multimap - dokumentacja

Dostępne wersje

1.0 - multimap-1.0.js, multimap-1.0.min.js

Krok po kroku

Wczytanie pliku js

<script src="//maps-swpb.xksi.pl/multimap.js"></script>

lub

<script src="//maps-swpb.xksi.pl/multimap.min.js"></script>

Przygotowanie obszaru pod wstawienie mapy
```
<div id="id_mapy"></div>
```
div z mapą powinien mieć ustalone rozmiary.
Utworzenie obiektu multimap
```
var multimap = new ClassMultiMap();
```

Uruchomienie mapy

multimap.get({ /* ustawienia mapy */ });

Opcje mapy

targetId

id elementu mapy

Parametr wymagany

provider

wybór providera map

Domyślnie (nie podano): fallback

Dostępni providerzy:

fallback - domyślny provider wstawia link otwierający w nowej karcie mapę google wycentrowaną na pierwszym punkcie
mapbox - link
openstreetmap - link

providerConfig

Konfiguracja providera (jeśli wymagana)

Wartości są zależne od wybranego providera:

provider: mapbox
accessToken

Token dostępu z panelu administracyjnego mapbox, wymagany

tilesStyle
Styl mapy. Dostępne style:
- mapbox.streets (domyślny),
- mapbox.light,
- mapbox.dark,
- mapbox.satellite,
- mapbox.streets-satellite,
- mapbox.wheatpaste,
- mapbox.streets-basic,
- mapbox.comic,
- mapbox.outdoors,
- mapbox.run-bike-hike,
- mapbox.pencil,
- mapbox.pirates,
- mapbox.emerald,
- mapbox.high-contrast
Lista dostępnych styli znajduje się tutaj.
provider: fallback

linkText

Tekst linku do mapy google

Domyślnie: "mapa".

Parametr opcjonalny.

Pozostali providerzy na razie nie wymagają konfigurowania.

zoom

Domyślnie: auto

Tryb auto automatycznie dopasowuje zoom i pozycję mapy tak, aby zmieścić wszystkie wyświetlane punkty/obiekty

Tryb auto działa tylko w przypadku wielu punktów, lub kształtów.

Przy jednym punkcie domyślny zoom to 10

lang

Domyślnie: pl

Używane tylko w provider=fallback

points

tablica punktów do zaznaczenia markerami na mapie

Atrybuty punktu:

lat - szerokość geograficzna, wymagany
lon - wysokość geograficzna, wymagany
description - tekst na tooltipie, opcjonalny

Przykład:

{
    // ...
    "points": [
        {"lat": 12.3456, "lon": 78.90123, "description": "<b>Jakiś opis</b><br>tralalala"},
        {"lat": 12.3456, "lon": 78.90123, "description": "<b>Jakiś opis</b><br>tralalala"},
        // ...
    ],
    // ...
}

features

Funkcjonalność umożliwiająca nanoszenie na mapę zaawansowanych kształtów

Oparte na standardzie GeoJSON.

Prosty edytor dostępny pod adresem http://geojson.io/.

Zobacz przykłady.

Przykłady

Prosta mapa, jeden punkt, zoom=17, lang=de, provider: nie podano! (tryb fallback - link do mapy google)
```
<script>
multimap.get({
    'targetId': 'example-1',
    'points': [
        {'lat': 50.198703, 'lon': 18.905606}
    ],
    'zoom': 17,
    'lang': 'de'
});
</script>
```
Prosta mapa, dwa punkty, provider: mapbox
```
<script>
multimap.get({
    'targetId': 'example-2',
    'provider': 'mapbox',
    'providerConfig': {
        'accessToken': 'pk.eyJ1IjoibWlyZWt3cm9iZWwiLCJhIjoiY2pjZ2NjYmRzMWM5dTJ4cm5uOXI4djkxdSJ9.eKDxssVDJVzhm1qDszfmlg'
    },
    'points': [
        {'lat': 50.198600, 'lon': 18.905542, description: '<b>text1</b><br>text2', url: 'https://www.xksi.pl/'},
        {'lat': 50.193600, 'lon': 18.925542, description: '<b>text3</b><br>text4', url: 'https://www.xksi.pl/'}
    ],
    'zoom': 'auto',
    'lang': 'pl'
});
</script>
```
Prosta mapa, jeden punkt+zoom, provider: openstreetmap
```
<script>
multimap.get({
    'targetId': 'example-3',
    'provider': 'openstreetmap',
    'points': [
        {'lat': 50.198600, 'lon': 18.905542, description: '<b>text1</b><br>text2', url: 'https://www.xksi.pl/'}
    ],
    'zoom': 15
});
</script>
```
Prosta mapa, provider: mapbox, ciemna skórka
```
<script>
    multimap.get({
        'targetId': 'example-4',
        'provider': 'mapbox',
        'providerConfig': {
            'accessToken': 'pk.eyJ1IjoibWlyZWt3cm9iZWwiLCJhIjoiY2pjZ2NjYmRzMWM5dTJ4cm5uOXI4djkxdSJ9.eKDxssVDJVzhm1qDszfmlg',
            'tilesStyle': 'mapbox.dark'
        },
        'points': [
            {'lat': 50.198600, 'lon': 18.905542, description: '<b>text1</b><br>text2', url: 'https://www.xksi.pl/'},
            {'lat': 50.193600, 'lon': 18.925542, description: '<b>text3</b><br>text4', url: 'https://www.xksi.pl/'}
        ]
    });
</script>
```
Skomplikowana mapa z geojson
```
<script>
    var skomplikowanekreski = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {
                    "text": "<b>MIKOŁÓW JAMNA</b><br>stacja pkp"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        18.921552300453186,
                        50.19367748211837
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [
                            18.921557664871216,
                            50.19367404784746
                        ],
                        [
                            18.92141282558441,
                            50.19363627085121
                        ],
                        [
                            18.92118752002716,
                            50.1949721846498
                        ],
                        [
                            18.920640349388123,
                            50.1949618821157
                        ],
                        [
                            18.919910788536072,
                            50.19469058125123
                        ],
                        [
                            18.919787406921383,
                            50.19401060522224
                        ],
                        [
                            18.91995906829834,
                            50.193509202553486
                        ],
                        [
                            18.91993224620819,
                            50.193093652516005
                        ],
                        [
                            18.919765949249268,
                            50.19294941116159
                        ],
                        [
                            18.918719887733456,
                            50.19256476541961
                        ],
                        [
                            18.916321992874146,
                            50.193495465419964
                        ],
                        [
                            18.915313482284546,
                            50.19377364160344
                        ],
                        [
                            18.91398847103119,
                            50.19417888302001
                        ],
                        [
                            18.91313016414642,
                            50.19442614727956
                        ],
                        [
                            18.912057280540463,
                            50.194851988280426
                        ],
                        [
                            18.911070227622982,
                            50.19550791335918
                        ],
                        [
                            18.91048550605774,
                            50.196126054400445
                        ],
                        [
                            18.91017436981201,
                            50.1963424018742
                        ],
                        [
                            18.909611105918884,
                            50.196466028561865
                        ],
                        [
                            18.90873670578003,
                            50.19647976484074
                        ],
                        [
                            18.90845239162445,
                            50.196524407719764
                        ],
                        [
                            18.908302187919617,
                            50.1966102592929
                        ],
                        [
                            18.907631635665894,
                            50.19713910157887
                        ],
                        [
                            18.907073736190796,
                            50.197242122121665
                        ],
                        [
                            18.90649974346161,
                            50.19730393434064
                        ],
                        [
                            18.906274437904358,
                            50.19729019829889
                        ],
                        [
                            18.90621542930603,
                            50.197376048494945
                        ],
                        [
                            18.906419277191162,
                            50.19825514561844
                        ],
                        [
                            18.90644073486328,
                            50.19848865307086
                        ],
                        [
                            18.9055073261261,
                            50.19863287769149
                        ],
                        [
                            18.905480504035946,
                            50.19863631160572
                        ]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "text": "<b>Siedliszcze</b><br>zła"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        18.905434906482697,
                        50.19870155592911
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "stroke": "#e76102",
                    "stroke-width": 2,
                    "stroke-opacity": 0.7
                },
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [
                            18.92141282558441,
                            50.193637987988026
                        ],
                        [
                            18.92144501209259,
                            50.19346970828396
                        ],
                        [
                            18.921369910240173,
                            50.19242567400906
                        ],
                        [
                            18.92119824886322,
                            50.192408502201864
                        ],
                        [
                            18.920533061027527,
                            50.19245314888771
                        ],
                        [
                            18.919521868228912,
                            50.19243941145035
                        ],
                        [
                            18.91897737979889,
                            50.192501229887284
                        ],
                        [
                            18.918714523315426,
                            50.192566482595005
                        ]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "text": "UWAGA NA <b>POCIĄG</b>"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        18.91897737979889,
                        50.19249951270955
                    ]
                }
            }
        ]
    };

    multimap.get({
        'targetId': 'example-5',
        'provider': 'mapbox',
        'providerConfig': {
            'accessToken': 'pk.eyJ1Ijoia3NpbWVkaWEiLCJhIjoiY2pkZnV0N3gzMGRtbDJ3cDc1dzZtdjc3YiJ9.KWNRsUuXTM561X50Xaw9xg'
        },
        'features': skomplikowanekreski
    });
</script>
```