-
-
Save plugn/c354a24a1be2df8aed6eebc7632d1f17 to your computer and use it in GitHub Desktop.
Пример отображения геометрии - Sputnik Maps JS API // source http://jsbin.com/labogiq
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Пример отображения геометрии - Sputnik Maps JS API</title> | |
| <link rel="stylesheet" href="http://maps-js.apissputnik.ru/v0.3/sputnik_maps_bundle.min.css"/> | |
| <script src="http://maps-js.apissputnik.ru/v0.3/sputnik_maps_bundle.min.js"></script> | |
| <script src="http://maps-js.apissputnik.ru/v0.3/docs/examples/clusters_data.js"></script> | |
| <style type="text/css"> | |
| .user-map { | |
| width:100%; | |
| height: 600px; | |
| position: relative; | |
| } | |
| </style> | |
| <style id="jsbin-css"> | |
| .marker-cluster.cluster-A { | |
| background-color: brown !important; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map1" class="user-map map"></div> | |
| <script> | |
| function icfn(type) { | |
| type = type || 'A'; | |
| return function (cluster) { | |
| var childCount = cluster.getChildCount(); | |
| var c = ' marker-cluster-medium'; | |
| return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', | |
| className: 'cluster'+type+' marker-cluster' + c, | |
| iconSize: new L.Point(40, 40) }); | |
| } | |
| } | |
| var map1 = L.sm.map('map1', {center: [55.775, 37.624], zoom: 9}); // создаем карту | |
| var options1 = {maxClusterRadius: 70, iconCreateFunction: icfn('-A')}; // параметры кластера | |
| var options2 = {maxClusterRadius: 70, iconCreateFunction: icfn('-B')}; // параметры кластера | |
| var cluster1 = L.sm.cluster(options1); // создаем кластер | |
| var cluster2 = L.sm.cluster(options2); // создаем кластер | |
| var options = { | |
| popupTemplate: '<b>{title}</b>', // шаблон попапа для всех элементов GeoJson | |
| defaultPopupTemplate:'<u>{title}</u>' // шаблон попапа для элементов, у которых нет popupTemplate | |
| }; | |
| function mkFeature(list) { | |
| return { | |
| "type": "FeatureCollection", | |
| "features": list | |
| } | |
| } | |
| var data1 = mkFeature(geoData1.features.slice(0, 20)); | |
| var data2 = mkFeature(geoData1.features.slice(20)); | |
| // создаем слой данных из GeoJSON | |
| var geoJsonLayer1 = L.sm.geoJson(data1, options); | |
| var geoJsonLayer2 = L.sm.geoJson(data2, options); | |
| cluster1.addLayer(geoJsonLayer1); // добавляем в кластер слой данных | |
| cluster2.addLayer(geoJsonLayer2); // добавляем в кластер слой данных | |
| cluster1.addTo(map1); // добавляем кластер на карту | |
| cluster2.addTo(map1); // добавляем кластер на карту | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">.marker-cluster.cluster-A { | |
| background-color: brown !important; | |
| }</script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .marker-cluster.cluster-A { | |
| background-color: brown !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment