Tag Archives: GeoJSON

Load GeoJSON in ArcMap

2 Feb

It came up on Twitter that you cannot edit GeoJSON in ArcMap. That gave me the idea to try and write a plugin that allows just that. This post will layout a procedure for editing GeoJSON in ArcMap. The final code solution needs work, but it is a good start.

Reading GeoJSON in ArcMap

I grabbed a text file from my Github and saved it to my desktop. This is not the best example, but it was good enough to test the process. I started by reading the file in to ArcMap. The code reads in the file and converts it to JSON. It then iterates through the features, grabbing the coordinates and putting them in to an array.  Lastly, it writes it to a default geodatabase.

import arcpy
from arcpy import env
import json
d=open(r”C:\Users\paul\Desktop\art.geojson”)
data=json.load(d)
points=[]
i=0
for x in data[“features”]:
points.append(arcpy.PointGeometry(arcpy.Point(data[“features”][i][1],data[“features”][i][0])))
i=i+1
arcpy.CopyFeatures_management(points,”testlayer13″)

You will have a map like the image below.

GeoJSON pointsl oaded via Python in ArcMap

GeoJSON pointsl oaded via Python in ArcMap

Writing GeoJSON in ArcMap

You can now use the editing toolbar to draw and edit features as you would any other data source in ArcMap. In the image below, I have deleted most of the features.

Features remaining after edit.

Features remaining after edit.

 

When you have finished editing, you can save out the data as GeoJSON by reading the feature class, grabbing the field that holds the geometry and then writing it out to a text file.

arcpy.env.workspace=r”c:\users\paul\documents\arcgis\default.gdb”
desc=arcpy.Describe(r”c:\users\paul\documents\arcgis\default.gdb\testlayer13″)
shapefieldname=desc.ShapeFieldName
rows = arcpy.SearchCursor(“testlayer13″)
out=open(r”c:\users\paul\desktop\DONE.txt”,”w+”)
out.write(‘{“type”: “FeatureCollection”,”features”: [\n’)
for row in rows:
feat=row.getValue(shapefieldname)
pnt=feat.getPart()
out.write(‘[‘+str(pnt.X)+’,’+str(pnt.Y)+’],’)
out.write(‘]}’)
out.close()

The output is a textfile with GeoJSON.

The GeoJSON output

The GeoJSON output

 

Not pretty, but a start for how I would go about it. Would need to figure out how to do this for polygons and polylines.

ABQ Historic Places Map in Your Website

11 Jul
Map of ABQ historic Places from GitHub

Map of ABQ historic Places from GitHub

I converted the Albuquerque Historic Places KML from the City to GeoJSON. By posting the GeoJSON on Github it is automatically mapped and you can embed that map in your website. All you need to do is enter this line in your HTML:
<script src=”https://embed.github.com/view/geojson/PaulCrickard/ABQ-GeoJSON/master/ABQHistoricPlace.geojson”&gt;

</script>
This works with any map you find on GitHub. The URL is format is:
https://embed.github.com/view/geojson/

followed by:

<username>/<repo>/<ref>/<path_to_file>

So a sample website would look like this:

<html>
<head><title>My Map of ABQ Historic Places</title>
</head>
<body>
<h1>ABQ Historic Map</h1>

<script src=”https://embed.github.com/view/geojson/PaulCrickard/ABQ-GeoJSON/master/ABQHistoricPlace.geojson”></script&gt;
</body>

</html>

Albuquerque Registered Historic Places as GeoJSON in Leaflet

13 Dec
Albuquerque Registered Historic Places.

Albuquerque Registered Historic Places.

I will say it one more time: I hate that Albuquerque publishes data in KMZ. I took the Registered Historic Places file and converted it to GeoJSON. Then I put up this simple Leaflet map using the GeoJSON file. My website is at abqhistoric.educationalfacilityplanning.com and I put the GeoJSON inside a JavaScript file where it was assigned to a variable ‘abq’. Here is the GeoJSON.

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>

Leaflet.js and GeoJSON

12 Apr

Recently, I have been playing with a few different open source GIS tools and Leaflet.js has been one I really like – OpenLayers is next on my To-Do list. In this post, I will show a very simple example of loading GeoJSON point data in to a map and then adding a popup to the points. I modified the example from the Leaflet website, stripping out other ways of doing it and simplified the GeoJSON to one data object. I think for newbies like myself, this made it much easier to understand.

Here is a screen shot of the final map – 2 points with a popup.

The Final Leaflet.js Map.

The following is the GeoJSON I used – it contains 2 points.

GeoJSON file saved as .js

Now in the webpage, I create a Leaflet map and use the GeoJSON file. Here is the code:

Here is what’s happening:

Import the GeoJSON data: <script src=”MyGeoJSONforLightRail.js” type=”text/javascript”></script>

Create a place to put the map: <div id=”map” style=”width: 600px; height: 400px”></div>

Add a map named same as place we want to put it: var map = new L.Map(‘map’);

Add a base map, set the map zoom, add the base layer to the map:

var cloudmadeUrl = ‘http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/22677/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});

map.setView(new L.LatLng(39.747, -105), 14).addLayer(cloudmade);

Create and empty GeoJSON Layer: var lightRailGeojsonLayer = new L.GeoJSON();

Attach a popup: lightRailGeojsonLayer.on(“featureparse”, function (e) {
var popupContent = “<p>I started out as a GeoJSON ” + e.geometryType + “, but now I’m a Leaflet vector!</p>”;
popupContent += “<p>This is the default look of a GeoJSON Point.</p>”;
if (e.properties && e.properties.popupContent) {
popupContent += e.properties.popupContent;
}
e.layer.bindPopup(popupContent);
});

Note on Popup: The += following popupContent is appending to the string. You will see it 3 times.

Add the blank GeoJSON layer to the map: map.addLayer(lightRailGeojsonLayer);

Populate the layer with the .js file we included in the header (MyGeoJSONforLightRail.js):

lightRailGeojsonLayer.addGeoJSON(lightRailStop);

Note on populating: the (lightRailStop) is the name of the var in the MyGeoJSONLightRail.js file:

var lightRailStop = {
“type”: “FeatureCollection”,
“features”: [ blah blah blah…..

 

There you go. Change the GeoJSON to your file, modify the map setView, and edit the popup and you have your own map. For more examples go to the Leaflet page.