I have data geosjon figuring out a polygon like this, and I want to overlay the raster data tif/jpg format overlay exact on that polygon
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 1,
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
98.936758936000047,
3.5082781320000436
],
[
98.936761946000047,
3.5082901750000701
],
[
98.936760674000084,
3.508289742000045
],
[
98.936758936000047,
3.5082781320000436
]
...and so on...
]
],
.....
How can I get the bounds coordinates with this format [[x.xx, x.xx], [x.xx, x.xx]] from above geojson in react ?
My initial script:
import { latLngBounds } from 'leaflet'
So far, I can get the coordinates
datajson.features.map((state) => {
const coordinates = state.properties.coordinates[0].map((item) => {
[item[1], item[0]];
console.log("The LatLng coordinate:" + coordinates);
const boundsCordinate = latLngBounds(coordinates)
})
})
My Map
<ImageOverlay
url="image url"
bounds={[[x.xx, x.xx], [x.xx, x.xx]]}
/>
Thank you
Related
I'm trying to query a document using its location with two polygons that are quite similar. Both includes the location of the document but one finds it and the other not. I thought that this was related to "big polygons" but I managed to reduce the polygons enough to rule out this possibility. See previous post. Any idea explaining such a difference?
Playground: https://mongoplayground.net/p/sTEtYD3HU8m:
Document:
{
"_id": {
"$oid": "63ef9379e671073bfb963145"
},
"geometry": {
"type": "Point",
"coordinates": [
2.834,
47.264
]
},
"_class": "org.example.springdatamongodbgeowithinissue.model.SamplingGeometry"
}
Is not in search results for this polygon:
{
"geometry": {
"$geoWithin": {
"$geometry": {
"type": "Polygon",
"coordinates": [
[
[
-16.1,
49.12
],
[
-16.1,
46.156
],
[
16.1,
46.156
],
[
16.1,
49.12
],
[
-16.1,
49.12
]
]
]
}
}
}
}
Still the same issue with Earth's curvature. Your area is long enough to take it into account:
zooming in and's clearly outside:
The map: https://jsfiddle.net/blex18/w9g4bzyk/1/
var map = new google.maps.Map(document.body, {zoom:5,center:{lat:47.264,lng:2.834}});
new google.maps.Polygon({geodesic:true,map:map,geodesic:true,
path:[
{lat:49.12,lng:-16.1},
{lat:46.156,lng:-16.1},
{lat:46.156,lng:16.1},
{lat:49.12,lng:16.1},
{lat:49.12,lng:-16.1}]});
new google.maps.Marker({
position: {lat:47.264,lng:2.834},
map,
title: "Here",
});
I'm trying to style a single GeoJSON source with different line colors based on a feature property using react-map-gl, and I can't find a way to get set the color of lines in a smart way.
Most of all, I would love to apply a function on the dataset to return the color of my own choosing based on a feature property value, but so far I haven't fount anything about it. If you know about it, please point in my direction:)
If I have the following GeoJSON:
{
"type": "FeatureCollection",
"name": "lineData",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "Need": "Urgent" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 10.653823175868171, 59.676506860589157 ], [ 10.652881996887283, 59.675443989456632 ] ] ] } },
{ "type": "Feature", "properties": { "Need": "Starting" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 10.658536710768077, 59.680279341285896 ], [ 10.65787427600862, 59.680222775937636 ] ] ] } },
{ "type": "Feature", "properties": { "Need": "Medium" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 10.653224904719789, 59.67859470385492 ], [ 10.653201052045171, 59.678557551379008 ] ] ] } },
]
}
I would like to be able to style this source data with different line colors based on the property "Need". Say, urgent becomes red, medium becomes yellow, and starting becomes green.
I've read about styling expressions at mapbox, and I believe the "feature-state" is key to solving this, but I cant wrap my head around how to get the color converted from a feature.
If this in the rendering:
<Source id="my-data" type="geojson" data={TheDataFileWithSomeData}>
<Layer {...layerStyleTheLines } />
</Source>
Then I want a layer styling something like this (not working):
const layerStyleTheLines = {
id: 'style_it_to_red',
type: 'line',
paint: {
'line-color': [
[["==", ["feature-state", "Need"], "Urgent"],"red"],
[["==", ["feature-state", "Need"], "Medium"],"yellow"],
[["==", ["feature-state", "Need"], "Starting"],"green"]
],
'line-width': 3,
}
};
Thanks for all your help!
I've read about styling expressions at mapbox, and I believe the "feature-state" is key to solving this, but I cant wrap my head around how to get the color converted from a feature.
You only want feature-state if you're intending to manipulate the feature attributes dynamically, which I don't think you are.
You probably just want regular data-driven styling:
const layerStyleTheLines = {
id: 'style_it_to_red',
type: 'line',
paint: {
'line-color': [
'match', ['get','Need'],
'Urgent', 'red',
'Medium', 'yellow',
'Starting','green',
'black'
],
'line-width': 3,
}
};
I am attempting to create a simple heatmap from a feature collection of points using leaflet's heatmap plugin. After successfully getting the json data from an ajax call, I create an empty coords array and push coordinates from each feature.
However, this method does not work and neither does the geojson2heat function. There are no errors in the console. What am I doing wrong and does anyone know of a workaround?
var map = L.map('map').setView([50.0647, 19.9450], 12);
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
}).addTo(map);
var geojsonLayer = new L.GeoJSON.AJAX("newmap.geojson");
coords = [];
function onEachFeature(feature, layer) {
coords.push(feature.geometry.coordinates);
};
L.GeoJSON(geojsonLayer, {
onEachFeature: onEachFeature
})
var heat = L.heatLayer(coords).addTo(map);
The structure of the geojson is standard:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "st_x": 19.952030181884801, "st_y": 50.055513141929701 }, "geometry": { "type": "Point", "coordinates": [ 19.952030181884801, 50.055513141929701 ] } },
{ "type": "Feature", "properties": { "st_x": 18.672015, "st_y": 50.287181666666697 }, "geometry": { "type": "Point", "coordinates": [ 18.672015, 50.287181666666697 ] } },
I am mostly doing the same as you but with Mapbox, which is based on Leaflet.
The problem I had is that the latitude and longitude coordinates of the GeoJSON were reversed. There were no errors on console either- points were just not showing on map. So, you need:
"coordinates": [ longitude, latitude ]
Hope that's the issue.
I'm trying to make a dashboard using dc.js. It has a few charts and a choroplethChart. It all worked fine, but I needed to add leaflet to the map. I've followed this sample and used dc.leaflet.js library, but instead of choroplethChart it returns Markers (see picture)
(this is how it looked before using leaflet)
The code is below and this is where geojson resides:
var usChart = dc_leaflet.choroplethChart("#us-chart");
usChart.width(1000)
.height(450)
.dimension(stateDim)
.group(totalDemandByStation)
.center([ 51.4963, -0.143 ])
.zoom(11)
.geojson(statesJson)
.colors(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"])
.colorDomain([0, max_state])
.colors(['#fff7ec','#fee8c8','#fdd49e','#fdbb84','#fc8d59','#ef6548','#d7301f','#b30000','#7f0000'])
.colorAccessor(function(d,i) {
return d.value;
})
.featureKeyAccessor(function(feature) {
return feature.properties.name;
})
.renderPopup(true)
.popup(function(d,feature) {
return feature.properties.name+" : "+d.value;
})
.legend(dc_leaflet.legend().position('bottomright'));
//https://github.com/dc-js/dc.js/issues/419
usChart.on("preRender", function(chart) {
chart.colorDomain(d3.extent(chart.data(), chart.valueAccessor()));
})
usChart.on("preRedraw", function(chart) {
chart.colorDomain(d3.extent(chart.data(), chart.valueAccessor()));
})
I'm not an expert here, but the choropleth is expecting map data rather than point data. The features in your geojson are points:
{
"crs": {
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
},
"type": "name"
},
"features": [
{
"geometry": {
"coordinates": [
-0.013071299999987,
51.510716
],
"type": "Point"
},
"properties": {
"id": "940GZZDLALL",
"labelX": 30,
"lines": [
{
"name": "DLR"
}
],
"name": "All Saints",
"tfl_intid": 850
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
0.061052699999989,
51.51427850000001
],
"type": "Point"
},
"properties": {
"id": "940GZZDLBEC",
"labelX": -30,
"lines": [
{
"name": "DLR"
}
],
"name": "Beckton",
"tfl_intid": 895
},
"type": "Feature"
},
...
To draw a choropleth, Leaflet will need features whose types are Polygon.
So my guess is that Leaflet is punting and drawing markers
How do you add a point to a polygon as a single feature? According to the GeoJson specs, this is known as a "GeometryCollection".
Example of a 'GeometryCollection':
{ "type": "GeometryCollection",
"geometries": [
{ "type": "Point",
"coordinates": [100.0, 0.0]
},
{ "type": "LineString",
"coordinates": [ [101.0, 0.0], [102.0, 1.0] ]
}
]
}
I tried adding a point to a polygon feature, but I couldn't get it to show on my mapbox map because I guess it is invalid GeoJson.
Anyone know what the proper way of doing this is? There are not many examples to follow on the web.
My take: [jsfilddle]
var myRegions = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometries": [
{
"type": "Point",
"coordinates": [
61.34765625,
48.63290858589535
]
},
{
"type": "Polygon",
"coordinates": [
[
[
59.94140624999999,
50.65294336725709
],
[
54.931640625,
50.90303283111257
],
[
51.943359375,
51.04139389812637
],
[
50.9765625,
48.19538740833338
],
[
52.55859375,
46.46813299215554
],
[
52.998046875,
43.8028187190472
],
[
54.4921875,
42.391008609205045
],
[
57.041015625,
43.29320031385282
],
[
59.8974609375,
45.398449976304086
],
[
62.5341796875,
44.08758502824516
],
[
65.6982421875,
45.73685954736049
],
[
68.37890625,
48.3416461723746
],
[
65.8740234375,
49.18170338770663
],
[
63.720703125,
49.97948776108648
],
[
63.80859374999999,
52.348763181988076
],
[
61.4794921875,
52.32191088594773
],
[
59.9853515625,
51.86292391360244
],
[
61.9189453125,
51.09662294502995
],
[
60.5126953125,
50.51342652633956
],
[
59.94140624999999,
50.65294336725709
]
]
]
}
]
}
]
};
As said in GeoJSON spec, a Feature object has exactly one geometry member, which is a Geometry object (or null).
A feature object must have a member with the name "geometry". The value of the geometry member is a geometry object as defined above or a JSON null value.
Among the possible geometry's you can indeed use a GeometryCollection, which must have a member geometries. The latter is an array of other geometries, i.e. your point, polygon, etc., or even another GeometryCollection.
A geometry collection must have a member with the name "geometries". The value corresponding to "geometries" is an array. Each element in this array is a GeoJSON geometry object.
So in your case you could simply do something like:
var myRegions = {
"type": "FeatureCollection",
"features": [{
"type": "Feature", // single feature
"properties": {},
"geometry": { // unique geometry member
"type": "GeometryCollection", // the geometry can be a GeometryCollection
"geometries": [ // unique geometries member
{ // each array item is a geometry object
"type": "Point",
"coordinates": [
61.34765625,
48.63290858589535
]
},
{
"type": "Polygon",
"coordinates": [
[
[
59.94140624999999,
50.65294336725709
],
// more points…
[
59.94140624999999,
50.65294336725709
]
]
]
}
]
}
}]
};
Updated jsfiddle: http://jsfiddle.net/rh8ok5t8/18/
I'm unsure to what you're actually trying to accomplish because you say you want to create a geometrycollection but in your example you're creating a featurecollection which is not the same by far.
A featurecollection is a collection of features:
A GeoJSON object with the type "FeatureCollection" is a feature collection object. An object of type "FeatureCollection" must have a member with the name "features". The value corresponding to "features" is an array.
http://geojson.org/geojson-spec.html#feature-collection-objects
Here's an example of a featurecollection:
{
type: "FeatureCollection",
features: [{
"type": "Feature",
"properties": {
"value": "foo"
},
"geometry": {
"type": "Point",
"coordinates": [0,0]
}
}, {
"type": "Feature",
"properties": {
"value": "bar"
},
"geometry": {
"type": "Polygon",
"coordinates": [[[45, 45], [45, -45], [-45, -45], [-45, 45], [45,45]]]
}
}]
}
A geometrycollection is a single feature (which you could contain in a featurecollection):
A GeoJSON object with the type "Feature" is a feature object. A feature object must have a member with the name "geometry". The value of the geometry member is a geometry object as defined above or a JSON null value. A feature object must have a member with the name "properties". The value of the properties member is an object (any JSON object or a JSON null value). If a feature has a commonly used identifier, that identifier should be included as a member of the feature object with the name "id".
http://geojson.org/geojson-spec.html#feature-objects
with multiple geometries:
A GeoJSON object with type "GeometryCollection" is a geometry object which represents a collection of geometry objects. A geometry collection must have a member with the name "geometries". The value corresponding to "geometries" is an array. Each element in this array is a GeoJSON geometry object.
http://geojson.org/geojson-spec.html#geometry-collection
And here's an example of a geometrycollection feature:
{
"type": "GeometryCollection",
"properties": {
"value": "foo"
},
"geometries": [{
"type": "Point",
"coordinates": [0, 0]
}, {
"type": "Polygon",
"coordinates": [[[45, 45], [45, -45], [-45, -45], [-45, 45], [45,45]]]
}]
}