I am trying to render a network topology on a world map and I am using LeafletJS to render the world map.
I draw edges or connections between 2 end points using the polylines feature of LeafletJS. I am also using clustering to cluster large sets of markers. The issue I am facing is that as users drill down/ zoom into a cluster, some polylines vanish because the endPoint1 is connected to endPoint2 and endPoint2 is out of the map area hence the polyline is not drawn.
Any suggestions on how this can be achieved.
Related
I'm trying to display a 3D skyline/panoromic view of Manhattan using Mapbox yet with Mapbox GL extruded 3D buildings start to disappear below zoom level of 15. Is there a way to render/display them at zoom level around 11-12? Or an alternative way by clipping/filtering rendered/loaded data by mapbox?
I have tried to filter the map to the area of Manhattan and Roosevelt islands yet later found out it's not possible to clip/filter MapBox to a geographical area.
As the final result I'm hoping to render the buildings at the final view shown in the last image.
I use GeoServer to provide Vector Tiles (based on the GeoServer Vector Tile Extension) of my biking trails as .pbf.
The data are added as vector source and visualized using Mapbox GL JS.
Additionally, I use the GeoServer perpendicularOffset to offset the lines (as I always have two directions of the biking trail).
A problem occurs when visualizing the data within Mapbox. The lines are cut at the tile edges, although they are visualized correctly using the layer preview on GeoServer.
The further I zoom in the map, the less the clipping of the lines happens and at a very detailed zoom, the lines are drawn correctly.
I already tried to use a large enough buffer and modify the tile size, as these were suggestions when researching the problem. Unfortunately, these settings had no effect.
I have another vector source layer for the base map, there I have no problems.
It seems to me, that offsetting the lines might be a problem.
Any idea what I can try?
the tile size of Geoserver's tile grid is 256x256 , but mapbox need 512x512, add a custom tile grid, set the tile size to 512x512, generate your vector tile with the custom tile grid should be ok.
I have data consisting of parts of road segments of a city, with different number of visits. I want to plot the data on a Map and visualise it in the form of a heatmap.
I have two related questions:
I have the data from Open Street Maps (OSM) in the form of pairs of node ID's, where node ID correspond to the unique ID being assigned to a point by OSM. I also have a mapping for each node Id to its corresponding coordinates. Is there any Leaflet or Mapbox utility or plugin, which can plot a trip / highlight the road segment using 2 node ID's. I can always do it manually (by using the coordinate mapping and converting it into GeoJSON), but the problem occurs with the line width -- I have to make it exactly overlap with the width of the road, so that it seems that I am highlighting a road segment.
Is there any plugin / utility for Leaflet or Mapbox, which can be used for plotting polylines or geojson as heatmap efficiently? My current approach is calculating the color for each polyline and encoding that as a geojson property. But the problem is that with the increase in the number of lines (> 1K) the rendering becomes a pain and the method is not feasible. There are some plugins for Leaflet out there for plotting heatmap, but all of them are for points only and not lines. Any approach using WebGL would be really great.
An approach which I thought of could be converting my data into a shape file, upload to Mapbox Studio and use as a layer directly. But I have no idea how to go about doing that i.e. creating a shapes file, encoding the information in such a way that the complete road segment gets highlighted in the correct color.
so i have a mapbox base map and want to load a dynamic choropleth area map over the top of it. it will cover all continents. i've looked into doing this before using geojson but the resulting file was over 9mb. is there a way to have different geojson vectors loaded at different zoom levels as to reduce the file size ?
the reason the file was so big was because it was a very detailed vector overlay. basically i'd like to replicate the vectors of 'am map' but with the performance of mapbox, with much better vector resolution at bigger zoom levels. (http://www.amcharts.com/javascript-maps/)
the only other way to do this is by using geojson markers that are loaded on top of the base map, but this doesn't give the same visual impact of the fully coloured continent vectors..
any help would be greatly appreciated!
x
Well, you could watch zoomend on the map to add/remove overlays as needed.
map.on('zoomend', function() {
var currentZoom = map.getZoom();
overlayGroup.clearLayers() //remove existing
overlayGroup.addLayer(myZoomLevelMapping[currentZoom]) //add layer for this zoom level.
})
I am writing an application that needs to show a variable number of TileLayers and Polygons on a Bing Maps control in an order specified by another application.
Whilst I can get all items to display correctly, the zIndex I set doesn't do as I expect - the polygons appear in the correct order in relation to each other as do the tile layers, but all the tile layers are always below the polygons, e.g.
Expected display order set using zIndex:
TileLayer 1
Polygon 1
TileLayer 2
Polygon 2
Renders as:
Polygon 1
Polygon 2
TileLayer 1
TileLayer 2
Is this layout possible using Bing maps?
Polygon layers are vectors, whereas tile layers are rasters. I believe that Bing Maps (and, for that matter, every other web-mapping API that I'm aware of - Google Maps, Leaflet etc.) will always render vector layers on top of raster layers.