NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum

I´ve used the Maperitive to convert my .OSM to .SVG file and it worked fine. I edited some colors on the map (colors of highways and lands) and I placed icons and images to attend my need. Now, what can I do with the edited .SVG file? I want to host my map like in that example -> http://beta1234.com.sunflower.arvixe.com/maps/.

I´ve seen that exists MapBox but it ask for MBTiles and I just have the .SVG file that I already mencioned.

Then, what is my next step?

Regards, Gilliard.

asked 25 Jul '12, 20:34

Gilliard%20Lopes's gravatar image

Gilliard Lopes
11224
accept rate: 0%


If you want to host it like that, you need web map tiles, not SVG. Here's a tutorial on how I did that sample map: Maperitive Tutorial: A Hiking Web Map In Ten Easy Steps

permanent link

answered 25 Jul '12, 21:33

Breki's gravatar image

Breki
2.0k51843
accept rate: 10%

Hello Breki, thanks for your answer, I began on the world of the maps just a few days ago. I readed and executed your tutorial but

I didn´t explain properly what I really need to do, let me show you some examples, I need to:

  1. Change the color of streets and blocks of the map to my own style, for example I like blue and yellow colors for streets and blocks on the white color;

  2. Add multiple pictures / icons that will be side by side and need to be carefully placed on the map (some I will need to rotate to fit better in a corner of the block) and I hope that these images are part of the background of the map that are not inserted as markers.

  3. Save my new map with all changes and host on my website to the others users navigate on map like I navigated on your map, with zoom and pan, I think the term is "slippy map" for that, is it correct?

  4. Later, i will create some events (click, mouseover, etc) to the region of the image through an API as OpenLayer and Leaflet;

Note that it is a hard work to place the images side by side in a specific location of each block. So I thought the best way was convert the map to .SVG so I could use Inkscape to do the job of moving images on the background of the map, rotate them and fit them properly.

I´ve found two images in the Google Images that sounds like what I need to do:

http://dl.dropbox.com/u/19078716/cm01.jpg http://dl.dropbox.com/u/19078716/cm02.jpg

Sorry for the huge email but I'm very lost with so much information at once.

Regards.

(25 Jul '12, 23:55) Gilliard Lopes
1

You approach is valid, since you need a lot of manual postprocessing. There are two problems I see: 1) I don't know of any tools that can generate slippy maps from SVG, 2) your manual postprocessing will have to be done separately for each zoom level you want to have on your web map. I guess the closest thing I see helping you is MAPublisher (http://www.avenza.com/mapublisher), but it costs allota.

(26 Jul '12, 08:47) Breki

I talked to support from MAPublisher and they answered to me: "You can really only create static maps for publication, as pdf's or Illustrator documents or Flash based maps using MAPublisher". So I think MAPublisher is not the most appropriate for the app I want to build =( Do you have another suggest?

(26 Jul '12, 17:00) Gilliard Lopes
1

Well, given how pricey their software is, this is a bit odd :). Here's another idea (but it will require a custom job for Maperitive, so you'd better contact me directly): prepare the data in JOSM, as an offline OSM XML file (which you mustn't upload to the server!). Draw extra OSM ways around the city blocks, putting an OSM node for each icon you want to place there. Then add the tag for each that node, telling the ID (or name) of the establishment. The rest would be a custom Maperitive script and you'd get web tiles directly, without the SVG and manual postprocessing.

(26 Jul '12, 18:35) Breki

Thanks for the help Breki! I will study the OSM Wiki. I´ve found (by Vincent de Phily) a plugin to JOSM that allows to load icons and display them as JOSM layer (with the rotate and scale functions). I dont know if it solves my problem because I do not know still tinkering with the data from JOSM. Here is the link for the plugin: http://wiki.openstreetmap.org/wiki/JOSM/Plugins/PicLayer http://josm.openstreetmap.de/wiki/Help/Plugin/PicLayer

According your experience on OSM, do you think it is suitable for my purpose?

How can I contact you directly to talk about that?

Thanks again =)

(27 Jul '12, 00:26) Gilliard Lopes

I'm not sure PicLayer will help you here. I haven't used it, but based on the documentation, it sounds like a plugin for loading single georeferenced map images and not for a multitude of small icons. You can send me an email to igor.brejc (gmail.com).

(27 Jul '12, 05:07) Breki
showing 5 of 6 show 1 more comments

I'd still go with a standard slippymap (many tutorials around) rather than some export-and-postprocess strategy. One easy way to customize the rendering is mapbox's tilemill.

Once you've got your baselayer, you can create you picture layer in whichever image editor you like.

  • Create your image at the highest zoom you plan to use
  • Make the non-picture parts of your layer transparent, so only the pictures show when you add the layer to the slippymap.
  • Make a resized copy of your image layer for each zoom (divide by 2 each time)
  • Split the images into tiles. I'm actually not sure how to automate that step. Maybe tilemill has a handy feature for that.
  • Add the image layer to your slippymap's baselayer.
permanent link

answered 26 Jul '12, 11:01

Vincent%20de%20Phily's gravatar image

Vincent de P... ♦
17.3k18152249
accept rate: 19%

Thanks for your answer Vincent!

I don´t understand how I can do these steps.

"Once you've got your baselayer, you can create you picture layer in whichever image editor you like"

Baselayer is just the background with my style? is something like that -> http://maps.cloudmade.com/?lat=-8.069831&lng=-34.879553&zoom=16&styleId=68443&opened_tab=0

My picture layer that you say will be composed of a layer with the background image of a region of the map that I export from OSM (in .png for example) to open it in an editor (like Photoshop) and I'll place my icons in another layer (with transparent background) and then save the final image (in .png) without the layer that has the background of the map, leaving only the icons on a transparent background? and make images like that for each zoom?

and how can I add that image layer in my slippymap´s baselayer?

I am noob and completely lost ;)

Thanks again.

(26 Jul '12, 17:15) Gilliard Lopes
2

That would be very impractical (or even impossible) if the map area is anything but tiny - the bitmap size would too big for any software to handle this. If you had a slippy map that's, say 100x100 tiles large, you'd end up with a 25600x25600 bitmap.

(26 Jul '12, 18:24) Breki

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

Question tags:

×48
×48
×47

question asked: 25 Jul '12, 20:34

question was seen: 11,166 times

last updated: 27 Jul '12, 05:07

NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum