I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!
"; - if (e.geometryType == "Point"){ - popupContent += "This GeoJSON Point has been transformed into a CircleMarker by passing a pointToLayer function in the GeoJSON options when instantiating the GeoJSON layer. View source for details.
I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!
"; - popupContent += "This GeoJSON Point has been transformed into a custom Marker by passing a pointToLayer function in the GeoJSON options when instantiating the GeoJSON layer. View source for details.
I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!
"; - popupContent += "This is the default look of a GeoJSON Point.
"; - if (e.properties && e.properties.popupContent){ - popupContent += e.properties.popupContent; - } - e.layer.bindPopup(popupContent); - }); - - map.addLayer(geojsonLayer) - .addLayer(anotherGeojsonLayer) - .addLayer(lightRailGeojsonLayer); - - geojsonLayer.addGeoJSON(freeBus); - geojsonLayer.addGeoJSON(bicycleRental); - geojsonLayer.addGeoJSON(campus); - - anotherGeojsonLayer.addGeoJSON(coorsField); - + map.setView(new L.LatLng(39.747, -105), 14).addLayer(cloudmade); + + var BaseballIcon = L.Icon.extend({ + iconUrl: 'baseball-marker.png', + shadowUrl: null, + iconSize: new L.Point(32, 37), + shadowSize: null, + iconAnchor: new L.Point(14, 37), + popupAnchor: new L.Point(2, -32) + }); + + var geojsonLayer = new L.GeoJSON(null, { + pointToLayer: function (latlng){ + return new L.CircleMarker(latlng, { + radius: 8, + fillColor: "#ff7800", + color: "#000", + weight: 1, + opacity: 1, + fillOpacity: 0.8 + }); + } + }); + + var anotherGeojsonLayer = new L.GeoJSON(coorsField, { + pointToLayer: function (latlng){ + return new L.Marker(latlng, { + icon: new BaseballIcon() + }); + } + }); + + var lightRailGeojsonLayer = new L.GeoJSON(); + + geojsonLayer.on("featureparse", function (e) { + var popupContent = "I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!
"; + if (e.geometryType == "Point") { + popupContent += "This GeoJSON Point has been transformed into a CircleMarker by passing a pointToLayer function in the GeoJSON options when instantiating the GeoJSON layer. View source for details.
I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!
"; + popupContent += "This GeoJSON Point has been transformed into a custom Marker by passing a pointToLayer function in the GeoJSON options when instantiating the GeoJSON layer. View source for details.
I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!
"; + popupContent += "This is the default look of a GeoJSON Point.
"; + if (e.properties && e.properties.popupContent) { + popupContent += e.properties.popupContent; + } + e.layer.bindPopup(popupContent); + }); + + map.addLayer(geojsonLayer) + .addLayer(anotherGeojsonLayer) + .addLayer(lightRailGeojsonLayer); + + geojsonLayer.addGeoJSON(freeBus); + geojsonLayer.addGeoJSON(bicycleRental); + geojsonLayer.addGeoJSON(campus); + + anotherGeojsonLayer.addGeoJSON(coorsField); + lightRailGeojsonLayer.addGeoJSON(lightRailStop); diff --git a/examples/geojson.html b/examples/geojson.html index 65aec629..9be65cf6 100644 --- a/examples/geojson.html +++ b/examples/geojson.html @@ -42,211 +42,202 @@← Back to the list of examples
In this example, you'll learn how to create and interact with map vectors created from GeoJSON objects.
+GeoJSON is becoming a very popular data format among many GIS technologies and services — it's simple, lightweight, straightforward, and Leaflet is quite good at handling it. In this example, you'll learn how to create and interact with map vectors created from GeoJSON objects.
- - - - - - + + + + + +View example on a separate page →
+ +According to http://geojson.org:
+ +GeoJSON is a format for encoding a variety of geographic data structures. A GeoJSON object may represent a geometry, a feature, or a collection of features. GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. Features in GeoJSON contain a geometry object and additional properties, and a feature collection represents a list of features.+ +
Leaflet supports all of the GeoJSON types above but Features and FeatureCollections work best as they allow you to describe features with a set of properties. We can even use these properties to style our Leaflet vectors. (see example)
-According to http://geojson.org:
- -GeoJSON is a format for encoding a variety of geographic data structures. A GeoJSON object may represent a geometry, a feature, or a collection of features. GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. Features in GeoJSON contain a geometry object and additional properties, and a feature collection represents a list of features.- -
Leaflet supports all of the GeoJSON types above but Features and FeatureCollections work best as they allow you to describe features with a set of properties. We can even use these properties to style our Leaflet vectors. (see example)
-GeoJSON objects are added to the map through a GeoJSON layer. To create a GeoJSON layer and add it to a map we can use the following code.
-var geojsonLayer = new L.GeoJSON();
-
-map.addLayer(geojsonLayer);This creates an empty GeoJSON layer that we can easily add vectors to with the addGeoJSON method.
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]
- }
-};
-
-geojsonLayer.addGeoJSON(geojsonFeature);We can also instantiate the GeoJSON layer with a GeoJSON object to show it immediately, without having to call addGeoJSON.
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]
- }
-};
-
-var geojsonLayer = new L.GeoJSON(geojsonFeature);
-
-map.addLayer(geojsonLayer);We can use popups to show information about these features when they are clicked. To accomplish this we'll listen to the featureparse event of the GeoJSON layer. Here we're checking to see if a feature has a property named "popupContent" and if so binding a popup to the feature so this text (or HTML) appears when clicked.
geojsonLayer.on("featureparse", function (e){
- if (e.properties && e.properties.popupContent){
- e.layer.bindPopup(e.properties.popupContent);
- }
-});var geojsonLayer = new L.GeoJSON();
+
+map.addLayer(geojsonLayer);This creates an empty GeoJSON layer that we can easily add vectors to with the addGeoJSON method.
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]
+ }
+};
+
+geojsonLayer.addGeoJSON(geojsonFeature);We can also instantiate the GeoJSON layer with a GeoJSON object to show it immediately, without having to call addGeoJSON.
var geojsonLayer = new L.GeoJSON(geojsonFeature);
+
+map.addLayer(geojsonLayer);We can use popups to show information about these features when they are clicked. To accomplish this we'll listen to the featureparse event of the GeoJSON layer. Here we're checking to see if a feature has a property named "popupContent" and if so binding a popup to the feature so this text (or HTML) appears when clicked.
geojsonLayer.on("featureparse", function (e) {
+ if (e.properties && e.properties.popupContent){
+ e.layer.bindPopup(e.properties.popupContent);
+ }
+});Make sure to do this before adding GeoJSON objects through the addGeoJSON method.
We can also listen to the featureparse event to style our LineString and Polygon features. As with our popup content, we can store our styling information in the properties of the GeoJSON object as well. These style properties should match those found in path options. Our feature with styling information might look something like:
var freeBus = {
- "type": "Feature",
- "geometry": {
- "type": "LineString",
- "coordinates": [
- [-104.98726, 39.74136],
- [-104.98720, 39.74132],
- [-104.98715, 39.74127],
- [-104.98713, 39.74117],
- [-104.98712, 39.74106], ...
- ]
- },
- "properties": {
- "name": "16th Street Free Bus",
- "style": {
- "color": "#004070",
- "weight": 4,
- "opacity": 0.9
- },
- "popupContent": "This is the 16th street free bus ..."
- }
-};To change the feature's style from the Leaflet default, we simply call the setStyle method on our layer (e.layer) in our featureparse event listener.
geojsonLayer.on("featureparse", function (e){
- if (e.properties && e.properties.style && e.layer.setStyle){
- // The setStyle method isn't available for Points. More on that below ...
- e.layer.setStyle(e.properties.style);
- }
-});Points are handled differently than LineStrings and Polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a pointToLayer function in a GeoJSON options object when creating the GeoJSON layer. This function is passed a LatLng and should return an instance of ILayer, in this case likely a Marker or CircleMarker.
Here we're using a CircleMarker:
- -var geojsonLayer = new L.GeoJSON(null, {
- pointToLayer: function (latlng){
- return new L.CircleMarker(latlng, {
- radius: 8,
- fillColor: "#ff7800",
- color: "#000",
- weight: 1,
- opacity: 1,
- fillOpacity: 0.8
- });
- }
-});And here's an example of using a custom Marker:
- -var geojsonLayer = new L.GeoJSON(null, {
- pointToLayer: function (latlng){
- return new L.Marker(latlng, {
- icon: new MyCustomIcon()
- });
- }
-});View the example page to view in detail what all is possible with the GeoJSON layer.
+We can also listen to the featureparse event to style our Polyline and Polygon features. As with our popup content, we can store our styling information in the properties of the GeoJSON object as well. These style properties should match those found in path options. Our feature with styling information might look something like:
var freeBus = {
+ "type": "Feature",
+ "geometry": {
+ "type": "LineString",
+ "coordinates": [
+ [-104.98726, 39.74136],
+ [-104.98720, 39.74132],
+ [-104.98715, 39.74127],
+ [-104.98713, 39.74117],
+ [-104.98712, 39.74106], ...
+ ]
+ },
+ "properties": {
+ "name": "16th Street Free Bus",
+ "style": {
+ "color": "#004070",
+ "weight": 4,
+ "opacity": 0.9
+ },
+ "popupContent": "This is the 16th street free bus ..."
+ }
+};To change the feature's style from the Leaflet default, we simply call the setStyle method on our layer (e.layer) in our featureparse event listener.
geojsonLayer.on("featureparse", function (e){
+ if (e.properties && e.properties.style && e.layer.setStyle){
+ // The setStyle method isn't available for Points. More on that below ...
+ e.layer.setStyle(e.properties.style);
+ }
+});Points are handled differently than polylines and polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a pointToLayer function in a GeoJSON options object when creating the GeoJSON layer. This function is passed a LatLng and should return an instance of ILayer, in this case likely a Marker or CircleMarker.
Here we're using a CircleMarker:
+ +var geojsonMarkerOptions = {
+ radius: 8,
+ fillColor: "#ff7800",
+ color: "#000",
+ weight: 1,
+ opacity: 1,
+ fillOpacity: 0.8
+};
+
+var geojsonLayer = new L.GeoJSON(someGeojsonFeature, {
+ pointToLayer: function (latlng) {
+ return new L.CircleMarker(latlng, geojsonMarkerOptions);
+ }
+});And here's an example of using a custom Marker:
+ +var geojsonLayer = new L.GeoJSON(someGeojsonFeature, {
+ pointToLayer: function (latlng) {
+ return new L.Marker(latlng, {
+ icon: new MyCustomIcon()
+ });
+ }
+});View the example page to see in detail what is possible with the GeoJSON layer.