Svg?!

General talk
1

hi guys,
i’m completely new to the whole map thing and so maybe it’s a dumb question. i have a .svg file of a map of germany with all the boundaries of the area codes. now i put the openstreetmap in a website and i want to overlay this map with the whole area code .svg file. i read that it is possible to use a .svg file as an overlay but i couldn’t understand how!
does anybody have an idea?!
thanks a lot!

2

I could not find a way to load an SVG directly in OpenLayers but you can convert SVG to GML and load that file into OpenLayers

overlay = new OpenLayers.Layer.GML("GML layer", filename, 
                    {
                        projection: map.displayProjection,
                        format: OpenLayers.Format.GML,
                        formatOptions: {
                                extractStyles: true,
                                extractAttributes: true
                        }
                    }
    );
3

hi lambertus,
thanks for your quick answer. I will immediately try this! :slight_smile:
Thanks a lot!

4

too bad. now it’s giving me a “layer.div undefined” error in the openlayers.js. i tried another version, but it didn’t work either. i have to figure it out with a javascript crack.

5

Errors in OL often occur because of a syntax error in your own javascript code. I find Firefox with the Firebug plugin helpful in debugging stuff like this.

6

Hi Lambertus,
thank you for the suggestion. I could fix the errors with the help of Firebug and WebDeveloper’s Toolbar!
It seems, the .svg is loaded correctly. It is shown in the LayerSwitcher, but I can’t see it in the window.
Another question is: How can I make sure it has the same size??
I’ve read somewhere, that the points describing each path in the .svg are GeoPoints because the shape file is a real map.
This is my code:

function init(){

                    var lat = 51.227069; <!-- sets the viewpoint latitude - generated out of users address -->
                    var lon = 9.975586; <!-- sets the viewpoint longitude - generated out of users address -->
                    var zoom = 5; <!-- sets the base zoom -->
                    
                    map = new OpenLayers.Map (    "map", {
                                                                controls:[
                                                                    new OpenLayers.Control.PanZoomBar(),
                                                                    new OpenLayers.Control.LayerSwitcher({'ascending':false}),
                                                                    new OpenLayers.Control.Permalink(),
                                                                    new OpenLayers.Control.ScaleLine(8),
                                                                    new OpenLayers.Control.Permalink('permalink'),
                                                                    new OpenLayers.Control.MousePosition(),
                                                                    new OpenLayers.Control.KeyboardDefaults()
                                                                ],
                                                                maxExtent: new OpenLayers.Bounds(    155.8,
                                                                                                                        119.3,
                                                                                                                        146.8,
                                                                                                                        -10.6),
                                                                maxResolution: 156543.0399,
                                                                numZoomLevels: 5,
                                                                units: 'm',
                                                                projection: new OpenLayers.Projection("EPSG:900913"),
                                                                displayProjection: new OpenLayers.Projection("EPSG:4326")
                                                                } );
                                                                
                    
                    layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Base Layer");
                    overlay = new OpenLayers.Layer.GML("Overlay", "./citycode.svg", 
                                                                            {
                                                                                projection: map.displayProjection,
                                                                                format: OpenLayers.Format.GML,
                                                                                formatOptions: {
                                                                                    extractStyles: true,
                                                                                    extractAttributes: true
                                                                                }
                                                                            }
                                                                        ); 
                    
                    <!-- map.addLayer(layerMapnik, overlay); -->
                    overlay.setOpacity(100.0);
                    map.addLayer(layerMapnik);
                    map.addLayer(overlay);
            
                    var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                    map.setCenter (lonLat, zoom);
                }

It seems to be much more complicated like I thought :wink:

7

Yes, it’s complicated and you didn’t read my previous post carefully enough :wink:

You need to convert the SVG to GML first before loading it into OL…At least that’s the only method I know of.