I have an SVG that I am overlaying on a Google Map. The SVG is 50mb large, so it takes 10 seconds or so to load in the browser.
I can get the SVG split into 171 separate SVG files that make up this big SVG. What is my best strategy to improve load time? I am trying to keep a high resolution at lower zoom levels.
Things I have tried
-Converting Image to PNG and JPG- resolution is not adequate
-Optimizing SVG File- still can't reduce it enough to impact load time
Things I am thinking about trying
- layer SVGs in a certain order on page load, grass first, then cars, then buildings (although with so many, I really do not want to do this)
- there is a library called PolyMaps, not sure if this could help
-utilizing GZIP format of the SVG, but I am not sure what the best way to do this would be to achieve the desired result or how i would do that
Basically, I am just looking from some general direction from devs more experienced with loading a large amount of SVGs onto the google maps api/canvas
this is for an interactive map, there are infowindows that are custom and are already created(not svg), and as of right now, just using standard marker icons(svg). besides the infowindows and markers its really as simple as overlaying a lot of svg data onto the map,
Any help would be appreciated.
thanks
i ended up layering the smaller svgs in the file and completely removing any of the larger ones that I didn't absolutely need.
Related
I am using Mapbox GL JS to overlay an image of satellite data over Texas. The image is big enough to cover Texas, but even when using 100% correct geo-coords, the image is not in the correct place. I have to split the image into 6 long (west-east) images like such, and stack them vertically in separate image overlays :
This produces the desired result :
When using the 6 stacked image overlays (each 2 degrees tall and very wide to cover the state's width, by the way), the placement of the clouds is exactly perfect with zero issues. It's perfect except that having to make 6 image overlays to build this is not at all ideal and it adding processing constraints.
If I merge all the images into one big picture and overlay it using the same coords - the effect is wrong. Even though the image is exactly the same. I have highlighted the coastline so you can see that when using one large image overlay for the whole state, it becomes inaccurate. For a storm chaser (my target audience) this would not be unacceptable. I have tried manually adjusting the images but it is no good and I have wasted days of my life tracking this issue down, and it is absolutely Mapbox. I have ruled out the other possibilities like bugs in the software I use to get the data.
Here is the bad result with one overlay as opposed to splitting it vertically :
Are there any ideas to what may be causing this, and a solution? I am completely lost.
I had solved this long ago but since others have the same problem, it deserves an answer here. The problem has to do with projection. Images can be sliced and diced exactly by coordinates but they must match the projection of the map they are being overlaid on. In the case of Mapbox, it uses web mercator and images must be reprojected to EPSG:3857.
A utility to convert images (such as geoTIF) to this projection is GDAL (https://gdal.org/). A command using GDAL tools to convert an image would be something like :
gdalwarp -t_srs EPSG:3857 input.tif input-projected.tif
Hopefully this clears things up. These issues are basic knowledge in the GIS community. If you want to work with data like this, I can say that I recommend doing what I did : learn basic GIS tools and how they work. It will save you.
How to create big dynamic map in canvas (like google maps- with some kind dynamic tiles), when I scroll the map- the area should be loaded dynamically? I found this- https://github.com/slav123/SpryMap but this is rather for one big image not for dynamic loading
I found something like this- very simple example, but it works pretty, found on https://gamedev.stackexchange.com/questions/42038/what-would-be-a-good-way-to-implement-render-a-2d-tiled-map-for-a-browser-game, first answer
Based on google maps, i believe they have many small images that they dynamically load into the map, they are of different zoom levels and locations, but always the same size. Making it easy to know which to load. You would want to load a buffer around the edges of your canvas to help reduce a loading time if you scroll quickly.
You can see what i'm talking about if you open maps.google.com, it will load block by block and if you scroll you will notice that a buffer of a single tile is loaded around the viewing window.
I'm showing the boundaries of cyprus regions using openlayers with vector layer, I get the coords from a shapefile which has a lot of points, for instance some regions can have a multipolygon with in total :30000 Points.
This is really slow on firefox / IE and in firefox it shows unresponsive script error. Only chrome works well. What's the best way to get it working faster and smoothly ?
I read one answer is to create a WMS server with MapServer to generate the images tiles instead to use the OpenLayers directly but I can't implement that solution because I want to change layer style dynamically to the different features in the vector layer i.e to show different colors to the region based on the dynamic value.
How can I overcome this issue. Any Insights would be much appreciated.
I think WMS + TileCache will helps to improve the speed. You mentioned you want to change layer style dynamically, I think there are also some solution to do that with WMS, please check:
https://gis.stackexchange.com/questions/64113/how-to-dynamically-change-sld-style-of-wms-layer-being-served-by-geoserver-from
and http://openlayers.org/dev/examples/sld.html
I'd say that GeoJSON may increase your performance in Firefox. WMS is the best in my opinion, and if you work with mapserver you wouldn't have problems to do what you want, geoserver may help you also, but for dynamic changes I'd say you'd need GeoExt.
Hope this helps,
Just to present a contrarian view, sending this as a vector layer but thinning the data points at distant zoom levels would provide the performance benefits you need with the interactivity you want.
I am currently working on a map generator application based on javascript, and I have wrote more than 400 lines of code, that creates a hexagonal map, adds coordinates to tiles, adds textures on tiles like grass, ocean and elements like castles, units etc.
I have added quite a few useful functions to this offline map editor, like zoom in and zoom out, turning grid on/off, dragging the map, and a few others, and I'm currently studying on how to add save and load functionality to this offline game map editor.
It sort of looks like a paint application, except that instated of drawing pixels, you use it to draw a map with hex tiles. You simply click on Generate a new map and you give your desired map size (e.g 64 tiles width by 64 tiles height) and the map is drawn for you, the tiles are simple divs that have the relative background image as texture. Tiles are drawn one by one using a simple for loop. But as the code grows in size so does my worries.
Because the map I create on my own map editor will be used on an online multiplayer game, it will be huge! for example to support at least 20000 users on the upcoming game there should be at least 20000 tiles, only for the users to occupy, not to mention the territory they will own, mountains, jungles, barbarian tribes, and so on..
I have made the calculations and found out that a 512 by 512 (about 262000 tiles) map will sufficiently answer the needs of that many users. However, the map will be huge. so I decided to test and see how much load time does it take to make such a map using the codes I have created with the least process possible and I found out that it takes nearly a minute or more, which is not acceptable, from a gamers perspective.
A zoom in for example in such a huge map will mean looping through every 262000 tile to change their size. although the process takes less time than drawing/loading the map from scratch, but it is still slow.
I was thinking with a map that huge which won't even fit in a browser's window, why should I draw the entire map? why not instead load the part which the user is currently looking at. Loading/drawing only the part that is needed, this way reducing load time and increasing performance. But this is proving to be a real challenge, and there are very limited resources online about implementing such a functionality. Where to start? How to approach the problem and respective solution?
I would start out by separating your concerns a little more. You're able to view WxH number of pixels, and the top left of the user's screen sits at (x,y) coordinates.
Loading the entire map, as you have pointed out, is crazy. But by knowing how large the game world is, and by knowing the user's coordinates in that world, you can easily select the subset of items that are in view.
Keep in mind that at a zoomed out resolution you shouldn't be using the full-sized images. Loading 262000 images (for just the map!) is going to be too heavy and probably crash. You should have different images for different zoom levels. This is a much bigger question and you should buy a book and do more research on google. But at least the thinking about the "where the user is" vs "where the items in the world are" is a place that I would start at.
Hope that helps.
I am currently trying to create a blue, circular, pie-chart-esque image for my website. The circle will be split into 6 different segments.
What I want to happen is that when the user hovers over a particular segment, this segment will turn orange, and some text will appear beside the circle corresponding to that segment.
I have found some resources online which achieve nearly the effect I need using CSS image maps. http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/ However, these techniques split up an image using rectangles. If I were splitting up a circular object I would prefer to split up the area based on particular arcs.
I assume this is beyond the reach of pure HTML and CSS. I do not have a great deal of experience with web languages, although I have had passing experience with JQuery. What are the techniques I need to solve my problem and what technology would be best to implement it?
you can create image maps that are not rectangular, but use polygon shapes.
this useful tool http://www.image-maps.com/ will let you achieve what you are looking for, without having to write your own polygon mapping!
A few options:
HTML image map
It's simple to create an HTML image map that comes very close to the shape of each slice of the circle, but there are limitations to HTML images maps. For instance, you can't nest content inside each slice of the image map (as an easy way to implement a hover pop-up). If an HTML image map is adequate for you, it's the simplest solution.
CSS image map
To define circle-slice shapes, a CSS image map is impractical, unless you only need a very-rough approximation of the hotspots for each circle slice. But if you could live with that, you'd have a lot more flexibility as far as the functionality.
onmousemove
You could also get the mouse coordinates with an onmousemove event handler for the entire circle, and then do your own calculations to determine which circle slice the mouse is in. This allows you to accurately define the hotspots for each circle slice, and you'd have more flexibility than with an HTML image map. But the calculations may take a little work.
I have a solution for this using mainly HTML and CSS with a tiny bit of jQuery to handle the showing of the text by the side of the circle.
It does however use some CSS properties that are not very widely supported such as pointer-events
JSFiddle Demo