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; };