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!
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
}
}
);
hi lambertus,
thanks for your quick answer. I will immediately try this!
Thanks a lot!
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.
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.
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
Yes, it’s complicated and you didn’t read my previous post carefully enough
You need to convert the SVG to GML first before loading it into OL…At least that’s the only method I know of.