2

I tried adding an SVG as a layer on my map but it does not show up.

//For registering EPSG: 2326 
import * as proj4x from 'proj4';
var proj4 = (proj4x as any).default;
import {register} from 'ol/proj/proj4';
proj4.defs('EPSG:2326', '+proj=tmerc +lat_0=22.31213333333334 +lon_0=114.1785555555556 +k=1 +x_0=836694.05 +y_0=819069.8 +ellps=intl +towgs84=-162.619,-276.959,-161.764,0.067753,-2.24365,-1.15883,-1.09425 +units=m +no_defs');
register(proj4);
var projection2326 = get('EPSG:2326');
  var extentTest = [815366.7950903749, 818259.401599934, 815684.9262746248,825970.8994440462 ];

  var projectionTest = new Projection({
    code: 'EPSG:2326',
    units: 'm',
    extent: this.map.getView().calculateExtent(this.map.getSize())
  });

  var SVGLayer = new ImageLayer({
    source: new Static({
    url: 'assets/SvgFile.svg',
    projection: projectionTest,
    imageExtent: extentTest
    })
  });
  this.map.addLayer(SVGLayer);

Am i writing the extent wrong ? The drawing does not show up on the map at all.

1
  • Wondering whether the use of a relative URL to the SVG might be a problem. What if you add the absolute URL?
    – nmtoken
    Feb 17 '20 at 13:18
1

Which version of OpenLayers are you using?

By giving it a quick look problem might be in projection. Since EPSG:2326 most likely isn't included in OpenLayers by default.

ol.proj.get( 'EPSG:2326' )

If you null is returned then you should add projection using Proj4js. OpenLayers has example for including custom projection in documentation. It's for WMS but should work the same, if projection is the issue. Link to example.

Edit

I created jsFiddle example using your projection and added simple SVG. In my example I defined layer projection with string only and left it to OpenLayers to find. I also defined SVG source with ImageStatic.

HTML:

<div id="map" class="map"></div>

Javascript:

proj4.defs('EPSG:2326', '+proj=tmerc +lat_0=22.31213333333334 +lon_0=114.1785555555556 +k=1 +x_0=836694.05 +y_0=819069.8 +ellps=intl +towgs84=-162.619,-276.959,-161.764,0.067753,-2.24365,-1.15883,-1.09425 +units=m +no_defs');

ol.proj.proj4.register( proj4 );

//var extentTest = [794188.056612, 802104.408167, 865500.106237, 845113.423228 ];
var extentTest = [815366.7950903749, 818259.401599934, 815684.9262746248,825970.8994440462 ];

var map = new ol.Map({
  layers: [
    new ol.layer.Image({
      source: new ol.source.ImageStatic({
        url: 'https://simplemaps.com/static/svg/hk/hk.svg',
        projection: 'EPSG:2326',
        imageExtent: extentTest
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    projection: 'EPSG:2326',
    center: ol.extent.getCenter(extentTest),
    zoom: 10
  })
});

JSFiddle example

2
  • I did not add that code because i thought it would not be a problem. I have edited the code now. Sep 3 '19 at 6:26
  • @UzmakiAshim I modified my answer with working example.
    – tad_hey
    Sep 3 '19 at 8:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.