Skip to content

Instantly share code, notes, and snippets.

@Siedlerchr
Created May 23, 2018 12:42
Show Gist options
  • Save Siedlerchr/d920a132e30adcd84c509597cf421549 to your computer and use it in GitHub Desktop.
Save Siedlerchr/d920a132e30adcd84c509597cf421549 to your computer and use it in GitHub Desktop.
OpenLayers map with overlay image
import 'ol/ol.css';
import Map from 'ol/map';
import View from 'ol/view';
import TileLayer from 'ol/layer/tile';
import OSM from 'ol/source/osm';
import Proj from 'ol/proj';
import Projection from 'ol/proj/projection';
import Coordinate from 'ol/coordinate';
import ImageStatic from 'ol/source/imagestatic';
import Image from 'ol/layer/image';
import Extent from 'ol/extent';
import Attribution from 'ol/attribution';
import Overlay from 'ol/overlay';
const coordinate = [16.3725, 48.208889];
let map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: Proj.fromLonLat(coordinate),
zoom: 4
})
});
let markerDiv = $("#marker")[0];
let marker = new Overlay({
position: Proj.fromLonLat(coordinate),
positioning: 'center-center',
element: markerDiv,
stopEvent: false
});
map.addOverlay(marker);
//HTML Stuff:
<div id="map" class="map"></div>
<div style="display: none;">
<img src ="overlayimage.jpg" id="marker" title="Marker">
</div>
</div>
//this displays an image on a map given a set of coordinates for the left bottom corner and the right top where the image should be displayed
coordinates.leftBottom = [long,lat];
coordinates.rightTop = [long, lat]; //Openlayers needs longitude first
console.log("coordinate in getMapVar", coordinates);
let arr = [coordinates.leftBottom, coordinates.rightTop];
let extent = coordinates.leftBottom.concat(coordinates.rightTop);
extent = transform(extent);
function transform(extent) {
return Proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
}
const staticImageLayer = new ImageLayer({
source: new StaticImage({
opacity: imageOpacity,
url: 'image.jpg',
imageExtent: extent,
projection: 'EPSG:3857',
}),
zIndex: 200,
});
let map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: Proj.fromLonLat(coordinate),
zoom: 4
})
});
map.addLayer(staticImageLayer);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment