Ivan Matveev
2011-Jan-11 21:13 UTC
[Mapstraction] propose to add addGeoJsonFeatureCollection
Hi!
Thank you for the great mapstraction library.
I''v looked at mapstraction JSON example:
http://mapstraction.appspot.com/#json
It doesn''t draw markers defined in the JSON because marker
icons URLs(and some other properties) are in
feature.properties[''property''] and
mapstraction.addJSON(json) expects them in
feature[''property''].
So to fix the example JSON everything defined in "properties":{} has
to
be moved like this:
json = {
features: [{
"type": "Feature",
+ "icon": "http://somesite.org/sompicture.png",
"geometry": {
"type": "Point",
"coordinates": [-121.896263,37.328655]
},
"properties":
{
- "icon":"http://somesite.org/sompicture.png",
}
The JSON in the example looks like
GeoJSON(http://geojson.org/geojson-spec.html) FeatureCollection.
Using GeoJSON will allow to use server side libraries
(like http://pypi.python.org/pypi/geojson/1.0)
to generate GeoJSON.
To make the example JSON comply with GeoJSON
"type", "toponym", "title", "author",
"description", "categories",
"source_id"
fields shell be moved to Feature.properties.
Here is a function to parse GeoJSON(just a dirty hack):
Mapstraction.prototype.addGeoJsonFeatureCollection = function(fc) {
var features;
if (typeof(fc) == "string") {
features = eval(''('' + jc + '')'');
} else {
features = fc;
}
features = features.features;
var map = this.maps[this.api];
var html = "";
var item;
var polyline;
var marker;
var markers = [];
for (var i = 0; i < features.length; i++) {
item = features[i];
switch(item.geometry.type) {
case "Point":
/*to let a user to specify arbitrary HTML in the popUp*/
if(typeof(item.properties.html) == "string"){
html = item.properties.html;
}
else{
html = "<strong>" + item.properties.title +
"</strong><p>" + item.properties.description +
"</p>";
}
marker = new Marker(new
LatLonPoint(item.geometry.coordinates[1],item.geometry.coordinates[0]));
markers.push(marker);
this.addMarkerWithData(marker,{
infoBubble : html,
label : item.properties.title,
date : "new
Date(\""+item.properties.date+"\")",
iconShadow : item.properties.icon_shadow,
marker : item.id,
iconShadowSize : item.properties.icon_shadow_size,
icon : item.properties.icon,
iconSize : item.properties.icon_size,
category : item.properties.source_id,
draggable : false,
hover : false
});
break;
case "Polygon":
var points = [];
polyline = new Polyline(points);
mapstraction.addPolylineWithData(polyline,{
fillColor : item.properties.poly_color,
date : "new
Date(\""+item.properties.date+"\")",
category : item.properties.source_id,
width : item.properties.line_width,
opacity : item.properties.line_opacity,
color : item.properties.line_color,
polygon : true
});
markers.push(polyline);
break;
default:
// console.log("Geometry: " + features.items[i].geometry.type);
}
}
return markers;
};