Convert MongoDB to GeoJSON: Use in Leaflet.js

16 Nov

Leaflet.js is my favorite tool for making quick web maps. Using GeoJSON, you can feed data to Leaflet either by pasting it in to your code or by making it a variable and saving it as a .JS and importing it. How you do it is up to you, but in this example I am going to copy and paste in my GeoJSON text. My GeoJSON will be generated from a mongoDB using Python.
I created a mongoDB with a series of points (Long, Lat). Then I wrote a Python script to grab all those points and dump them in to a GeoJSON file. Lastly, I paste that as a variable in my Leaflet code.
Taking this project further, try using the select near, or select near where type:coffee shop, features in mongoDB. You could use bounding boxes too.

Here is the python code to convert mongoDB to GeoJSON:

from pymongo import Connection,GEO2D
db=Connection().geo

geojson=open(“mongoLoop.json”,”w”)
geojson.write(‘{ “type”: “FeatureCollection”,’+”\n”)
geojson.write(‘”features”: [‘+”\n”)

x=0
d=db.places.count()

for i in db.places.find():
if x < d-1:
geojson.write(‘{ “type”: “Feature”,’+”\n”)
geojson.write(‘”properties”: {“popup”: “value0”},’)
geojson.write(‘ “geometry”: {“type”: “Point”, “coordinates”: [‘)
p1=i[“loc”][0]
p2=i[“loc”][1]
geojson.write(str(p1)+’,’+str(p2)+’]}},’+”\n”)
x=x+1
print “x =” + str(x)
else:
geojson.write(‘{ “type”: “Feature”,’+”\n”)
geojson.write(‘”properties”: {“popup”: “value0”},’)
geojson.write(‘ “geometry”: {“type”: “Point”, “coordinates”: [‘)
p1=i[“loc”][0]
p2=i[“loc”][1]
geojson.write(str(p1)+’,’+str(p2)+’]}}’+”\n”)
print “Last Loop”

geojson.write(‘]}’)
geojson.close()

And the output:

{ “type”: “FeatureCollection”,
“features”: [
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [35,-106]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [35.8,-106.8]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [38,-108]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [39,-109]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [30,-100]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [31,-101]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [31,-102]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [31,-103]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [33,-100]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [25,-102]}}
]}

Lastly the HTML to create the Leaflet map – input your API Key:

<!DOCTYPE html>
<html>
<head>
<title>My Map</title>
<meta charset=”utf-8″ />

<link rel=”stylesheet” href=”http://cdn.leafletjs.com/leaflet-0.4/leaflet.css&#8221; />
<!–[if lte IE 8]><link rel=”stylesheet” href=”http://cdn.leafletjs.com/leaflet-0.4/leaflet.css&#8221; /><![endif]–>
</head>
<body>
<div id=”map” style=”width: 600px; height: 400px”></div>

<script src=”http://cdn.leafletjs.com/leaflet-0.4/leaflet.js”></script&gt;

<script>

var map = L.map(‘map’).setView([35, -106], 13);

L.tileLayer(‘http://{s}.tile.cloudmade.com/API-KEY/997/256/{z}/{x}/{y}.png’, {
attribution: ‘Map data &copy; <a href=”http://openstreetmap.org”>OpenStreetMap</a&gt; contributors, <a href=”http://creativecommons.org/licenses/by-sa/2.0/”>CC-BY-SA</a&gt;, Imagery © <a href=”http://cloudmade.com”>CloudMade</a>&#8217;,
maxZoom: 18
}).addTo(map);

var mongo = { “type”: “FeatureCollection”,
“features”: [
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [-106, 35]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [-106.8,35]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [-108, 38]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [-109, 39]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [30,-100]}}
]};

var myLayer = L.geoJson().addTo(map);
myLayer.addData(mongo);

</script>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: