-
-
Save odoe/2424223 to your computer and use it in GitHub Desktop.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html> | |
<head> | |
<meta content='text/html, charset=UTF-8' http-equiv='Content-Type' /> | |
<meta content='IE=7,IE=8,IE=9' http-equiv='X-UA-Compatible' /> | |
<meta content='initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' /> | |
<style type="text/css"> | |
@import url("http://code.leafletjs.com/leaflet-0.3.1/leaflet.css"); | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
body { | |
line-height: 1; | |
} | |
#map { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
} | |
</style> | |
<title>Backbone/ESRI/Leaflet EarthQuake Demo</title> | |
<body> | |
<div id='map'></div> | |
<div id='footer'></div> | |
</body> | |
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> | |
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js'></script> | |
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js'></script> | |
<script type='text/javascript' src='http://code.leafletjs.com/leaflet-0.3.1/leaflet.js'></script> | |
<script type='text/javascript'> | |
(function(){ | |
// ESRI to GEO Converstion | |
// project can be found here | |
// https://github.com/odoe/esritogeo | |
var GeoUtil = function() {}; | |
GeoUtil.prototype.stripJSON = function(str) { | |
return str.replace(/\\n/g, "\\n").replace(/\\t/g, "\\t"); | |
}; | |
GeoUtil.prototype.jsonToObject = function(strIn) { | |
try { | |
return JSON.parse(this.stripJSON(strIn)); | |
} catch (err) { | |
console.log(err); | |
return null; | |
} | |
}; | |
GeoUtil.prototype.parseGeometryType = function(type) { | |
switch (type) { | |
case 'esriGeometryPoint': | |
return 'Point'; | |
case 'esriGeometryMultiPoint': | |
return 'MultiPoint'; | |
case 'esriGeometryPolyline': | |
return 'LineString'; | |
case 'esriGeometryPolygon': | |
return 'Polygon'; | |
default: | |
return 'unknown'; | |
} | |
}; | |
GeoUtil.prototype.featureToGeo = function(feature, type) { | |
var feature_res, geometry; | |
geometry = { | |
type: type, | |
coordinates: (function() { | |
switch (type) { | |
case 'Polygon': | |
return feature.geometry.rings; | |
case 'LineString': | |
return feature.geometry.paths; | |
case 'Point': | |
return [feature.geometry.x, feature.geometry.y]; | |
default: | |
return []; | |
} | |
})() | |
}; | |
return feature_res = { | |
type: "Feature", | |
geometry: geometry, | |
properties: feature.attributes | |
}; | |
}; | |
GeoUtil.prototype.convertEsriToGeo = function(input, callback) { | |
var errors, feature, features, json, result, type, _i, _len, _ref; | |
result = null; | |
errors = null; | |
if (typeof input === "string") { | |
json = this.jsonToObject(input); | |
} else { | |
json = input; | |
} | |
if (json !== null) { | |
type = this.parseGeometryType(json.geometryType); | |
features = []; | |
_ref = json.features; | |
for (_i = 0, _len = _ref.length; _i < _len; _i++) { | |
feature = _ref[_i]; | |
features.push(this.featureToGeo(feature, type)); | |
} | |
result = { | |
type: 'FeatureCollection', | |
features: features | |
}; | |
} else { | |
errors = 'Error: JSON cannot be parsed'; | |
} | |
return callback(errors, result); | |
}; | |
// END ESRI to GEO conversion tool | |
var EQModel = Backbone.Model.extend({ | |
url: function() { | |
return 'http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0/query'; | |
} | |
}); | |
var map = new L.Map('map'); | |
var mapquestUrl = 'http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png'; | |
mapQuest = new L.TileLayer(mapquestUrl, { | |
subdomains: ["otile1", "otile2", "otile3", "otile4"], | |
attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>. Map data (c) <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors, CC-BY-SA.', | |
maxZoom: 18 | |
}); | |
var la_county = new L.LatLng(34.32, -118.23); | |
map.setView(la_county, 9).addLayer(mapQuest); | |
var model = new EQModel(); | |
model.fetch({ | |
dataType: "jsonp", | |
data: { | |
where: "Magnitude > 0", | |
returnGeometry: true, | |
outSR: 4326, | |
outFields: "magnitude", | |
f: "json" | |
}, | |
success: function(model, response) { | |
var util; | |
util = new GeoUtil(); | |
return util.convertEsriToGeo(model.toJSON(), function(err, result) { | |
var eq_Layer = new L.GeoJSON(); | |
eq_Layer.on("featureparse", function(evt){ | |
return evt.layer.bindPopup("Mag: " + evt.properties.Magnitude.toFixed(3)); | |
}); | |
map.addLayer(eq_Layer); | |
return eq_Layer.addGeoJSON(result); | |
}); | |
} | |
}); | |
})(); | |
</script> | |
</head> | |
</html> |
It looks like that particular service was not working at the moment. I updated it with a different service that performs a little better.
Backbone error.
Error: A "url" property or function must be specified
Source File: http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js
Line: 38
I got another error. I am using Ubuntu 10.10 and firefox 3.6.8.
I using Chrome as well but I don't where to see the errors in Chrome. However, no earthquake display as well.
I guess backbone-min.js error line 38 applies.
What I am suppose to see in this map ... the earthquake point, right? What colour?
Thanks.
Noli
Sorry it took me a while to respond. I'm not able to reproduce the errors. Since this demo pulls in the JavaScript libraries via content delivery networks, an odd connection error can always occur. I can copy/past the raw gist and save it as an HTML file and open it on my desktop and it works. The result is a map of the Los Angeles County area showing point that represent earthquake data taken from an ArcGIS map service and converted to GeoJSON so they can be displayed in Leaflet.js
I got error running this example.
Error: _ref is undefined
Source File: file:///media/xxxx/ESRI_Leaflet.html
Line: 122
I did not see any earthquake results ... (points geosjon?)