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]

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

Sorry about triple posting but I feel like since it's posted so much later it needs a separate post rather than just an edit. Otherwise, that map you just sent is like perfect, is it possible to add links to each country, or a popup that lets you click on a link. Also, can it be done in two layers. One layer would be zommed out and show you the countries and when zoomed in it would show the provinces and states?

the map I want to use (kwandrivia.net/forum) has countries with regions and cities in them, I would want it to be interactive with places taking you to that area on the forum.

[Hai-Etlik]

Sorry about triple posting but I feel like since it's posted so much later it needs a separate post rather than just an edit. Otherwise, that map you just sent is like perfect, is it possible to add links to each country, or a popup that lets you click on a link. Also, can it be done in two layers. One layer would be zommed out and show you the countries and when zoomed in it would show the provinces and states?

the map I want to use (kwandrivia.net/forum) has countries with regions and cities in them, I would want it to be interactive with places taking you to that area on the forum.

Scale dependant styling is entirely doable. That same example does a variation on the idea by adding labels as you zoom in. Adding links to vector shapes is doable as well; if there aren't examples on the OL3 example page, there ought to be explanations in their documentation.