I made a world map with D3.js. Everything worked like a charm. I then used the same code for a different geojson file, depicting Sweden only, and got multiple parsing errors. Both json files have the same structure, are well-formatted and so on. The only difference is the coordinates, so I'm suspecting that's were the problem lies. Any ideas?
I'm using QGIS to convert shapefiles to the geojson format. The error I'm getting is: "Error: Problem parsing d='[the path string]'". And the path string contains NaN here and there.
Sweden.json excerpt:
{
"type": "Feature",
"id": 0,
"properties": {
"KNKOD": "0114",
"KNNAMN": "Upplands Väsby",
"LANDAREAKM": 75.4
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
1620218.000425555,
6599561.998826771
],...
Countries.json excerpt
{
"type": "Feature",
"id": 0,
"properties": {
"type": "Country",
"name": "Aruba"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-69.89912109375,
12.452001953124991
],...
Javascript
var canvas = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 1000)
d3.json("sweden/countries.geojson", function (data) {
var group = canvas.selectAll("g")
.data(data.features)
.enter()
.append("g")
var path = d3.geo.path().projection(d3.geo.mercator());
var areas = group.append("path")
.attr("d", path)
})
Your GeoJSON files aren't in the same coordinate system. The coordinates for Sweden look like they're in UTM. When converting to GeoJSON with QGIS, make sure that you're using the same coordinate system for Sweden as you did for the world file -- this should fix the error.
Related
I tried to manipulate an object GEOjson to display it in my map OpenLayers. But my GEOjson is invalid.
First, in my API I request to my database to recover the geometry, then I parse it thanks to GEOjson.parse : GeoJSON.parse(data, {GeoJSON : 'geometry'});
the data looks like this :
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": "{\"type\":\"MultiPolygon\",\"coordinates\":[[[[0.699526704561417,49.5855766259652],[0.699132813373672,49.5855472259388],[0.698829663954256,49.5852457878428],[0.698308423811369,49.5855523688003],[0.699127661396565,49.5862481964213],[0.699752271011022,49.5859030239836],[0.699526704561417,49.5855766259652]]]]}",
"properties": {
"libgeo": "Bois-Himont",
"nature": "Parcelle bâtie"
}
},
{
"type": "Feature",
"geometry": "{\"type\":\"MultiPolygon\",\"coordinates\":[[[[0.696220319484454,49.581274516207],[0.696272071456392,49.5820438187077],[0.697147417334422,49.5815673912038],[0.697102005023975,49.5814546891317],[0.697047441685103,49.5812624281067],[0.6969844037675,49.5812621313821],[0.696220319484454,49.581274516207]]]]}",
"properties": {
"libgeo": "Bois-Himont",
"nature": "Parcelle bâtie"
}
}, etc...
Then in my script.js (that files had the aim to display the map and the GEOjson) I parse the data thanks to JSON.parse, but the line geometry is invalid because there is an extra " and the type and the coordinates is surrounded by ".
How can I delete the extra " and delete the " for the type and the coordinates ?
The geometry is a string when it should be an object. After the first parse you will need loop through the features and parse each geometry string into an object.
var myGeoJSON = JSON.parse(myText);
myGeoJSON.features.forEach( function(feature) { feature.geometry = JSON.parse(feature.geometry) });
I am trying to list all my features from a GeoJSON file in a table on a website and i am stuck figuring out how to achieve this.
As a first step i built a Leaflet map showing all locations loaded from the GeoJSON file which works pretty good.
What i would like to have in addition to the map is a rating system on a second page, which features all the locations from the GeoJSON in a table (I only need names for now, the rating system would be a different problem...).
Note that i am an absolute beginner and need a very detailed "tutorial" for this.
My GeoJSON looks like this:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ x,y ]
},
"properties": {
"FID":0,
"Shape *":"Point",
"Name":"XXX",
"Ditrict":"Dist1",
"Str_No":"Street 1",
"ZIP":"Some ZIP",
"Phone":"Some Number",
"Rating":4.5
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ x,y ]
}, and so on
I hope that there is a simple solution for this.
Thank you in advance!
If your GeoJSON object is var geoJSON, you can get all the names for each feature by doing the following:
var featureNames = [];
for (var i = 0; i < geoJSON.features.length; i++) {
var currentFeature = geoJSON.features[i];
var featureName = currentFeature.properties.Name;
var featureId = currentFeature.properties.FID;
console.log(featureName);
featureNames.push({ featureId: featureId, featureName : featureName });
}
So featureNames will have each feature object with it's name in an array.
To put them all in a table, I'm going to use jQuery DataTables. If I have a <div id="myTable">, then:
$('#myTable').DataTable( {
"columnDefs": [
{ "title": "Feature Names", "targets": 0 }
]
data: featureNames,
scrollY: 300,
paging: false
} );
I'm trying to draw lines between plotted points using d3.js.
Sample geojson (FeatureCollection of 3 LineString):
https://www.dropbox.com/s/hgkdvbnrgmb6kak/test.geojson?dl=0
Full Existing Code:
https://www.dropbox.com/s/49820rs561vneti/test.html?dl=0
Code Chunk I'm having problem with:
lines.append("g").selectAll("path")
.data(d3.entries(data.features)).enter()
.append("svg:path")
.attr("d", path)
The circles are appearing but not the line to connect them together.
Any help will be appreciated!
Mistake 1:
Inside your your topojson.
{
"geometry": {
"type": "LineString",
"coordinates": [
[
103.79971,
1.3013115
],
[
103.8071998,
1.2932586
]
]
},
"type": "Feature",//this is wrong
"properties": {}
}
It should have been:
{
"geometry": {
"type": "LineString",
"coordinates": [
[
103.79971,
1.3013115
],
[
103.8071998,
1.2932586
]
]
},
"properties": {}
}
Mistake 2:
lines.append("g").selectAll("path")
.data(d3.entries(data.features)).enter()
.append("svg:path")
.attr("d", path)
.style("fill", "none")
.style("stroke-width", "2px")
You can't create a line like this, for creating line you have to use a layer and add the feature to it like this(note the features are from your test.geojson):
d3.json("test.geojson", function(data) {
layer1.features(data.features);//adding the features to the layer
map.add(layer1);
Full working code here.
I've lot of geometries in a SVG. To be able to edit them in an Openlayers vector layer i'd like to convert the svg geometries e.g. to a geoJSON format, so that I can easily add them to the Openlayers layer.
FROM:
path xmlns="http://www.w3.org/2000/svg" id="G0W9Q7bC" d="M29.68 -30.10l-12.94 9.61 220.96 157.25 67.98-166.86-276.00 .00"/>
path xmlns="http://www.w3.org/2000/svg" id="G0W9Q7bA" d="M1223.26 349.19l-167.71 93.84 265.54 117.80-70.46 71.27 145.87 .00 .00-53.18-173.24-229.73"/>
path xmlns="http://www.w3.org/2000/svg" id="G0W9Q7bz_0" d="M1281.16 265.33l .00-111.81 115.34 .00M1396.50 265.33l-115.34 .00"/>
TO:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
568420.74334458,
121173.52026851001
],
[
568420.74334458,
135550.45067237
],
[
598372.6816859602,
135550.45067237
],
[
598372.6816859602,
121173.52026851001
],
[
568420.74334458,
121173.52026851001
]
]
]
}
}
]
}
Is there a js framework which can handle this?
Maybe you don't need to use OpenLayers. You can use d3 to draw a map. d3 also, has a lot of methods that can help you in the conversion.
I'm new to Javascript and hence I'm a little lost. I am able to read from a GeoJSON file; however, I do not understand how to iterate through the file to get the Lat-Long of the points, and then display those points as markers in Leaflet. I am hoping to also use the plugin Awesome Markers (based on font-awesome, for Leaflet)
This is a sample of my GeoJSON file:
{ "type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "Street Nam": "Aljunied Avenue 2", " Block": "118 Aljunied Avenue 2", " Postal Co": "380118", " Latitude": 1.320440, "Longitude": 103.887575 },
"geometry": { "type": "Point", "coordinates": [ 103.887575, 1.320440 ] } }
,
{ "type": "Feature", "properties": { "Street Nam": "Aljunied Crescent", " Block": "97A Aljunied Crescent", " Postal Co": "381097", " Latitude": 1.321107, "Longitude": 103.886127 },
"geometry": { "type": "Point", "coordinates": [ 103.886127, 1.321107 ] } }
]
}
Thank you for your attention and time =)
Process the geojson as described in the leaflet documentation. Specify a pointToLayer function which creates a marker with an awesome icon:
L.geoJson(geoJson, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng,
{icon: L.AwesomeMarkers.icon(
<< options based on feature.properties >>
)});
}
}).addTo(map);
After reading the file, you should have a javascript object that represents all the data in the file:
var geoData = JSON.parse(fileContents);
var features = geoData.features;
and so on. The parsed data will be converted to objects or arrays depending on whether they are key/value dictionaries or just lists. So from the above
var feature = geoData.features[0];
will get you a reference to the first feature object in the list. If you write
console.log(geoData);
and run with any recent browser you should be able to see an expandable description of the data to help make sense of it all.