I am trying to write a section of JavaScript code that allows a user to analyse a route they have plotted on a map. After the user has finished plotting their route, I want to determine if the route they have plotted crosses over any areas of interest.
To do this I am using the lineIntersect method in Turf.js which should allow me to pass a LineString and MultiPolygon.
I have created a Turf.js MultiPolygon:
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
51.50836874890726,
-0.091989636996398
],
[
51.50797826040486,
-0.088994163337176
],
[
51.507701047593805,
-0.085230241948645
],
(the full object had too many characters to post here so I pasted the full output to CodePen)
and converted the user's route to a Turf.js LineString:
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
51.50350693825546,
-0.027165818854444357
],
[
51.50115610069437,
-0.041240038776924066
]
]
}
}
However when I pass these two objects to the lineIntersect method:
turf.lineIntersect(myLineString, myMultiPolygon);
I am getting the following error:
Uncaught Error: coordinates must contain numbers
com turf/turf/turf.min.js:1
There is an extra number 4 at line 8782 in the feature data.
(Line 8782)
[4
51.49960254940379,
-0.093191432240797
],
Once it is eliminated you can use it.
...
var feat1 = ... //that corrected code
var turf_pgon1 = turf.polygon(feat1.geometry.coordinates);
var line1 = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
51.50350693825546,
-0.027165818854444357
],
[
51.50115610069437,
-0.041240038776924066
]
]
}
}
// turf-intersection
var ans = turf.lineIntersect(line1, turf_pgon1);
To get the coordinates of the intersection points.
var xy1 = ans.features[0].geometry.coordinates; //[ 51.503118870662334, -0.02948913916413884 ]
var xy2 = ans.features[1].geometry.coordinates; //[ 51.50157899855393, -0.038708193285440035 ]
Related
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);
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
}
});
}
I am trying to show clusters using markerclustergroups with Polygons. Right now the polygons are shown but the clusters aren't. I have been trying to use center of mass for the polygons because it seems like markerclustergroup doesn't like polygons but that doesn't really work since the animation of markerclustergroup will be set on the centroids and not the actual polygon.
My polygons all vary in amount of coordinates. Some have +10 sets others have 3.
How would I use markerclustergroup for polygons?
Below my code can be seen:
// Create variable to hold map element, give initial settings to map
var map = L.map('map', {
center: [23.70489, 43.90137],
zoom: 5
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
}).addTo(map);
var ojStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.65
};
// Hardcoded polygons as GeoJSON
var polygons = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[37.99896240234376, 21.55017532555692],
[39.39422607421876, 21.476073444092435],
[38.88336181640626, 22.56582956966297],
[38.023681640625, 22.611475436593366],
[37.43591308593751, 21.99908185836153],
[37.28485107421876, 21.624239377938288],
[37.28485107421876, 21.624239377938288],
[37.99896240234376, 21.55017532555692]
]
]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[38.50708007812501, 21.453068633086783],
[39.20745849609376, 21.37124437061832],
[39.10858154296876, 20.876776727727016],
[38.80920410156251, 20.912700155617568],
[38.49884033203126, 20.94604992010052],
[38.50708007812501, 21.453068633086783]
]
]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[50.57830810546875, 25.980268007469803],
[50.77606201171876, 25.956809920555312],
[50.780181884765625, 25.69970044378398],
[50.56457519531251, 25.822144306879686],
[50.56182861328126, 25.945696562830516],
[50.57830810546875, 25.980268007469803]
]
]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[54.37408447265626, 24.51963836811676],
[54.29443359375001, 24.40963901896311],
[54.25872802734375, 24.449649897759667],
[54.32739257812501, 24.539627918861232],
[54.37133789062501, 24.559614286039903],
[54.37408447265626, 24.51963836811676]
]
]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[54.40155029296876, 24.463400705082282],
[54.41940307617188, 24.489648077028683],
[54.45785522460938, 24.462150693715266],
[54.43450927734376, 24.43839812102505],
[54.40155029296876, 24.463400705082282]
]
]
}
}]
}
var polygonArray = []
for (i = 0; i < polygons.features.length; i++) {
polygonArray.push(polygons.features[i]);
}
var markers = L.markerClusterGroup().addTo(map);
var geoJsonLayer = L.geoJson(polygonArray);
markers.addLayer(geoJsonLayer);
map.fitBounds(markers.getBounds());
http://js.do/code/165930 - Shows how clustering doesn't work for the polygons
I am looking for a solution like this: http://jsfiddle.net/ve2huzxw/237/
You can do it very much like in this GIS post: Is it possible to cluster polygons in Leaflet?
// Compute a polygon "center", use your favourite algorithm (centroid, etc.)
L.Polygon.addInitHook(function() {
this._latlng = this._bounds.getCenter();
});
// Provide getLatLng and setLatLng methods for
// Leaflet.markercluster to be able to cluster polygons.
L.Polygon.include({
getLatLng: function() {
return this._latlng;
},
setLatLng: function() {} // Dummy method.
});
Updated live example: http://js.do/code/166021
I would like to wrap multiple polygons in a parent polygon. Example below:
Is this possible in Leaflet js? Assume I have an array of L.polygon objects.
Thank you
Short answer: no.
If you want to create an envelope for your polygones, then it is an algorithm problem that goes beyond the scope of leafletjs.
You can look at the answers of this question to start solving your problem.
EDIT: here is an example using Turfjs library (thanks to #IvanSanchez for the heads up and to #HudsonPH for the polygons).
// draw envelope
var points = {
"type": "FeatureCollection",
"features":
[
// collect the points of your polygons
turf.point([-104.05, 48.99]),
// ...
]
};
var hull = turf.convex(points);
L.geoJson(hull).addTo(map);
You can have a group, but you need define all the coordinates
more info: http://leafletjs.com/examples/geojson.html
var states = [{
"type": "Feature",
"properties": {"party": "Republican"},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-104.05, 48.99],
[-97.22, 48.98],
[-96.58, 45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}, {
"type": "Feature",
"properties": {"party": "Democrat"},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-109.05, 41.00],
[-102.06, 40.99],
[-102.03, 36.99],
[-109.04, 36.99],
[-109.05, 41.00]
]]
}
}];
L.geoJson(states, {
style: function(feature) {
switch (feature.properties.party) {
case 'Republican': return {color: "#ff0000"};
case 'Democrat': return {color: "#0000ff"};
}
}
}).addTo(map);
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