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);
}
L.geoJson({features: [bicycleRental, campus]}, {
L.geoJson([bicycleRental, campus], {
style: function (feature) {
return feature.properties && feature.properties.style;
@ -74,7 +74,7 @@
onEachFeature: onEachFeature
}).addTo(map);
var coorsLayer = L.geoJson(null, {
var coorsLayer = L.geoJson(coorsField, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: baseballIcon});
@ -83,8 +83,6 @@
onEachFeature: onEachFeature
}).addTo(map);
coorsLayer.addData(coorsField);
</script>
</body>
</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>
<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>
@ -83,7 +83,7 @@ title: Using GeoJSON with Leaflet
</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>
@ -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>
<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>
<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>
<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>
<pre><code>var geojsonFeature = {
"type": "Feature",
@ -109,13 +105,17 @@ title: Using GeoJSON with Leaflet
"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>
<pre><code>var myLayer = L.geoJson().addTo(map);
myLayer.addData(geojsonFeature);
</code></pre>
@ -123,108 +123,61 @@ myLayer.addData(geojsonFeature);
<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",
"weight": 5,
"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, {
style: myStyle
}).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 = {
"color": "#ff0000",
"opacity": 1,
"weight": 2,
"fillOpacity": 0.4,
"fillColor": "#ff0000"
};
var democratStyle = {
"color": "#0000ff",
"opacity": 1,
"weight": 2,
"fillOpacity": 0.4,
"fillColor": "#0000ff"
};
var states = {
"type": "FeatureCollection",
"features": [
{
"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]
]
]
}
}
]
};
<pre><code>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]
]]
}
}];
L.geoJson(states, {
style: function(feature) {
if (feature.properties.party === "Republican") {
return republicanStyle;
} else if (feature.properties.party === "Democrat") {
return democratStyle;
switch (feature.properties.party) {
case 'Republican': return {color: "#ff0000"};
case 'Democrat': return {color: "#0000ff"};
}
}
}).addTo(map);</code></pre>
@ -250,13 +203,15 @@ L.geoJson(someGeojsonFeature, {
}
}).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>
<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) {
// Does this feature have a property named popupContent?
if (feature.properties && feature.properties.popupContent) {
<pre><code>function onEachFeature(feature, layer) {
// does this feature have a property named popupContent?
if (feature.properties &amp;&amp; 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>
<pre><code>var someFeatures = {
"type": "FeatureCollection",
"features": [
{
"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]
}
}
]
};
<pre><code>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]
}
}];
L.geoJson(someFeatures, {
filter: function(feature, layer) {