How to display high resolution image in browser using openlayers - javascript

I am trying to display a high resolution image in browser using openlayers 5. I found an example on how to use zoomify to create image tiles and render it using openlayers map. But I am unable to use it for my own image. I am completely new to this. The question I ask may be very trivial. Please bear my ignorance.
Example code - This is the example from openlayers website. I am trying to do the same with this image.
I tried replacing the zoomifyUrl and iipUrl with my image url but it didn't work.
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import Zoomify from 'ol/source/Zoomify.js';
var imgWidth = 799;
var imgHeight = 586;
var zoomifyUrl = 'https://live.staticflickr.com/8173/7993440342_5d9c68faec_c.jpg';
var iipUrl = 'https://live.staticflickr.com/8173/7993440342_5d9c68faec_c.jpg' + '&JTL={z},{tileIndex}';
var layer = new TileLayer({
source: new Zoomify({
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
})
});
var extent = [0, -imgHeight, imgWidth, 0];
var map = new Map({
layers: [layer],
target: 'map',
view: new View({
// adjust zoom levels to those provided by the source
resolutions: layer.getSource().getTileGrid().getResolutions(),
// constrain the center: center cannot be set outside this extent
extent: extent
})
});
map.getView().fit(extent);
var control = document.getElementById('zoomifyProtocol');
control.addEventListener('change', function(event) {
var value = event.currentTarget.value;
if (value === 'iip') {
layer.setSource(new Zoomify({
url: iipUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
}));
} else if (value === 'zoomify') {
layer.setSource(new Zoomify({
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
}));
}
});
I want to achieve something like the demo in openseadragon website. After making the above code change, I get a a grid with a portion of image repeated.

To use Zoomify you need a server which supports the image served as tiles. The url you are using is a static image on flickr which OpenLayers would need to process as ImageStatic. Here is the code using the highest resolution image from flickr
var extent = [0, 0, 10000, 7328];
var resolutions = [64, 32, 16, 8, 4, 2, 1];
var layer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'https://live.staticflickr.com/8173/7993440342_6a1f281898_o_d.jpg',
imageExtent: extent
})
});
var map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
// adjust zoom levels to those provided by the source
resolutions: resolutions,
// constrain the center: center cannot be set outside this extent
extent: extent
})
});
map.getView().fit(extent);
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
Alternatively you could link to the url being used by OpenSeadragon. Sttrangely the zoom levels run from 8 to 14, with one tile at level 8 and a 55 x 41 grid at level 14 where the tiles in the rightmost column are 206px wide and in the bottom row 41px high. Zoomify can be used but a custom tile url function is needed to add 8 to the zoom level expected by OpenLayers.
var imgWidth = 54*256 + 206;
var imgHeight = 40*256 + 41;
var zoomifyUrl = 'https://openseadragon.github.io/example-images/duomo/duomo_files/{z}/{x}_{y}.jpg';
var layer = new ol.layer.Tile({
source: new ol.source.Zoomify({
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
})
});
layer.getSource().setTileUrlFunction(function(tileCoord) {
return zoomifyUrl.replace(
'{z}', tileCoord[0]+8
).replace(
'{x}', tileCoord[1]
).replace(
'{y}', -(tileCoord[2]+1)
);
});
var extent = [0, -imgHeight, imgWidth, 0];
var map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
// adjust zoom levels to those provided by the source
resolutions: layer.getSource().getTileGrid().getResolutions(),
// constrain the center: center cannot be set outside this extent
extent: extent
})
});
map.getView().fit(extent);
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
Looking at the result from that attempt it is apparent some tiles are only 255px instead of the standard 256 which is causing white lines to appear on the output. I added a custom tile load function to stretch 255px widths or heights to 256 (but it must not stretch tiles at the right and bottom edges which can be less than 255px).
var imgWidth = 54*256 + 206;
var imgHeight = 40*256 + 41;
var zoomifyUrl = 'https://openseadragon.github.io/example-images/duomo/duomo_files/{z}/{x}_{y}.jpg';
var layer = new ol.layer.Tile({
source: new ol.source.Zoomify({
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
})
});
layer.getSource().setTileUrlFunction(function(tileCoord) {
return zoomifyUrl.replace(
'{z}', tileCoord[0]+8
).replace(
'{x}', tileCoord[1]
).replace(
'{y}', -(tileCoord[2]+1)
);
});
var tileSize = ol.size.toSize(layer.getSource().getTileGrid().getTileSize(0));
layer.getSource().setTileLoadFunction(function(imageTile, src) {
var img = document.createElement('img');
img.onload = function() {
var width = img.naturalWidth >= tileSize[0]-1 ? tileSize[0] : img.naturalWidth;
var height = img.naturalHeight >= tileSize[1]-1 ? tileSize[1] : img.naturalHeight;
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
imageTile.getImage().src = canvas.toDataURL();
};
img.crossOrigin = 'anonymous';
img.src = src;
});
var extent = [0, -imgHeight, imgWidth, 0];
var map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
// adjust zoom levels to those provided by the source
resolutions: layer.getSource().getTileGrid().getResolutions(),
// constrain the center: center cannot be set outside this extent
extent: extent
})
});
map.getView().fit(extent);
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
Using a dzi XML parser:
var map = new ol.Map({
target: 'map',
logo: false
});
var layer = dzi.loadUrl(
'https://openseadragon.github.io/example-images/duomo/duomo.dzi',
{ attributions: 'Image &copy 2012, Dario Morelli' }
);
layer.on('change:source', function(evt) {
map.setView(
new ol.View({
resolutions: layer.getSource().getTileGrid().getResolutions(),
extent: layer.getExtent()
})
);
map.getView().fit(layer.getExtent(), { size: map.getSize() });
});
map.addLayer(layer);
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script>
dzi = function() {
function loadUrl ( url,
opt_options // attributions (defaults to undefined), crossOrigin (defaults to 'anonymous')
) {
var options = opt_options || {};
var crossOrigin = options.crossOrigin === undefined ? 'anonymous' : options.crossOrigin;
var layer = new ol.layer.Tile();
var last = url.lastIndexOf('.');
var path = url.slice(0, last);
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xhr.responseText,'text/xml');
var elements = xmlDoc.getElementsByTagName('Image');
var tileSize = Number(elements[0].getAttribute('TileSize'));
var format = elements[0].getAttribute('Format');
var width = Number(elements[0].getElementsByTagName('Size')[0].getAttribute('Width'));
var height = Number(elements[0].getElementsByTagName('Size')[0].getAttribute('Height'));
var url = path + '_files/{z}/{x}_{y}.' + format;
var source = new ol.source.Zoomify({
attributions: options.attributions,
url: url,
size: [width, height],
tileSize: tileSize,
crossOrigin: crossOrigin
});
var offset = Math.ceil(Math.log(tileSize)/Math.LN2);
source.setTileUrlFunction(function(tileCoord) {
return url.replace(
'{z}', tileCoord[0] + offset
).replace(
'{x}', tileCoord[1]
).replace(
'{y}', -(tileCoord[2]+1)
);
});
layer.setExtent([0, -height, width, 0]);
layer.setSource(source);
}
xhr.send();
return layer;
}
return {
"loadUrl" : loadUrl
}
} ();
</script>
<div id="map" class="map"></div>

