Related
This is my json file maps.json
[{
"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 don't know how to read it til "TenCty": "CMC Data Center", and how can I replace "CMC Data Center" with something else and save it in maps.json file.
When users submit a form, information will save in MySqli and also save in json file? Is it possible? In javascript or PHP will ok.
This json file is map's information to show in Leaflet, so I must save as json. Any sugguestions? And thanks in advance
You need to complete a couple of steps.
First get the contents of the json file:
$contents = file_get_contents('maps.json');
Then apply json_decode() and convert to array:
$contents_decoded = json_decode($contents, true);
Now you can get "TenCty": "CMC Data Center":
echo $contents_decoded[0]['features'][0]['properties']['TenCty']; //CMC Data Center
You can replace the value:
$contents_decoded[0]['features'][0]['properties']['TenCty'] = 'something else';
Now you can encode the new array:
$contents = json_encode($contents_decoded);
echo $contents;
Output:
[{"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":"something else"},"geometry":{"type":"Polygon","coordinates":[[[106.79180051946487,10.854928689692501],[106.79206933772986,10.855930098557222],[106.79265332223653,10.855766231881775],[106.79231961680415,10.854783029941672],[106.79180051946487,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.79206470293217,10.855943754285464],[106.79178661507183,10.854942345054598],[106.79101723865827,10.855151730898562],[106.7904610629376,10.855306494254153],[106.78996977438435,10.855424842648457],[106.7894784858311,10.855688850436046],[106.78819928167357,10.857819111634392],[106.79091527310946,10.859412245764197],[106.79190711981131,10.857746282442497],[106.79211105090889,10.857518691103408],[106.79237986917387,10.857291099590915],[106.79258380027144,10.85699978220192],[106.79273211379694,10.856544598212894],[106.7927413833923,10.856116724630859],[106.79264868743887,10.855779887550094]]]}}]}]
The final step is you can put the new contents back to the maps.json file:
file_put_contents('maps.json', $contents);
I am creating a map using Google API. I have defined the multi-polygon layer of buildings as json file. I want to be able to click at polygon and have its color changed to another. After clicking at the second building, only second building should have changed color and the previously clicked ones should go back to their original fill. In other words, I want to be able to select only one building by click and have it displayed in different color then others.
So far I tried with dynamic styling from google map API examples here.
However what I got so far is only being able to click and 'unclick' buildings color. What should I do to get described results?
var buildings = {
"type": "FeatureCollection",
"name": "buildings_layer",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name_1": "HIQ", "addr_nr": "3", "addr_stree": "Gustave-Naville-Weg", "descriptio": "Pavillon II für Architektur" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.508053374921182, 47.409945493110904, 524.154999999998836 ], [ 8.507733029701146, 47.409506514443301, 523.865000000005239 ], [ 8.507593213859357, 47.409553556049616, 523.740999999994528 ], [ 8.507704801729497, 47.409706338427313, 523.919999999998254 ], [ 8.507724154119826, 47.409735716985452, 523.929999999993015 ], [ 8.50791195204587, 47.40999305367589, 524.012000000002445 ], [ 8.508053374921182, 47.409945493110904, 524.154999999998836 ] ] ] ] } },
{ "type": "Feature", "properties": { "name_1": "HPM", "addr_nr": "3", "addr_stree": "Otto-Stern-Weg", "descriptio": "Zellbiologie \/ Biochemie" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.510424206560639, 47.409831344813142, 528.319000000003143 ], [ 8.510447505495517, 47.409823662930137, 528.347999999998137 ], [ 8.510480687529748, 47.409869229727256, 527.111000000004424 ], [ 8.51058712998627, 47.40983370187864, 527.600000000005821 ], [ 8.510554561494247, 47.409787679671524, 528.210999999995693 ], [ 8.510577538817596, 47.409779820844342, 528.043999999994412 ], [ 8.510591621745974, 47.409798795616886, 528.001999999993131 ], [ 8.510693918897799, 47.409764700333952, 526.967999999993481 ], [ 8.510508470488023, 47.409510179668921, 526.216000000000349 ], [ 8.510519713353803, 47.409506549373837, 526.089999999996508 ], [ 8.510483539536088, 47.409456503833148, 528.327000000004773 ], [ 8.510412296671355, 47.409479000563181, 528.046000000002095 ], [ 8.510176066911402, 47.409155053807922, 528.569000000003143 ], [ 8.510187838375566, 47.409151355679001, 528.611000000004424 ], [ 8.510160709934256, 47.409113567319714, 528.615000000005239 ], [ 8.510067967151468, 47.409143705734991, 528.57499999999709 ], [ 8.510060896837672, 47.40913409265417, 528.596999999994296 ], [ 8.509901329328159, 47.409187148927202, 528.582999999998719 ], [ 8.509935290502499, 47.409235263240461, 528.506999999997788 ], [ 8.509941580155729, 47.409233073132619, 528.509000000005472 ], [ 8.510179229753403, 47.409557973376906, 528.032000000006519 ], [ 8.510105684216887, 47.409582743734717, 528.26600000000326 ], [ 8.510142205150705, 47.409632273456758, 528.107999999992899 ], [ 8.510152339753995, 47.409628878346375, 527.959000000002561 ], [ 8.510341013793047, 47.409882067599845, 526.850999999995111 ], [ 8.51043776296215, 47.409850495390771, 527.961999999999534 ], [ 8.510424206560639, 47.409831344813142, 528.319000000003143 ] ] ] ] } },
]
}
My code so far:
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
map.data.addGeoJson(buildings);
map.data.setStyle(function(feature){
if (feature.getProperty('isColorful'))
return({
fillColor: 'red',
strokeColor: 'red',
strokeWeight:2
});
else
return ({
fillColor: 'grey',
strokeWeight:2
});
});
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', !event.feature.getProperty('isColorful'));
});
When you click on a building, clear the isColorful properties of all the other buildings (or keep a reference to the one that is colored and set it back).
clear all the buildings:
map.data.addListener('click', function(event) {
map.data.forEach(function(feature) {
feature.setProperty('isColorful',false);
});
event.feature.setProperty('isColorful', !event.feature.getProperty('isColorful'));
});
proof of concept fiddle
or
keep a reference to the "active" building:
var coloredBuilding = null;
map.data.addListener('click', function(event) {
if (coloredBuilding != null) {
coloredBuilding.setProperty('isColorful', false);
}
event.feature.setProperty('isColorful', true);
coloredBuilding = event.feature;
});
proof of concept fiddle
I am wondering if I have a GeoJSON object such as
var geoJSONLoc= {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"timeReported": "2013-01-22 08:42:26+01"
},
"geometry": {
"type": "Point",
"coordinates": [
7.582512743,
51.933292258,
1
]
}
},
{
"type": "Feature",
"properties": {
"timeReported": "2013-01-22 10:00:26+01"
},
"geometry": {
"type": "Point",
"coordinates": [
7.602516645,
51.94962073,
1
]
}
}]}
How can I save this into a .json file for future use?
I am trying to use
localStorage.setItem('geoJSONLoc.json', geoJSONLoc);
but it doesnt seem to be the right answer.
I've done a little work in NodeJS, so this maybe way off base.
But couldn't you use the fs module for this?
something like
var fs = require('fs')
fs.writeFile('geoJSONLoc.json', geoJSONLoc, function(err){
if(err){
console.log(err);
}
});
I have on my web application a city geographically divided into neighborhoods. I used geojson file described as an array of the following :
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "Polygon",
"color" : "red",
"coordinates": [
[
[
2.38317,
48.867111
],
[
2.363713,
48.867554
],
[
2.364399,
48.867126
],
[
2.39839,
48.85133
],
[
2.39432,
48.856541
],
[
2.39223,
48.857571
],
[
2.38965,
48.85844
],
[
2.38746,
48.86282
],
[
2.38377,
48.86607
],
[
2.38317,
48.867111
]
]
]
},
"properties": {
"id" : "11",
"name": "11ème : arr",
"description": "this is 11",
"arr": "11e"
}
}, ...
My aim is to look where the user's address is located withing my polygons. I get the address from HTML5 get my locationor by entering own address in a autocomplete search bar it returns => google.maps.LatLng object.
How is it possibile to explore the drown polygons objects knowing that containsLocation needs LatLng formatted polygons
Here's the example which uses google.maps.Polygon object
I found the answer, I've converted all features with this script
https://github.com/JasonSanford/geojson-google-maps/blob/master/GeoJSON.js
I'm trying to display information in a panel from a local json file (for testing purposes). This is being done in firefox and I am not running this on a server. I thought this would be possible without doing that.
Ext.define('APL.view.result.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.resultlist',
title: 'All Users',
initComponent: function() {
this.store = Ext.create('Ext.data.Store', {
proxy: {
type: 'ajax',
url: 'sample_2.json',
reader: {
type: 'json',
root: 'features',
record: 'properties'
}
},
//alternatively, a Ext.data.Model name can be given (see Ext.data.Store for an example)
fields: ['prop0']
});
this.columns = [
{header: 'Property', dataIndex: 'prop0', flex: 1},
];
this.callParent(arguments);
}
});
I create and launch the panel from another file
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'APL',
appFolder: 'app',
controllers: [
'Results'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'resultlist'
}
]
});
}
});
When run as shown, the table is empty. No logs or any record of requests being sent in the networks tab.
I tried using these two resources when making this: http://www.sencha.com/forum/showthread.php?215035-Reading-and-displaying-data-in-extjs-from-a-Json-file and http://docs.sencha.com/extjs/4.2.1/#!/guide/application_architecture
And here is the JSON file I am trying to use:
{ "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
"properties": {"prop0": "value0"}
},
{ "type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
]
},
"properties": {"prop0": "value0"}
},
{ "type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
[100.0, 1.0], [100.0, 0.0] ]
]
},
"properties": {"prop0": "value0"}
}
]
}
If you are running it via file:// protocol it is not going to work because Ajax can work only via http:// or https:// protocols. Install a http server locally, it is not that difficult.
Here are video instructions how to prepare your computer for Ext JS development.