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

Minor geojson example edits

Browse Source
This commit is contained in:
mourner 2011-09-30 13:34:06 +03:00
parent 17ec851a02
commit b22102841d
2 changed files with 266 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
examples/geojson-example.html
View File

@ -6,8 +6,8 @@
<link rel="stylesheet" href="../dist/leaflet.css" /> <link rel="stylesheet" href="../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]--> <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<script src="../dist/leaflet.js"></script> <script src="../dist/leaflet.js"></script>
<!--<script src="../debug/leaflet-include.js"></script>--> <!--<script src="../debug/leaflet-include.js"></script>-->
<script src="sample-geojson.js" type="text/javascript"></script> <script src="sample-geojson.js" type="text/javascript"></script>
</head> </head>
<body> <body>
@ -20,83 +20,82 @@
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade', cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}); cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
map.setView(new L.LatLng(39.74738794765598, -105.00002861022949), 14) map.setView(new L.LatLng(39.747, -105), 14).addLayer(cloudmade);
.addLayer(cloudmade);
var BaseballIcon = L.Icon.extend({
var BaseballIcon = L.Icon.extend({ iconUrl: 'baseball-marker.png',
iconUrl: 'baseball-marker.png', shadowUrl: null,
shadowUrl: null, iconSize: new L.Point(32, 37),
iconSize: new L.Point(32, 37), shadowSize: null,
shadowSize: null, iconAnchor: new L.Point(14, 37),
iconAnchor: new L.Point(14, 37), popupAnchor: new L.Point(2, -32)
popupAnchor: new L.Point(2, -32) });
});
var geojsonLayer = new L.GeoJSON(null, {
var geojsonLayer = new L.GeoJSON(null, { pointToLayer: function (latlng){
pointToLayer: function (latlng){ return new L.CircleMarker(latlng, {
return new L.CircleMarker(latlng, { radius: 8,
radius: 8, fillColor: "#ff7800",
fillColor: "#ff7800", color: "#000",
color: "#000", weight: 1,
weight: 1, opacity: 1,
opacity: 1, fillOpacity: 0.8
fillOpacity: 0.8 });
}); }
} });
});
var anotherGeojsonLayer = new L.GeoJSON(coorsField, {
var anotherGeojsonLayer = new L.GeoJSON(coorsField, { pointToLayer: function (latlng){
pointToLayer: function (latlng){ return new L.Marker(latlng, {
return new L.Marker(latlng, { icon: new BaseballIcon()
icon: new BaseballIcon() });
}); }
} });
});
var lightRailGeojsonLayer = new L.GeoJSON();
var lightRailGeojsonLayer = new L.GeoJSON();
geojsonLayer.on("featureparse", function (e) {
geojsonLayer.on("featureparse", function(e){ var popupContent = "<p>I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!</p>";
var popupContent = "<p>I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!</p>"; if (e.geometryType == "Point") {
if (e.geometryType == "Point"){ popupContent += "<p>This GeoJSON Point has been transformed into a <a href='http://leaflet.cloudmade.com/reference.html#circlemarker'>CircleMarker</a> by passing a <code>pointToLayer</code> function in the <a href='http://leaflet.cloudmade.com/reference.html#geojson-options'>GeoJSON options</a> when instantiating the GeoJSON layer. View source for details.</p>";
popupContent += "<p>This GeoJSON Point has been transformed into a <a href='http://leaflet.cloudmade.com/reference.html#circlemarker'>CircleMarker</a> by passing a <code>pointToLayer</code> function in the <a href='http://leaflet.cloudmade.com/reference.html#geojson-options'>GeoJSON options</a> when instantiating the GeoJSON layer. View source for details.</p>"; }
} if (e.properties && e.properties.popupContent) {
if (e.properties && e.properties.popupContent){ popupContent += e.properties.popupContent;
popupContent += e.properties.popupContent; }
} e.layer.bindPopup(popupContent);
e.layer.bindPopup(popupContent); if (e.properties && e.properties.style && e.layer.setStyle) {
if (e.properties && e.properties.style && e.layer.setStyle){ e.layer.setStyle(e.properties.style);
e.layer.setStyle(e.properties.style); }
} });
});
anotherGeojsonLayer.on("featureparse", function (e) {
anotherGeojsonLayer.on("featureparse", function (e){ var popupContent = "<p>I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!</p>";
var popupContent = "<p>I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!</p>"; popupContent += "<p>This GeoJSON Point has been transformed into a custom Marker by passing a <code>pointToLayer</code> function in the <a href='http://leaflet.cloudmade.com/reference.html#geojson-options'>GeoJSON options</a> when instantiating the GeoJSON layer. View source for details.</p>";
popupContent += "<p>This GeoJSON Point has been transformed into a custom Marker by passing a <code>pointToLayer</code> function in the <a href='http://leaflet.cloudmade.com/reference.html#geojson-options'>GeoJSON options</a> when instantiating the GeoJSON layer. View source for details.</p>"; if (e.properties && e.properties.popupContent) {
if (e.properties && e.properties.popupContent){ popupContent += e.properties.popupContent;
popupContent += e.properties.popupContent; }
} e.layer.bindPopup(popupContent);
e.layer.bindPopup(popupContent); });
});
lightRailGeojsonLayer.on("featureparse", function (e) {
lightRailGeojsonLayer.on("featureparse", function (e){ var popupContent = "<p>I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!</p>";
var popupContent = "<p>I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!</p>"; popupContent += "<p>This is the default look of a GeoJSON Point.</p>";
popupContent += "<p>This is the default look of a GeoJSON Point.</p>"; if (e.properties && e.properties.popupContent) {
if (e.properties && e.properties.popupContent){ popupContent += e.properties.popupContent;
popupContent += e.properties.popupContent; }
} e.layer.bindPopup(popupContent);
e.layer.bindPopup(popupContent); });
});
map.addLayer(geojsonLayer)
map.addLayer(geojsonLayer) .addLayer(anotherGeojsonLayer)
.addLayer(anotherGeojsonLayer) .addLayer(lightRailGeojsonLayer);
.addLayer(lightRailGeojsonLayer);
geojsonLayer.addGeoJSON(freeBus);
geojsonLayer.addGeoJSON(freeBus); geojsonLayer.addGeoJSON(bicycleRental);
geojsonLayer.addGeoJSON(bicycleRental); geojsonLayer.addGeoJSON(campus);
geojsonLayer.addGeoJSON(campus);
anotherGeojsonLayer.addGeoJSON(coorsField);
anotherGeojsonLayer.addGeoJSON(coorsField);
lightRailGeojsonLayer.addGeoJSON(lightRailStop); lightRailGeojsonLayer.addGeoJSON(lightRailStop);
</script> </script>

