How to include json content inside a js variable - javascript

I have this js variable which is parsing a json content inline:
var places = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"icon": "theatre"
},
"geometry": {
"type": "Point",
"coordinates": [-77.038659, 38.931567]
}
}]
};
I need this content to be inside an external json file since it is a long list to load dynamically.
Can you tell me how to call the json file (the code must be as it is and not parsed)? I tried dozens of solution here but without results :(
Thanks in advance for your help

Related

how do I access a variable inside a variable ? (javascript )

I'm having a bit of a problem here, I'm creating a Leaflet project and need to access to data outside of a variable, in my case a polygon. Until now I have the data inside the polygon with
data:[28.63,34.29,12.23,9.33,6.97,3.93,4.63]
but I'd prefer the data to be outside of this variable with
var koeln = [28.63,34.29,12.23,9.33,6.97,3.93,4.63];
I'm now looking for a result how to access to the var koeln inside of the data, I've tried to put it in brakes or other things, but nothing seems to work..
edit:
var wahl2017 = { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties":
{"name":"Wahlbezirk 13","partei":"cdu","wahlbeteiligung":69.42, "drittpa1":"gruen","drittpa2":"fdp", data:[28.63,34.29,12.23,9.33,6.97,3.93,4.63],title:"Köln I"}, "geometry": { "type": "Polygon", "coordinates": [ [ [6.976650953292847, 50.84119137806263 ],
(and so on)
Refering to your comment, you have this data structure:
var wahl2017 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Wahlbezirk 13",
"partei": "cdu",
"wahlbeteiligung": 69.42,
"drittpa1": "gruen",
"drittpa2": "fdp",
data: [28.63, 34.29, 12.23, 9.33, 6.97, 3.93, 4.63],
title: "Köln I"
}
}]
};
You can access the data like this:
let koeln = wahl2017.features[0].properties.data
You can access the data variables with var koeln = wahl2017.features[0].properties.data
When you have more cities you can call .forEach()
var cities = [];
wahl2017.features.forEach(function(city){
cities.push({name: city.properties.name, data: city.properties.data});
})
console.log(cities);
console.log(cities[0].data);

How to pass custom fields into mapbox-gl js to create points on map?

I've created a map using mapbox and plotted multiple custom points that you can interact with. I am also using Wordpress and want to use advanced custom fields to create each point so they can easily be managed from a non-technical person. The fields are all setup, but I am having trouble passing them into the javascript in my php template.
I've tried using a loop but I can't use the loop inside javascript. Here is my Mapbox code that I am using to plot the points and want to use advanced custom fields with:
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/coptmarketing/cjvi7hc4602dk1cpgqul6mz0b',
center: [-76.615573, 39.285685],
zoom: 16 // starting zoom
});
var geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"title": "Shake Shack",
"id": "shake-shack"
},
"geometry": {
"type": "Point",
"coordinates": [-76.609844, 39.286894]
}
},
{
"type": "Feature",
"properties": {
"title": "Starbucks",
"id": "starbucks"
},
"geometry": {
"type": "Point",
"coordinates": [-76.619071, 39.286649]
}
}
]
};
I've stored the data in a JSON array:
[{"title":"Shake Shack","slug":"shake-shack","latitude":"-76.609844","longitude":"39.286894"},{"title":"Starbucks","slug":"starbucks","latitude":"-76.619071","longitude":"39.286649"}]
How do I insert this into the geoJSON?
Figured it out:
First I created a plugin that stored the custom post data in a JSON array and stored it on the server. This also updated every time I updated, saved or deleted a post. Here is the example JSON:
data = {"placeList": [{"title":"Shake Shack","slug":"shake-shack","latitude":"-76.609844","longitude":"39.286894"},{"title":"Starbucks","slug":"starbucks","latitude":"-76.619071","longitude":"39.286649"}]}
Then in the php file, I called the .json file and in my javascript, inserted the array into the GeoJSON:
var placeJson = data;
var geojson = {
type: "FeatureCollection",
features: [],
};
for (i = 0; i < placeJson.placeList.length; i++) {
geojson.features.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [placeJson.placeList[i].latitude, placeJson.placeList[i].longitude]
},
"properties": {
"id": placeJson.placeList[i].slug,
"title": placeJson.placeList[i].title
}
});
}

How to save a GeoJSON into file using javascript

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

TimeSlider Plugin and Leaflet - Markers not appearing in order

