I created two different geojson data on the map. I want to click selected geojson data. I used this code its working but I get two geojson id not clicked id. I just want to get clicked geojson id. Here f1 is a defined property.
map.data.addListener('click', function(event){
var id=event.feature.getProperty('f1');
alert(id);
infowindow2.setContent(sContent);
infowindow2.setPosition(event.latLng);
infowindow2.setOptions({pixelOffset: new google.maps.Size(0,-34)});
infowindow2.open(map);
}
İt is example of geojson data
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
28.9707230069957,
41.0143811020089
],
[
28.9707162564384,
41.0143424956501
],
[
28.9707099456323,
41.0143003832993
],
[
28.9707027979273,
41.0142558268809
],
[
28.970696368278,
41.0142152406152
],
[
28.9706905696604,
41.0141716903304
],
[
28.9706439363613,
41.0141812741487
],
[
28.9706538187623,
41.0142586346452
],
[
28.9706604147999,
41.0143007495466
],
[
28.9706724204532,
41.0143865085056
],
[
28.9707230069957,
41.0143811020089
]
]
]
},
"properties": {
"f1": 110013011,
"f2": "FATİH",
"f3": "SURURİ",
"f4": "F21C25D2C",
"f5": "P29",
"f6": "337",
"f7": "34",
"f8": "1. Derece Koruma Bolgeleri",
"f9": null,
"f10": "Ş",
"f11": 55,
"f12": 96,
"f13": 1121229337,
"f14": 12,
"f15": 28.9706822916352,
"f16": 41.0142812568067,
"f17": 12,
"f18": 12,
"f19": 227,
"f20": "SURURİ",
"f21": "e17c8db4-bec3-11e5-b590-00a0d1e9ad00",
"f22": 10598737,
"f23": 20598781,
"f24": "e17c66a4-bec3-11e5-8eec-00a0d1e9ad00"
}
}
]
}
Related
From this gist https://gist.github.com/mbertrand/5218300 I got some sample-code for drawing some features, which I adopted to use my GeoJSON
var features = [
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 13.3921498, 52.476596, 31.64 ], [ 13.393036, 52.4765996, 31.6 ], [ 13.3934, 52.4765511, 31.87 ], [ 13.3935847, 52.4765058, 32.37 ], [ 13.3936657, 52.4764735, 32.16 ], [ 13.3936851, 52.4764164, 32.04 ], [ 13.3936229, 52.4761477, 32.05 ], [ 13.3934819, 52.4758929, 32.77 ], [ 13.3932546, 52.4756262, 32.56 ], [ 13.3930283, 52.4754013, 32.51 ], [ 13.3927091, 52.4751468, 32.64 ], [ 13.3923208, 52.4749337, 32.63 ], [ 13.3919094, 52.4747933, 33.13 ], [ 13.3917874, 52.4747948, 32.61 ], [ 13.391795, 52.4747857, 32.75 ], [ 13.3918985, 52.4747159, 33.03 ], [ 13.3921305, 52.4748218, 32.9 ], [ 13.3924295, 52.4749522, 32.21 ], [ 13.392583, 52.475059, 32.49 ], [ 13.3931511, 52.4753106, 32.74 ] ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 13.3931511, 52.4753106, 32.74 ], [ 13.3934351, 52.475342, 32.43 ] ] ] } }
];
var bounds = d3.geo.bounds(features),
topLeft = bounds[0],
bottomRight = bounds[1];
However when debugging the script, topLeft and bottomRight are NaN.
I suppose this is because of the more complex geometry-structure of my JSON, which consists of MultiLineString-geometries, nit just simple Point-features. Any idea how to get the bounds here?
Generally speaking, D3 geo functions that accept geojson only accept geojson objects, not arrays. If you nest your features in a FeatureCollection, you should see a result:
var collection = { type: "FeatureCollection", features: features }
var features = [
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 13.3921498, 52.476596, 31.64 ], [ 13.393036, 52.4765996, 31.6 ], [ 13.3934, 52.4765511, 31.87 ], [ 13.3935847, 52.4765058, 32.37 ], [ 13.3936657, 52.4764735, 32.16 ], [ 13.3936851, 52.4764164, 32.04 ], [ 13.3936229, 52.4761477, 32.05 ], [ 13.3934819, 52.4758929, 32.77 ], [ 13.3932546, 52.4756262, 32.56 ], [ 13.3930283, 52.4754013, 32.51 ], [ 13.3927091, 52.4751468, 32.64 ], [ 13.3923208, 52.4749337, 32.63 ], [ 13.3919094, 52.4747933, 33.13 ], [ 13.3917874, 52.4747948, 32.61 ], [ 13.391795, 52.4747857, 32.75 ], [ 13.3918985, 52.4747159, 33.03 ], [ 13.3921305, 52.4748218, 32.9 ], [ 13.3924295, 52.4749522, 32.21 ], [ 13.392583, 52.475059, 32.49 ], [ 13.3931511, 52.4753106, 32.74 ] ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 13.3931511, 52.4753106, 32.74 ], [ 13.3934351, 52.475342, 32.43 ] ] ] } }
];
var collection = { type: "FeatureCollection", features: features }
var bounds = d3.geo.bounds(collection),
topLeft = bounds[0],
bottomRight = bounds[1];
console.log(bounds);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
I cannot find anywhere in the Mapbox GL JS documentation on how to add a simple label to a GeoJSON polygon so I am working off of a few examples I have found.
My GeoJSON is structured like so:
const gj = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": "309"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
77.34374999999999,
54.57206165565852
],
[
124.45312499999999,
63.074865690586634
],
[
102.65625,
64.16810689799152
],
[
77.34374999999999,
54.57206165565852
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "310"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
81.9140625,
48.22467264956519
],
[
124.45312499999999,
51.39920565355378
],
[
122.6953125,
59.88893689676585
],
[
81.9140625,
48.22467264956519
]
]
]
}
}
]
}
I'm trying to label the polygons with the id field.
Here is what that looks like:
map.addSource("maine", {
type: "geojson",
data: gj,
});
map.addLayer({
id: "maine",
type: "fill",
source: "maine",
layout: {
"text-field": ['get','id'],
},
paint: {
"fill-color": "#088",
"fill-opacity": 0.8,
},
});
The issue I'm having is that when I add the text-field to the layout object, the layer doesn't render at all. I've searched Mapbox's docs and on here as well, but I cannot find a vanilla way to add a simple label.
I found out that, if you are trying to add labels to polygons using this library, you first need to create a point layer from the existing data set and use that to label.
This website helped me figure it out: http://fuzzytolerance.info/blog/2016/07/15/Generate-centroid-points-from-polygons-with-Turf-js/
This is my json file
"type": "FeatureCollection",
"name": "maps",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "IDLo": "1", "SoHieu": "1-1", "KyHieu": "C", "TenLo": "C1-1", "TenCty": "CMC Data Center"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 106.791800519464871, 10.854928689692501 ], [ 106.792069337729856, 10.855930098557222 ], [ 106.792653322236532, 10.855766231881775 ], [ 106.79231961680415, 10.854783029941672 ], [ 106.791800519464871, 10.854928689692501 ] ] ] } },
{ "type": "Feature", "properties": { "IDLo": "2", "SoHieu": "1-2", "KyHieu": "C", "TenLo": "C1-2", "TenCty": "ASCENDAS" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 106.79264868743887, 10.855779887550094 ], [ 106.792064702932166, 10.855943754285464 ], [ 106.791786615071828, 10.854942345054598 ], [ 106.79101723865827, 10.855151730898562 ], [ 106.790461062937595, 10.855306494254153 ], [ 106.789969774384346, 10.855424842648457 ], [ 106.789478485831097, 10.855688850436046 ], [ 106.78819928167357, 10.857819111634392 ], [ 106.790915273109462, 10.859412245764197 ], [ 106.791907119811313, 10.857746282442497 ], [ 106.792111050908886, 10.857518691103408 ], [ 106.792379869173871, 10.857291099590915 ], [ 106.792583800271444, 10.856999782201919 ], [ 106.792732113796944, 10.856544598212894 ], [ 106.792741383392297, 10.856116724630859 ], [ 106.79264868743887, 10.855779887550094 ] ] ] } }]
I want to autocomplete search on features.properties.TenCty
And this is the javascript
jQuery(document).ready(function($) {
$('#cty').autocomplete({
source: function (request, response) {
$.ajax({
type: 'GET',
url: "data/maps.json",
dataType: 'json',
data: request,
success: function(data) {
$.each(data.features, function(d){
response($.map(d.properties, function(item) {
console.log(item.TenCty);
return (item.TenCty);
}));
})
}
});
},
minLength: 2
});
});
But I can't get anything, the console like this XHR finished loading: GET "http://localhost:81/blog/data/maps.json?term=fd".
I don't know where is the error. Please help.
Thank you very much.
Basically, you have to update success callback to:
success: function(data) {
var result = $.each(data.features, function(d) {
return (d.properties.TenCty);
})
response(result)
}
However you can revisit JQuery UI Autocomplete Remove JsonP code samples.
I'm trying to get some point inside multiple polygon using pointsWithinPolygon in turfjs, but the result is unexpected.
Is there any chance that pointsWithinPolygon isn't compatible with FeatureCollection?
Here is the example of my usage.
let points = {
"type": "Point",
"coordinates": [
106.866995, -6.261513
]
}
let filter = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"IdArea": 4
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
106.314674,
-6.6348689124
],
[
107.5781628906,
-6.6348689124
],
[
107.5781628906,
-5.9742195859
],
[
106.314674,
-5.9742195859
],
[
106.314674,
-6.6348689124
]
]
]
}
}
]
}
let result = turf.pointsWithinPolygon(points, filter);
console.log(result);
You are trying to use geoJsons as inputs to turf's pointsWithinPolygons function.
The function takes a turf.points array of points, and a turf.polygon array of polygon vertices.
Based on the variables you established, you would need to call:
let result = turf.pointsWithinPolygon(turf.points([points.coordinates]), turf.polygon(filter.features.geometry.coordinates));
I have a list of features and I want to create a FeatureCollection to group them in one string, the features are from different types (polygons, lines and points).
Here is how they are written :
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
-31.640625,
15.623036831528264
],
[
-2.8125,
-14.264383087562637
],
[
-22.5,
-30.751277776257812
],
[
-30.937499999999996,
-38.54816542304657
]
]
}
}
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-24.960937499999996,
29.84064389983441
],
[
-2.109375,
21.616579336740603
],
[
2.4609375,
43.068887774169625
],
[
-31.289062500000004,
49.38237278700955
],
[
-24.960937499999996,
29.84064389983441
]
]
]
}
}
Is there a javascript function that deals with this, i'm stuck on it.
If you have an array of GeoJSON feature strings, you can create a GeoJSON feature collection string like this:
var features = [
'{ "type": "Feature", "properties": {}, ... }',
'{ "type": "Feature", "properties": {}, ... }'
];
var collection = JSON.stringify({
features: features.map(JSON.parse),
type: 'FeatureCollection'
});