We Keep Coding

Hide mapbox layer shapes that are too small

I have some geoJSON polygons that I render via layers on top of my map. Depending on the shape itself and the zoom level, sometimes the rendered shapes are too small and it doesn't make sense to even show them.
Is there a way to hide shapes that have rendered area less than some number?

So, as Babis.amas suggested, first I calculate the area of the feature with help of turf.area. It gives the value in square meters. Then I convert this value to pixels using the function mentioned here. And then it really depends on the shape type I'm dealing with. If the shape considered to be too small to be rendered, I just don't add it to the layer data feature collection.

Draw custom shape on Google Map and store into Oracle database using C#

Is it possible to make a Custom shape (Using Mouse) on the Google Map using Gmap library in C# and then save it into the database and on the client request draw the stored shape on Google Map again? Is there any possibility for doing such operation in any other library or in Gmap (I am not expecting the code. Just an overview of doing it.)?

Oh Boy....this is absolutely doable! And I do it on day to day basis! Let me share how I achieve it. Another thing to keep in mind that this works for Google Maps and Bing Maps.
First, you have to represent Maps as not just coordinates but as collection of small squares. Now what do I mean by that?!
Have a look at this following picture. It's image of Czech Republic on google maps.
Now Czech Republic a.k.a Czechia, on google maps can be seen as collection of smaller square images or grids. You need to understand this concept very well in order to make this idea work. Now take a look at the following image where it shows how the image of Czechia on Google Maps can be visualised as collection of small square boxes or grid. These small square boxes hold images of parts of Czechia.
If you want to Zoom into a co-ordinate Xm,Ym (Easting:Xm, Northing:Ym), which is a place in Czechia and the name of that place is "Hermanuv Mestec" (as shown in the above picture) then you need to choose the bounding small box with co-ordinates (X1,Y1),(X1,Y2),(X2,Y1)&(X2,Y2), and fetch the underlying images in that box. This feature to fetch underlying images within that bounding box is actually Zooming In. So when you Zoom In or in other words fetch the underlying images within that bounding box, you get something as the following image:
Now, I hope you got the underlying concept of how Zoom In or Zoom Out (reverse process) and mapping co-ordinate system works if you want to achieve what you want to achieve because this concept is very important to grasp before you proceed.
You need to write a program which can do this transformation. And as of your question how to achieve this as follows:
Step 1: Use a Panel (Control) on Windows Form or WPF or asp.net application, which you are building.
Step 2: Use GMap Library in C# to fetch the image within a bounding box as mentioned above and populate/draw that image on the Panel.
Step 3: Have a function that tracks mouse events on the panel. This function/method will track the X,Y position of mouse move event on the panel and use Panel Drawing tools to draw objects on the panel based on this.
Step 4: Write another program to transform these mouse X,Y positions on the panel to co-ordidnates on the map. This piece/part of the program is important because this is what enables you to translate your representation of small square image breakdowns of maps into panel drawable objects, so that you can draw them again and again in future if saved properly in the database.
Step 5: When you draw an abject on the panel you track the X,Y mouse bounds on the panel and transform those points into co-rodinates using your custom program and then you save the co-ordinates in the database table.
Thats it! And in case you need to draw the same object saved in the database, you first need to fetch/draw the google maps image on the panel again, then need to fetch that shape of the object from the database by fetching the co-ordinates of that object saved in the database table, use your translation program to convert those co-ordinates into panel drawable points and draw the object back on the same panel.
Now, you can write this translation program (Easting Northing co-ordinates to Drawing Panel co-ordinates) yourself, which might take good few months or at least some time. Or you can buy customised program specialised to achieve this exact same function for a good amount of price.
Hope this helps.
You can also achieve this with Google Maps drawing object with JavaScript as mentioned in another answer but the issue is with the translation and saving the coordinates in the database. It's much faster and responsive in this aforementioned method. Anyway, this is how I do this, so kind of personal opinion.
Technologies required for the aforementioned technique is as follows:
Google Map Library/Bing Map Library (whichever you choose)
C# with .Net Framework 3.5 or above (.net framework lesser than this is also fine but may require bit more lines of code to achieve some functionality if you want to achieve complexity in this)
SQL Server Management Studio or anything equivalent depending on
the type of database and query you are planning to use.