The above answer has two issues:
lack of support for deepzoom in zoomify
white lines in between the tiles.
I was able to figure it out. Answer: Deepzoom into OpenLayers images using zoomify

Related

Save Openlayers map as PDF (offline version)

I would like to save my openlayers map as PDF.
Unfortunately all the options I tried don't work.
The first option, I guess the easiest one was here:
https://jsfiddle.net/Ljnya5gp/1/
from which I developed something like this:
function createPdf() {
var doc = new jsPDF();
source = $('#map')[0];
specialElementHandlers = {
'#map': function (element, renderer) {
return true
}
};
doc.fromHTML(
source,
15,
15,
{
'width': 170,
'elementHandlers': specialElementHandlers
}
);
doc.save('Area 5 map - alterations.pdf')
but the script downloads only blank document for me.
I want to have this section downloaded (from index.html)
<div id="map">
<div id="popup" class="ol-popup">
<div id="popup-content"></div>
</div>
</div>
Why the output PDF document is blank? Is it caused by Map script, which is embedded into the HTML file?
My <div id="map"> refers to the script attached to the HTML file as the:
The jsfiddle can be found here:
https://jsfiddle.net/rjetdvyo/
Is it something which causes the problem too?
UPDATE:
Based on the answer below I formed something like this:
function createPdf() {
var mapElement = $("#map");
html2canvas(mapElement, {
useCORS: true,
onrendered: function (canvas) {
var img = canvas.toDataURL("image/jpeg,1.0");
var pdf = new jsPDF();
pdf.addImage(img, 'JPEG', 15, 40, 180, 180);
pdf.save('a4.pdf')
}
});
}
var map = (document.getElementById('map'), createPdf);
The printpdf button only refreshes the page.
I think everything is ok, it was showing blank because you didn't write any text into div. Have a look:
function createPdf() {
var doc = new jsPDF();
source = $('#map')[0];
specialElementHandlers = {
'#map': function (element, renderer) {
return true
}
};
doc.fromHTML(
source,
15,
15,
{
'width': 170,
'elementHandlers': specialElementHandlers
}
);
doc.save('Area 5 map - alterations.pdf')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<div id="map">
<div id="popup" class="ol-popup">
Hello
<div id="popup-content"><h1>Hello, this is a H1 tag</h1></div>
</div>
</div>
<button onclick="createPdf()">generate PDF</button>
Update:
By using jsPDF and html2canvas both, you can achieve your goal.
html2canvas creates a canvas object from the DOM element. From canvas, you can create an image and finally convert that image into pdf by jsPDF. Have a look at the code below:
function createPdf() {
var mapElement = $("#map-canvas");
html2canvas(mapElement, {
useCORS: true,
onrendered: function (canvas) {
var img = canvas.toDataURL("image/jpeg,1.0");
var pdf = new jsPDF();
pdf.addImage(img, 'JPEG', 15, 40, 180, 180);
pdf.save('a4.pdf')
}
});
}
// if HTML DOM Element that contains the map is found...
if (document.getElementById('map-canvas')) {
// Coordinates to center the map
var myLatlng = new google.maps.LatLng(52.525595, 13.393085);
// Other options for the map, pretty much selfexplanatory
var mapOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Attach a map to the DOM Element, with the defined settings
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
#map-canvas {
width: 500px;
height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"
integrity="sha512-s/XK4vYVXTGeUSv4bRPOuxSDmDlTedEpMEcAQk0t/FMd9V6ft8iXdwSBxV0eD60c6w/tjotSlKu9J2AAW1ckTA=="
crossorigin="anonymous"></script>
<button onclick="createPdf()">generate PDF</button>
<div id="map-canvas"></div>
Update 2:
I don't know which ways you're following. Just follow these steps to get the job done:
Follow these steps first.
Replace your index.js code by this:
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener(
'click',
function () {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
// var format = [297, 210];
var resolution = 72; // The term 72 dpi(dots per inch) is used to express the resolution of a screen
var dim = [297, 210]; // a4 size's dimension
var width = Math.round((dim[0] * resolution) / 25.4);
var height = Math.round((dim[1] * resolution) / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
map.once('rendercomplete', function () {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = width;
mapCanvas.height = height;
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(
document.querySelectorAll('.ol-layer canvas'),
function (canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
var transform = canvas.style.transform;
// Get the transform parameters from the style's transform matrix
var matrix = transform
.match(/^matrix\(([^\(]*)\)$/)[1]
.split(',')
.map(Number);
// Apply the transform to the export map context
CanvasRenderingContext2D.prototype.setTransform.apply(
mapContext,
matrix
);
mapContext.drawImage(canvas, 0, 0);
}
}
);
var pdf = new jsPDF('landscape');
pdf.addImage(
mapCanvas.toDataURL('image/jpeg'),
'JPEG',
0,
0,
dim[0],
dim[1]
);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
var scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
},
false
);
Replace your index.html by this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using Parcel with OpenLayers</title>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<button id="export-pdf" >Export PDF</button>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>

How to label the features in openlayers without using overlays

I am aware of adding overlays in openlayers and using them as tooltips for relaying some information, but we have to manage the things to get it done.
Leaflet on the other hand has provided bindLabel() to display tooltips in the viewport of map.
My question is can it be done in openlayers without overlays because as the number of overlays grows the map starts to get slow in rendering. Overlays can only be displayed in one world. What if we want to display it in other worlds of map.
References labels and overlays :
Leaflet labels for features
Overlays in openlayers
Include a text style in the style to display labels on features. You can use a single overlay which follows the pointer as a tooltip.
var fill = new ol.style.Fill({
color: 'rgba(255,255,255,0.4)'
});
var stroke = new ol.style.Stroke({
color: '#3399CC',
width: 1.25
});
var styles = [
new ol.style.Style({
image: new ol.style.Circle({
fill: fill,
stroke: stroke,
radius: 5
}),
fill: fill,
stroke: stroke,
text: new ol.style.Text({
font: '18px Calibri,sans-serif',
textBaseline: 'top',
offsetY: 6,
backgroundFill: new ol.style.Fill({
color: 'rgba(255,204,51,0.5)'
}),
backgroundStroke: new ol.style.Stroke({
width: 1,
color: 'rgba(0,0,0,0.5)'
}),
padding: [0,2,0,2]
})
})
];
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
}),
layers: [new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf'
}),
style: function(feature) {
var type = feature.get('layer');
if (type == 'Coastline' || type.indexOf('City') == 0) {
styles[0].getText().setText(feature.get('_name') || feature.get('_name_global'));
return styles;
}
},
declutter : true
})]
});
var content = document.createElement('div');
content.style.overflow = "auto";
content.style.height = "90px";
var popup = document.createElement('div');
popup.className = "ol-unselectable"
popup.style.zindex = "1";
popup.style.position = "absolute";
popup.style.background = "rgba(224,148,94,1)";
popup.style.font = "18px Calibri,sans-serif";
popup.style.color = "white";
popup.appendChild(content);
var overlay = new ol.Overlay({
element: popup,
// positioning: 'bottom-center',
offset: [0, -95],
autoPan: false
});
map.addOverlay(overlay);
map.once('rendercomplete', function(){
showInfo(ol.proj.fromLonLat([72.825833, 18.975]));
});
map.on('pointermove', function(event){ showInfo(event.coordinate); });
function showInfo(coordinate) {
var features = map.getFeaturesAtPixel(map.getPixelFromCoordinate(coordinate), {
hitTolerance: 2
});
if (!features) {
overlay.setPosition(undefined);
return;
}
var feature = features[0];
var name = feature.get('_name') || feature.get('_name_global');
if (!name) {
overlay.setPosition(undefined);
return;
}
var text = ' ' + name + ' ';
var local = feature.get('_name_local')
if (local && local != name) {
text += '<br>' + ' ' + local + ' ';
}
content.innerHTML = '<pre>' + text + '</pre>';
overlay.setPosition(coordinate);
}
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/>
<div id="map" class="map"></div>

