seeking recipes or examples for overlaying my local sketch on OSM

[hen3ry]

Seeking comprehensive recipes for how to overlay my own map sketches, from Adobe Illustrator, of an area of about 2km x 2km on OSM at a particular geographic location.   Failing that:  one or more detailed examples of doing such.

Nothing too complicated:  For some small villages and towns in Eastern Europe, I want to overlay street names in alternative languages and indicate minor right-of-way shifts that have occurred in the past century or so.   (WMS servers provide in the current official language and text script of the area, right?  Only that,  yes?)  Where labels are non-Latin, one of my first goals is to provide Latin-script transliterations of the modern names.   I don't think there's a way to substitute alternative text strings for street names, I think. (Yes?)  Overlaid call-outs will be OK.   Some streets have been renamed as many as 5 times over this period so there's at lot more to do after that.

I'm a tekkie, done a fair amount of web-authoring, and I've managed to use Leaflet to build and publish on my own website simply marked-up local maps with OSM, Google Satellite, and Google Roadmap layers.  But my skills in using Leaflet and JS are not very deep.  Eventually I can learn everything I need, but if I can find the right recipes, and/or complete examples,  I hope I can cookbook most of the Leaflet stuff so I can concentrate on the historical-geographic issues.

I'm working on a Mac, so all the better if the recipes/examples are Mac-based.

TIA

[k_man_au]

You will need to geo-reference the drawing. Can you provide some more info on your sketch creation process? Do you work from a bounding box?

Why don't you download the OSM Road Centers and add an attribute filed with the alternate street name? You could then convert to GeoJSON and overlay in Leaflet? 

[hen3ry]

Thanks for your response.

My sketches will be generally be guesses from whatever sources I can get -- probably not much, because I'm working on obscure places.  If all else fails, I'll be using the modern OSM data as an underlay guide and freehand sketch on a layer above.   If I'm really lucky, I may have some very old aerial imagery to work from, again as an underlay.  At some point I might try to geo-reference a small rectangle of aerial imagery and use that as a web-map layer, but for now simple sketches are sufficient for what I want to do.

"Work from a bounding box"?   As in

   bbox = left,bottom,right,top

or

 bbox = min Longitude , min Latitude , max Longitude , max Latitude 

(per Wikipedia) ?   If I use a rectangle from OSM as a sketch guide,  I guess so, but --obviously-- I don't get the full meaning of what you're asking.  What are the implications of trying to overlay a small rectangle of data over a world-continuous OSM map?    Seems to me the sketch overlay will simply be 100% transparent outside that rectangle, which doesn't seem to be a problem to me thinking of users, but might be an tech issue.

The historical data about street names in this locale is really iffy, so I would be reluctant to file any official alternatives unless I could mark them "tentative" or similar. Then, as I explained, there's the problem of multiple transliterations/language scripts.  Which ones do I propose?  All of them?   Very difficult to choose.   If I can make a sketch-overlay without too much trouble, I can reflect the tentative nature of my street name assignments and find the space to add multiple alternative names.  And different sketch overlays can reflect different political eras,  so there's plenty of "room".

One good reason I'm seeking comprehensive recipes (or examples) is that I need to understand the workflow and the terminology, which I don't now.  Are there no such examples available?   I've looked on the leaflet.js web site and other relevant places, with no luck.

[k_man_au]

 

Thanks for your response.

No problem :)

 

My sketches will be generally be guesses from whatever sources I can get -- probably not much, because I'm working on obscure places.  If all else fails, I'll be using the modern OSM data as an underlay guide and freehand sketch on a layer above.   If I'm really lucky, I may have some very old aerial imagery to work from, again as an underlay.  At some point I might try to geo-reference a small rectangle of aerial imagery and use that as a web-map layer, but for now simple sketches are sufficient for what I want to do.

"Work from a bounding box"?   As in

   bbox = left,bottom,right,top

or

 bbox = min Longitude , min Latitude , max Longitude , max Latitude 

bbox = min Longitude , min Latitude , max Longitude , max Latitude

As you are trying to do overlays on existing map data, you are trying to plot on a Lon/Lat axis, so your sketch must be geo-referenced to be overlayed in any meaningful fashion. If you have your own aerial imagery and are not integrating with any other map data, then perhaps a local system of coordinates would be an option

 

(per Wikipedia) ?   If I use a rectangle from OSM as a sketch guide,  I guess so, but --obviously-- I don't get the full meaning of what you're asking.  What are the implications of trying to overlay a small rectangle of data over a world-continuous OSM map?    Seems to me the sketch overlay will simply be 100% transparent outside that rectangle, which doesn't seem to be a problem to me thinking of users, but might be an tech issue.

No implications, you just need to make sure that your small rectangle is positioned over the correct part of the world :) 

 

The historical data about street names in this locale is really iffy, so I would be reluctant to file any official alternatives unless I could mark them "tentative" or similar. Then, as I explained, there's the problem of multiple transliterations/language scripts.  Which ones do I propose?  All of them?   Very difficult to choose.   If I can make a sketch-overlay without too much trouble, I can reflect the tentative nature of my street name assignments and find the space to add multiple alternative names.  And different sketch overlays can reflect different political eras,  so there's plenty of "room".

If you have made your own copy of the OSM data, I see no issue adding temp names to the table. I can understand though why you wouldn't want to edit OSM directly and apply changes across the board.

 

One good reason I'm seeking comprehensive recipes (or examples) is that I need to understand the workflow and the terminology, which I don't now.  Are there no such examples available?   I've looked on the leaflet.js web site and other relevant places, with no luck.

Do you have access to any desktop GIS software. ESRI ArcGIS would make this very easy as the rubber sheeting capabilities for image files is excellent.

If not I would decide on a bounding box (pick a co-ordinate off the map for the top corner), then decide on a image resolution. Work out how many DMS each pixel represents, and you have yourself a crudely implemented geo-referenced image.  

IMHO though I'd be using vector graphics, not a raster as you propose. It will make editing and using the data far easier in the future.

If it were me doing the job, I'd be loading the Aerials, and the latest OSM road centres into a GIS package to do the digitisation, then putting your labels into an attribute table with multiple fields for road name, and multiple comment fields if necessary

eg.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Road Name 1 | Road Name 1 Source | Road Name 1 Era | Road Name 1 Confidence | Road Name 2 | Road Name 2 Source | Road Name 2 Era | Road Name 2 Confidence | et al...

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

If the text is in some weird script, you could store a link to a small jpeg of the symbols and use image markers (such as http://leafletjs.com/examples/custom-icons.html).

Let me know what you have available to you....