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

GeoJSON (finally!), setStyle for paths

Browse Source
This commit is contained in:
Mourner 2011-06-10 14:26:16 +03:00
parent 00a107f162
commit 3b58a8bbe7
6 changed files with 202 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
debug/geojson/geojson-sample.js Normal file
View File

@ -0,0 +1,42 @@
var geojsonSample = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [102.0, 0.5]
},
"properties": {
"prop0": "value0",
"color": "blue"
}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]]
},
"properties": {
"color": "red",
"prop1": 0.0
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]]]
},
"properties": {
"color": "green",
"prop1": {
"this": "that"
}
}
}
]
};

47
debug/geojson/geojson.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
<button id="populate">Populate with 10 markers</button>
<script type="text/javascript" src="geojson-sample.js"></script>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var map = new L.Map('map', {
center: new L.LatLng(0.78, 102.37),
zoom: 7,
layers: [cloudmade]
});
var geojson = new L.GeoJSON();
geojson.on('featureparse', function(e) {
if (e.layer instanceof L.Path) {
e.layer.setStyle({color: e.properties.color});
}
e.layer.bindPopup(
'geometry type: ' + e.geometryType + '<br/>' +
'color: ' + e.properties.color);
});
geojson.addGeoJSON(geojsonSample);
map.addLayer(geojson);
</script>
</body>
</html>

56
debug/geojson/group.html
View File

@ -1,56 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
<button id="populate">Populate with 10 markers</button>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
latlng = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
var markers = new L.FeatureGroup();
function populate() {
var bounds = map.getBounds(),
southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast(),
lngSpan = northEast.lng - southWest.lng,
latSpan = northEast.lat - southWest.lat;
for (var i = 0; i < 10; i++) {
var latlng = new L.LatLng(
southWest.lat + latSpan * Math.random(),
southWest.lng + lngSpan * Math.random());
markers.addLayer(new L.Marker(latlng));
}
return false;
};
populate();
L.DomUtil.get('populate').onclick = populate;
markers.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>");
map.addLayer(markers);
</script>
</body>
</html>

2
debug/leaflet-include.js
View File

@ -58,6 +58,8 @@
'layer/vector/Circle.js',
'layer/vector/CircleMarker.js',
'layer/GeoJSON.js',
'handler/Handler.js',
'handler/MapDrag.js',
'handler/TouchZoom.js',

104
src/layer/GeoJSON.js Normal file
View File

@ -0,0 +1,104 @@
L.GeoJSON = L.LayerGroup.extend({
includes: L.Mixin.Events,
initialize: function(geojson, options) {
L.Util.setOptions(this, options);
this._geojson = geojson;
this._layers = {};
if (geojson) {
this.addGeoJSON(geojson);
}
},
addGeoJSON: function(geojson) {
if (geojson.features) {
for (var i = 0, len = geojson.features.length; i < len; i++) {
this.addGeoJSON(geojson.features[i]);
}
return;
}
var isFeature = (geojson.type == 'Feature'),
geometry = (isFeature ? geojson.geometry : geojson),
layer = L.GeoJSON.geometryToLayer(geometry, this.options.pointToLayer);
this.fire('featureparse', {
layer: layer,
properties: geojson.properties,
geometryType: geometry.type,
bbox: geojson.bbox,
id: geojson.id
});
this.addLayer(layer);
}
});
L.Util.extend(L.GeoJSON, {
geometryToLayer: function(geometry, pointToLayer) {
var coords = geometry.coordinates,
latlng, latlngs,
i, len,
layer,
layers = [];
switch (geometry.type) {
case 'Point':
latlng = this.coordsToLatlng(coords);
return pointToLayer ? pointToLayer(latlng) : new L.Marker(latlng);
case 'MultiPoint':
for (i = 0, len = coords.length; i < len; i++) {
latlng = this.coordsToLatlng(coords[i]);
layer = pointToLayer ? pointToLayer(latlng) : new L.Marker(latlng);
layers.push(layer);
}
return new L.FeatureGroup(layers);
case 'LineString':
latlngs = this.coordsToLatlngs(coords);
return new L.Polyline(latlngs);
case 'Polygon':
latlngs = this.coordsToLatlngs(coords, 1);
return new L.Polygon(latlngs);
case 'MultiLineString':
latlngs = this.coordsToLatlngs(coords, 1);
return new L.MultiPolyline(latlngs);
case "MultiPolygon":
latlngs = this.coordsToLatlngs(coords[i], 2);
return new L.MultiPolygon(latlngs);
case "GeometryCollection":
for (i = 0, len = geometry.geometries.length; i < len; i++) {
layer = this.geometryToLayer(geometry.geometries[i]);
layers.push(layer);
}
return new L.FeatureGroup(layers);
default:
throw new Error('Invalid GeoJSON object.');
}
},
coordsToLatlng: function(coords) {
return new L.LatLng(coords[1], coords[0]);
},
coordsToLatlngs: function(coords, levelsDeep) {
var latlng, latlngs = [],
i, len = coords.length;
for (i = 0; i < len; i++) {
latlng = levelsDeep ?
this.coordsToLatlngs(coords[i], levelsDeep - 1) :
this.coordsToLatlng(coords[i]);
latlngs.push(latlng);
}
return latlngs;
}
});

7
src/layer/vector/Path.js
View File

@ -66,6 +66,13 @@ L.Path = L.Class.extend({
// form path string here
},
setStyle: function(style) {
L.Util.setOptions(this, style);
if (this._path) {
this._updateStyle();
}
},
_initElements: function() {
this._initRoot();
this._initPath();