├── README.md
├── clip.js
├── index.html
└── style.css


/README.md:
--------------------------------------------------------------------------------
 1 | ## 简述
 2 | 在gis系统中 经常会用到一些裁剪的方法，首先推荐一个非常好用的空间分析JavaScript库--Turf.js，不仅功能强大、使用简单，同时处理速度也很快。
 3 | Turf.js中提供了一中多边形的裁剪方法是使用多边形去裁剪多边形，但是如果实际工作中需要使用到线去裁剪多边形却无法满足。
 4 | [http://turfjs.org/docs#bboxClip](http://turfjs.org/docs#bboxClip)
 5 | 这边文章使用turf.js的基本方法，在此基础上构建了线裁剪多边形的方法。
 6 | [点击可查看在线demo](https://fwc1994.github.io/clip-polygon/)
 7 | ## 算法原理
 8 | ### （一）单个polygon的裁剪
 9 | `相交要求：线与多边形有且只有两个交点，且可以将多边形分成两部分`
10 | 1. 计算多边形与线的两个交点并根据交点将多边形分割成两条线
11 | ![image1](https://yuyi-blog-resource.oss-cn-beijing.aliyuncs.com/images/polygon-clip-1.png)
12 | 2. 将分割的两条线根据切割点与切割线进行拼接，分别组成两个多边形，（需要注意的是线的方向性问题）
13 | ![image2](https://yuyi-blog-resource.oss-cn-beijing.aliyuncs.com/images/polygon-clip-2.png)
14 | ### （二）环多边形的裁剪
15 | `相交要求：线与多边形有且只有两个交点，且可以将多边形分成两部分，同时切割线不可与内环相交`
16 | `注：在geojson数据中外部多边形的顺序为顺时针，环内部多边形顺序为逆时针`
17 | 1. 将环多边形拆分成内环和外环
18 | ![image3](https://yuyi-blog-resource.oss-cn-beijing.aliyuncs.com/images/polygon-clip-3.png)
19 | 2. 对外环多边形通过切割线进行裁剪 方法同（一）
20 | 
21 | 3. 组合切割后的外环多边形和内环多边形：(通过判断内环多边形在那一个切割多边形内部从而判断如何进行组合还原)
22 | ![image4](https://yuyi-blog-resource.oss-cn-beijing.aliyuncs.com/images/polygon-clip-4.png)
23 | ### （三）MultiPolygon多边形的裁剪
24 | `相交要求：切割线只能与MultiPolygon中的一个Polygon有两个交点`
25 | 1. 拆分MultiPolygon分割为多个Polygon
26 | 2. 根据切割线与多边形的相交情况，对有两个交点的多边形进行进行切割
27 | ![image5](https://yuyi-blog-resource.oss-cn-beijing.aliyuncs.com/images/polygon-clip-5.png)
28 | 3. 将分割后的多边形与不参与切割的多边形合并组成要素集进行返回即可
29 | ## 项目地址
30 | github:[https://github.com/FWC1994/clip-polygon](https://github.com/FWC1994/clip-polygon)


--------------------------------------------------------------------------------
/clip.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Author: fengwc
  3 |  * geoJson数据处理模块(需要引入turf.js)
  4 |  * 输入输出数据均为标准geoJson格式
  5 |  */
  6 | var geoUtil = {
  7 |     /**
  8 |      * 合并多边形
  9 |      */
 10 |     unionPolygon: function(polygons){
 11 |         var polygon = polygons[0];
 12 |         for (var i = 0; i < polygons.length; i++){
 13 |             polygon = turf.union(polygon,polygons[i]);
 14 |         };
 15 |         return polygon;
 16 |     },
 17 |     /**
 18 |      * 线分割面
 19 |      * 面类型只能是polygon 但可以是环
 20 |      * 注:线与多边形必须有两个交点
 21 |      */
 22 |     polygonClipByLine: function (polygon, clipLine) {
 23 |         if(polygon.geometry.type === 'Polygon'){
 24 |             var polyLine = turf.polygonToLine(polygon)
 25 |             if(polyLine.geometry.type === 'LineString'){ // 切割普通多边形
 26 |                 return this._singlePolygonClip(polyLine, clipLine);
 27 |             }else if (polyLine.geometry.type === 'MultiLineString'){ //切割环
 28 |                 return this._multiPolygonClip(polyLine, clipLine);
 29 |             }
 30 |         }else if(polygon.geometry.type === 'MultiPolygon'){
 31 |             // 若输入的多边形类型为Multipolygon则拆分成多个Polygon
 32 |             var polygons = this.multiPolygon2polygons(polygon)
 33 |             var clipPolygon = null;
 34 |             var clipPolygonIndex = -1
 35 |             // 获取MultiPolygon中与切割线相交的多边形（有且只能有一个多边形相交2个交点）
 36 |             polygons.forEach(function(polygon, index){
 37 |                 var polyLine = turf.polygonToLine(polygon)
 38 |                 if(turf.lineIntersect(polyLine, clipLine).features.length === 2){
 39 |                     if(!clipPolygon){
 40 |                         clipPolygon = polygon
 41 |                         clipPolygonIndex = index
 42 |                     }else{
 43 |                         throw {state : '裁剪失败',message : 'MultiPolygon只能有一个多边形与切割线存在交点'};
 44 |                     }                   
 45 |                 }
 46 |             })
 47 |             if(clipPolygonIndex !== -1){
 48 |                 polygons.splice(clipPolygonIndex,1)
 49 |                 return turf.featureCollection(polygons.concat(this.polygonClipByLine(clipPolygon,clipLine).features));
 50 |             }else{
 51 |                 throw {state : '裁剪失败',message : 'MultiPolygon与切割线无交点'};
 52 |             }
 53 |             
 54 |         }else{
 55 |             throw {state : '裁剪失败',message : '输入的多边形类型为错误'};
 56 |         }        
 57 |     },
 58 |     
 59 |     _singlePolygonClip: function(polyLine, clipLine){
 60 |         // 获得裁切点
 61 |         var intersects = turf.lineIntersect(polyLine, clipLine);
 62 |         if (intersects.features.length !== 2){
 63 |             throw {state : '裁剪失败',message : '切割线与多边形交点应该为2个,当前交点个数为'+intersects.features.length};
 64 |         }
 65 |         // 检查切割线与多边形的位置关系 （切割线的起点和终点不能落在多边形内部）
 66 |         var clipLineLength = clipLine.geometry.coordinates.length;
 67 |         var clipLineStartPoint = turf.point(clipLine.geometry.coordinates[0])
 68 |         var clipLineEndPoint = turf.point(clipLine.geometry.coordinates[clipLineLength-1])
 69 |         var polygon = turf.polygon([polyLine.geometry.coordinates])
 70 |         if(turf.booleanPointInPolygon(clipLineStartPoint, polygon) || turf.booleanPointInPolygon(clipLineEndPoint, polygon)){
 71 |             throw {state : '裁剪失败',message : '切割线起点或终点不能在 裁剪多边形内部'};
 72 |         }
 73 |         // 通过裁切点 分割多边形（只能获得多边形的一部分）
 74 |         var slicedPolyLine = turf.lineSlice(intersects.features[0], intersects.features[1], polyLine);
 75 |         // 裁剪线分割 保留多边形内部部分
 76 |         var slicedClipLine = turf.lineSlice(intersects.features[0], intersects.features[1], clipLine);
 77 |         // 重新拼接多边形 存在 对接的问题 所以先进行判断 如何对接裁剪的多边形和裁剪线
 78 |         var resultPolyline1 = this.connectLine(slicedPolyLine, slicedClipLine)
 79 |         // 闭合线 来构造多边形
 80 |         resultPolyline1.geometry.coordinates.push(resultPolyline1.geometry.coordinates[0])
 81 |         var resultPolygon1 = turf.lineToPolygon(resultPolyline1);
 82 |         // 构造切割的另一面多边形
 83 |         var firstPointOnLine = this.isOnLine(turf.point(polyLine.geometry.coordinates[0]),slicedPolyLine);
 84 |         var pointList = [];
 85 |         if(firstPointOnLine){
 86 |             for (var i = 0; i < polyLine.geometry.coordinates.length; i++){
 87 |                 var coordinate = polyLine.geometry.coordinates[i];
 88 |                 if(!this.isOnLine(turf.point(coordinate), slicedPolyLine)){
 89 |                     pointList.push(coordinate)
 90 |                 }
 91 |             };
 92 |         }else{
 93 |             var skipNum = 0; // 记录前面被跳过的点的个数
 94 |             var isStartPush = false; 
 95 |             for (var i = 0; i < polyLine.geometry.coordinates.length; i++){
 96 |                 var coordinate = polyLine.geometry.coordinates[i];
 97 |                 if(!this.isOnLine(turf.point(coordinate), slicedPolyLine)){
 98 |                     if(isStartPush){
 99 |                         pointList.push(coordinate)
100 |                     }else{
101 |                         skipNum++
102 |                     }
103 |                     
104 |                 }else{
105 |                     isStartPush = true;
106 |                 }
107 |             };
108 |             // 将前面跳过的点补充到 点数组中
109 |             for (var i = 0; i < skipNum; i++){
110 |                 pointList.push(polyLine.geometry.coordinates[i])
111 |             }
112 |         }
113 |         var slicedPolyLine_2 = turf.lineString(pointList);
114 |         var resultPolyline2 = this.connectLine(slicedPolyLine_2, slicedClipLine)
115 |         // 闭合线 来构造多边形
116 |         resultPolyline2.geometry.coordinates.push(resultPolyline2.geometry.coordinates[0])
117 |         var resultPolygon2 = turf.lineToPolygon(resultPolyline2);
118 |         // 返回面要素集
119 |         return turf.featureCollection([
120 |             resultPolygon1,
121 |             resultPolygon2
122 |         ]);
123 | 
124 |     },
125 | 
126 |     _multiPolygonClip: function(polyLine, clipLine){
127 |         // 将环 多边形分割成 内部逆时针多边形+外部多边形
128 |         var outPolyline,insidePolylineList = [];
129 |         for(var i=0; i < polyLine.geometry.coordinates.length; i++){
130 |             var splitPolyline = turf.lineString(polyLine.geometry.coordinates[i]);
131 |             if(turf.booleanClockwise(splitPolyline)){
132 |                 if(outPolyline){
133 |                     throw {state : '裁剪失败',message : '出现了两个外部多边形无法处理'};
134 |                 }else{
135 |                     outPolyline = splitPolyline
136 |                 }
137 |             }else{
138 |                 var intersects = turf.lineIntersect(splitPolyline, clipLine);
139 |                 if(intersects.features.length > 0){
140 |                     throw {state : '裁剪失败',message : '切割线不能与内环有交点'};
141 |                 }
142 |                 insidePolylineList.push(splitPolyline)
143 |             }
144 |         }
145 |         var resultCollection = this._singlePolygonClip(outPolyline, clipLine)
146 |         
147 |         for(var i=0; i < resultCollection.features.length; i++){
148 |             for(var j = 0; j < insidePolylineList.length; j++){
149 |                 var startPoint = turf.point(insidePolylineList[j].geometry.coordinates[0]);
150 |                 if(turf.booleanPointInPolygon(startPoint, resultCollection.features[i])){
151 |                     resultCollection.features[i] = turf.mask(resultCollection.features[i], turf.lineToPolygon(insidePolylineList[j]));
152 |                 }
153 |             }
154 |         }
155 |         return resultCollection
156 |     },
157 | 
158 |     /**
159 |      * 连接两条线
160 |      * 方法会将两条线段最近的一段直接连接
161 |      */
162 |     connectLine: function(line1, line2){
163 |         var line2_length = line2.geometry.coordinates.length;
164 |         var line1_startPoint = line1.geometry.coordinates[0]
165 |         var line2_startPoint = line2.geometry.coordinates[0]
166 |         var line2_endPoint = line2.geometry.coordinates[line2_length-1]
167 |         var pointList = [];
168 |         // 获取line1 所有点坐标
169 |         for (var i = 0; i < line1.geometry.coordinates.length; i++){
170 |             var coordinate = line1.geometry.coordinates[i];
171 |             pointList.push(coordinate)
172 |         };
173 | 
174 |         // 判断两条线的 起点是否接近，如果接近 逆转line2线 进行连接
175 |         if(turf.distance(line1_startPoint, line2_startPoint) < turf.distance(line1_startPoint, line2_endPoint)){
176 |             line2.geometry.coordinates = line2.geometry.coordinates.reverse();
177 |         }
178 |         for (var i = 0; i < line2.geometry.coordinates.length; i++){
179 |             var coordinate = line2.geometry.coordinates[i];
180 |             pointList.push(coordinate)
181 |         };
182 |         return turf.lineString(pointList);
183 |     },
184 | 
185 |     /**
186 |      * 判断点是否在线里面
187 |      * 注：线组成的坐标对比
188 |      */
189 |     isOnLine: function(point, line) {
190 |         for (var i = 0; i < line.geometry.coordinates.length; i++){
191 |             var coordinate = line.geometry.coordinates[i];
192 |             if(point.geometry.coordinates[0] === coordinate[0] && point.geometry.coordinates[1] === coordinate[1]){
193 |                 return true;
194 |             }
195 |         };
196 |         return false;
197 |     },
198 | 
199 |     /**
200 |      * 获得两条线交点
201 |      */
202 |     getIntersectPoints: function(line1, line2){
203 |         return turf.lineIntersect(line1, line2);
204 |     },
205 |     /**
206 |      * multiPolygon转polygons,不涉及属性
207 |      */
208 |     multiPolygon2polygons: function(multiPolygon){
209 |         if(multiPolygon.geometry.type !== 'MultiPolygon'){
210 |             return
211 |         }
212 |         var polygons = [];
213 |         multiPolygon.geometry.coordinates.forEach((item)=>{
214 |             var polygon = {
215 |                 type:'Feature',
216 |                 properties: {},
217 |                 geometry: {
218 |                     type:'Polygon',
219 |                     coordinates:[]
220 |                 }
221 |             };
222 |             polygon.geometry.coordinates = item;
223 |             polygons.push(polygon)
224 |         });
225 |         return polygons;
226 |     },
227 |      /**
228 |      * polygons转multiPolygon,不涉及属性，只输出属性为{}
229 |      * 考虑polygons中就存在多面的情况
230 |      */
231 |     polygons2MultiPolygon: function (geoJson) {
232 |         var newGeoJson = {
233 |             type: "FeatureCollection",
234 |             features: [{geometry: {coordinates: [], type: "MultiPolygon"}, type: "Feature", properties: {}}]
235 |         };
236 |         geoJson.features.forEach((item) => {
237 |             if(item.geometry.type==="Polygon"){
238 |                 newGeoJson.features[0].geometry.coordinates.push(item.geometry.coordinates);
239 |             }else{
240 |                 item.geometry.coordinates.forEach((item)=>{
241 |                     newGeoJson.features[0].geometry.coordinates.push(item);
242 |                 })
243 |             }
244 |         })
245 |         return newGeoJson;
246 |     },
247 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |     <title>多边形切割demo</title>
  8 |     <link href="./style.css" rel="stylesheet">
  9 |     <link href="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.css" rel="stylesheet">
 10 |     <link href="https://cdn.bootcss.com/leaflet.draw/1.0.2/leaflet.draw.css" rel="stylesheet">
 11 | </head>
 12 | <body onload="loadMap()">
 13 |     <div id='map'></div>
 14 |     <div id='msg'>先在地图上点击要裁剪的多边形</div>
 15 |     <div id='reset' onclick="resetClip()">重置</div>
 16 |     <div id='github' onclick="toGitHub()"><svg height="32" class="github-icon" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></div>
 17 | </body>
 18 | <script src="https://cdn.bootcss.com/Turf.js/5.1.6/turf.min.js"></script>
 19 | <script src="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.js"></script>
 20 | <script src="https://cdn.bootcss.com/leaflet.draw/1.0.2/leaflet.draw.js"></script>
 21 | <script src="./clip.js"></script>
 22 | <script>
 23 | var map = null;
 24 | var editLayer = null;
 25 | var drawView = null;
 26 | var polygonLayer = null;
 27 | var clipResultLayer = null;
 28 | var clipLineLayer = null;
 29 | var colorList = ['#00FF66','#66CCFF','#6600FF','#FF9933','#FF3333']
 30 | function loadMap(){
 31 |     
 32 |     // 创建地图对象
 33 |     map = L.map('map').setView([39.91036,116.403704], 10);
 34 |     var basemap = L.tileLayer('http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
 35 |         attribution: ''
 36 |     }).addTo(map);
 37 |     // 创建标绘图层
 38 |     drawView = new L.geoJSON(null, {}).addTo(map);
 39 |     clipResultLayer = new L.geoJSON(null, {}).addTo(map);
 40 |     // 创建多边形图层及添加测试geojson数据
 41 |     polygonLayer = L.geoJSON(null, {
 42 |                     style: function (feature) {
 43 |                         return {color: '#fff'};
 44 |                     }
 45 |     }).addTo(map);
 46 |     polygonLayer.addData({ 
 47 |         "type": "Feature",
 48 |         "geometry": {
 49 |             "type": "Polygon",
 50 |             "coordinates": [[ 
 51 |                 [116.2535,40.009898], [116.25144,39.971495], [116.324225,39.990436],
 52 |                 [116.296072,40.032509], [116.2535,40.009898] 
 53 |             ]]
 54 |         }
 55 |     });
 56 |     polygonLayer.addData({ 
 57 |         "type": "Feature",
 58 |         "geometry": { 
 59 |             "type": "Polygon",
 60 |             "coordinates": [               
 61 |                     [[116.490393,39.88435], [116.596823,39.895413], [116.626349,39.784167], [116.409369,39.775197], [116.490393,39.88435]],
 62 |                     [[116.502285,39.870091],[116.516018,39.800887],[116.599789,39.795744], [116.567001,39.870486],   [116.502285,39.870091]
 63 |                 ]
 64 |             ]
 65 |         }
 66 |     });
 67 |     polygonLayer.addData({ 
 68 |         "type": "Feature",
 69 |         "geometry": { 
 70 |             "type": "MultiPolygon",
 71 |             "coordinates": [
 72 |                 [
 73 |                     [[116.361303,39.926488], [116.454001,39.935439], [116.437521,39.874338], [116.359243,39.876973], [116.361303,39.926488]]
 74 |                 ],
 75 |                 [
 76 |                     [[116.493530,40.058103], [116.665192,40.064410], [116.677551,39.930801], [116.512756,39.947648], [116.493530,40.058103]] 
 77 |                 ]         
 78 |             ]
 79 |         }
 80 |     });
 81 |     // 添加Leaflet.Draw标绘功能
 82 |     clipLineLayer = new L.Draw.Polyline(map);
 83 | 	clipLineLayer.setOptions({
 84 |         showLength:false,
 85 |         shapeOptions:{
 86 |             stroke: true,
 87 |             color: '#3388ff',
 88 |             weight: 1,
 89 |             opacity: 0.7,
 90 |             dashArray: '5,5'
 91 |         }
 92 |     })
 93 |     L.drawLocal.draw.handlers.polyline.tooltip = {
 94 |         start: '点击地图开始裁剪',
 95 |         cont: '点击地图开始裁剪',
 96 |         end: '双击地图或点击最后一个点完成裁剪'
 97 |     }
 98 |     //地图或图层事件绑定
 99 | /*     map.on('click',function(evt){
100 |         console.log(evt.latlng.lng.toFixed(6)+','+evt.latlng.lat.toFixed(6))
101 |     }) */
102 |     polygonLayer.on('click', function(evt) {
103 |         if(drawView){
104 |             drawView.clearLayers()
105 |         }
106 |         editLayer = evt.layer;
107 |         polygonLayer.setStyle(
108 |             {color: '#fff'}
109 |         )
110 |         editLayer.setStyle(
111 |             {color: '#ecf53e'}
112 |         )
113 |         clipLineLayer.enable();
114 |         document.getElementById('msg').innerText='绘制切割线'  
115 |     });
116 |     map.on('draw:created', function(evt){      
117 |         drawView.addLayer(evt.layer)
118 |         var clipLine = L.polyline(evt.layer.editing.latlngs[0])
119 |         var intersects = turf.lineIntersect(turf.polygonToLine(editLayer.feature), clipLine.toGeoJSON());
120 |         try{
121 |             var clippedPolygon = geoUtil.polygonClipByLine(editLayer.feature,clipLine.toGeoJSON());
122 |             for(var i=0; i < clippedPolygon.features.length; i++){
123 |                 var newLayer = new L.geoJSON(clippedPolygon.features[i], {
124 |                     style: {color:colorList[i]}
125 |                 });
126 |                 clipResultLayer.addLayer(newLayer);
127 |             }
128 |             document.getElementById('msg').innerHTML='<div style="color:#3fcf3f;">多边形裁剪成功</div>'  
129 |         }catch(error){
130 |             document.getElementById('msg').innerHTML='<div style="color:#ff0000;">'+error.state+':</br>'+error.message+'</div>'  
131 |         }
132 |         
133 |         
134 |     })  
135 | 
136 |     var baseMaps = {
137 |         "蓝黑底图": basemap,
138 |     };
139 | 
140 |     var overlayMaps = {
141 |         "polygon图层": polygonLayer,
142 |         "裁剪result图层": clipResultLayer
143 |     };
144 |     L.control.layers(baseMaps, overlayMaps).addTo(map);
145 | }
146 | function resetClip(){
147 |     clipResultLayer.clearLayers();
148 |     drawView.clearLayers();
149 |     polygonLayer.setStyle(
150 |         {color: '#fff'}
151 |     )
152 |     document.getElementById('msg').innerText='先在地图上点击要裁剪的多边形'; 
153 | }
154 | function toGitHub(){
155 |     window.open("https://github.com/FWC1994/clip-polygon");
156 | }
157 | </script>
158 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | html,body{
 2 |     height:100%;
 3 |     width:100%;
 4 |     padding:0;
 5 |     margin:0;
 6 | }
 7 | #map{
 8 |     height:100%;
 9 |     width:100%;
10 | }
11 | #msg{
12 |     width:200px;
13 |     padding:20px;
14 |     background: #ffffff;
15 |     position: absolute;
16 |     bottom:10px;
17 |     left:10px;
18 |     font-size: 15px;
19 |     z-index:9999;
20 |     
21 | }
22 | #reset{
23 |     width:100px;
24 |     height: 40px;
25 |     background-color: #3AA2EB;
26 |     text-align: center;
27 |     line-height: 40px;
28 |     cursor:pointer;
29 |     color:#fff;
30 |     position: absolute;
31 |     bottom:10px;
32 |     left:300px;
33 |     z-index:9999;
34 |     -webkit-transition: all 600ms ease;
35 |     -moz-transition: all 600ms ease;
36 |     -ms-transition: all 600ms ease;
37 |     -o-transition: all 600ms ease;
38 |     transition: all 600ms ease;
39 | 
40 | }
41 | #reset:hover{
42 |     background-color: #1B85CF;
43 | }
44 | #github{
45 |     width:50px;
46 |     height: 50px;
47 |     text-align: center;
48 |     cursor:pointer;
49 |     position: absolute;
50 |     top:0;
51 |     left:50%;
52 |     margin-left:-25px;
53 |     border-radius: 0 0 5px 5px;
54 |     z-index:9999;
55 |     background-color: #fff;
56 | }
57 | .github-icon{
58 |     margin-top:8px;
59 | }
60 | .leaflet-marker-pane .leaflet-editing-icon  {
61 |     margin-left: -6px !important;
62 |     margin-top: -6px !important;
63 |     width: 12px !important;
64 |     height: 12px !important;
65 |     background: #ffffff;
66 |     border: 1px solid rgba(0, 0, 0, 0.50);
67 |     border-radius: 50px;
68 | }


--------------------------------------------------------------------------------