I have a procedurally generated game using tilemaps for easier generation and pathfinding, and I need to be able to have musltiple layers for things like seperate depths for different groups of objects, but the room data is specified at the creation of the map, not at the creation of the layer, unless something like tiled is used, which I can't use due to the fact that my game will be procedurally generated. I could go through the array and place individual tiles with a loop, but is there any other solution that I'm missing? Thanks!
You could do the something I mentioned in this answer, basicly, creating two maps with the same dimensions, set the z-order with setDepth, and if the map above has transparent tiles, or tiles with the ID -1, the map below should be visible.
I personally never used it for larger maps, but I assume it should not cause performance issue, and is an easy solution.
Related
I'm trying to add real-time, web-socket event-based data to my map.
Everytime I get a point, I must add it/update it on map.
What's the best option?
A) Create a FeatureCollection and add a source and respective layer. When updating, change the FeatureCollection and call setData();
B) For every point, create a different source and layer. When updating, just change the respective source and call setData();
I really don't believe B) is the best option, I'm just not sure about the perfomance of option A) (or I'm thinking about the former the wrong way).
I'd say it somewhere between the two. For Mapbox Draw I use two layers, one for features that are being edited and one for features that aren't changing. In your case, you'd want to create a layer for every 100 features. This is because Mapbox GL has to recut the geojson into tiles every time you add a feature so limiting the number of features that have to be reviewed is wise. That said, lots of layers will be a problem too.
While I said 100 features above, you'll want to play around with this number a bunch. It will be about finding the right balance between number of layers and number of features in a source.
My question is about updating the data in leaflet.
Let's assume that we have geojson which we are changing into vector tiles using geojson-vt.js and displaying it on the leaflet map.
Similiary as there: geojson-vt example
Then i'm receiving an event / notifiaction that some linestring was changed, for example thise linestrings have a attribute color, which is using when displaying data, and this value has changed.
Then i want to update my map, but i dont want to recalculate, and redraw all tiles, but only this tiles where was change. How to do that?
It cannot be done. geojson-vt only allows for creating new geojson-vt instances, not updating them. Updating data in the internal structures is too complicated, and doesn't give any big advantages. This also means it's not possible to get a list of changed tiles, or even a list of tiles containing the updated geometry.
If this is really critical for your application, consider studying the code for geojson-vt for yourself, and proposing a solution.
If you have a set of static features and a set of possibly-changing features, consider making separate holders for them.
I am creating a small isometric online game and would like to use the sheetengine.
Here is my basic idea:
create a scene of the size approx 4100x3000
creating 75x45 basesheets (since the World is 75x45 fixed and wont increase)
To place some objects on the map I use the class Sheet (I will only change the size and the position of the sheets after placing them)
For Zoom In/Out I actually redraw the whole scene - so I destroy all the basesheets and then place them from new in a bigger size - as for the Sheets ... I'm trying to change their size and their position
For moving the map I'm using the method scene.setCenter - since the scene is already of that huge size, I don't have to redraw the map after the translation
My questions:
How can I change the position and the size of the sheet after placing them? I know that using the SheetObject you can do all that, but I will have a huge amount of objects placed and the calculation time is taking to long with SheetObjects. That's why I'm not using that class... An object of the "class" Sheet has a property
sheet.data.translationx
I coudl also manipulate this and thsi works, but there must be method and I couldn't find it
Is there a better way of handling big scenes with sheetengine? I mean creating a scene that big is definitely not a good Idea. But if I make it smaller, I will not see the whole world after a translation - so how could I handle it differently?
So I want to build a map application with backbone(probably using Leaflet.js). I have a few ideas on how to design this, and I was wondering if there was a common design pattern on how to do this.
The map will eventually be integrated with other visualizations - for example if I select a marker on the map something will happen in another visualization. I must also be able to conduct geo-searches on the markers in the map.
There are two ways I thought of doing this -
1.Have a backbone model per marker, have a collection of markers, have a Map View that works on this collection. So whenever this collection changes, re-render the map.
2.Have a model called MapModel that holds json, and have a data function that filters the json (based on a geosearch or something). The Map then simply renders this json.
The advantage of 1 is that I think it would be easy to do selections, but as my map may deal with tens of thousands, to hundreds of thousands of objects, I feel like things would be very very slow.
Is there another way to do this, or which one of the two ideas I've had is preferable?
Thanks
I've been working on exactly the same problem, I do not claim to have found a "common design pattern", but I can tell you what I did.
I created a MapModel which contains the info necessary to make the map: for instance a collection of stores if you want to put stores on your map.
Then I created a View of the map with no collection of markers: the problem is that a group of markers in leaflet is supposed to be grouped in a L.LayerGroup class (for instance to control when they are added or removed - example). So it feels very clumsy to have the markers in a LayerGroup and in a collection disguised as models.
So I created a layerGroup holding all the markers, this layer being a property of the MapView. If your app is complex, you may even create a subView for each layer.
When you want to filter you filter on the model, which is easy since it's a backbone collection, then you render the View.
my map may deal with tens of thousands, to hundreds of thousands of objects
That's problematic. It's impossible to place such a huge number of markers on webmap, you should plan how to deal with it (a popular plugin)
Ever noticed that when you go to maps.google.com and do a search (say, car wash), it renders a lot of results (represented by small circles) and a few prominent ones (seen as regular-size pins)?
Notice how quickly it does this?
From what I can tell from analyzing this in Firebug, much of this is generated on the server and sent to the client as a static image.
However, it's still dynamic. You can still zoom in and out, or click on a result and see a dynamic InfoWindow rendered.
Google have made the map quick and smooth using static images, while still making it flexible.
Is there a way to do this kind of 'pre-loading' with my own Google Map (implemented with the Google Maps API)?
The technology that maps.google.com uses is similar to that used in a GLayer. The server dynamically builds tiles and "hotspot" info. The GLayer tiles are also constructed dynamically (and possibly cached) even though the underlying data is fairly static. From the client side, the searched dots technology is identical to the Wikipedia or Panoramio GLayer. The only new trick is that the dot information is generated dynamically on Google's big fast servers.
The API does not (yet) provide any tools for creating custom GLayers. If you want to do the same sort of thing yourself, using your own database of locations, there are three steps that you need to code:
Create your own custom tileserver
which searches your database for
items in the tile area and uses a
graphics library like gd or
imagemagic to place dots on the
tile. Use those tiles to create a
GTileLayerOverlay on the client.
When the user clicks on the map,
send the location of that click to a
second server. That server should
check your database and return the
infowindow text for the dot at that
location, if any. Returning all the infowindow contents from all the dots imaged by the tileserver would be unacceptably slow, so you have to fetch them one by one, as needed.
Changing the cursor when the mouse
is over a dot is more tricky. What Google
do is return a list of hotspot
coordinates for all the dots on each
tile. Whenever the mouse moves, the
API determines which tile the
pointer is over and uses a quadtree
algorithm to see if the pointer is
over a hotspot, and change the
cursor if necessary. If you only
have a modest number of hotspots per
tile, then a linear search would
probably be acceptably fast. If you might have thousands of dots per tile, then you'll probably need to write your own quadtree algorithm. The Google quadtree code is not exposed, so you can't use it.
Here's a page where somebody has done all that. In this case the hotspots are calculated as circles, by comparing the distance from the centre point, even though the dots are square. On maps.google.com the hotspots are calculated as rectangles, by using GBounds.containsPoint(), even though the dots are round.
I'm doing something similar - but instead using a tile layer, I just send server-clustered markers to the browser whenever the view changes. If your data is static, you can pre-cluster your markers and it would be incredibly fast with tens of thousands of markers.
Our site can't use pre-clustering because the markers can be searched and filtered, but it's still pretty fast up to about 20,000 markers. Still working on it...