New to OSM - "service area" map for website

Hello All, I'm looking to incorporate an OSM map on my website and in my print materials, but I need more than just the map. I need to add color-coded (and labelled?) polygons to the map, to designate areas I'm authorized to operate in and my rates for the area. I'm unsure how to do so.

Additional info:
The purpose of the map(s) I need are to layout territory for employee(s)/contractor(s) in zones. Each zone will have a set rate for port-to-port travel charges. Having color coded maps on hand, both on the website, and say bound books (think thomas guide, but more specific), will give my customers an idea of what to expect on their invoice and prevent our employee(s)/contractor(s) from fudging numbers on the invoice and expense sheets.

Also, I have to create these previously mentioned Zones for the entire state of Oregon (USA).

I have reasonable skills in javascript and php and plenty of time to work with.

asked 30 Aug '14, 11:41

termcmdr
16●1●1●2
accept rate: 0%

edited 30 Aug '14, 13:55

aseerel4c26 ♦
32.6k●18●248●554

One Answer:

active answers oldest answers newest answers popular answers

I will just try to start… many options would be possible here. Depends on your skills, time and money to spend, exact purpose and so on.

At least for the online part, I think umap would be an easy option. Just a random example with markers and coloured polygons. Printing this (in high quality) might not be that easy. Also, using this (without an own deployment) for a not-very-low-traffic website is not really intended.

Other stuff to read:

slippy maps → e.g. Leaflet
hire someone
Rendering (especially for printing)

Update:
I think others here can provide better answers in this case, but I will try, maybe it is of some usefulness: okay, as you want to be able to have a print and online version I think you should have your polygon (and other) data somehow saved separated so that you can use it for a online slippy map and for a print rendering (your own map/overlay rendering). I would think of your own custom rendered transparent overlay (tiles) which you could overlay in a slippy map and in print. In addition or instead of a rendered overlay (tiles) you could draw the polygons and data directly in the slippy map with JavaScript, this way it could be made clickable and with hovertext and so on. For printing you would need to render your tiles in a higher resolution and find basemap tiles which are also in highres. All in all, not that easy and you would need to read and try out quite a lot. Note: I have myself never done that, but this should be a possible way from what I know.

In every case, please do not forget a proper attribution to OSM for the data (and, depending on your basemap, also for the basemap provider/style designer).

And last but not least, thanks for using OSM!

permanent link

answered 30 Aug '14, 12:57

aseerel4c26 ♦
32.6k●18●248●554
accept rate: 18%

edited 30 Aug '14, 17:07

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

*italic* or _italic_
**bold** or __bold__
link:[text](http://url.com/ "title")
image?![alt text](/path/img.jpg "title")
numbered list: 1. Foo 2. Bar
to add a line break simply add two spaces to where you would like the new line to be.
basic HTML tags are also supported

learn more about Markdown

Question tags:

map ×535
mapping ×193
website ×111
polygon ×92

question asked: 30 Aug '14, 11:41

question was seen: 3,837 times

last updated: 30 Aug '14, 17:07

New to OSM - "service area" map for website

Follow this question

Related questions