I am using Angular 7 and Mapbox V2 in my project.
My search functionality is working perfectly and now I want to get latitude and longitude values from searched location where a marker is set after search.
--Parent component html
<app-map style="pointer-events: none !important;"
[displayMarkerOnClick]="true" [displayNav]="false" [displayStyles]="false"
[displaySearch]="true" (onMapSearch)="onMapSearch($event)">
</app-map>
--Parent component ts
onMapSearch(mapLocation: MapLocation): void{
this.mapModel.latitude = mapLocation.latitude;
this.mapModel.longitude = mapLocation.longitude;
}
--map component html (child component)
<div id="mapbox-map"></div>
--map component ts (child component)
GeoCoder.on('result', function(e) {
if ($this.displayMarkerOnClick) {
$this.addMarkerWithLocationPopup(e.latlng);
}
$this.onMapSearch.emit(new MapLocation(e.latlng.lng, e.latlng.lat));
});
At this point, I'm getting error and could not find a good solution.
It will be highly appreciable if I get expected solution. Thanks in advance.
Related
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
I am exporting Google Directions routes as KML and displaying them on a Mapbox map by reading them with Omnivore and adding them to the map,
The Google KML stores each route as two Places (the start and end points) and one LineString (the route). In Mapbox I would like to show only the routes, that is to filter out the markers somehow. I'm displaying markers out of my own database and the Google markers clutter it up.
Here is my code. I change the styling of the LineStrings just to show that I can, but do not know what magic call(s) to make to not display the Points.
Thanks.
runLayer = omnivore.kml('data/xxxx.kml')
.on('ready', function() {
var llBnds = runLayer.getBounds();
map.fitBounds(llBnds);
this.eachLayer(function (layer) {
if (layer.feature.geometry.type == 'LineString') {
layer.setStyle({
color: '#4E3508',
weight: 4
});
}
if (layer.feature.geometry.type == 'Point') {
//
// Do something useful here to not display these items!!
//
}
});
})
.addTo(map);
Welcome to SO!
Many possible solutions:
Most straight forward from the code you provided, just use the removeLayer method on your runLayer Layer Group when you get a 'Point' feature.
Cleaner solution would be to filter out those features before they are even converted into Leaflet layers, through a custom GeoJSON Layer Group passed as 3rd argument of omnivore.kml, with a specified filter option:
var customLayer = L.geoJSON(null, {
filter: function(geoJsonFeature) {
// my custom filter function: do not display Point type features.
return geoJsonFeature.geometry.type !== 'Point';
}
}).addTo(map);
var runLayer = omnivore.kml('data/xxxx.kml', null, customLayer);
You can also use the style and/or onEachFeature options on customLayer to directly apply your desired style on your LineString.
I am currently working with Bing maps version 8 . I was previously working with version 7 . When plotting pushpins in version 7 a htmlContent attribute was sent along with the pushpins. What this html content did was that the pushpin was contained inside the div element .
var pushpinOptions = {
htmlContent: "<div id='container" + siteIndex + "'style='pointer-events: all !important; z-index: 35000; '></div><div id='lines"+siteIndex+"'></div>",
anchor:new Microsoft.Maps.Point(iconWidth/2,iconHeight/2),
width: iconWidth,
height: iconHeight
};
var pin = new Microsoft.Maps.Pushpin(latLon, pushpinOptions);
I used Konva JS to plot over these pushpins which i plotted with BingMaps.
var stage = new Konva.Stage({
container: 'container' + siteIndex,
width: width,
height: height,
stroke: 'green'
});
'container' + siteIndex, was the id of the div i set in bing maps pushpins which i used in konva to plot another image over the pushpins. This is my requirement . I have to plot a pushpin with coordinates and then plot some images over the pushpins . Now when i shifted from v7 to v8 for various reasons, I am facing an issue .
In v8 htmlContent is not sent with the pushpins, rather we send an svg image which has no way to identify after being plotted other than co-ordinates .
var customHtml = '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle id="myCircle htmlId" cx="25" cy="25" r="20" stroke="orange" stroke-width="4" fill="yellow" /></svg>';
var pin = new Microsoft.Maps.Pushpin(latLon, {
icon: customHtml.replace("htmlId",siteIndex.toString()),
anchor: new Microsoft.Maps.Point(iconWidth/2,iconHeight/2)
});
Now , what i am lokking for is a way to either plot images with a third party api which plots over co-ordinates or find to way to get access of the pushpins i plotted without the html content i.e with svg images. When i access the id with
document.getElementById("myCircle 0");
i get null.
I have looked for many different third party apis like leafleat js, konva js , Graphics js. But i do not find a way to identify my pushpins .
Is there a way to achieve what i wish to? There must be.
HTML pushpins are not supported in Bing Maps V8 as they can't be drawn on an HTML5 canvas. Using SVG would render on the Canvas but there is no DOM element create, which is why you aren't able to use document.getElementById. Using DOM elements with maps really limits performance and is the main reason why rendering is now done with an HTML5 canvas. That said, even in V7 using the approach of custom HTML in general so you can do document.getElementById to retrieve the pushpins was not a good approach. If you want to assign a unique ID to each pushpin and then be able to retrieve it, you should use a custom JavaScript property, or the existing metadata property. For example:
var pin = new Microsoft.Maps.Pushpin(map.getCenter());
pin.metadata = {
id: 'myCircle 0'
};
map.entities.push(pin);
function getPushpinById(id){
var pin;
for(var i=0,len = map.entities.getLength(), i<len;i++){
pin = map.entities.get(i);
if(pin.metadata && pin.metadata.id === id){
return pin;
}
}
}
Using this approach would allow the greatest performance in your app. However, if you really want to use custom HTML to create pushpins, it is possible to achieve this in V8 by using a custom overlay. Here is a code sample: https://msdn.microsoft.com/en-US/library/mt762877.aspx
I learned how to create a Leaflet map with Socrata open data when latitude and longitude appear in separate columns. See working examples at https://github.com/JackDougherty/leaflet-socrata
My problem: how to make this work when latitude and longitude are combined in one point data field (geom) inside Socrata? This is common for datasets published on http://data.hartford.gov. See my non-working example at https://github.com/JackDougherty/leaflet-socrata
Solved with this code snippet:
// load open data from Socrata endpoint in GeoJSON format
// Food Establishments, City of Hartford Open Data https://data.hartford.gov/resource/daux-ukcc
$.getJSON("https://data.hartford.gov/resource/daux-ukcc.geojson", function (data){
var geoJsonLayer = L.geoJson(data, {
pointToLayer: function( feature, latlng) {
var marker = L.marker(latlng);
marker.bindPopup(feature.properties.blms_dba); // replace last term with property data labels to display from GeoJSON file
return marker;
}
}).addTo(map);
});
See my notes and more examples at https://www.datavizforall.org/leaflet/with-socrata/
I'm using mapbox.js to make a map with places on it. I'm just trying to get the map to return the right coordinates of a click, which I have managed successfully using the following code:
map.on('click', function(e) {
var latitude = e.latlng.lat;
var longitude = e.latlng.lng;
console.log(latitude + " - " + longitude)
}
The only problem is that for this to work the map has to be absolutely positioned at the top of the page. If the map is below anything the returned coordinates will further north. How far north depends on how far below the top of the page the map is. I've tried a few permutations with wrapping the map in relatively positioned elements, but it always seems to measure off the top of the page whatever I do.
Does anyone have any idea how to fix this?
MapBox uses position absolute as a reference for its lat lons, but you can place a relatively positioned div within an absolute div. Let me know if this gist helps
You can use something like this:
<div id='output' class='ui-control'>
Click: <code id='click'></code><br/>
Mousemove: <code id='mousemove'></code><br/>
</div>
<div id='map'></div>
L.mapbox.accessToken = 'pk.eyJ1IjoicmNhc3RpbGxvYWd1aXJyIiwiYSI6ImNpbDFrdmM2bTM2bnd1YW0zYjZ2dTc2OG4ifQ._HEJ9An2hZK2ofuMNEFdMA';
var click = document.getElementById('click'),
mousemove = document.getElementById('mousemove');
var map = L.mapbox.map('map', 'mapbox.streets');
map.on('mousemove click', function(e) {
window[e.type].innerHTML = e.containerPoint.toString() + ', ' + e.latlng.toString();
});