385
examples/geojson.html
View File

@ -42,211 +42,202 @@
<p><a href="../examples.html">&larr; Back to the list of examples</a></p> <p><a href="../examples.html">&larr; Back to the list of examples</a></p>
<h3>Using GeoJSON with Leaflet</h3> <h3>Using GeoJSON with Leaflet</h3>
<p>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" style="height: 220px; margin-bottom: 18px"></div>
<script src="sample-geojson.js" type="text/javascript"></script> <script src="sample-geojson.js" type="text/javascript"></script>
<script> <script>
var map = new L.Map('map'); var map = new L.Map('map');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/22677/256/{z}/{x}/{y}.png', var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/22677/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade', cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}); cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
map.setView(new L.LatLng(39.74738794765598, -105.00002861022949), 13) map.setView(new L.LatLng(39.74738794765598, -105.00002861022949), 13)
.addLayer(cloudmade); .addLayer(cloudmade);
var BaseballIcon = L.Icon.extend({ var BaseballIcon = L.Icon.extend({
iconUrl: 'baseball-marker.png', iconUrl: 'baseball-marker.png',
shadowUrl: null, shadowUrl: null,
iconSize: new L.Point(32, 37), iconSize: new L.Point(32, 37),
shadowSize: null, shadowSize: null,
iconAnchor: new L.Point(14, 37), iconAnchor: new L.Point(14, 37),
popupAnchor: new L.Point(2, -32) popupAnchor: new L.Point(2, -32)
}); });
var geojsonLayer = new L.GeoJSON(null, { var geojsonLayer = new L.GeoJSON(null, {
pointToLayer: function (latlng){ pointToLayer: function (latlng){
return new L.CircleMarker(latlng, { return new L.CircleMarker(latlng, {
radius: 8, radius: 8,
fillColor: "#ff7800", fillColor: "#ff7800",
color: "#000", color: "#000",
weight: 1, weight: 1,
opacity: 1, opacity: 1,
fillOpacity: 0.8 fillOpacity: 0.8
}); });
} }
}); });
var anotherGeojsonLayer = new L.GeoJSON(coorsField, { var anotherGeojsonLayer = new L.GeoJSON(coorsField, {
pointToLayer: function (latlng){ pointToLayer: function (latlng){
return new L.Marker(latlng, { return new L.Marker(latlng, {
icon: new BaseballIcon() icon: new BaseballIcon()
}); });
} }
}); });
geojsonLayer.on("featureparse", function(e){ geojsonLayer.on("featureparse", function(e){
var popupContent = "<p>I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!</p>"; var popupContent = "<p>I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!</p>";
if (e.properties && e.properties.popupContent){ if (e.properties && e.properties.popupContent){
popupContent += e.properties.popupContent; popupContent += e.properties.popupContent;
} }
e.layer.bindPopup(popupContent); e.layer.bindPopup(popupContent);
if (e.properties && e.properties.style){ if (e.properties && e.properties.style){
e.layer.setStyle(e.properties.style); e.layer.setStyle(e.properties.style);
} }
}); });
anotherGeojsonLayer.on("featureparse", function (e){ anotherGeojsonLayer.on("featureparse", function (e){
var popupContent = "<p>I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!</p>"; var popupContent = "<p>I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!</p>";
if (e.properties && e.properties.popupContent){ if (e.properties && e.properties.popupContent){
popupContent += e.properties.popupContent; popupContent += e.properties.popupContent;
} }
e.layer.bindPopup(popupContent); e.layer.bindPopup(popupContent);
}); });
map.addLayer(geojsonLayer).addLayer(anotherGeojsonLayer); map.addLayer(geojsonLayer).addLayer(anotherGeojsonLayer);
geojsonLayer.addGeoJSON(freeBus); geojsonLayer.addGeoJSON(freeBus);
geojsonLayer.addGeoJSON(bicycleRental); geojsonLayer.addGeoJSON(bicycleRental);
geojsonLayer.addGeoJSON(campus); geojsonLayer.addGeoJSON(campus);
anotherGeojsonLayer.addGeoJSON(coorsField); anotherGeojsonLayer.addGeoJSON(coorsField);
</script> </script>
<p><a target="_blank" href="geojson-example.html">View example &rarr;</a></p> <p><a target="_blank" href="geojson-example.html">View example on a separate page &rarr;</a></p>
<h3>About GeoJSON</h3>
<p>According to <a href="http://geojson.org">http://geojson.org</a>:</p>
<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>About GeoJSON</h3>
<p>According to <a href="http://geojson.org">http://geojson.org</a>:</p>
<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> <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>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 class="css">var geojsonLayer = new L.GeoJSON(); <pre><code class="css">var geojsonLayer = new L.GeoJSON();
map.addLayer(geojsonLayer);</code></pre> map.addLayer(geojsonLayer);</code></pre>
<p>This creates an empty GeoJSON layer that we can easily add vectors to with the <code>addGeoJSON</code> method.</p> <p>This creates an empty GeoJSON layer that we can easily add vectors to with the <code>addGeoJSON</code> method.</p>
<pre><code>var geojsonFeature = { <pre><code>var geojsonFeature = {
"type": "Feature", "type": "Feature",
"properties": { "properties": {
"name": "Coors Field", "name": "Coors Field",
"amenity": "Baseball Stadium", "amenity": "Baseball Stadium",
"popupContent": "This is where the Rockies play!" "popupContent": "This is where the Rockies play!"
}, },
"geometry": { "geometry": {
"type": "Point", "type": "Point",
"coordinates": [-104.99404, 39.75621] "coordinates": [-104.99404, 39.75621]
} }
}; };
geojsonLayer.addGeoJSON(geojsonFeature);</code></pre> geojsonLayer.addGeoJSON(geojsonFeature);</code></pre>
<p>We can also instantiate the GeoJSON layer with a GeoJSON object to show it immediately, without having to call <code>addGeoJSON</code>.</p> <p>We can also instantiate the GeoJSON layer with a GeoJSON object to show it immediately, without having to call <code>addGeoJSON</code>.</p>
<pre><code>var geojsonFeature = { <pre><code>var geojsonLayer = new L.GeoJSON(geojsonFeature);
"type": "Feature",
"properties": { map.addLayer(geojsonLayer);</code></pre>
"name": "Coors Field",
"amenity": "Baseball Stadium", <h3>Popups</h3>
"popupContent": "This is where the Rockies play!"
}, <p>We can use popups to show information about these features when they are clicked. To accomplish this we'll listen to the <code>featureparse</code> 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.</p>
"geometry": {
"type": "Point", <pre><code>geojsonLayer.on("featureparse", function (e) {
"coordinates": [-104.99404, 39.75621] if (e.properties &amp;&amp; e.properties.popupContent){
} e.layer.bindPopup(e.properties.popupContent);
}; }
});</code></pre>
var geojsonLayer = new L.GeoJSON(geojsonFeature);
<p>Make sure to do this <em>before</em> adding GeoJSON objects through the <code>addGeoJSON</code> method.</p>
map.addLayer(geojsonLayer);</code></pre>
<h3>Popups</h3>
<p>We can use popups to show information about these features when they are clicked. To accomplish this we'll listen to the <code>featureparse</code> 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.</p>
<pre><code>geojsonLayer.on("featureparse", function (e){
if (e.properties &amp;&amp; e.properties.popupContent){
e.layer.bindPopup(e.properties.popupContent);
}
});</code></pre>
<h3>Styling Features</h3> <h3>Styling Features</h3>
<p>We can also listen to the <code>featureparse</code> 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 <a href="http://leaflet.cloudmade.com/reference.html#path-options">path options</a>. Our feature with styling information might look something like:</p> <p>We can also listen to the <code>featureparse</code> 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 <a href="http://leaflet.cloudmade.com/reference.html#path-options">path options</a>. Our feature with styling information might look something like:</p>
<pre><code>var freeBus = { <pre><code>var freeBus = {
"type": "Feature", "type": "Feature",
"geometry": { "geometry": {
"type": "LineString", "type": "LineString",
"coordinates": [ "coordinates": [
[-104.98726, 39.74136], [-104.98726, 39.74136],
[-104.98720, 39.74132], [-104.98720, 39.74132],
[-104.98715, 39.74127], [-104.98715, 39.74127],
[-104.98713, 39.74117], [-104.98713, 39.74117],
[-104.98712, 39.74106], ... [-104.98712, 39.74106], ...
] ]
}, },
"properties": { "properties": {
"name": "16th Street Free Bus", "name": "16th Street Free Bus",
"style": { "style": {
"color": "#004070", "color": "#004070",
"weight": 4, "weight": 4,
"opacity": 0.9 "opacity": 0.9
}, },
"popupContent": "This is the 16th street free bus ..." "popupContent": "This is the 16th street free bus ..."
} }
};</code></pre> };</code></pre>
<p>To change the feature's style from the Leaflet default, we simply call the <code>setStyle</code> method on our layer (<code>e.layer</code>) in our <code>featureparse</code> event listener.</p> <p>To change the feature's style from the Leaflet default, we simply call the <code>setStyle</code> method on our layer (<code>e.layer</code>) in our <code>featureparse</code> event listener.</p>
<pre><code>geojsonLayer.on("featureparse", function (e){ <pre><code>geojsonLayer.on("featureparse", function (e){
if (e.properties &amp;&amp; e.properties.style &amp;&amp; e.layer.setStyle){ if (e.properties &amp;&amp; e.properties.style &amp;&amp; e.layer.setStyle){
// The setStyle method isn't available for Points. More on that below ... // The setStyle method isn't available for Points. More on that below ...
e.layer.setStyle(e.properties.style); e.layer.setStyle(e.properties.style);
} }
});</code></pre> });</code></pre>
<h3>Styling Points</h3> <h3>Styling Points</h3>
<p>Points are handled differently than LineStrings and Polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a <code>pointToLayer</code> function in a <a href="http://leaflet.cloudmade.com/reference.html#geojson-options">GeoJSON options</a> object when creating the GeoJSON layer. This function is passed a <a href="http://leaflet.cloudmade.com/reference.html#latlng">LatLng</a> and should return an instance of ILayer, in this case likely a <a href="http://leaflet.cloudmade.com/reference.html#marker">Marker</a> or <a href="http://leaflet.cloudmade.com/reference.html#circlemarker">CircleMarker</a>.</p> <p>Points are handled differently than polylines and polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a <code>pointToLayer</code> function in a <a href="http://leaflet.cloudmade.com/reference.html#geojson-options">GeoJSON options</a> object when creating the GeoJSON layer. This function is passed a <a href="http://leaflet.cloudmade.com/reference.html#latlng">LatLng</a> and should return an instance of ILayer, in this case likely a <a href="http://leaflet.cloudmade.com/reference.html#marker">Marker</a> or <a href="http://leaflet.cloudmade.com/reference.html#circlemarker">CircleMarker</a>.</p>
<p>Here we're using a CircleMarker:</p> <p>Here we're using a CircleMarker:</p>
<pre><code>var geojsonLayer = new L.GeoJSON(null, { <pre><code>var geojsonMarkerOptions = {
pointToLayer: function (latlng){ radius: 8,
return new L.CircleMarker(latlng, { fillColor: "#ff7800",
radius: 8, color: "#000",
fillColor: "#ff7800", weight: 1,
color: "#000", opacity: 1,
weight: 1, fillOpacity: 0.8
opacity: 1, };
fillOpacity: 0.8
}); var geojsonLayer = new L.GeoJSON(someGeojsonFeature, {
} pointToLayer: function (latlng) {
});</code></pre> return new L.CircleMarker(latlng, geojsonMarkerOptions);
}
<p>And here's an example of using a custom Marker:</p> });</code></pre>
<pre><code>var geojsonLayer = new L.GeoJSON(null, { <p>And here's an example of using a custom Marker:</p>
pointToLayer: function (latlng){
return new L.Marker(latlng, { <pre><code>var geojsonLayer = new L.GeoJSON(someGeojsonFeature, {
icon: new MyCustomIcon() pointToLayer: function (latlng) {
}); return new L.Marker(latlng, {
} icon: new MyCustomIcon()
});</code></pre> });
}
<p>View the <a href="geojson-example.html">example page</a> to view in detail what all is possible with the GeoJSON layer.</p> });</code></pre>
<p>View the <a href="geojson-example.html">example page</a> to see in detail what is possible with the GeoJSON layer.</p>
<hr /> <hr />