Tutorial Leaflet Expert – Leaflet GeoJson
Represents a GeoJSON object or an array of GeoJSON objects. Allows you to parse GeoJSON data and display it on the map. Extends FeatureGroup.
first, create file data.js
var data_geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
109.1242790222168,
-6.966726746863975
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
109.12359237670898,
-6.976609492305082
]
}
},
{
"type": "Feature",
"properties": {
'description':'Rumah Saya'
},
"geometry": {
"type": "Point",
"coordinates": [
109.13749694824219,
-6.967493519053964
]
}
},
{
"type": "Feature",
"properties": {
'description':'Rumah 2',
},
"geometry": {
"type": "Point",
"coordinates": [
109.14402008056639,
-6.980869232058867
]
}
}
]
}add file js into html
<script src="data.js"></script>last, add this script into your js
// geoJson
L.geoJSON(data_geojson, {
style: function (feature) {
return { color: feature.properties.color };
}
}).bindPopup(function (layer) {
return layer.feature.properties.description;
}).addTo(map);
Contents
Creation
| Factory | Description |
|---|---|
L.geoJSON(<Object> geojson?, <GeoJSON options> options?) | Creates a GeoJSON layer. Optionally accepts an object in GeoJSON format to display on the map (you can alternatively add it later with addData method) and an options object. |
Options
| Option | Type | Default | Description |
|---|---|---|---|
pointToLayer | Function | * | A Function defining how GeoJSON points spawn Leaflet layers. It is internally called when data is added, passing the GeoJSON point feature and its LatLng. The default is to spawn a default Marker:function(geoJsonPoint, latlng) { return L.marker(latlng); } |
style | Function | * | A Function defining the Path options for styling GeoJSON lines and polygons, called internally when data is added. The default value is to not override any defaults:function (geoJsonFeature) { return {} } |
onEachFeature | Function | * | A Function that will be called once for each created Feature, after it has been created and styled. Useful for attaching events and popups to features. The default is to do nothing with the newly created layers:function (feature, layer) {} |
filter | Function | * | A Function that will be used to decide whether to include a feature or not. The default is to include all features:function (geoJsonFeature) { return true; } Note: dynamically changing the filter option will have effect only on newly added data. It will not re-evaluate already included features. |
coordsToLatLng | Function | * | A Function that will be used for converting GeoJSON coordinates to LatLngs. The default is the coordsToLatLng static method. |
markersInheritOptions | Boolean | false | Whether default Markers for “Point” type Features inherit from group options. |
Keyword Related:
openstreetmap
osm map
openstreetview
osm api
openstreet view
