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.
Related
I have strings like
POLYGON ((32.5 39.2, 32.6 39.4 .... ))
POINT (32.4 39.2)
using Leaflet, React is there a way to convert these string to GeoJSON like:
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}
in JavaScript?
These strings are called WKT (https://en.wikipedia.org/wiki/Well-known_text_representation_of_geometry).
There are quite a few parsers out there:
https://www.npmjs.com/search?q=wkt
"wellknown" and "wicket" can output GeoJSON, probably there are other modules that support this too.
Note that WKT represents just "geometry" field in GeoJSON, content of "properties" field should come from somewhere else (say if this was CSV - from other CSV columns).
my question is as follows.
What I have
I have a GeoJSON feature collection with Polygons and custom properties
GeoJSON is loaded into the Here maps
What I want
I want to detect a polygon click and read the custom property value
Example GeoJSON
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"customProp": "heyImACustomProperty"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
16.45477294921875,
43.51619059561274
],
[
16.450481414794922,
43.50772499687011
],
[
16.470909118652344,
43.5019975949657
],
[
16.481552124023438,
43.51021500212034
],
[
16.475543975830078,
43.518306809754804
],
[
16.45477294921875,
43.51619059561274
]
]
]
}
}]
}
Docs on GeoJSON manipulation are not the greatest.
Thanks in advance.
Here is the example code to get the property value of the GeoJSON Polygon on click.
reader = new H.data.geojson.Reader('/path/to/geojson/file.json');
reader.parse();
map.addLayer(reader.getLayer());
reader.getLayer().getProvider().addEventListener("tap", function(e) {
if(e.target instanceof H.map.Polygon) {
console.log('Custom property value: ', e.target.getData().properties.customProp);
}
});
GeoJSON documentation can be found here:
https://developer.here.com/documentation/maps/topics_api/h-data-geojson-reader.html
I am modifying an example Leaflet script for my custom purposes.
The original had an associated GeoJSON file with the following format (this is just an excerpt):
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"OBJECTID":1,"NAME":"Alpha Terrace","TYPE":"CHD"},"geometry":{"type":"Polygon","coordinates":[[[-79.9222757299766,40.4687885729535],[-79.922601544034,40.4688999202888],[-79.9227665690647,40.4689585131248],[-79.9231802736014,40.4691056186529],[-79.9228362255,40.4696697431611],[-79.9224234733987,40.4695244210813],[-79.9222570954656,40.4694656801973],[-79.9222259241735,40.4695164633706],[-79.9219035919843,40.4694017028541],[-79.9222757299766,40.4687885729535]]]}},{"type":"Feature","properties":{"OBJECTID":2,"NAME":"Manchester","TYPE":"CHD"},"geometry":{"type":"Polygon","coordinates":[[[-80.0271753891687,40.4506598454243],[-80.0271940086199,40.4507189442263],[-80.0272105946986,40.4507710471721],[-80.0272579314302,40.4509221686618],[-80.0273032612578,40.4510537660432],[-80.0273193174278,40.451103476753],[-80.0273338296879,40.451147381945],[-80.0273478698275,40.451190610864],[-80.0273633786279,40.4512374152857],[-80.0273793914473,40.4512858394759],[-80.0273919427229,40.4513248923929],[-80.0274084625005,40.4513750227769],[-80.0274174596111,40.451401961247],
I made my own GeoJSON with this format (again, just an excerpt):
{
"type": "FeatureCollection",
"name": "testmap1",
"features": [
{ "type": "Feature", "properties": { "land_val": 16290.0, "imprv_val": 0.0, "land_acres": 0.31, "land_sqft": 13503.6, "situs_stre": null, "situs_st_1": "LAKE BREEZE", "situs_st_2": "DR", "situs_city": "BROWNWOOD", "Deed_Date": "2014\/10\/14", "Mkt_Land_S": "FBINT" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 2695178.255351334810257, 10617843.194646343588829 ], [ 2695245.314272344112396, 10618016.961359173059464 ], [ 2695316.911570087075233, 10617988.845273673534393 ], [ 2695251.204024344682693, 10617828.19828525185585 ], [ 2695196.89442166686058, 10617839.362961083650589 ], [ 2695178.255351334810257, 10617843.194646343588829 ] ] ] ] } },
I'm aware that these are in different locations -- I edited the coordinates of the map so that they display the area covered by the new GeoJSON.
When the map displays with my GeoJSON nothing shows up. But when I use the original GeoJSON (and move the window back to that area), it overlays polygons onto the OSM map.
Does anyone know why this might be? Is there a hyper-specific GeoJSON format needed for Leaflet?
Your coordinates are completely off (e.g [ 2695178.255351334810257, 10617843.194646343588829]).
First value (i.e. longitude) should be 0 to 360
Second value (i.e. latitude) should be -90 to 90
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 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.