GeoJSON 정보
GeoJSON은 다양한 지리 데이터 구조를 인코딩하기위한 형식이다.
GeoJSON 객체는 공간영역(Geometry), 공간경계(Feature), 기능리스트(FeattureCollection)을 나타낼 수 있다.
GeoJSON은 Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, GeometryCollection에 대한 geometry 타입을 지원한다.
GeoJSON의 Feature에는 Geometry객체, 추가속성이 포함되고, FeatureCollection 에는 기능 리스트들이 포함되어 있다.
* Leaflet은 위의 모든 GeoJSON 타입을 지원하며, properties를 셋팅하고 features를 기술할 시 Features/FeatureCollection를 가장 잘 작동한다.
* 추가 GeoJSON 참고 URL: https://ko.wikipedia.org/wiki/GeoJSON
GeoJSON 레이어
This file contains 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> | |
| <head> | |
| <title>GeoJSON tutorial - Leaflet</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> | |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> | |
| <style> | |
| html, body { height: 100%; margin: 0; } | |
| #map { width: 600px; height: 400px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| var map = L.map('map').setView([39.74739, -105], 13); | |
| L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { | |
| maxZoom: 18, | |
| attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + | |
| '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
| id: 'mapbox/light-v9', | |
| tileSize: 512, | |
| zoomOffset: -1 | |
| }).addTo(map); | |
| /** | |
| * GeoJSON의 샘플 예제 | |
| */ | |
| var geojsonFeature = { | |
| "type": "Feature", | |
| "properties": { | |
| "name": "Coors Field", | |
| "amenity": "Baseball Stadium", | |
| "popupContent": "This is where the Rockies play!" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-104.99404, 39.75621] | |
| } | |
| }; | |
| /** | |
| * GeoJSON 객체는 GeoJSON레이어를 통해 추가할 수 있다. | |
| */ | |
| L.geoJSON(geojsonFeature).addTo(map); | |
| /** | |
| * 빈 GeoJSON레이어를 만들고나서 더 많은 feature를 추가할 수 있다. | |
| * 위 코드와 같은 기능을 한다. | |
| */ | |
| // var myLayer = L.geoJSON().addTo(map); | |
| // myLayer.addData(geojsonFeature); | |
| </script> | |
| </body> | |
| </html> |
옵션
스타일
This file contains 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> | |
| <head> | |
| <title>GeoJSON tutorial - Leaflet</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> | |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> | |
| <style> | |
| html, body { height: 100%; margin: 0; } | |
| #map { width: 600px; height: 400px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| var map = L.map('map').setView([45, -105], 5); | |
| L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { | |
| maxZoom: 18, | |
| attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + | |
| '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
| id: 'mapbox/light-v9', | |
| tileSize: 512, | |
| zoomOffset: -1 | |
| }).addTo(map); | |
| /** | |
| * valid한 GeoJSON 객체배열이 하나의 GeoJSON 객체가 될 수 있다. | |
| */ | |
| var myLines = [{ | |
| "type": "LineString", | |
| "coordinates": [[-100, 40], [-105, 45], [-110, 55]] | |
| }, { | |
| "type": "LineString", | |
| "coordinates": [[-105, 40], [-110, 45], [-115, 55]] | |
| }]; | |
| /** | |
| * 스타일 지정 | |
| */ | |
| var myStyle = { | |
| "color": "#ff7800", | |
| "weight": 5, | |
| "opacity": 0.65 | |
| }; | |
| /** | |
| * 스타일을 적용한 GeoJSON 레이어 | |
| */ | |
| L.geoJSON(myLines, { | |
| style: myStyle | |
| }).addTo(map); | |
| </script> | |
| </body> | |
| </html> |
This file contains 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> | |
| <head> | |
| <title>GeoJSON tutorial - Leaflet</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> | |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> | |
| <style> | |
| html, body { height: 100%; margin: 0; } | |
| #map { width: 600px; height: 400px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| var map = L.map('map').setView([45, -105], 5); | |
| L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { | |
| maxZoom: 18, | |
| attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + | |
| '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
| id: 'mapbox/light-v9', | |
| tileSize: 512, | |
| zoomOffset: -1 | |
| }).addTo(map); | |
| /** | |
| * GeoJSON 객체 | |
| */ | |
| var states = [{ | |
| "type": "Feature", | |
| "properties": {"party": "Republican"}, | |
| "geometry": { | |
| "type": "Polygon", | |
| "coordinates": [[ | |
| [-104.05, 48.99], | |
| [-97.22, 48.98], | |
| [-96.58, 45.94], | |
| [-104.03, 45.94], | |
| [-104.05, 48.99] | |
| ]] | |
| } | |
| }, { | |
| "type": "Feature", | |
| "properties": {"party": "Democrat"}, | |
| "geometry": { | |
| "type": "Polygon", | |
| "coordinates": [[ | |
| [-109.05, 41.00], | |
| [-102.06, 40.99], | |
| [-102.03, 36.99], | |
| [-109.04, 36.99], | |
| [-109.05, 41.00] | |
| ]] | |
| } | |
| }]; | |
| /** | |
| * 속성에 따라 개별 기능의 스타일을 지정하는 함수를 전달 가능하다. | |
| * 아래의 코드는 party 정보에 따라 다각형에 다른 스타일을 지정한다. | |
| */ | |
| L.geoJSON(states, { | |
| style: function(feature) { | |
| switch (feature.properties.party) { | |
| case 'Republican': return {color: "#ff0000"}; | |
| case 'Democrat': return {color: "#0000ff"}; | |
| } | |
| } | |
| }).addTo(map); | |
| </script> | |
| </body> | |
| </html> |
pointToLayer
This file contains 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> | |
| <head> | |
| <title>GeoJSON tutorial - Leaflet</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> | |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> | |
| <style> | |
| html, body { height: 100%; margin: 0; } | |
| #map { width: 600px; height: 400px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| var map = L.map('map').setView([40, -105], 5); | |
| L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { | |
| maxZoom: 18, | |
| attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + | |
| '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
| id: 'mapbox/light-v9', | |
| tileSize: 512, | |
| zoomOffset: -1 | |
| }).addTo(map); | |
| /** | |
| * GeoJSON 객체 | |
| */ | |
| var geojsonFeature = { | |
| "type": "Feature", | |
| "properties": { | |
| "name": "Coors Field", | |
| "amenity": "Baseball Stadium", | |
| "popupContent": "This is where the Rockies play!" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-104.99404, 39.75621] | |
| } | |
| }; | |
| /** | |
| * CircleMarker 옵션 | |
| */ | |
| var geojsonMarkerOptions = { | |
| radius: 8, | |
| fillColor: "#ff7800", | |
| color: "#000", | |
| weight: 1, | |
| opacity: 1, | |
| fillOpacity: 0.8 | |
| }; | |
| L.geoJSON(geojsonFeature, { | |
| /** | |
| * GeoJSON point를 이용해 레이어 생성방법을 정의한다. | |
| * 데이터가 추가되면 내부적으로 호출되며, 'GeoJSON point feature'와 'LatLng'를 전달한다. | |
| */ | |
| pointToLayer: function (feature, latlng) { | |
| // CircleMarker: 픽셀에 지정된 반경을 가진 벡터 원을 생성 | |
| return L.circleMarker(latlng, geojsonMarkerOptions); | |
| } | |
| }).addTo(map); | |
| </script> | |
| </body> | |
| </html> |
onEachFeature
This file contains 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> | |
| <head> | |
| <title>GeoJSON tutorial - Leaflet</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> | |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> | |
| <style> | |
| html, body { height: 100%; margin: 0; } | |
| #map { width: 600px; height: 400px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| var map = L.map('map').setView([40, -105], 5); | |
| L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { | |
| maxZoom: 18, | |
| attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + | |
| '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
| id: 'mapbox/light-v9', | |
| tileSize: 512, | |
| zoomOffset: -1 | |
| }).addTo(map); | |
| /** | |
| * onEachFeature 옵션은 GeoJSON 레이어에 각 feature가 추가되기전에 호출되는 함수다. | |
| * 일반적으로 feature를 클릭 시 팝업을 띄워주기 위해서 사용한다. | |
| */ | |
| function onEachFeature(feature, layer) { | |
| // does this feature have a property named popupContent? | |
| if (feature.properties && feature.properties.popupContent) { | |
| layer.bindPopup(feature.properties.popupContent); | |
| } | |
| } | |
| var geojsonFeature = { | |
| "type": "Feature", | |
| "properties": { | |
| "name": "Coors Field", | |
| "amenity": "Baseball Stadium", | |
| "popupContent": "This is where the Rockies play!" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-104.99404, 39.75621] | |
| } | |
| }; | |
| L.geoJSON(geojsonFeature, { | |
| onEachFeature: onEachFeature | |
| }).addTo(map); | |
| </script> | |
| </body> | |
| </html> |
Filter
This file contains 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> | |
| <head> | |
| <title>GeoJSON tutorial - Leaflet</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> | |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> | |
| <style> | |
| html, body { height: 100%; margin: 0; } | |
| #map { width: 600px; height: 400px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| var map = L.map('map').setView([40, -105], 5); | |
| L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { | |
| maxZoom: 18, | |
| attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + | |
| '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
| id: 'mapbox/light-v9', | |
| tileSize: 512, | |
| zoomOffset: -1 | |
| }).addTo(map); | |
| /** | |
| * GeoJSON 객체 | |
| */ | |
| var someFeatures = [{ | |
| "type": "Feature", | |
| "properties": { | |
| "name": "Coors Field", | |
| "show_on_map": true | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-104.99404, 39.75621] | |
| } | |
| }, { | |
| "type": "Feature", | |
| "properties": { | |
| "name": "Busch Field", | |
| "show_on_map": false | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-104.98404, 39.74621] | |
| } | |
| }]; | |
| /** | |
| * filter 옵션은 GeoJson feature들의 가시성을 제어할 수 있으며 함수로 설정한다. | |
| * 함수는 GeoJSON의 각 feature에 대해서 호출되며 feature, layer인수를 전달한다. | |
| * 함수는 feature의 properties의 가시성을 컨트롤하여 true 또는 false 값을 반환한다. | |
| * | |
| * 이 예제코드에서 someFeatures객체의 'Busch Field'는 지도에 표시되지 않는다. | |
| */ | |
| L.geoJSON(someFeatures, { | |
| filter: function(feature, layer) { | |
| return feature.properties.show_on_map; | |
| } | |
| }).addTo(map); | |
| </script> | |
| </body> | |
| </html> |
종합
This file contains 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> | |
| <head> | |
| <title>GeoJSON tutorial - Leaflet</title> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" | |
| integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" | |
| crossorigin=""/> | |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" | |
| integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" | |
| crossorigin=""></script> | |
| <style> | |
| html, body { height: 100%; margin: 0; } | |
| #map { width: 600px; height: 400px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <!-- GeoJSON 데이터 --> | |
| <script src="sample-geojson.js" type="text/javascript"></script> | |
| <script> | |
| var map = L.map('map').setView([39.74739, -105], 13); | |
| L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { | |
| maxZoom: 18, | |
| attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + | |
| '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
| id: 'mapbox/light-v9', | |
| tileSize: 512, | |
| zoomOffset: -1 | |
| }).addTo(map); | |
| /** | |
| * GeoJSON 레이어에 추가전 각 feature 에서 호출 | |
| * 여기서는 각 feature를 클릭 시 팝업을 노출하도록 설정 | |
| */ | |
| function onEachFeature(feature, layer) { | |
| var popupContent = "<p>I started out as a GeoJSON " + | |
| feature.geometry.type + ", but now I'm a Leaflet vector!</p>"; | |
| if (feature.properties && feature.properties.popupContent) { | |
| popupContent += feature.properties.popupContent; | |
| } | |
| layer.bindPopup(popupContent); | |
| } | |
| /** | |
| * bicycleRental, compus GeoJSON 레이어 추가 | |
| */ | |
| L.geoJSON([bicycleRental, campus], { | |
| style: function (feature) { // 각 feature의 스타일 적용 | |
| return feature.properties && feature.properties.style; | |
| }, | |
| onEachFeature: onEachFeature, // 클릭 시 팝업 노출 | |
| pointToLayer: function (feature, latlng) { // point(bicycleRental)는 원을 그려준다. | |
| return L.circleMarker(latlng, { | |
| radius: 8, | |
| fillColor: "#ff7800", | |
| color: "#000", | |
| weight: 1, | |
| opacity: 1, | |
| fillOpacity: 0.8 | |
| }); | |
| } | |
| }).addTo(map); | |
| /** | |
| * freeBus GeoJSON 레이어 추가 | |
| */ | |
| L.geoJSON(freeBus, { | |
| // 버스노선이 3개가 있지만 2개만 필터로 인해 노출됨 | |
| filter: function (feature, layer) { | |
| if (feature.properties) { | |
| // If the property "underConstruction" exists and is true, return false (don't render features under construction) | |
| return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true; | |
| } | |
| return false; | |
| }, | |
| onEachFeature: onEachFeature // 클릭 시 팝업 노출 | |
| }).addTo(map); | |
| /** | |
| * baseballIcon 속성 | |
| */ | |
| var baseballIcon = L.icon({ | |
| iconUrl: 'https://leafletjs.com/examples/geojson/baseball-marker.png', | |
| iconSize: [32, 37], | |
| iconAnchor: [16, 37], | |
| popupAnchor: [0, -28] | |
| }); | |
| /** | |
| * coorsField GeoJSON 레이어 추가 | |
| */ | |
| var coorsLayer = L.geoJSON(coorsField, { | |
| // 일반적인 벡터 마커가 아닌 이미지가 노출되는 마커 | |
| pointToLayer: function (feature, latlng) { | |
| return L.marker(latlng, {icon: baseballIcon}); | |
| }, | |
| onEachFeature: onEachFeature // 클릭 시 팝업 노출 | |
| }).addTo(map); | |
| </script> | |
| </body> | |
| </html> |
This file contains 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
| var freeBus = { | |
| "type": "FeatureCollection", | |
| "features": [ | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "LineString", | |
| "coordinates": [ | |
| [-105.00341892242432, 39.75383843460583], | |
| [-105.0008225440979, 39.751891803969535] | |
| ] | |
| }, | |
| "properties": { | |
| "popupContent": "This is a free bus line that will take you across downtown.", | |
| "underConstruction": false | |
| }, | |
| "id": 1 | |
| }, | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "LineString", | |
| "coordinates": [ | |
| [-105.0008225440979, 39.751891803969535], | |
| [-104.99820470809937, 39.74979664004068] | |
| ] | |
| }, | |
| "properties": { | |
| "popupContent": "This is a free bus line that will take you across downtown.", | |
| "underConstruction": true | |
| }, | |
| "id": 2 | |
| }, | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "LineString", | |
| "coordinates": [ | |
| [-104.99820470809937, 39.74979664004068], | |
| [-104.98689651489258, 39.741052354709055] | |
| ] | |
| }, | |
| "properties": { | |
| "popupContent": "This is a free bus line that will take you across downtown.", | |
| "underConstruction": false | |
| }, | |
| "id": 3 | |
| } | |
| ] | |
| }; | |
| var lightRailStop = { | |
| "type": "FeatureCollection", | |
| "features": [ | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "popupContent": "18th & California Light Rail Stop" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-104.98999178409576, 39.74683938093904] | |
| } | |
| }, { | |
| "type": "Feature", | |
| "properties": { | |
| "popupContent": "20th & Welton Light Rail Stop" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-104.98689115047453, 39.747924136466565] | |
| } | |
| } | |
| ] | |
| }; | |
| var bicycleRental = { | |
| "type": "FeatureCollection", | |
| "features": [ | |
| { | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -104.9998241, | |
| 39.7471494 | |
| ] | |
| }, | |
| "type": "Feature", | |
| "properties": { | |
| "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!" | |
| }, | |
| "id": 51 | |
| }, | |
| { | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -104.9983545, | |
| 39.7502833 | |
| ] | |
| }, | |
| "type": "Feature", | |
| "properties": { | |
| "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!" | |
| }, | |
| "id": 52 | |
| }, | |
| { | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -104.9963919, | |
| 39.7444271 | |
| ] | |
| }, | |
| "type": "Feature", | |
| "properties": { | |
| "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!" | |
| }, | |
| "id": 54 | |
| }, | |
| { | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -104.9960754, | |
| 39.7498956 | |
| ] | |
| }, | |
| "type": "Feature", | |
| "properties": { | |
| "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!" | |
| }, | |
| "id": 55 | |
| }, | |
| { | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -104.9933717, | |
| 39.7477264 | |
| ] | |
| }, | |
| "type": "Feature", | |
| "properties": { | |
| "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!" | |
| }, | |
| "id": 57 | |
| }, | |
| { | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -104.9913392, | |
| 39.7432392 | |
| ] | |
| }, | |
| "type": "Feature", | |
| "properties": { | |
| "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!" | |
| }, | |
| "id": 58 | |
| }, | |
| { | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -104.9788452, | |
| 39.6933755 | |
| ] | |
| }, | |
| "type": "Feature", | |
| "properties": { | |
| "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!" | |
| }, | |
| "id": 74 | |
| } | |
| ] | |
| }; | |
| var campus = { | |
| "type": "Feature", | |
| "properties": { | |
| "popupContent": "This is the Auraria West Campus", | |
| "style": { | |
| weight: 2, | |
| color: "#999", | |
| opacity: 1, | |
| fillColor: "#B0DE5C", | |
| fillOpacity: 0.8 | |
| } | |
| }, | |
| "geometry": { | |
| "type": "MultiPolygon", | |
| "coordinates": [ | |
| [ | |
| [ | |
| [-105.00432014465332, 39.74732195489861], | |
| [-105.00715255737305, 39.74620006835170], | |
| [-105.00921249389647, 39.74468219277038], | |
| [-105.01067161560059, 39.74362625960105], | |
| [-105.01195907592773, 39.74290029616054], | |
| [-105.00989913940431, 39.74078835902781], | |
| [-105.00758171081543, 39.74059036160317], | |
| [-105.00346183776855, 39.74059036160317], | |
| [-105.00097274780272, 39.74059036160317], | |
| [-105.00062942504881, 39.74072235994946], | |
| [-105.00020027160645, 39.74191033368865], | |
| [-105.00071525573731, 39.74276830198601], | |
| [-105.00097274780272, 39.74369225589818], | |
| [-105.00097274780272, 39.74461619742136], | |
| [-105.00123023986816, 39.74534214278395], | |
| [-105.00183105468751, 39.74613407445653], | |
| [-105.00432014465332, 39.74732195489861] | |
| ], [ | |
| [-105.00361204147337, 39.74354376414072], | |
| [-105.00301122665405, 39.74278480127163], | |
| [-105.00221729278564, 39.74316428375108], | |
| [-105.00283956527711, 39.74390674342741], | |
| [-105.00361204147337, 39.74354376414072] | |
| ] | |
| ], [ | |
| [ | |
| [-105.00942707061768, 39.73989736613708], | |
| [-105.00942707061768, 39.73910536278566], | |
| [-105.00685214996338, 39.73923736397631], | |
| [-105.00384807586671, 39.73910536278566], | |
| [-105.00174522399902, 39.73903936209552], | |
| [-105.00041484832764, 39.73910536278566], | |
| [-105.00041484832764, 39.73979836621592], | |
| [-105.00535011291504, 39.73986436617916], | |
| [-105.00942707061768, 39.73989736613708] | |
| ] | |
| ] | |
| ] | |
| } | |
| }; | |
| var coorsField = { | |
| "type": "Feature", | |
| "properties": { | |
| "popupContent": "Coors Field" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-104.99404191970824, 39.756213909328125] | |
| } | |
| }; |
참고: https://leafletjs.com/examples/geojson/
댓글
댓글 쓰기