Konva how to transform image

I follow the Documentation that Konva have.
https://konvajs.github.io/docs/select_and_transform/Basic_demo.html
and
https://konvajs.github.io/docs/sandbox/Image_Resize.html
But the problem is they only have transform demo for rectangle shape. My plan is to have it on image. But so far I cant get it right. Here's my example code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/konvajs/konva/master/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Image Resize Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body class="col-md-12">
<div id="container" class="col-md-10">
</div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
function testFunction() {
addCanvas();
}
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var image = group.get('Image')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
image.position(topLeft.position());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
image.width(width);
image.height(height);
}
}
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
stage.add(layer);
// darth vader
var darthVaderImg = new Konva.Image({
width: 200,
height: 137,
name: 'imgs'
});
// yoda
var yodaImg = new Konva.Image({
width: 93,
height: 104,
name: 'imgs'
});
var darthVaderGroup = new Konva.Group({
x: 180,
y: 50,
draggable: true,
id: 'test1',
name: 'Imgs'
});
var num = 0;
function addCanvas() {
var test = new Konva.Group({
x: 200,
y: 100,
draggable: true
});
var testImg = new Konva.Image({
width: 93,
height: 104
});
layer.add(test);
test.add(testImg);
console.log('test');
var imageObjs = new Image();
imageObjs.onload = function() {
testImg.image(imageObjs);
layer.draw();
};
imageObjs.src = './pic/test2.png';
}
layer.add(darthVaderGroup);
darthVaderGroup.add(darthVaderImg);
var yodaGroup = new Konva.Group({
x: 20,
y: 110,
draggable: true,
id: 'Imgs',
});
layer.add(yodaGroup);
yodaGroup.add(yodaImg);
var imageObj1 = new Image();
imageObj1.onload = function() {
darthVaderImg.image(imageObj1);
layer.draw();
};
imageObj1.src = './pic/test2.png';
var imageObj2 = new Image();
imageObj2.onload = function() {
yodaImg.image(imageObj2);
layer.draw();
};
imageObj2.src = './pic/test1.jpg';
stage.on('click', function(e) {
if (e.target === stage) {
stage.find('Transformer').destroy();
layer.draw();
return;
}
// do nothing if clicked NOT on our rectangles
if (!e.target.hasName('imgs')) {
return;
}
// remove old transformers
// TODO: we can skip it if current rect is already selected
stage.find('Transformer').destroy();
// create new transformer
var tr = new Konva.Transformer();
layer.add(tr);
tr.attachTo(e.target);
layer.draw();
});
function addTrans(e) {
}
</script>
</body>
</html>
The output
Here's the output. Whenever I click the image the transform will be out of place and will on stay in 1 place.
I finally figure it out. Turn out I place the draggable in the wrong place. I put the draggable into the Konva.Image instead in the group.
Thanks

