GeoJSON - Display all features in a table - javascript

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
} );

Related

Converting a list of JSON polygon coordinates to Long/Lat arrays in GeoJSON format

I am fetching data from a REST API which results in a list of datasets. Some of these datasets contain coordinates that I want to project on a map. In order to project the coordinates, I need to convert the JSON output to GeoJSON. While the conversion goes well for most parts of the data. I struggle with a long array containing x and y coordinates. It is 4+ points combined into polygons (5th endpoint = begin point is missing).
How can I convert this one array with 4+ XY coordinates to the right format while also adding the last one that should match the first point?
I thought about slicing the array into new ones for each point but this would result in too much work for polygons with over 20 points.
Example of the JSON:
"footprint": {
"epsgId": 4326,
"data": [
[
5.785569964298996,
50.94215924789526,
5.934953425435474,
50.94154873163077,
5.9341556116101595,
50.87413533708443,
5.784989651500041,
50.87474468292546
]
],
},
This is how it should look like after conversion into GeoJSON. I wrote this down myself, but I need a JavaScript code to do this automatically while looping through the results.
{
"type": "Feature",
"properties": {
"name": "name"
"id" : "id"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[5.785569964298996, 50.94215924789526],
[5.934953425435474, 50.94154873163077],
[5.9341556116101595, 50.87413533708443],
[5.784989651500041, 50.87474468292546],
[5.785569964298996, 50.94215924789526]
]
]
}
}
i think this function will do the work for you.
d = {"footprint": {
"epsgId": 4326,
"data": [
[
5.785569964298996,
50.94215924789526,
5.934953425435474,
50.94154873163077,
5.9341556116101595,
50.87413533708443,
5.784989651500041,
50.87474468292546
]
],
}
}
console.log(d)
function convert(points)
{
geojson = {
"geometry": {
"type": "Polygon",
"coordinates": [
]
}
}
var coordinates = new Array();
for (var i = 0; i < points.length; i+=2) {
coordinates.push([points[i],points[i+1]])
}
//closing the polygon
coordinates.push([points[0],points[1]])
// points need to be in zero index of coordinates array
geojson.geometry.coordinates = new Array(coordinates);
return geojson;
}
console.log(convert(d["footprint"]["data"][0]))

HereMaps GeoJSON Polygon click read properties

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

How to delete an extra " in GEOjson (Javascript)

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) });

Not sure why I get this error: mapboxgl.Marker is not a constructor

I am new to Mapboxgl and have been using it to render a map in a mobile application using Cordova. So far the map renders fine, and can zoom as expected. However, when trying to add a custom marker I get Uncaught TypeError: mapboxgl.Marker is not a constructor.
I have tripled check that I have installed the mapbox-gl.js library and double checked the code for typos. This code is already functional on an existing webpage, but now my goal is to try to use it in a mobile app.
I have used the demo code from the mapboxgl custom markers in CodePen and have been successful https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/.
function add_markers(geojson, poi, icon_name) {
// add markers to map
geojson.features.forEach(function (marker) {
var el = document.createElement('span');
el.className = 'map-icon map-icon-map-pin marker '+poi;
el.innerHTML = "<span class='tooltip "+icon(icon_name)+" marker-sub "+poi+"' title=\""+marker.properties.name+"\"></span>";
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
}
The data is mocked from this:
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Foo"
},
"geometry": {
"type": "Point",
"coordinates": [
-66.324462890625,
-16.024695711685304
]
}
},
{
"type": "Feature",
"properties": {
"name": "Bar"
},
"geometry": {
"type": "Point",
"coordinates": [
-61.2158203125,
-15.97189158092897
]
}
},
{
"type": "Feature",
"properties": {
"name": "Baz"
},
"geometry": {
"type": "Point",
"coordinates": [
-63.29223632812499,
-18.28151823530889
]
}
}
]
};
I have also tried to just add a standard marker with no luck(same error):
var marker = new mapboxgl.Marker()
.setLngLat([30.5, 50.5])
.addTo(map);
Any ideas would be greatly appreciated!
I am sure you must be using the old version of map-boxgl most probably v 0.20.1 ,just change the version in the link to v 0.38.0 like this:
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'>
</script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css'
rel='stylesheet' />

Read Latitude and Longitude from a GeoJSON file, and then display each lat-long as a marker with Leaflet

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.

Categories

Resources