HereMaps GeoJSON Polygon click read properties - javascript

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

Related

GeoJSON formats for Leaflet -- certain GeoJSON not displaying, while others are

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

pg-promise wrong insertion of multipolygons into postgis database

So I am using pg-promise to insert multiple geojson MultiPolygons into a postgis database. The insertion into the database work fine, but for some of the row in the database I get a strange behaviour, that is the cell is filled with two lines. The first line some load message and the second line is the actual geom object which more strangely is converted right from geojson to postgis geom.
function createBorder(pathToJSON, table) {
fs.readFile(pathToJSON,
{encoding: 'UTF-8'},
(err, data) => {
let geoJSON = JSON.parse(data);
geoJSON.features.forEach(f => {
f.geometry.crs = {
type: 'name',
properties: {
name: 'EPSG:4326'
}
}
db.none('INSERT INTO nyc_borders(geom)\
VALUES (ST_GeomFromGeoJSON(${geoJSON}))', {
geoJSON: f.geometry
})
.then((d) => {
console.log(f.geometry);
})
.catch(error => {
console.log("ERROR: ", error);
})
});
});
}
createBorder('./data/community_districts.geojson');
I shortend the geoJSON output, it is basically the community district borders from nyc downloaded from the opendata portal
Geojson:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"shape_leng": "51549.5578986",
"boro_cd": "311",
"shape_area": "103177785.347"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-73.97348373564797,
40.61137106069874
],
[
-73.97303089190211,
40.6090051063008
],
[
-73.97299433938896,
40.60881414180224
]
]
]
]
}
},
{
"type": "Feature",
"properties": {
"shape_leng": "65821.875617",
"boro_cd": "313",
"shape_area": "88195686.2688"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-73.96720294103956,
40.573326317397424
],
[
-73.96738975478877,
40.573258999904446
],
[
-73.9674356779313,
40.57320896967127
],
[
-73.96736390080571,
40.57304456895217
],
[
-73.98372152615246,
40.59582107821707
]
]
]
]
}
}
]
}
Some pictures from my database:
database table with rows that have two lines inside one cell
one cell expanded to see the actual tow lines better
So I am really stuck because I do not have an idea how to start debuging, singe the insertion does work some how and also the conversion of the geojson object looks fine. I actually can not figure out who is causing this wrong behaviour.
You can have full control over how pg-promise formats data, by using Custom Type Formatting.
For example, if you have an array[][2] (points as shown), you can convert them like this:
const toGeometry = g => ({ /* g = array[][2] (points) */
rawType: true,
toPostgres: a => {
const points = a.map(p => pgp.as.format('$1 $2', p));
return 'ST_GeomFromText(\'LINESTRING(' + points.join() + ')\')';
}
});
And then you can pass in toGeometry(f.geometry) to apply your custom formatting.
See also: ST_GeomFromText.
I found the solution for my problem the two lines displayed in the pictures that confused me where only information added by datagrip to tell me that the huge polygons where not loaded fully.
I had a look into the same rows with psql:
SELECT ST_ASGEOJSON(geom) FROM <tablename> WHERE id=<myid>
and there the second line would not show up.
Then I realised it is just additional information.

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

SVG path attribute d to e.g. geoJSON

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.

Categories

Resources