cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve GeoJSON example

Browse Source
This commit is contained in:
mourner 2012-07-28 14:32:45 +03:00
parent 61bbb8bae7
commit 754e46c9b2
2 changed files with 79 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/geojson-example.html
View File

@ -41,7 +41,7 @@
layer.bindPopup(popupContent); layer.bindPopup(popupContent);
} }
L.geoJson({features: [bicycleRental, campus]}, { L.geoJson([bicycleRental, campus], {
style: function (feature) { style: function (feature) {
return feature.properties && feature.properties.style; return feature.properties && feature.properties.style;
@ -74,7 +74,7 @@
onEachFeature: onEachFeature onEachFeature: onEachFeature
}).addTo(map); }).addTo(map);
var coorsLayer = L.geoJson(null, { var coorsLayer = L.geoJson(coorsField, {
pointToLayer: function (feature, latlng) { pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: baseballIcon}); return L.marker(latlng, {icon: baseballIcon});
@ -83,8 +83,6 @@
onEachFeature: onEachFeature onEachFeature: onEachFeature
}).addTo(map); }).addTo(map);
coorsLayer.addData(coorsField);
</script> </script>
</body> </body>
</html> </html>

205
examples/geojson.html
View File

@ -7,7 +7,7 @@ title: Using GeoJSON with Leaflet
<p>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 <a href="http://geojson.org/">GeoJSON</a> objects.</p> <p>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 <a href="http://geojson.org/">GeoJSON</a> objects.</p>
<div id="map" style="height: 220px; margin-bottom: 18px"></div> <div id="map" class="map" style="height: 250px"></div>
<script src="sample-geojson.js" type="text/javascript"></script> <script src="sample-geojson.js" type="text/javascript"></script>
<script> <script>
@ -83,7 +83,7 @@ title: Using GeoJSON with Leaflet
</script> </script>
<p><a target="_blank" href="geojson-example.html">View example on a separate page &rarr;</a></p> <p><a href="geojson-example.html">View example on a separate page &rarr;</a></p>
<h3>About GeoJSON</h3> <h3>About GeoJSON</h3>
@ -91,11 +91,7 @@ title: Using GeoJSON with Leaflet
<blockquote>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.</blockquote> <blockquote>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.</blockquote>
<p>Leaflet supports all of the GeoJSON types above but <a href="http://geojson.org/geojson-spec.html#feature-objects">Features</a> and <a href="http://geojson.org/geojson-spec.html#feature-collection-objects">FeatureCollections</a> 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. (<a target="_blank" href="geojson-example.html">see example</a>)</p> <p>Leaflet supports all of the GeoJSON types above, but <a href="http://geojson.org/geojson-spec.html#feature-objects">Features</a> and <a href="http://geojson.org/geojson-spec.html#feature-collection-objects">FeatureCollections</a> 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. Here's an example of a simple GeoJSON feature:</p>
<h3>The GeoJSON layer</h3>
<p>GeoJSON objects are added to the map through a <a href="http://leaflet.cloudmade.com/reference.html#geojson">GeoJSON layer</a>. To create a GeoJSON layer and add it to a map we can use the following code.</p>
<pre><code>var geojsonFeature = { <pre><code>var geojsonFeature = {
"type": "Feature", "type": "Feature",
@ -109,13 +105,17 @@ title: Using GeoJSON with Leaflet
"coordinates": [-104.99404, 39.75621] "coordinates": [-104.99404, 39.75621]
} }
}; };
</code></pre>
L.geoJson(geojsonFeature).addTo(map);</code></pre> <h3>The GeoJSON layer</h3>
<p>GeoJSON objects are added to the map through a <a href="http://leaflet.cloudmade.com/reference.html#geojson">GeoJSON layer</a>. To create it and add it to a map, we can use the following code:</p>
<pre><code>L.geoJson(geojsonFeature).addTo(map);</code></pre>
<p>Alternatively, we could create an empty GeoJSON layer and assign it to a variable so that we can add more features to it later.</p> <p>Alternatively, we could create an empty GeoJSON layer and assign it to a variable so that we can add more features to it later.</p>
<pre><code>var myLayer = L.geoJson().addTo(map); <pre><code>var myLayer = L.geoJson().addTo(map);
myLayer.addData(geojsonFeature); myLayer.addData(geojsonFeature);
</code></pre> </code></pre>
@ -123,108 +123,61 @@ myLayer.addData(geojsonFeature);
<h4>style</h4> <h4>style</h4>
<p>The <code>style</code> option can be used to style features two different ways. We can pass a simple object that styles all paths (polylines and polygons) the same way.</p> <p>The <code>style</code> option can be used to style features two different ways. First, we can pass a simple object that styles all paths (polylines and polygons) the same way:</p>
<pre><code>var myStyle = { <pre><code>var myLines = [{
"type": "LineString",
"coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
"type": "LineString",
"coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];
var myStyle = {
"color": "#ff7800", "color": "#ff7800",
"weight": 5, "weight": 5,
"opacity": 0.65 "opacity": 0.65
}; };
var myLines = {
"type": "GeometryCollection",
"features": [
{
"type": "LineString",
"coordinates": [
[-100, 40],
[-105, 45],
[-110, 55]
]
},
{
"type": "LineString",
"coordinates": [
[-105, 40],
[-110, 45],
[-115, 55]
]
}
]
};
L.geoJson(myLines, { L.geoJson(myLines, {
style: myStyle style: myStyle
}).addTo(map);</code></pre> }).addTo(map);</code></pre>
<p>Alternatively, we can pass an function that styles individual features based on their properties. In the example below we check the "party" property and style our polygons accordingly. </p> <p>Alternatively, we can pass a function that styles individual features based on their properties. In the example below we check the "party" property and style our polygons accordingly:</p>
<pre><code>var republicanStyle = { <pre><code>var states = [{
"color": "#ff0000", "type": "Feature",
"opacity": 1, "properties": {"party": "Republican"},
"weight": 2, "geometry": {
"fillOpacity": 0.4, "type": "Polygon",
"fillColor": "#ff0000" "coordinates": [[
[-104.05, 48.99],
}; [-97.22, 48.98],
[-96.58, 45.94],
var democratStyle = { [-104.03, 45.94],
"color": "#0000ff", [-104.05, 48.99]
"opacity": 1, ]]
"weight": 2, }
"fillOpacity": 0.4, }, {
"fillColor": "#0000ff" "type": "Feature",
"properties": {"party": "Democrat"},
}; "geometry": {
"type": "Polygon",
var states = { "coordinates": [[
"type": "FeatureCollection", [-109.05, 41.00],
"features": [ [-102.06, 40.99],
{ [-102.03, 36.99],
"type": "Feature", [-109.04, 36.99],
"properties": { [-109.05, 41.00]
"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]
]
]
}
}
]
};
L.geoJson(states, { L.geoJson(states, {
style: function(feature) { style: function(feature) {
if (feature.properties.party === "Republican") { switch (feature.properties.party) {
return republicanStyle; case 'Republican': return {color: "#ff0000"};
} else if (feature.properties.party === "Democrat") { case 'Democrat': return {color: "#0000ff"};
return democratStyle;
} }
} }
}).addTo(map);</code></pre> }).addTo(map);</code></pre>
@ -250,13 +203,15 @@ L.geoJson(someGeojsonFeature, {
} }
}).addTo(map);</code></pre> }).addTo(map);</code></pre>
<p>We could also set the <code>style</code> property in this example &mdash; Leaflet is smart enough to apply styles to GeoJSON points if you create a vector layer like circle inside the <code>pointToLayer</code> function.</p>
<h4>onEachFeature</h4> <h4>onEachFeature</h4>
<p>The <code>onEachFeature</code> option is a function that gets triggered when each feature added to a GeoJSON layer. A common reason to use this option is to attach a popup to features when they are clicked.</p> <p>The <code>onEachFeature</code> option is a function that gets called on each feature before adding it to a GeoJSON layer. A common reason to use this option is to attach a popup to features when they are clicked.</p>
<pre><code>function onEachFeature (feature, layer) { <pre><code>function onEachFeature(feature, layer) {
// Does this feature have a property named popupContent? // does this feature have a property named popupContent?
if (feature.properties && feature.properties.popupContent) { if (feature.properties &amp;&amp; feature.properties.popupContent) {
layer.bindPopup(feature.properties.popupContent); layer.bindPopup(feature.properties.popupContent);
} }
} }
@ -284,33 +239,27 @@ L.geoJson(geojsonFeature, {
<p>In the example below "Busch Field" will not be shown on the map.</p> <p>In the example below "Busch Field" will not be shown on the map.</p>
<pre><code>var someFeatures = { <pre><code>var someFeatures = [{
"type": "FeatureCollection", "type": "Feature",
"features": [ "properties": {
{ "name": "Coors Field",
"type": "Feature", "show_on_map": true
"properties": { },
"name": "Coors Field", "geometry": {
"show_on_map": true "type": "Point",
}, "coordinates": [-104.99404, 39.75621]
"geometry": { }
"type": "Point", }, {
"coordinates": [-104.99404, 39.75621] "type": "Feature",
} "properties": {
}, "name": "Busch Field",
{ "show_on_map": false
"type": "Feature", },
"properties": { "geometry": {
"name": "Busch Field", "type": "Point",
"show_on_map": false "coordinates": [-104.98404, 39.74621]
}, }
"geometry": { }];
"type": "Point",
"coordinates": [-104.98404, 39.74621]
}
}
]
};
L.geoJson(someFeatures, { L.geoJson(someFeatures, {
filter: function(feature, layer) { filter: function(feature, layer) {