We need to create a map of the small town from raster file. Our client deny usage of known API such as Google Maps, OSM, etc. There is little time before the deadline. What is the quickest way to create a small web map from the picture? Some kind of JavaScript framework?
Requires: drag, zoom and markers.
It is very desirable to do this without a big fat server such as MapServer or GeoServer, because we dont have a much time to redraw map in this format.
Absolutely easiest way is to create an OpenLayers map with Image layer. Here is an example of how it works.
Consider though that whole image is being loaded to the client before OpenLayers can manipulate it. So it's probably not the best option if it's a huge image.
Other option would be to create a tile pyramide with MapTiler which you can then simply host on your webserver(no need for MapServer or GeoServer) and then use TileCache layer in OpenLayers to display tiles on map. MapTiler creates OpenLayers example with all necessary settings when you tile image with it.
Related
I have a map created in My Maps, and I wand to embed it in a website, however I'd like to have InfoWindows on marker click instead of the default side panel, and change the description a bit.
From what I found, the only way to do so is to use a regular Google Maps API and add my data onto it with a KML layer. This is working, however, the icons (the pins) are highly pixelated and look terrible. When using the same map via embed (or simply opening it) they are OK.
Would really appreciate any help with the issue. Probably there is another way of adding a custom map to an API-powered map?
The answer I've come up with is: no way to achieve what I'm looking for.
When exporting KML layers, Google scales all icons to 32X32 px, and then scales them up (kml file contains scale 1.1 directive). Even if you change the scale, the files remain 32X32, so it does not help; you need to create another files, in other words: the kml exported from Google is not usable if you have custom png icons.
I ended up using regular markers instead of KML layer.
I want to control which types of roads show from this OSM highways list at various zoom levels.
I could not find the answer in the Leaflet docs. If you do, please link me.
edit:
Maybe i need to go one step back in the making stack and use one of these frameworks? http://wiki.openstreetmap.org/wiki/Frameworks#Generating_map_images
It is not possible to alter displayed map style in Leaflet.
Probably the fastest way to achieve your goal is:
Create your map style in Mabox Studio, where you will specify the road types to be displayed at various zoom levels. Mapbox will render the map tiles for you and expose them via URL.
then display the tiles created in Mapbox Studio in Leaflet (or Mapbox.js which is build above leaflet) simply by altering the map tiles URL you use when you initialize leaflet.
I'm somehow new in making web services using Openlayers and Javascript. I would like to create a clickable grid layer on top of a map (e.g. OSM) which first has a defined spatial resolution (e.g. 200 m) and of course when user zooms the grid size adapts to the new zoom level of the map. Also I want to show every cell of a grid with a specific colour, and when the user clicks on each cell some information can be shown. So, I guess each cell is like a feature in this layer (e.g. polygon). I was wondering if Openlayers has existing function to do such a thing that I can use, or do I have to code all of it? any help and suggestions on how I can manage to do this would be highly appreciated. Below is a link to a service that has created such a service, I would like to do the same... Thanx.
Link to sample:
http://koenigstuhl.geog.uni-heidelberg.de/osmatrix/#timestamp/allotments_area/8/12/-0.2142333984375/51.578776399817066
Having developed the application you mention in your example, I can give you some hints on your question. The solution is pretty straightforward.
The grid you see, i.e. the coloured hexagons, is simply map tiles, that are served by a custom back-end following the Tile Map Service schema (I used NodeJS) that, in turn, uses Mapnik (any other engine should work as well, e.g. GeoServer or MapServer) for rendering the images. The data is stored in a Postgres data base with PostGIS added on.
Use a client-side library to create the map and add the tiled layer. OpenLayers and Leaflet both do the job well. (Leaflet, though, is a bit easier to grasp if your new to the topic).
On client side you register a click-event handler on the Map, that you can use to get the coordinates of the mouse click. Use these coordinates, send them to your back-end and perform a spatial query on the data base to get the polygons adjacent to the coordinates. The server's response should then provide the geometries of the polygons (encoded in GeoJSON in this case, GML, KML should work fine as well) and whatever information you want to display.
Use these polygons and add them to a vector layer using whatever colour scheme you want.
Have a look at the code to see how it works. The important files are osmatrix.js (connects to the back-end), control.js (main module, keeps track of everything) and map.js (surprisingly enough, everything map-related).
Openlayers has facilities for creating an interactive vector later. In order to create something like in the example, you would have to 1) add a vector layer, 2) write a loop that adds vector features to the appropriate locations on the map, 3) style the features as hexagons, and 4) create a stylemap that dynamically sets the feature color based on the appropriate parameters. Each step is facilitated by Openlayers.
A good start is to use the leaflet library because it use the map projection and to read this tutorial: http://build-failed.blogspot.de/2013/07/dynamically-creating-hexagons-from-real.html?m=1.
Using the google maps v3 javascript API, it's possible to add 'GroundOverlays' as a picture. Have a look here:
http://jsfiddle.net/9YYJB/1/
However, I'm working on a project where I'm trying to add a texture to the whole world map. Obviously I can add a single, absolutely massive gif/png overlay but I'd rather add a tiling texture. I've been digging around in the API and can't find any way to do this.
Anyone have any ideas on how this could be done?
Thanks very much
Yes, what you want to use is an image map type. This allows you to add tiles on top of the regular Google Base Map. If you want to completely replace the Google tiles, you would need to implement a Custom Map Type. My favorite example of that is the Liberty City Map.
I would like to do something like what is shown in the screenshot - http://themanyfacesof.com/wp-content/uploads/2010/03/map.png
I want to be able to highlight certain areas on a map using PHP as a server side technology and jQuery(preferable) on client side with some tooltip functionality. Is there anything available or any idea how this could be achieved with the complexity involved?
Completely client-side solution: http://jvectormap.owl-hollow.net/
Look into using Google Maps for this. You can overlay lines and polygons which effectively means you can do anything - for example Loughbrough University does this.
A good way to start is to
Log in to Google
Go to Google Maps, then to my maps and create a new map
Draw polygons and line using the tools provided
Right click and copy the link for Google Earth, visit this link but change the output to KML output=kml. KML is just like XML
You now have a file with the exported polygons and lines that you drew. You can then re-draw these onto a Google Map programmatically
I did this the other day to get some rather complex polygons drawn onto a map without having to trial and error the latitude and longitude coordinates for them.
Hope that helps.