Display popups with leaflet ( large dataset ) - javascript

Im using Leaflet & Geojson-vt to visualize a large dataset (GeoJSON with 70,000 polylines features)
Is there any way to show smoothly a popup (it contains the polyline data) on click event on one of the multiple polylines ?
I am using geojson-vt and the example from here to add the tiles to the leaflet map.
i tried this
function onEachFeature(feature, layer) {
layer.on('click', function(e) {
layer.bindPopup(feature.properties.NUMERO);
});
}
L.geoJson($scope.dataOfFile.data, {
onEachFeature: onEachFeature
}).addTo(map);
but the map keep freezing.

Not sure I'm understanding... That example draws a canvas layer from vector tiles, this has no interaction method. If it were polygons you could use point in polygon from the original data. Since it's lines you may want to experiment with the almost over plugin using 0 weight (transparent) lines.

I had a similar issue with popups on Markers. If I added the popup before the marker was added to the map then the map would briefly freeze when all the markers were added to the map.
So instead I added the Markers to the map first. I maintained an array of all the markers then added the popups afterwards to each marker and I no longer experienced the map locking up.

Related

The other icon on map disappears when pushpin(layer) is close to the icon(Bing map V8)?

I am using Bing map version 8, earlier with version 7 used entities, now we use layers and create a new layer and add pushpins to that layer and then add the layer to the map.
But, in a situation when an sea port icon is there and a pushpin emerges very close to it, it hides the icon and pushpin stands visible.I want both icon and pin to stay visible. Please help.
var pinLayer = new Microsoft.Maps.Layer();
//Created pins
pinLayer.add(pin); //added the pin to layer
//
map.layers.insert(pinLayer); //Added the layer to map
Earlier in v7 (using entities)-
Now in V8, the same icon of airport is not visible. I want it to show up.
Are you talking about the airport icon that is automatically added by Bing Maps? If so, this is to be expected as it is a map label which is lower priority than your data. Bing Maps uses vector labels and label collision to hide map labels which are overlapped by pushpins to keep the map view nice and clean. If you would prefer to disable the vector labels simply add the following map option when loading: liteMode: true
You can find out more about vector labels in Bing Maps V8 here: https://msdn.microsoft.com/en-us/library/mt750538.aspx

Contour line labels on leaflet map

I have a Leaflet map with a geoJSON containing contour lines. The elevation corresponding to each line is located in feature.properties.Elevation of the geoJSON. I want to achieve the following:
What I've tried to achieve this in leaflet is to calculate the center of each polyline and then add a marker to that position containing the data from feature.properties.Elevation.
L.geoJson(contourJSON, {
onEachFeature: function(feature, layer) {
var label = L.marker(layer.getBounds().getCenter(), {
icon: L.divIcon({
className: 'label',
html: feature.properties.Elevation,
iconSize: [100, 40]
})
}).addTo(map);
}
});
Which kind of works, but does not have a nice styling and it's not really clear which value belongs to a specific line:
What would be a better method of adding the elevation labels in such a way that it is readable and maybe dynamic to the current zoom level? I'm using Leaflet 1.0.3 so maybe Tooltip could offer a solution? Thanks!
You might be interested in those Leaflet plugins, possibly combined: (not sure how easy it would be to combine them)
Leaflet.LabelTextCollision (demo)
…display[s] labels on vector data while avoiding label collisions.
Leaflet.TextPath (demo)
Shows a text along a Polyline.
You might also want to check out the rest of Leaflet plugins.
BTW, I am not sure placing your label / marker at the polyline "center" is appropriate. You might just pick one of its vertices, or for example the farthest to the right / East to have an effect similar to the example you provide.

combining overlays in mapbox / leaflet layers control

I'm trying to combine 2 or more overlays into one overlay checkbox. I'm using leaflet layers control with mapbox.js 1.6 to toggle my overlays. It doesn't matter to me if I combine them on mapbox.com into one data layer, or if I combine separate data layers in my JS code into one overlay checkbox, but I can't seem to do either. I'm exporting MBTiles from Tilemill to my Mapbox account.
Note that it's not an option to:
combine them in Tilemill (the single zoom level and square bounding box won't work for me across all layers)
add the various data layers to a single map project on Mapbox.com (I'd like it to be toggleabe by the user)
You can use L.layerGroup to combine layers
var group = L.LayerGroup([layer1, layer2];
// add default layers to map
map.addLayer(layer1);
// switcher
var baseLayers = {
"My Group": group,
// more layers
};
// add layer groups to layer switcher control
var controlLayers = L.control.layers(baseLayers).addTo(map);
You may be interested in this thread Leaflet layer control for basemap group layers
You can use the L.control.layers with the L.layerGroup. Here is the JSFiddle I wrote for this. You can add as many base or overlay layers you want.
Once you create the L.layerGroups, define the base and the overlay layers and add them to the control like this:
var controlLayers = L.control.layers(baseLayers, overlayMaps).addTo(map);

Cannot add a standard map marker to a google map with heatmap layer

I have a map with a heatmap utilizing the google visualization heatmap layer
jsfiddle here
If I try and add a normal map marker it fails with an uncaught type error somewhere in the google api.
The marker.setMap(map) line seems to happen, (inspecting the marker, it has a map property) but whatever this triggers on the map itself seems to fall over.
I've tried unsetting the heatmap layer before setting the marker, even tried not initialising the heatmap layer with the same results.
I'm beginning to think that by including the visualisation library I am losing the ability to add a map marker. If this is the case has anyone come across a workaround?
You initially create the marker without a map-property, currently the marker will appear when you click somewhere (not only on the marker), because the lnk-variable will be set to document, not to the link:
var lnk = $(document, '.marker_toggle')
but it should be only:
var lnk = $('.marker_toggle')
Demo: http://jsfiddle.net/doktormolle/Avxap/

Detect waypoint click on DirectionsRenderer marker in Google Maps v3

In the Google Maps API v3, how can I get the waypoint markers from the DirectionsRenderer in order to add click events to them (such as a delete menu).
Until a better solution can be found here is the work around that I have employed. The basic idea is to put your own marker on top of the waypoints and bind a click event listener to your marker. I have made a jsfiddle demonstrating the idea.
It definitely isn't perfect, but with a custom icon instead of the default marker it could look sort of natural.
Another way, which doesn't involve putting new markers on the map, would be to detect DOM click events on the map widget. The idea is simple. When a click is detected:
convert all waypoints' LatLng coordinates to coordinates on the screen (or, in fact, on the map widget) using MapCanvasProjection
calculate distances between waypoints and the point clicked. If user clicked close enough to any of the waypoints (the distance is lower than the radius of a waypoint icon) - display a menu for that point
I coded a complete solution in java for gwt. It should be pretty straightforward to get it translated into javascript.
Instead of creating a click event on a waypoint, you can create it on a marker, and assign it a high z-index so it overlays the waypoint.
Create the single markers and assign the a high z-index
marker = new google.maps.Marker({
map:map,
position: new google.maps.LatLng(1.99, 2.99),
});
marker.setZIndex(999);
Add a listener to the markers
google.maps.event.addListener(marker, 'click', function(event){
alert(marker.title);
});
And now create the waypoints.

Categories