I think you want to make a map overlay, and you can use Goggle Drawing Tools in conjunction with your map. See: https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
This will create the overlay. Presumable you could write javascript code that would save the coordinates and attributes of the overlay to a hidden field once you hit a "Save button" . Then after form submission you could save this info to a database using standard techniques, and then when rendering the map the next time, insert the overlay info into the javascript output by your page,
I am not going to spend the time making this for you, but this is the approach I would take.

steps:
1) Get the geometry/shape out from google api.
2) Send/post to server using some popular exchange format, GeoJSON or WKT
3) Prepare a server's service/asp/web service to accept the request and translate/validate those geometries into Oracle SDO_Geometry user define type/struct.
4) Use some C# oracle library,
a) create Connection,
b) create command with parameter,
c) Initial an OracleObject, assign all the required properties like SDO_GTYPE, SDO_SRID.
d) Assign the OracleObject to the the named parameter in the command.
e) Execute the command and commit.
Hope this help.

Performant GL Triangles Mapbox GL JS

I am working on trying to create a basic, grid-based, but performant weather-arrow visualization system.
EDIT 2:
Up-to-date version here: ( Mapbox Tracker ) of the system using the workflow which is described below
Usage Instructions:
- Click on Wind icon (on the left)
- Wait for triangles to occupy screen
- Pan time-slider (at the bottom)
As you will observe (especially on larger resolutions or when panning time slider quickly) there is quite a performance hit when drawing the triangles.
I would greatly appreciate any advice on where to start with either using something in the current API which would help, or any ideas on how to tap into the current graphics pipeline with some type of custom buffer where I would only need to rotate, scale, change color of triangles already populated in screen space.
I feel as though my specific use-case would greatly benefit from something like this, I really just don't know how to approach it.
I have a naive implementation running using this workflow:
Create a geojson FeatureCollection source
Create a fill layer
Using Data Driven property: fill-color
Data function:
Get map bounds
Project sw & ne into screen points (map.project(LatLng))
Divide height and width into portions
Loop through width and height portions
Lookup data
Access data rotation property
Create vertices based on center point + size
Rotate vertices
Create Point objects for vertices
Unproject Point Object and wrap map.unproject(Point).wrap()
Create Feature Object, assign Data driven Color
Assign unprojected LatLng as Coordinates to Polygon geometry
Add to Feature Array for Collection
Call setData on layer
So while this works, I'm looking for advice for a more performance friendly approach.
What I'm thinking here is whether I can somehow create a custom layer, one where I only need to draw to screen co-ordinates to represent the data relative to its LatLng point. So that I can draw colored, scaled, rotated triangles in screen space, and then have them update to relevant data from the new relative LatLng position.
E.g. Update some type of Mesh on screen instead of having to: unproject, then update feature collection source using map.getSource('arrows').setData(d), requestAnimationFrame(function) etc.
I've done similar in three.js in other projects but I would much rather use something that is more mapbox native. Does this sound feasible? Am I going to see a decent performance boost if so?
I've not dealt with raw gl calls before etc so I might need a pointer or two in the right direction if its going to need to get as low level as that.
EDIT:
Previous Implementation using gmaps / three.js : volvooceanrace
(wait for button on left to go from grey to black) click on top button which shows a 'wind' label when hovered over, slide red time bar underneath to change data.
Added screenshot of current working implementation
Mapbox GL Arrows

Not sure what was available in 2016, but a reasonable approach these days might be to use symbol layers, and the icon-rotate data-driven property to rotate each icon based on the property of its data point.

Leaflet js fictional map

I am new to Leaflet and I would like to find out if how to create a fully interactive fictional map. I have an image that I would like to convert to a leaflet map. This image has a number of connections and points like a graph basically.
I want to first of all convert that image to the map, be able to hover over the points, highlight them and display information about them and also to create animations at some point but not immediately with the connections. There is also a requirement to display permanent labels next to each point.
Is that at all possible in Leaflet?

Is that at all possible in Leaflet?
Yes.
Start by reading the leaflet tutorial for non-geographical maps.

Get coordinates from image

I am developing a wayfinder app for the library building. I'm developing it using HTML and JavaScript. I've mapped all the coordinates of library rooms on the image, and I'm navigating one object over the image to show the directions, and I'm using jquery.path to navigate the object.
But now I want to change the size of the image, I want to make it bigger than earlier, but now have to map all coordinates. :(
Anyone please suggest me another ways to map coordinates quickly.