I want to make user able to draw routes and areas on static images as it is done on Google Maps. I've never done any JavaScript drawing before. Please advice me:
Any library/plugin who can help me to draw editable polylines and polygones on static images (and make it able to store the lines/points on my server)
What is the common way to draw for most browsers? As I know the "canvas" tag isn't supported enough by many browsers, and to make a line using multiple DIVs wouldn't be the best way to achieve this.
Is it possible to attach Google Maps API to a static picture?
Thank you!
Look into the Google Maps "GroundOverlay" object
http://code.google.com/apis/maps/documentation/javascript/overlays.html#GroundOverlays
This should allow you to lay your static image on top of the map, while keeping all of the map's regular functionality (infowindows, polylines, routes, etc).
Related
I'm currently trying to create an app to help route users while they're inside an enclosed location like a mall or a school. I've built up a framework to generate maps of these locations and exported them as images. I was planning on using these images as the map to display on the frontend to somehow draw routes on the images to guide the user. I just can't think of a simple way to do this.
I've seen react-native-maps but that just seems to use the standard Google maps view and doesn't let me use a custom map to draw routes on. Is there any way to accomplish this?
Depending on what level of detail you want, you might be able to do this with an overlay or custom map tiles.
You can overlay your map over google maps using the overlay layer on react-native-maps. If this amount of detail is not enough, you could try creating a tile server to get images or use vector tiles with MapBox maps(which also has some nice react-native bindings).
As for drawing routes, it should be straightforward by using a poly line layer. You'll have to calculate the paths beforehand and draw them using a poly line.
So, basic gist is, I have my own tiles of not the real world I'd like to display with the Google Maps viewer. I've found examples of how to split an existing single image into tiles for use with it, but nothing that deals with setting up your own tiler.
I have map data such as this:
https://dl.dropboxusercontent.com/u/44766482/superimage/index.html
Which right now is just a bunch of 1600x1600 images in an html table. This naive method works, but I'd like to switch to the more robust google api for better zooming and smarter streaming of the image data.
I've been unable to find a good example of how to generate your own tiles for the zoom levels and bring it together with some html/js.
If you want some more information for the goal process;
I have a python script that can output any size tiles of the map, at any zoom level. I'd like to bundle those together into a google maps api website. But in my own efforts I have not found a good example or documentation of how to do that. For one, I can only find examples of how the zoom levels work for the real world map, but not for a custom one.
Edit:
Got most things working as I want them, but I'm still confused regarding the "center" that can be set, as it's in lat and lng, which don't apply. I'd also like to set boundaries as currently it tries to load .png files outside of the maps range.
My current progress:
https://dl.dropboxusercontent.com/u/44766482/googlemapspreview/index.html
I think what you are looking for is the google maps imageMapTypes:
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
Basically, each zoom level is the 4 lower zoom tiles combined. A Projection function can be skipped to get orthogonal mapping.
I need a 'polygon' selector type functionality. Basically, the ability to drag lines to form multiple polygons; pref with the ability to edit the 'points' of the polygon after the shape has been 'closed' (but that's secondary) and/or move the polygons...
I generally dislike 'reinventing the wheel' and I figured I'd find tons of examples to work with, but I was wrong...
The polygon tool in Google Maps is just about perfect, but has anyone utilized it outside of GMaps? (I recall it required a GMap as an attribute from my work with Google Maps). Before I roll up my sleeves, I just want to ensure there isn't something already made (this is a very small part) - so if (a) Google Maps Polygon object is usable without a map, or (b) there's another library/project I'm missing please let me know.
Fabricjs is an option you can check.
Have a look at D3.js which has a great api for visualizing data and geo information. Besides the standard one-/two-dimensional brush there are plugins for more advanced types of brushes:
Polybrush. Providing a polygon brush.
lasso. Lassoing a selection by freely drawing a line path.
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.