Develop Reference

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

Rails jBuilder from GeoJSON to make another json

I'm trying to take a series of GeoJSON Line Strings and put them on a map. My jBuilder and Rails controller combination is not producing correctly formatted json for putting on a web map. Here's the relevant code.
overview_data.json.builder
json.type "FeatureCollection"
json.features #segments do |street|
if (street.extent_json) # only if item has a line drawn
json.type "Feature"
json.properties do
json.title "Was #{street.prevName} before #{street.dateEarliest} and now is #{street.currentName} #{street.dateLatest})"
end
json.geometry do
# json.type "LineString"
json.coordinates street.extent_json
end # json.geometry
end # if
end # json.features
overview_controller.rb
class OverviewController < ApplicationController
def index
end
def overview_data
#segments = Street.all
end
end
street.extent_json as it appears in a web form and in the database (Postgres via pgAdmin)
{"type":"LineString",
"coordinates":[[-118.25712423772116,34.01007010760971],
[-118.25649456380442,34.01016443793837],
[-118.25584971702219,34.01016443793837],
[-118.25427932544667,34.0102021700405],
[-118.25213995141625,34.010227324765935]]}
Output as seen in http://localhost:3000/overview/overview_data.json. At present there are about ten items that have extent_json. Below are the first few:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"title": "Was 10th St. before 1903 and now is part of E. 9th Place (21). 1908)"
},
"geometry": {
"coordinates": "{\"type\":\"LineString\",\"coordinates\":[[-118.24982816353442,34.035546195508864],[-118.25104052200915,34.03663976724366]]}"
}
},
{
"type": "Feature",
"properties": {
"title": "Was 37th St before 1903 and now is part of E. 40th Place 1928)"
},
"geometry": {
"coordinates": "{\"type\":\"LineString\",\"coordinates\":[[-118.25712423772116,34.01007010760971],[-118.25649456380442,34.01016443793837],[-118.25584971702219,34.01016443793837],[-118.25427932544667,34.0102021700405],[-118.25213995141625,34.010227324765935]]}"
}
},
{
"type": "Feature",
"properties": {
"title": "Was Brook before 1903 and now is part of S. Toluca St. (26). and second block south gone 1908)"
},
"geometry": {
"coordinates": "{\"type\":\"LineString\",\"coordinates\":[[-118.25862396508458,34.06087254304104],[-118.25933206826451,34.05994816216629]]}"
}
},
{
"type": "Feature",
"properties": {
"title": "Was Auto Pl before 1928 and now is Commonwealth Pl and a portion abandoned 1930)"
},
"geometry": {
"coordinates": "{\"type\":\"LineString\",\"coordinates\":[[-118.28558737412096,34.07543021182353],[-118.28369373455645,34.07646106299854]]}"
}
},
{
"type": "Feature",
"properties": {
"title": "Was 3rd St before 1921 and now is Miramar St. One block abandoned )"
},
"geometry": {
"coordinates": "{\"type\":\"LineString\",\"coordinates\":[[-118.26117539280003,34.05901974362122],[-118.2593849946753,34.05823410691563],[-118.25815599257271,34.05768101430694],[-118.25759459655055,34.05717191451128],[-118.25663111959356,34.05654339202722]]}"
}
},
{
"type": "Feature",
"properties": {
"title": "Was Gregory Way before and now is Gregory Way 2017)"
},
"geometry": {
"coordinates": "{\"type\":\"LineString\",\"coordinates\":[[-118.37295765057208,34.06188579510917],[-118.37272698059681,34.06172580874592],[-118.37264114990832,34.06161026285129],[-118.3725660480559,34.06146805230318],[-118.37253386154772,34.061414723286084],[-118.37249631062151,34.06118363049104]]}"
}
},
The problem is the added "{\"type\":\"LineString\",\"coordinates\" and closing }". Otherwise I think it's OK.
In the jBuilder I originally had json.type "LineString" in the json.geometry do loop and it's even worse adding: "geometry":{"type":"LineString","coordinates":"{\"type\":\"LineString\",\"coordinates\".
As Зелёный pointed out json.coordinates JSON.parse(street.extent_json) replacing similar line was needed. As he also pointed out I must have had some malformed json inputs which I did. Once that was cleaned up everything is working.
He also pointed out "in jbuilder template all things must be in plain Ruby, but you pass a json string(which comes from database) as result Rails tried to convert json string to json again."
But output still has an error, here's the first item:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"title": "Was 10th St. before 1903 and now is part of E. 9th Place (21). 1908)"
},
"geometry": {
"coordinates": {
"type": "LineString",
"coordinates": [
[
-118.24982816353442,
34.035546195508864
],
[
-118.25104052200915,
34.03663976724366
]
]
}
}
},
An extra {
"coordinates": after geometry.

The problem is in extent_json method, it returns an object as json string. To resolve your issue, avoid the double call to_json.

To restate the problem: take a series of GeoJSONs from a database and use jBuilder to compile all the items that meet a certain criteria into a GeoJSON (for use in a Mapbox/Leaflet web map). https://stackoverflow.com/users/2057388/Зелёный provided the answer offline, but I want to document it to make sure I understand it and help anyone else with a similar problem. It helps to consider the jsons as hashes and that jbuilder is making another hash.
The input has two keys: type and coordinates.
The output has keys of type, properties, and geometry.
The properties value is a key title;
the geometry values are two keys type and coordinates. So overview_data.json.builder becomes:
extent = JSON.parse(street.extent_json) # the GeoJSON
json.type "Feature"
json.properties do
json.title h("Was #{street.prevName} before #{street.dateEarliest} and now is #{street.currentName} #{street.dateLatest}.")
end
json.geometry do
json.type "LineString"
json.coordinates extent["coordinates"]
end
Looks straightforward once it's laid out. Except for other key points. One was parsing extent_json to convert the string to a hash object. Then coordinates are extracted from that hash to put into the output json.

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' />

GeoJSON - Display all features in a table

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

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.