How to convert WMS TileLayer to Canvas TileLayer

I am using Leaflet to place a wms tileLayer to the map.
The images in the tiles do not have a xyz coordinates.
After loading the images I would like the images to be converted into a canvas.
I tried several things.
Adding the wms tileLayer to the map and on load running a script to create the canvas. However, of course, this runst the script way too much.
Besides that, my map is fully loaded with the images in stead of only there where the wms layer is on the map.
it looks a bit like this:
this.currentPhoto = L.tileLayer.wms(geoURL), {
layers: layerName,
format: 'image/png',
opacity: 1,
styles: '',
transparent: true,
attribution: "",
version: "2.0.0",
srs: "EPSG:4326"
}).addTo(map).bringToFront();
this.currentPhoto.on('tileload', function(e) {
setCanvasTiles(e);
});
setCanvasTiles: function(e) {
var that = this;
var url = e.url;
var tiles = HKV.satPhotoView.currentPhoto._tiles;
this.canvasTiles = new L.TileLayer.Canvas({
minZoom: 4,
maxZoom: 14,
attribution: '',
tms: true,
opacity: 0.8,
noWrap: true,
unloadInvisibleTiles: true,
reuseTiles: false,
transparent: true
});
this.canvasTiles.drawTile = function(canvas, tilePoint, zoom) {
that.drawCanvasTile(canvas, tilePoint, zoom, url);
};
this.canvasTiles.addTo(this.mapInfo).bringToFront();
},
drawCanvasTile: function(canvas, tilePoint, zoom, url) {
var that = this;
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var height = 256;
var width = 256;
ctx.drawImage(img,0,0);
imageData = ctx.getImageData(0, 0, 256, 256);
$(canvas).data("origImgData",imageData);
//color the pixels of the canvas
};
img.src = url;
},
Like I said, this script runs to much, so I think it is best to build an object with the URL of the image and the tilePoints so I can match these to the tilePoints of the Canvas TileLayer.
Is there anybody out there who did this before, or can help me out?
I am using Backbone, require and jquery next to leaflet
I found a solution.
When requesting the ._tiles from the wms layer, you will have an object with the keys of the pixelPosition. looking something like:
tiles = {
"127:47": {data},
"127:48": {data},
}
when setting the canvas you will receive the layerPoints.
Using the layerpoints I can get the image from the tile and use this.
var newKey = tilePoint.x + ":" + tilePoint.y;
var url = tiles[newKey].src;
So now I have the url. I can load the canvas.
Full code here:
this.currentPhoto = L.tileLayer.wms(geoURL), {
layers: layerName,
format: 'image/png',
opacity: 1,
styles: '',
transparent: true,
attribution: "",
version: "2.0.0",
srs: "EPSG:4326"
}).addTo(map).bringToFront();
var test = setTimeout(function() {
that.setCanvasTiles();
}, 500);
setCanvasTiles: function() {
var that = this;
var tiles = this.currentPhoto._tiles;
this.canvasTiles = L.tileLayer.canvas({
tms: true,
opacity: 0.8,
noWrap: true,
unloadInvisibleTiles: true,
reuseTiles: false,
transparent: true
});
this.canvasTiles.drawTile = function(canvas, tilePoint, zoom) {
var newKey = tilePoint.x + ":" + tilePoint.y;
var url = tiles[newKey].src;
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var height = 256;
var width = 256;
ctx.drawImage(img,0,0);
var imageData = ctx.getImageData(0, 0, 256, 256);
$(canvas).data("origImgData", imageData);
console.log(imageData);
};
img.src = url;
};
this.canvasTiles.addTo(this.map).bringToFront();
this.map.removeLayer(this.currentPhoto);
},

Rotating image / marker image on Google map V3

