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.
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'm trying to use the leaflet API to display data about Coral Reef locations across the world. I originally downloaded a shapefile (.shp), and converted it to GeoJSON using QGIS. I put the data in my project folder, but when I attempted to display this data on leaflet through an Ajax request, the browser took a very long time to load and eventually return a not responding message. However, I could see that the markers would appearing on the map, albeit it very slowly. Is there any way to create a smaller file, or load the data more efficiently so it doesn't make the entire site unusable?
My Ajax request looked like this:
$.ajax({
type: 'GET',
url: './coldwater.geojson',
dataType: 'json',
data: data,
success: function (data) {
L.geoJSON(data).addTo(mymap);
}, error: function(){
console.log('Couldn\'t load data');
}
});
Here's a snippet of the geoJSON
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.116700000304718, 18.283300000094982 ], [ -75.116699858211859, 18.283301156623111 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -34.850000000399632, 9.01670000040474 ], [ -34.849996660317572, 9.016695959750791 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -34.850000000399632, 9.01670000040474 ], [ -34.849996660317572, 9.016695959750791 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -81.166699999905006, 23.983300000394763 ], [ -81.166699953140267, 23.983303104854429 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -79.549997733808311, 26.649999766076405 ], [ -79.416700222836994, 27.166696245435446 ], [ -79.416700222836994, 27.283302340130945 ], [ -79.416699999805132, 27.283300000094982 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -78.683303107752181, 27.416698775628049 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -79.216699996607531, 24.099999131754601 ], [ -78.850001440414133, 26.516702255105031 ], [ -78.39999868309269, 26.583297050818317 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -77.083301298815854, 25.166702977260627 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -79.233301481578053, 27.216698550297906 ], [ -79.216699996607531, 27.300002749627254 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -79.549997733808311, 26.649999766076405 ], [ -79.416700222836994, 27.166696245435446 ], [ -79.416699999805132, 27.166700000104981 ], [ -79.366697917974477, 27.533295877103114 ] ] } },
Would it be better to use the google maps API?
Or is there a better way to insert a shapefile into a leaflet map?
ps: if this isn't appropriate or is off topic let me know. I'm new to posting on stackoverflow
I am trying to use jsonschema-master to validate a json request entered via a POST request using express. See the code and sample below.
It picks up if the attribute labels are missing or spelt wrong, such as “model”, “areas”, “id” but isn’t picking up if the values of those attributes meet the specifications. For example the “model” attribute is defined as an enumerated type either “premium” or “basic”, but I seem to be able to put any old string in there and it plows on regardless, also the coordinates are defined as type number, but again it ignores this and the error then gets passed the validator and causes problems further on. Not sure what I'm missing.
node.js code:
var Validator = require('jsonschema-master').Validator;
var v = new Validator();
var bodySchema = {
"model": {
"enum": [ "premium","basic" ]
},
"areas": {
"type":"array",
"items": {
"id": {"type": "string"},
"geometry": {
"type": { "type":"string"},
"coordinates": {
"type":"array",
"items": {
"type":"array",
"items": [
{"type":"number"},
{"type":"number"},
{"type":"number"}
]
}
},
"required" : ["type","coordinates"]
},
"required" : ["id","geometry"]
}
},
"required" : ["model","areas"]
};
var valResult = v.validate(doc.request, bodySchema);
if (valResult.errors.length) {
// Validation failed.
// All processing will now stop.
console.log('Request invalid: '+ doc._id +" - "+valResult.errors);
}
SAMPLE CORRECT JSON request (in doc.request)
{
"model": "premium",
"areas": [
{
"id": "1234",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
453600.0,
181100.0,
0
],
[
453600.0,
181200.0,
0
],
[
453700.0,
181200.0,
0
],
[
453700.0,
181100.0,
0
],
[
453600.0,
181100.0,
0
]
]
]
}
}
]
}
Thanks all, but I worked it out in the end. Here is the corrected syntax for the schema:
var bodySchema = {
"type" : "object",
"properties": {
"model": {
"enum": [ "premium","basic" ]
},
"areas": {
"type":"array",
"items": {
"type" : "object",
"properties": {
"id": {"type": "string"},
"geometry": {
"type" : "object",
"properties": {
"type": { "type":"string"},
"coordinates": {
"type":"array",
"items": {
"type":"array",
"items": {
"type":"array",
"items": [
{"type":"number"},
{"type":"number"},
{"type":"number"}
]
}
}
}
},
"required" : ["type","coordinates"]
}
},
"required" : ["id","geometry"]
}
}
},
"required" : ["model","areas"]
};
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"
}
}
]
}
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'
});