cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
47308176ff
Leaflet/examples/geojson-example.html

103 lines
4.0 KiB
HTML
Raw Normal View History

initial geojson example work
2011-06-18 00:45:04 +08:00
<!DOCTYPE html>
<html>
<head>
Getting started with a GeoJSON example page.
2011-09-21 14:08:12 +08:00
<title>Leaflet GeoJSON example</title>
initial geojson example work
2011-06-18 00:45:04 +08:00
Getting started with a GeoJSON example page.
2011-09-21 14:08:12 +08:00
<link rel="stylesheet" href="../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
initial geojson example work
2011-06-18 00:45:04 +08:00
Minor geojson example edits
2011-09-30 18:34:06 +08:00
<script src="../dist/leaflet.js"></script>
<!--<script src="../debug/leaflet-include.js"></script>-->
Getting started with a GeoJSON example page.
2011-09-21 14:08:12 +08:00
<script src="sample-geojson.js" type="text/javascript"></script>
initial geojson example work
2011-06-18 00:45:04 +08:00
</head>
<body>
Getting started with a GeoJSON example page.
2011-09-21 14:08:12 +08:00
<div id="map" style="width: 600px; height: 400px"></div>
initial geojson example work
2011-06-18 00:45:04 +08:00
Getting started with a GeoJSON example page.
2011-09-21 14:08:12 +08:00
<script>
var map = new L.Map('map');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/22677/256/{z}/{x}/{y}.png',
initial geojson example work
2011-06-18 00:45:04 +08:00
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
Minor geojson example edits
2011-09-30 18:34:06 +08:00
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 = "<p>I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!</p>";
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>";
}
if (e.properties && e.properties.popupContent) {
popupContent += e.properties.popupContent;
}
e.layer.bindPopup(popupContent);
if (e.properties && e.properties.style && e.layer.setStyle) {
e.layer.setStyle(e.properties.style);
}
});
anotherGeojsonLayer.on("featureparse", function (e) {
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>";
if (e.properties && e.properties.popupContent) {
popupContent += e.properties.popupContent;
}
e.layer.bindPopup(popupContent);
});
lightRailGeojsonLayer.on("featureparse", function (e) {
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>";
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);
Changing JavaScript coding convention.
2011-09-29 22:30:48 +08:00
lightRailGeojsonLayer.addGeoJSON(lightRailStop);
initial geojson example work
2011-06-18 00:45:04 +08:00
</script>
</body>
</html>
Reference in New Issue Copy Permalink