How could I rotate an image (marker image) on a Google map V3?
There is an excellent example for V2 here, exactly doing what I need. But for GMap2! They do it with a rotating canvas.
Image rotating with JS / JQuery is frequently used, there are multiple answers about this. But how could I apply this to my maps image?
One mentioned approach is to have different images for different angles and to switch among them - this is NOT what I want. I do not like to have so many images, I want to rotate by code.
Remark: There are similar questions, but all for V2 and not V3 (as far I can tell). I need it for V3.
My js class for solving this problem is:
var RotateIcon = function(options){
this.options = options || {};
this.rImg = options.img || new Image();
this.rImg.src = this.rImg.src || this.options.url || '';
this.options.width = this.options.width || this.rImg.width || 52;
this.options.height = this.options.height || this.rImg.height || 60;
var canvas = document.createElement("canvas");
canvas.width = this.options.width;
canvas.height = this.options.height;
this.context = canvas.getContext("2d");
this.canvas = canvas;
};
RotateIcon.makeIcon = function(url) {
return new RotateIcon({url: url});
};
RotateIcon.prototype.setRotation = function(options){
var canvas = this.context,
angle = options.deg ? options.deg * Math.PI / 180:
options.rad,
centerX = this.options.width/2,
centerY = this.options.height/2;
canvas.clearRect(0, 0, this.options.width, this.options.height);
canvas.save();
canvas.translate(centerX, centerY);
canvas.rotate(angle);
canvas.translate(-centerX, -centerY);
canvas.drawImage(this.rImg, 0, 0);
canvas.restore();
return this;
};
RotateIcon.prototype.getUrl = function(){
return this.canvas.toDataURL('image/png');
};
Call it like this:
var marker = new google.maps.Marker({
icon: {
url: RotateIcon
.makeIcon(
'https://ru.gravatar.com/userimage/54712272/b8eb5f2d540a606f4a6c07c238a0bf40.png')
.setRotation({deg: 92})
.getUrl()
}})
See live example here http://jsfiddle.net/fe9grwdf/39/
I have found two extensions to the Google MAP V3: infobox.js and markerwithlabel.js
Both can handle an image DOM element as content, which in turn I can rotate via the jQuery image rotate plugin.
This even works without setting the marker's image again after rotation.
Edit: As of questions / comments below:
The extension for label is required, because it can handle other DOM elements. So I can add arbitrary HTML as label, in my particular case I add the image. And then I do rotate this image (child of the label) with the rotate plugin. So assign the image an id in order to easily access it. Actually I am using one label just for the image, and another for descriptive text.
Edit 2: Due to Stephan's comment on the DOM readiness
In my code I have found the following lines. This shows that I force a draw on the label before rotating the image.
if (!this._drawn) myImageLabel.draw(); // 1st time force a draw, otherwise rotating the image will fail because an asynchronously drawn object has not all tags in place
if (this.heading != 0) this.rotateImage(this.heading, true);
Edit 3: Code example how to create the Infobox.js
this._img = document.createElement('img');
... further manipulations of _img / Size / Id / ...
var planeImageLabelOptions = {
content: this._img,
disableAutoPan: true,
boxStyle: planeImageLabelBoxStyle,
pixelOffset: new google.maps.Size(-imgOffsetW / 2, -imgOffsetH / 2),
closeBoxURL: "",
position: latlng,
zIndex: this.altitude < 0 ? 100 : this.altitude
};
var planeImageLabel = new InfoBox(planeImageLabelOptions);
I also had a hard time to figure out the way to rotate .png marker.
I solved it like below. You can create many markers with same custom image and
rotate a specific marker you want to rotate.
I hope it helpful to you.
var id = 'my_marker_01';
var img_url = "../img/car.png";
var my_icon = img_url + "#" + id;
var marker = new google.maps.Marker({
icon: my_icon,
...
});
var rotate = 45;
$(`img[src="${my_icon}"]`).css(
{'-webkit-transform' : 'rotate('+ rotate +'deg)',
'-moz-transform' : 'rotate('+ rotate +'deg)',
'-ms-transform' : 'rotate('+ rotate +'deg)',
'transform' : 'rotate('+ rotate +'deg)'});
How could I rotate an image (marker image) on a Google map V3?
I had the same problem and I solved it with the next code:
var gmap;
NgMap.getMap(function(map){
gmap = map;
});
I suppose that you have a variable with the icon, for example:
var imagePath = 'img/customMarker.png';
First, we need to create our marker options:
var markerOptions = {
location: [x, y],
title:'some text',
draggable: true,
.
.
.
icon: imagePath
};
Let's create a marker:
var marker = new google.maps.Marker(markerOptions);
And we have to set the map:
marker.setMap(map);
Now if you want to rotate the image you need to do the next:
Change the imagePath variable's value to 'img/customMarker.png#yourId'
Set rotation value with css (e.g. with JQuery)
Let's see
imagePath = 'img/customMarker.png#markerOne';
$('img[src="img/customMarker.png#markerOne"]').css({
'transform': 'rotate(45deg)'
});
Of course you can do it fancier:
function rotateMarker(selector, degree){
$('img[src="img/customMarker.png#'+selector+'"]').css({
'transform': 'rotate('+degree+'deg)'
});
}
And your call:
rotateMarker('markerOne', 45);
That's all.
I hope it could be helpful.
I have done the rotation in v3 with the following code:
<canvas id="carcanvas" width="1" height="1"></canvas>
if (document.getElementById('carcanvas').getContext) {
var supportsCanvas = true;
} else {
var supportsCanvas = false;
}
var rImg = new Image();
rImg.src='/images/cariconl.png';
// Returns the bearing in radians between two points.
function bearing( from, to ) {
// Convert to radians.
var lat1 = from.latRadians();
var lon1 = from.lngRadians();
var lat2 = to.latRadians();
var lon2 = to.lngRadians();
// Compute the angle.
var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
if ( angle < 0.0 )
angle += Math.PI * 2.0;
if (angle == 0) {angle=1.5;}
return angle;
}
function plotcar() {
canvas = document.getElementById("carcanvas").getContext('2d');
var cosa = Math.cos(angle);
var sina = Math.sin(angle);
canvas.clearRect(0,0,32,32);
canvas.save();
canvas.rotate(angle);
canvas.translate(16*sina+16*cosa,16*cosa-16*sina);
canvas.drawImage(rImg,-16,-16);
canvas.restore();
}
and in the animation method :
if (supportsCanvas) {
angle = bearing(new google.maps.LatLng(lat1, lng1),new google.maps.LatLng(lat2, lng2));
plotcar();
}
I hope that help.
You did not state it in your question, but I am assuming that you want this rotation in relation to a line between point a and point b, which would be their path. In order to make a google svg icon that can be rotated, you will want to use the google symbol class object to define the properties of your marker symbol. This does not use a full .svg file, but only the d attribute of the path. Note that the google symbol class can only take one path per marker.
Additional attributes for color, stroke, width, opacity, etc. may be set after the marker has been created with javascript (updating the marker object properties directly), or with CSS (updating the marker properties by adding and removing classes).
As an example, the following will create an arrow marker that can be dragged, and it will be rotated around the point on the map that is the lat and long for the marker even after it is moved.
The HTML
<body id="document_body" onload="init();">
<div id="rotation_control">
Heading°<input id="rotation_value" type="number" size="3" value="0" onchange="setRotation();" />
</div>
<div id="map_canvas"></div>
</body>
The CSS (yes,verbose... I hate ugly)
#document_body {
margin:0;
border: 0;
padding: 10px;
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: bold;
color: #f0f9f9;
text-align: center;
text-shadow: 1px 1px 1px #000;
background:#1f1f1f;
}
#map_canvas, #rotation_control {
margin: 1px;
border:1px solid #000;
background:#444;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#map_canvas {
width: 100%;
height: 360px;
}
#rotation_control {
width: auto;
padding:5px;
}
#rotation_value {
margin: 1px;
border:1px solid #999;
width: 60px;
padding:2px;
font-weight: bold;
color: #00cc00;
text-align: center;
background:#111;
border-radius: 4px;
}
The Javascript (in plain vanilla flavor for understanding core concepts)
var map, arrow_marker, arrow_options;
var map_center = {lat:41.0, lng:-103.0};
var arrow_icon = {
path: 'M -1.1500216e-4,0 C 0.281648,0 0.547084,-0.13447 0.718801,-0.36481 l 17.093151,-22.89064 c 0.125766,-0.16746 0.188044,-0.36854 0.188044,-0.56899 0,-0.19797 -0.06107,-0.39532 -0.182601,-0.56215 -0.245484,-0.33555 -0.678404,-0.46068 -1.057513,-0.30629 l -11.318243,4.60303 0,-26.97635 C 5.441639,-47.58228 5.035926,-48 4.534681,-48 l -9.06959,0 c -0.501246,0 -0.906959,0.41772 -0.906959,0.9338 l 0,26.97635 -11.317637,-4.60303 c -0.379109,-0.15439 -0.812031,-0.0286 -1.057515,0.30629 -0.245483,0.33492 -0.244275,0.79809 0.0055,1.13114 L -0.718973,-0.36481 C -0.547255,-0.13509 -0.281818,0 -5.7002158e-5,0 Z',
strokeColor: 'black',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#fefe99',
fillOpacity: 1,
rotation: 0,
scale: 1.0
};
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: map_center,
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
});
arrow_options = {
position: map_center,
icon: arrow_icon,
clickable: false,
draggable: true,
crossOnDrag: true,
visible: true,
animation: 0,
title: 'I am a Draggable-Rotatable Marker!'
};
arrow_marker = new google.maps.Marker(arrow_options);
arrow_marker.setMap(map);
}
function setRotation(){
var heading = parseInt(document.getElementById('rotation_value').value);
if (isNaN(heading)) heading = 0;
if (heading < 0) heading = 359;
if (heading > 359) heading = 0;
arrow_icon.rotation = heading;
arrow_marker.setOptions({icon:arrow_icon});
document.getElementById('rotation_value').value = heading;
}
And the best yet, doing it this way assures the marker is a Google MVC object, giving it all the additional methods provided by the MVC object.
If you must have multi-colored images as your marker, then creating a .png sprite sheet with a rendition of the image at all the angles you want it to be shown, and then problematically select the correct image to use based on the computed bearing between the two points you are using. However,this would not be an SVG image, but a regular marker image.
Hope this helps in making some decisions regarding your map markers.
Nobody mentioned about using pre-rotated icons. Depending on your application, you could take one icon and rotate it +10 degrees, +20 degrees ... +350 degrees and instead of rotating marker itself, just assign different icon to it - one out of 36 if 10 degrees resolution is good enough. That's also very light on client's resources.
In the example below I generated 36 icons, every one of them is 10 degrees rotated. Their names are: icon0.png, icon10.png, icon20.png, ... icon340.png, icon350.png, icon360.png. The 0 and 360 are the very same icon (e.g symlink)
var rotation = 123 // degrees
var iconName = "icon" + (Math.round(rotation/10)*10).toString() + ".png"
var marker = new google.maps.Marker({
icon: iconName
})
I was able to solve this pretty easily but using the marker.icon.rotation option pointing to a custom symbol that uses the svg path syntax.
$scope.triangle = {
path: 'M 0 0 L -35 -100 L 35 -100 z',
fillColor: '#3884ff',
fillOpacity: 0.7,
scale: 1,
strokeColor: '#356cde',
rotation: 90,
strokeWeight: 1
};
If using angular-google-maps it is trivial to bind a ui control to change the triangle.rotation.
Like I did with this slider.
<slider ng-model="triangle.rotation" floor="0" ceiling="359" step="5" precsion="1"></slider>
But you could use a forum too.
here is my plunker http://plnkr.co/edit/x0egXI
This is how i implemented my image rotated, I considered the marker in the form of overlay and that overlay is position to the position, Below code will be added .
Without using any additional library it is rotated,And you need to workaround to add click events and mouse events for the overlay, not similar to marker click events.
With googleMap markers customization, there will be addition memory usage in the map.
This will also reduce the memory consumption of custom markers in your map.
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
div.htmlMarker {
color: red;
cursor: pointer;
}
</style>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
<script>
var overlay;
function initialize() {
var myLatLng = new google.maps.LatLng(40, -100);
var mapOptions = {
zoom: 10,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
function HTMLMarker(lat, lng, rotation) {
this.lat = lat;
this.lng = lng;
this.rotation = rotation;
this.pos = new google.maps.LatLng(lat, lng);
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function () {}
//Initilize your html element here
HTMLMarker.prototype.onAdd = function () {
div = document.createElement('DIV');
div.style.position='absolute';
div.style.transform='rotate('+this.rotation +'deg)';
div.style.MozTransform='rotate('+this.rotation +'deg)';
div.className = "htmlMarker";
//image source use your own image in src
div.innerHTML = '<img src="prudvi.png" alt="Mountain View" style="width:25px;height:22px">' ;
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
this.div=div;
}
HTMLMarker.prototype.draw = function () {
var overlayProjection = this.getProjection();
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
var panes = this.getPanes();
this.div.style.left = position.x + 'px';
this.div.style.top = position.y - 30 + 'px';
}
//Added 50 marker with random latlng location and random rotation,
for (i = 0; i < 50; i++) {
var PoslatLng = new google.maps.LatLng(myLatLng.lat() + Math.random() - 0.5, myLatLng.lng() + Math.random() - 0.5);
var htmlMarker = new HTMLMarker(myLatLng.lat() + Math.random() - 0.5,myLatLng.lng() + Math.random() - 0.5, Math.floor(Math.random() * 359));
htmlMarker.setMap(gmap);
google.maps.event.addListener(htmlMarker, 'click', function() {
console.log('clciked')
gmap.setZoom(8);
gmap.setCenter(htmlMarker.getPosition());
});
}
}
</script>
</html>
You could call the yourmarker.setIcon(canvas.toDataUrlOrSomeThig) every time the image changes. I don't see anything in the api reference for using the canvas element directly, except if you implement you own google.maps.OverlayView.
If you only want animation you could use a gif, and add the marker option optimized: false to it.
The easiest way may be to use the rotation property of google.maps.Symbol. Just set it as a property of your icon when creating or updating your marker:
new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 7,
rotation: 193
},
map: map
});
Plunker
The idea is to first draw the rotated marker image on a hidden canvas.
Say, you have a hidden canvas:
<canvas id="carCanvas" width="50" height="50" style="display:none"></canvas>
Now you can do this:
function updateCarMarker(i,lat, lng, icon = "img/carIcon.png") {
var latLong = new google.maps.LatLng(lat, lng);
if (!carMarkers[i]){
var carImage = new Image();
carImage.onload = ()=>{
drawMovedCar(i,latLong,carImage);
}
carImage.src=icon;
} else {
drawMovedCar(i,latLong,carMarkers[i].carImage);
}
}
function drawMovedCar(i,latLong,I){
let m=carMarkers[i];
let canvas = document.getElementById("carCanvas");
let C = canvas.getContext('2d');
if (m){
var distance = google.maps.geometry.spherical.computeDistanceBetween(
m.getPosition(), latLong);
var deg = (distance<2)?carMarkers[i].deg
:google.maps.geometry.spherical.computeHeading(m, latLong);
carMarkers[i].setMap(null);
} else {
var deg=0;
}
C.save();
C.clearRect(0, 0, canvas.width, canvas.height);
C.translate(canvas.width/2,canvas.height/2);
C.rotate(deg * Math.PI / 180);
C.scale(0.4,0.4);
C.drawImage(I,-I.width/2,-I.height/2,I.width,I.height);
C.restore();
if (!m){
m = new google.maps.Marker({
position: latLong,
map: map,
icon: canvas.toDataURL("image/png",1)
});
m.deg = deg;
m.carImage = I;
carMarkers[i]=m;
} else {
m.setIcon(canvas.toDataURL("image/png",1));
m.setPosition(latLong);
}
}
The above is my original code. I have left it intact so that you can see my other optimizations.
Using MarkerWithLabel Library, you can achieve that in such way:
var ico = document.createElement('img');
ico.src = 'ImageSource';
ico.setAttribute('style', 'transform:rotate('30deg);');
mapMarkers[0].labelContent = ico;
mapMarkers[0].label.draw();
Assuming you only use that image within Google Maps, you can do the following
bearing = 20
document.querySelectorAll('img[src="/images/imageName"]').forEach((node) => {
node.style['transform'] = `rotate(${bearing}deg)`
node.style['webkitTransform'] = `rotate(${bearing}deg)`
node.style['MozTransform'] = `rotate(${bearing}deg)`
node.style['msTransform'] = `rotate(${bearing}deg)`
node.style['OTransform'] = `rotate(${bearing}deg)`
})
This reaches down the dom tree and sets the transform for the marker icon to rotate the degrees you want. The image imageName should be facing North
Not to sure if the webkit, Moz, ms and O version are needed but hey 🤷🏽‍♂️ cant hurt
If you are using SVG, Then this is the best way to rotate it.
let marker_, svg_, size_ = 100, rotation_ = 50
// Get SVG
fetch('https://upload.wikimedia.org/wikipedia/commons/7/78/Space-shuttle.svg')
.then(response => response.text())
.then(text => {
svg_ = text;
svg_ = svg_
.replace(/^<\?(.+)\?>$/gm, '') // unsupported unnecessary line
// You can replace anything you want, but first of all check your svg code
.replace(/width.+\Wheight\S+/,
'width="{{width}}" height="{{height}}" transform="{{transform}}" ')
// Load Map
initMap()
})
function getIcon(rotation){
return {url:`data:image/svg+xml;charset=utf-8,
${encodeURIComponent(svg_
.replace('{{width}}', 100)
.replace('{{height}}', 100)
.replace('{{transform}}', `rotate(${rotation},0,0)`))}`,anchor: new google.maps.Point(50, 50),
origin: new google.maps.Point(0, 0)}
}
// Map
function initMap() {
const position = {lat: 36.720426, lng: -4.412573};
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 19,
center: position
})
marker_ = new google.maps.Marker({
position: position,
map: map,
icon: getIcon(rotation_)
})
}
// Change rotation
$input_ = document.querySelector('input')
$input_.value = rotation_
$input_.onchange = () => {
marker_.setIcon(getIcon(parseInt($input_.value))
)
}
* {
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100vh;
}
input {
position: fixed;
z-index: 1;
margin: 100px;
padding: 10px;
border-radius: 2px;
background-color: red;
border: none;
color: white;
font-family: 'Roboto';
width: 70px;
}
<script src="https://maps.google.com/maps/api/js"></script>
<input type="number" placeholder="rotation">
<div id="map"></div>
I have found an easy way to rotate the png image marker for the google marker. Create an custom marker overriding google.maps.OverlayView and rotate the image simply with css/inline style
export const createCustomMarker = ({ OverlayView = google.maps.OverlayView, ...args }) => {
class GoogleMarker extends OverlayView {
options: any = {};
div: any = null;
innerHtml: any = null;
constructor(options) {
super();
this.options = options;
this.setMap(options.map);
}
createDiv() {
const options = this.options;
this.div = document.createElement('div');
this.div.style.position = 'absolute';
this.setRotation(this.options.rotation);
if (options.icon) {
this.setInnerHtml(this.getInnerImageHtml(options));
}
}
getInnerImageHtml(options) {
const size = this.getSize(options);
const label = this.options.label;
const labelHtml = label ? `<span style="color:black;margin-left: -40px;width: 100px;text-align: center;display: block;font-weight:bold;">${label}</span>` : "";
return `<img style="height:${size.height}px;width:${size.width}px" id="${options.id || ''}" src="${options.icon}">${labelHtml}`;
}
addListeners() {
const self = this;
google.maps.event.addDomListener(this.div, 'click', event => {
google.maps.event.trigger(self, 'click');
});
this.div.onmouseenter = function () {
debugger
google.maps.event.trigger(self, 'onmouseenter');
}
this.div.onmouseover = function () {
google.maps.event.trigger(self, 'onmouseover');
}
this.div.onmouseleave = function () {
google.maps.event.trigger(self, 'onmouseleave');
}
this.div.onmouseout = function () {
google.maps.event.trigger(self, 'onmouseout');
}
}
appendDivToOverlay(appendDiv: any) {
const panes: google.maps.MapPanes = this.getPanes();
panes.floatPane.appendChild(appendDiv);
}
setRotation(degrees: number) {
if (this.div) {
this.div.style.transform = 'rotate(' + degrees + 'deg)';
}
this.options.rotation = degrees;
}
getRotation() {
return this.options.rotation;
}
setInnerHtml(html: string) {
this.innerHtml = html;
this.div.innerHTML = this.innerHtml;
}
private positionDiv(div: any, options: any) {
if (div != null) {
const point = this.getProjection().fromLatLngToDivPixel(options.latlng);
if (point) {
const size = this.getSize(options);
const anchor = options.anchor ? options.anchor : new google.maps.Point((size.width / 2), (size.height / 2))
const leftAnchor = anchor.x;
const topAnchor = anchor.y;
div.style.left = `${point.x - leftAnchor}px`;
div.style.top = `${point.y - topAnchor}px`;
}
}
}
private getSize(options) {
const size = options.size || { height: 52, width: 52 };
return size;
}
draw() {
if (!this.div) {
this.createDiv();
this.appendDivToOverlay(this.div);
this.addListeners();
}
this.positionDiv(this.div, this.options);
}
remove() {
if (this.div) {
this.div.parentNode.removeChild(this.div);
this.div = null;
}
}
setVisible(value: boolean) {
if (this.div) {
this.div.style["display"] = value ? "block" : "none";
}
}
getVisible() {
if (this.div) {
return this.div.style["display"] == "none";
}
return false;
}
setPosition(position) {
this.options.latlng = position;
this.infoOptions.latlng = position;
this.positionDiv(this.div, this.options);
}
getPosition() {
return this.options.latlng;
}
getDraggable() {
return false;
}
isHTML(html: string) {
return /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/.test(html);
}
}
return new GoogleMarker(args)
}
After creating this custom marker - Initialize the marker in the following way
import { createCarMarker } from "./marker.component"; // dynamic path to component
let marker = createCarMarker({
id: id, // will add id to the parent container div
latlng: new google.maps.LatLng(0, 0), // replace latitude-longitude with your values
map: this.map,
size: new google.maps.Size(52, 52), // replace the image size with your values
rotation: markerData.direction, // Provide values in degrees
icon: iconUrl, // Replace it with your image url
label: markerLabel // Provide marker label. Optional field
});
Now simply rotate the marker using the following method
marker.setRotation(180); // You just need to call only this method every-time the degrees changes.
To listen the changes on the marker.
google.maps.event.addDomListener(marker, 'click', function (event) {
});
google.maps.event.addListener(marker, 'onmouseenter', function (event) {
});
google.maps.event.addListener(marker, 'onmouseleave', function (event) {
});
google.maps.event.addListener(marker, 'onmouseover', function (event) {
});
google.maps.event.addListener(marker, 'onmouseout', function (event) {
});
You can customize the listeners or add new/update in the custom marker class according to your requirement.
var icon = {
path: aeroplanePath/image,
fillColor: '#0000FF',
fillOpacity: .6,
anchor: new google.maps.Point(0,0),
strokeWeight: 0,
scale: 1,
rotation: 180
}
var marker = new google.maps.Marker({
position: positions[k],
icon: icon,
draggable: true,
title: "BOING-707",
});

Categories

Resources