In order to create an interactive map consisting of several layers I use the plugin leaflet-ajax with downloading of the files. geojson. When you direct at the object of the layer, the attribute information (objects attributes) displays.
It is required to include a link to the html page in a number of the objects attributes. I rack my brains over this task a week, please, help me know how to do it!
The code is given below.
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [{
"type": "Feature",
"properties": {
"id": 2,
"date": "2012\/02\/05",
"material": "plastic",
"Number": 1,
"support,feeder": "2 2"
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[34.377387101428354, 54.063054027736584]
]
}
}, {
"type": "Feature",
"properties": {
"id": 4,
"date": "2012\/02\/05",
"material": "plastic",
"Number": 1,
"support , feeder": "4 2"
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[34.378052287959541, 54.062481025595972]
]
}
}, ]
}
Looks like this is happening because you are never actually adding the layers to the map. Make sure to add map.addLayer(dorogi) for each one of those AJAX layers after you initialize them.
Or you can watch the data:loaded event and add them after all data has been downloaded. Docs at https://github.com/calvinmetcalf/leaflet-ajax
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I want to create a data object dynamically with key-value pairs. In this object, there is also an array named features and also within this array element called geometry one more array coordinates.
In feature array, properties like title and content will add dynamically and also values of coordinates array.
How to add data in coordinates array: "geometery":{"coordinates":[]}.. ?
data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"title": "Day 1",
"content": "This is where some people moved to."
},
"geometry": {
"type": "Point",
"coordinates": [
-73.7949,
40.7282,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "The Next Day",
"content": "This is where some people grooved to."
},
"geometry": {
"type": "Point",
"coordinates": [
-74.3838,
40.9148,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "Amazing Event",
"content": "This is where they went to have fun."
},
"geometry": {
"type": "Point",
"coordinates": [
4.899431,
52.379189,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "1776",
"content": "This where they went when the revolution had begun."
},
"geometry": {
"type": "Point",
"coordinates": [
-71.3489484,
42.4603719,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "1776",
"content": "This where they went when the revolution had begun."
},
"geometry": {
"type": "Point",
"coordinates": [
-71.2272,
42.4473,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "1984",
"content": "So they all came here...and disappeared without a trace!"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.118092,
51.509865,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "12/22/63",
"content": "Now, this can be quite the scary place."
},
"geometry": {
"type": "Point",
"coordinates": [
-70.2553259,
43.661471,
1
]
}
},
]
}
var data = {
features: []
};
for (piece in pieces){
data.features.push({
type: "Feature",
properties: {title: '{piece.title}' , content: '{piece.content}' },
geometry: {type: "Point"},
});
}
What have you already tried and where was your problem?
You could do something like this:
var data = {
features: []
};
data.features.push({
type: "Feature"
});
I created a map of Toronto wards some years ago when there were 44 wards. Now we have 25 wards and I am attempting to convert the map. I haven't been working with D3 for some time and am not sure where to start.
The previous json had the following definition and was much larger than the one I got from the city
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::4269" } },
"features": [
{ "type": "Feature", "properties": { "GEO_ID": 14630026, "CREATE_ID": 63519, "NAME": "Scarborough-Rouge River (41)", "SCODE_NAME": "41", "LCODE_NAME": "EA41", "TYPE_DESC": "Ward", "TYPE_CODE": "CITW", "OBJECTID": 1, "SHAPE_AREA": 0.0, "SHAPE_LEN": 0.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -79.264840294724905, 43.779537878926838 ],
The new one starts
{"type":"FeatureCollection", "features": [
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[318236.529,4840171.519],[318236.25,4840170.941],
So that I can use the existing javascript I would really like to find a way of converting the new file to the older one. Is that possible?
I'm trying to simulate city traffic movements (at the moment I'm only into vehicles) but I'm having a problem.
What happens is that I'm trying to simulate 1 car per point at the map, but I don't know how to duplicate a certain layer (and each one has a different route), for example this one:
map.addSource('point', {
"type": "geojson",
"data": pointOnCircle(0)
});
map.addLayer({
"id": "point",
"source": "point",
"type": "circle",
"paint": {
"circle-radius": 10,
"circle-color": "#007cbf"
}
});
I don't know if I could just loop and generate N points with different names or do it in another way.
Here's a video of what I've done until now (for simulating it I created 2 different layers because I didn't know how to duplicate them) :
https://www.youtube.com/watch?v=xWZD9aBUFlg
You should put all your points in the one data layer:
map.addSource('points', {
"type": "geojson",
"data": pointsOnCircle(0) // change this function to return multiple features
});
map.addLayer({
"id": "points",
"source": "points",
"type": "circle",
"paint": {
"circle-radius": 10,
"circle-color": "#007cbf" // possibly make this a data-driven function
}
});
Your GeoJSON data source would look like:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
146.25,
-37.16031654673676
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
138.515625,
35.460669951495305
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-81.5625,
33.43144133557529
]
}
}
]
}
How could I go about retrieving the value property from the geoJSON when I click on a specific map marker (leaflet.js)? I’ve tried with the following and similar code but I can’t seem to get it to work.
Sample geoJSON
var geojsonFeature = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"marker-color": "#f85047",
"marker-size": "medium",
"value": 130
},
"geometry": {
"type": "Point",
"coordinates": [
146.3622826337814,
-41.187067757423826
]
}
},
]
};
JS
marker.on('click', function(e){
alert(this.geojsonFeature.features.properties.value);
});
Here is the JSFiddle
Based on the code you show in the question:
alert(geojsonFeature.features[0].properties.value);
I have the following .js file, and Dreamweaver reports a syntax error on line 2.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 0,
"properties": {
"Id": 0,
"Title": "River & Trail HQ",
"Other": null,
"Parking": "Yes"
},
"geometry": {
"type": "Point",
"coordinates": [
-8649997.6690437607,
4769179.73322534
]
}
}
]
}
Seems something is wrong with
"type": "FeatureCollection",
line.
If that's the whole JavaScript file, then it's giving you an error because it's interpreted as a block instead of an object literal. To fix this, you could assign it to something, like
var someObj = {
"type": "FeatureCollection",
...
}
You may also be thinking of a JSON file (which is probably the case, since a free-floating object literal isn't going to do you much good anyway). JSON and JavaScript are not the same. If you really want a JSON file, then save it as such (.json).
Try
var x = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature", "id": 0, "properties":
{
"Id": 0, "Title": "River & Trail HQ", "Other": null, "Parking": "Yes"
},
"geometry":
{
"type": "Point", "coordinates": [ -8649997.6690437607, 4769179.73322534 ]
}
}
]};
http://jsonlint.com shows it as valid JSON and I can't see any issues with it on visual inspection.