I got the "lat" and "lng" of all the Bike Points from the TFL's API. I am trying to show all the Bike Points as markers on the React-leaflet map.
I have successfully got the data and have filtered it to the right format [51.505, -0.09] and mapping each one on to the Marker
component <Marker position={data.position} /> .
The problem is the markers not showing up on the map.
I have hard coded some data and it works so I don't understand what I am doing wrong with the live data. I will be very grateful if someone could help me? I have been stuck on this for all night.
Here is my problem in Jsfiddle:
Problem on jsfiddle!
There is a typo here, you need to return element (refer Lists and Keys docs for a more details):
{this.state.bikeMarkers.map(data => {
return <Marker position={data.position}></Marker>
^^^^^^
missing
})}
filterData function looks redundant in the provided example, data could be retrieved and filtered in the first place like this:
axios.get(`https://api.tfl.gov.uk/bikepoint`).then(res => {
let markers = res.data.map(location => {
return { key: location.id, position: [location.lat, location.lon] };
});
this.setState({
bikeMarkers: markers
});
});
Updated jsFiddle
Related
I place polygons in front of a map. Some smaller polygons are placed in front of a bigger polygon. I get the data from geojson file. I want to show the name-poperty as a popup. I use:
function onEachFeature(feature, layer) {
layer.bindPopup(layer.feature.properties.name);
};
Unfortunately only the name-property of the bigger ploygon is shown. How can i correct this? I tried an additionl geojson-property with:
function onEachFeature(feature, layer) {
if ((feature.properties.popupContent != "0"))
{layer.bindPopup(layer.feature.properties.name);
};
};
But this does not work too.
thanks, wonk
Leaflet provides a couple of functions to help access smaller markers that may be trapped under larger markers, those being the .bringToFront() and .bringToBack() methods provided by L.Path, L.featureGroup, and L.GridLayer and inherited by any descendants of those. I've set up a live, rudimentary example of using these to access trapped markers on StackBlitz.
Thank you for the example, I understand. I tried:
function onEachFeature(feature, layer) {
if ((feature.properties.popupContent != "0"))
{layer.bindPopup(layer.feature.properties.name);
layer.bringToFront();
};
}
But this only shows the first polygon (there are a lot of them). Maybe, I misunderstood the geojson-data. I thought, there is one layer for every polygon. But it seems, that all polygons of geojson-data-file are in ONE layer. In this case your proposal won't work, I think. I will have to find another solution. The data come from:
function show_geojson (overlay) {
$.ajax({url:overlay}).done(function(data) {
var data = JSON.parse(data);
L.geoJson(data,
{pointToLayer: MarkerStyle,
style: style,
onEachFeature: onEachFeature
});
geoJsonLayer = L.geoJson(data); //neu
});
}
Thank you!
I am quite new to this , really need guidance,
I understand that with Mapbox Map Matching API, i will get the raw out put of correct location, but what I dont understand, how can i use mapbox map-matching API output with mapbox-gl-js to create correct map?
Do i need to use mapbox-match-js for this ? if yes , how do i pass the geo json?
https://github.com/mapbox/mapbox-match.js/tree/master
L.mapbox.mapmatching(geojson, options, function (error, layer) {
layer.addTo(map);
layer.setStyle({
color: '#9a0202',
weight: 4,
opacity: 0.8
});
});
there is a demo html here, but the raw out put is not same as map-matching API out put,
Can any one please help me with this ?
Thanks for your help.
I had the same problem and this is my solution:
1) Add <script src="https://unpkg.com/mapbox#1.0.0-beta7/dist/mapbox-sdk.js"></script> in my index.html file.
2) Use mapbox.matching:
var mapboxClient = new MapboxClient(mapboxgl.accessToken);
mapboxClient.matching(
// dataToAddLine: array like:
// [
// [13.418805122375488, 52.50059890747071],
// [13.419144630432129, 52.50109481811523]
// ]
dataToAddLine.features[0].geometry.coordinates
, function(err, res) {
// do something with res
console.log(res);
}
)
You can test res coordinates here: geojson
I hope this solution helps you too.
I am able to find and change the properties of a vector tileset using expression, for example:
map.setPaintProperty('my-shp', 'fill-opacity', [
'match',
['get', 'NO'],
13708, 1,
/* else */ 0
]);
I was wondering if there is a way to get the exact coordinate of the tileset item using expression?
Sorry if I am wrong with the terminology (of tileset/tile item), feel free to correct me. Thanks
To clarify, using the above expression, I can change the opacity of the tileset item where NO is 13708. My question is, is there a way to get the lat/long coordinate of the tileset item where NO is 13708?
You could just iterate over all rendered features and test the "NO" property then return the coordinates of this feature. To get all rendered features you need to use queryRenderedFeatures. Features follow the GeoJSON structure.
For example:
let features = map.queryRenderedFeatures({ layers: ['my-shp'] });
let filtered = features.filter(feature => {
return feature.properties.NO === 13708;
});
console.log(filtered);
I would like to know what is a good way to make POST request.
I created view with google map and marker with coordinates using react-google-maps. I store markers in react component using array of objects like this:
MapComponent.js
const markers = this.props.markers.map((pos,i) => {
const marker={
position:{
lat:pos.location.lat,
lng:pos.location.lng
}
}
return <Marker key={i} {...marker}/>
})
I am getting info about markers from AppComponent which is returning this:
<div className='container' style={{height:600}}>
<Map center={location} markers={markers}/>
</div>
where markers are :
const markers=[
{
location:{
lat: 40.7575285,
lng: -73.9884469
}
}
]
Now I would like to get markers' coordinates via POST request. Client will send POST with JSON data with his/her current location.Then I would like to store each coordinate in MongoDB refresh page and display marker with current location which I got from JSON. What is the best way to do that? Should I use POST only using Express?
I load some lat / lon info, then use it to build a polyline.
I then want to add a marker at each of the polyline vertices that will show when the polyline is clicked.
The vertices should disappear if a different (or the same) polyline is clicked.
The code below creates the polyline and the vertex markers.
But the vertex markers do not ever disappear.
I've tried to do this several ways with the same result. I've tried storing the vertex markers in an array and adding them directly to the map, then map.removeLayer'ing them. That doesn't work either. Nor does it work if I use an L.featureGroup instead of a layerGroup.
Clearly I've missed the point somewhere as to how markers can be removed. Could someone point me at the error in my methodology?
// trackMarkersVisible is a global L.layerGroup
// success is a callback from an ajax that fetches trackData, an array f lat/lon pairs
success: function (trackData) {
// build an array of latLng's
points = buildTrackPointSet(trackData, marker.deviceID);
var newTrack = L.polyline(
points, {
color: colors[colorIndex],
weight: 6,
clickable: true
}
);
$(newTrack).on("click", function () {
trackMarkersVisible.clearLayers();
$.each(points, function(idx, val) {
var tm = new L.Marker(val);
trackMarkersVisible.addLayer(tm);
});
map.addLayer(trackMarkersVisible);
});
}
Without a JSFiddle or Plunker it's hard to say because i'm not sure what behaviour your getting but using the clearLayers() method of L.LayerGroup should remove all layers from that group. I would check in the onclick handler if the group already has layers: group.getLayers().length === 0 If the group is empty, add the markers, if the group has layers use clearLayers. Example in code:
polyline.on('click', function (e) {
if (group.getLayers().length === 0) {
e.target._latlngs.forEach(function (latlng) {
group.addLayer(L.marker(latlng));
});
} else {
group.clearLayers();
}
});
This works for me, see the example on Plunker: http://plnkr.co/edit/7IPHrO?p=preview
FYI: an instance of L.Polyline is always clickable by default so you can leave out the clickable: true