Updated with a JSFIDDLE link
I am using LeafletJS to build a web map with a timeline slider. I am using the LeafletSlider plugin to show a group of markers based on a GEOJSON property named DATE_START. Here's an example of what my data object looks like:
var camps = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"STATUS": "UNOCCUPIED",
"DATE_START": "2015-06-23",
"DATE_CLOSED": "2016-01-23"
},
"geometry": {
"type": "Point",
"coordinates": [64.6875, 34.97600151317591]
}
}, {
"type": "Feature",
"properties": {
"STATUS": "OCCUPIED",
"DATE_START": "2014-01-21",
"DATE_CLOSED": "2015-05-25"
},
"geometry": {
"type": "Point",
"coordinates": [65.335693359375, 36.26199220445664]
}
}, {
"type": "Feature",
"properties": {
"STATUS": "UNOCCUPIED",
"DATE_START": "2015-09-13",
"DATE_CLOSED": ""
},
"geometry": {
"type": "Point",
"coordinates": [67.587890625, 35.969115075774845]
}
}]
};
An example of my code:
//Create a marker layer (in the example done via a GeoJSON FeatureCollection)
var testlayer = L.geoJson(camps, {
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.DATE_START);
}
});
var sliderControl = L.control.sliderControl({
position: "topright",
layer: testlayer,
timeAttribute: 'DATE_START'
});
//Make sure to add the slider to the map ;-)
map.addControl(sliderControl);
//And initialize the slider
sliderControl.startSlider();
I've added the timeslider plugin to my map, and although it's functioning, I can't seem to get the slider to show the markers in a temporal order. For example, the marker with the DATE_START value of 2014-01-21 is shown second when in fact it should be shown first because it's the marker with the earliest date.
How can I get my timeslider/markers to appear in the correct order from earliest to latest? Thanks.
EDIT:
As ghybs mentions below (and shows in an example), the proper way to ensure that the slider returns data in the correct order is to sort the options.markers array of the sliderControl:
sliderControl.options.markers.sort(function(a, b) {
return (a.feature.properties.DATE_START > b.feature.properties.DATE_START);
});
My original answer (below) sorts the features of the GeoJSON, but this does not guarantee that Leaflet will return them in the correct order.
Original answer:
You can use the array.sort method to sort the features array in place:
camps.features.sort(function(a, b) {
return (a.properties.DATE_START > b.properties.DATE_START);
});
http://jsfiddle.net/nathansnider/ngeLm8c0/4/

Ol3 unique identifier for a feature

I am trying to create some custom maps. I am using ol3 because of the drag and drop feature. The idea is to be able to style each feature on the map.
I drag and drop .gpx and .json files exported from JOSM and create a unique overlay for each feature.
I can change the stroke color etc. with a style function on that overlay. That all works great until I do the next drop.
The dropped features seem to appear in some random order getting interspersed with the ones from the previous drop. I need to have some way to tell which features are new from that drop operation so I can style those without affecting the ones I have already styled.
Is there a unique identifier of some kind that I can get from the feature?
Is there a way that I can tag a feature so with a unique id?
I tried feature.getId() but that is undefined at the time that the drag and drop event fires.
You can define your feature(s) in a json format
var geoSource = new ol.source.GeoJSON({
/* #type {olx.source.GeoJSONOptions} */
"projection": "EPSG:3857" //us
, "object": {
"type": "FeatureCollection"
, "crs": { "type": "name", "properties": { "name": "EPSG:4326" } }//'EPSG:3857'//euro 'urn:ogc:def:crs:EPSG::4326'//'urn:ogc:def:crs:OGC:1.3:CRS84'
, "features": [
{
"type": "Feature", "id": "01"
, "geometry": { "type": "Point", "coordinates": [-80.0874386, 26.7816928] }
, "properties": { "myproperty": "West Palm Beach" }
}
, {
"type": "Feature", "id": "02"
, "geometry": { "type": "Point", "coordinates": [-82.0838700, 26.9262480] }
, "properties": { "myproperty": "Punta Gonda" }
}
]
}
});
Then you access the feature by
var ff = geoSource.getFeatureById('02');
alert(ff.getProperties()['myproperty']);
or
if you need to analyse all the features, you can
geoSource.getFeatures().forEach(function (ff) {
alert(ff.getProperties()['myproperty']);
})
Does it help? Good luck.
when creating a feature, you can pass an object with custom properties to the constructor. For example:
var myFeature = new ol.Feature({
geometry: ...,
labelPoint: ..,
name:...,
customProp1: ...,
customProp2: ...,
myCustomID: myRandomIDGenerator()
})

Categories