Custom Google Maps-like Page

[BriniaSona]

I'm looking to add a custom google maps-like page to my forum. It will be a subdomain but will have a navbar at the top that brings a user back to the main forum. I am looking for code or coding help. I'd like the ability to zoom with the map a bit and pan around like google maps.

Oh and clickable links on the map would be nice. But if it means a ton of coding each time I update the map, then it's not needed. (no flash, just HTML)

[Hai-Etlik]

Web maps like that (they are also called "Slippy Maps") consist of two parts, a service that can serve up the map in pieces, and a Javascript client that requests the bits of the map as needed from that service and displays them.

The "Service" can consist of just static image tiles that are arranged in a consistent way. There are also more advanced protocols (WMS, TMS, WMTS, etc) with special server software (GeoServer, GeoWebCache, MapServer) to provide them.

The client part is generally written in Javascript. OpenLayers and Leaflet are the two big names here. They can both easily add linkable markers and vector features.

I'm a developer on GeoServer and GeoWebCache, and work with developers for OpenLayers so I'm rather biased toward those tools. There are tools for preparing static tiles from a single large image like gdal2tiles (part of GDAL)

[BriniaSona]

Ah, can you show me a nice example? I'd like one for my forum as a sub-domain that users can go to for an interactive map. I think it would be a great addition. IS it easy to maintain? say if a faction takes over another, that can be update easily with a new picture and links. Or is it a lot of coding changes?

[Hai-Etlik]

OpenLayers has a big page of examples here: http://openlayers.org/en/v3.4.0/examples/

There are many different ways to put things together. To keep things simple, you might try using QGIS to edit a GeoJSON file with faction boundaries. Copy the file to your web server after editing it and use it to make a vector layer in OpenLayers. You could then keep the base layer faction free with pre-generated tiles using gdal2tiles to chop up a large image which you probably wouldn't need to change much. This would eliminate the need for any server software beyond a normal web server.

[BriniaSona]

I cant seem to open that link you sent.

[BriniaSona]

http://globalnews.ca/news/1958954/sw...w-york-subway/

there's map at the very bottom of canada, you can hover over areas, that is like perfect. Ading names would be awesome and can probably be done by vectoring, but this is perfect.

[BriniaSona]

http://openlayers.org/en/v3.4.0/exam...tic-image.html is good for now, but I have no idea how to add this to an html page or get started.

One day I would like one with links right on the map. But that's probably a ton of coding.

I have the png and will change the size in the code. But how do I implement this into the page.

http://openlayers.org/en/v3.4.0/examples/wms-image.html would be nice, with links, but again, probably a ton of coding unless there's a program I can use.

[Hai-Etlik]

Both examples have links to the relevant javascript and you can view the page source. In both cases all that's really important are the script elements pulling in the java script and a div element with an id of map placed where you want the map. The first example you gave then just uses a single ordinary image.

For something with vector polygons in a GeoJSON file being displayed with highlight on hover take a look at this one: http://openlayers.org/en/v3.4.0/exam...r.html?q=hover

[BriniaSona]

http://www.kwandrivia.net/map

ive got the map working, but now I need to find a better image hosting service that doesn't make the map way more grainy than it already is. I would also like the styling of it to match my forum

kwandrivia.net

[BriniaSona]

Ah, also, what code would I have to edit so that the map cant be rotated, and like google maps, endlessly scrolls when the user gets to the edges. So it's seamless east to west. I'll be making a Vector Map and adding more readable fonts once I get the code and page set up. the image can always be altered later.