I am playing around with mapbox one of the things im trying to figure out is how to set a name on a polygon that i have just created. I have a feature collection and for each feature i have a name but i cant figure out how to display the name on the polygon.
In general, if you'd like to display GeoJSON features along with labels in your Mapbox GL JS map, you will need to add two layers to your map referencing the GeoJSON source. One layer will be of type fill to display the polygons themselves, and the other will be of type symbol to display the text for the labels.
This example demonstrates how to add a symbol layer with text-fields containing the names of the Point features in the GeoJSON source. If you have the coordinates for each polygon where you'd like the name to be displayed, you can follow this example to add the names after adding your polygons with a fill layer.
Otherwise, you will need to compute the coordinates of the centroid of each polygon where you would like the names to be added. For this, you can use Turf's centroid method on each polygon in your FeatureCollection to generate said coordinates and add the symbol layer representing each feature's name with the resulting coordinates.
Related
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.
Is it possible to apply fill-extrusion for a GeoJSON LineString feature?
Basically I'm looking for a way to draw lines (can be 1 line or multiple connected) in a 3d mode with z-offset.
If that's not possible, maybe this can be done with a polygon instead?
Like, converting my lines to polygons (how can i do that?)
What you're asking for isn't yet implemented, but ticketed in Mapbox GL JS at https://github.com/mapbox/mapbox-gl-js/issues/3993.
For now you'll need to opt for your second suggestion of converting the LineString feature to a Polygon. You can do this with turf's buffer function http://turfjs.org/docs#buffer.
The whole line/polygon will be offset at the same height, so depending on your application you could use turf's linkChunk http://turfjs.org/docs#lineChunk to get it broken up into smaller features which you assign different height properties to.
I have extracted shape files with polygon coordinates in geojson format for a particular area. Now I want to use this shapefile in qgis to extract individual images from Bing Maps corresponding to Polygon coordinates.
How to do that?
If you want to clip the exact area from the Polygons, i think you can't extract them from Bing Maps. You need the raw data.
On the other hand if you are just fine with an image of the area of the Maximum bounding box of your Polygons you could calculate these and than automatically clip them from the WMS server.
I had a similar problem where i downloaded several building shapefiles from Open Street Map and needed to get an image for each building from annother WMS server with aerial images (e.g.Google Satellite). In Qgis load in the Bing WMS server and your shapefiles then you can click on your specific polygon in the attribute table and zoom to this Polygon. This will set the Qgis map canvas to the Maximum Bounding Box containing your shape. Then you go to "Project" -> "Save as image" and you can save this screen as a image, tiff, png... Of course you can automate this using the Python consol:
from qgis.PyQt.QtCore import *
l=range(0,90)
for i in l:
x=int(i)
layer = iface.mapCanvas().currentLayer()
layer.select(x)
qgis.utils.iface.actionZoomToSelected().trigger()
layer.deselect(x)
name=str(x)
qgis.utils.iface.mapCanvas().saveAsImage('yourpath'+ name +'.png')
Is there a way to draw a vector layer with CorelDraw for example and place it on napboxgl and use it as geojson layers?
For example https://seatgeek.com/colorado-rapids-at-seattle-sounders-fc-tickets/mls/2017-10-22-1-pm/3700786
Are they using geojson or etc.? Or just some sort of vector format?
I can't use geojson as it is hard to draw with QGIS any straight lines or symmetrical objects. I just want to draw a lot of vector objects and use them as layers with mapboxGL(use mapbox as render method and interact with layers as with geojson)
Any suggestions how to do it? Or is there a way to draw with Corel and then place it on map with QGIS?
Thanks
UPD:
Now I am using Corel -> dxf export and then import it to QGIS, then save it as geojson. But have some glitches with displaying that geojson geometry in mapbox, so I have to draw another in QGIS over the imported(dxf) one.
Here is an example of the bug, should be just a green polygon like the gray one
UPDATE: my fault, I was using lines instead of polygons.
I think you can achieve this as follows:
Convert the Corel output to SVG
Create an HTML element containing the SVG (not necessarily added to DOM)
On your Mapbox map, add a Canvas source containing the canvas: see https://www.mapbox.com/mapbox-gl-js/api/#canvassource
Obviously you will need to determine the lat/lon of the corners of your image somehow.
Is it possible to dim or hide the "rest of the world" except one country on a standard leaflet.js map? Mabye overlay out with some kind of "inverted polygon" with the contours of the country? Any code examples or links would be appreciated.
Expanding #tmcw's answer ...
The secret is to draw a polygon using the property described in http://leafletjs.com/reference.html#polygon
You can also create a polygon with holes by passing an array of arrays
of latlngs, with the first latlngs array representing the exterior
ring while the remaining represent the holes inside.
The first polygon will be a rectangle as big as the map itself, the hole will be the country you want to highlight.
L.polygon( [outerBoundsLatLngs, latLngs] );
Here is a working example: http://jsfiddle.net/FranceImage/1yaqtx9u/
See the leaflet-maskcanvas and L.Mask plugins