function highlightmarker(marker_id) {
//console.log("Highlight marker id: "+marker_id);
for (var i=0; i<markers.length; i++) {
if (markers[i].id == marker_id) {
map_markers[i].setAnimation(google.maps.Animation.BOUNCE);
}
}
}
This makes my map markers bounce up and down but I want them to grow instead.
I tried replacing the last line with this but it didn't work:
var img_height = 40;
var img_width = 40;
How do I make highlighted Google Map markers grow?
You could use a Icon (or a MarkerImage that's still supported but deprecated in favor of Icon) and use a the common marker image in it and set the appropriate size/scale you desire, for instance, assuming markers[i] points to a valid marker
var image = {
url: " http://www.google.com/mapfiles/marker.png",
size: new google.maps.Size(50, 50),
origin: null,
anchor: null,
scaledSize: new google.maps.Size(50, 50)
};
marker[i].setIcon(image);
for a more complete example I created a jsFiddle that sets the icon upon marker creation, http://jsfiddle.net/68gx9/
instead of
map_markers[i].setAnimation(google.maps.Animation.BOUNCE);
replace marker image with a new bigger one..
map_markers[i].setIcon(yourImageUrl);
Related
My Google map uses a custom Marker pin loaded from a sprite sheet, everything works as expected for 1x, 2x, and 3x displays expect #2x, and #3x the image shows up as twice of three times the size of the original image.
If I try and scale it back to to the 1x dimensions when displaying at #2x and #3x the marker shows up without the image.
Googleing around suggests that I am doing everything right, Icon configuration is based on the documentation.
Is anyone able to spot what might be wrong with my scaledImage configuration?
if(devicePixelRatio > 1) {
pinImage['scaledSize'] = new google.maps.Size(15, 36);
}
Code extract from JavaScript:
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Retina support
var requireImagePrefix = "";
var devicePixelRatio = (window.devicePixelRatio===undefined?1:window.devicePixelRatio);
if(devicePixelRatio == 2) {
requireImagePrefix = "#2x";
}
else if(devicePixelRatio == 3) {
requireImagePrefix = "#3x";
}
// Image for the marker
var pinImage = {
url: "/assets/sprite" + requireImagePrefix + ".png",
size: new google.maps.Size(15*devicePixelRatio, 36*devicePixelRatio),
origin: new google.maps.Point(430*devicePixelRatio, 20*devicePixelRatio),
};
if(devicePixelRatio > 1) {
pinImage['scaledSize'] = new google.maps.Size(15, 36);
}
var officeMarker = new google.maps.Marker({
position: hqLocation,
map: map,
title: "Anomaly HQ",
icon: pinImage,
optimized: false
});
Thanks very much for your time.
My error in the above are:
The scaledSize parameter is meant to be the dimensions of the 1x sprite
We don't need to multiply the size and origin parameters by the aspect ratio
I have posted the updated solution as a Git oh Github
I need to select multiple markers in a map. Something like this: Box/Rectangle Draw Selection in Google Maps but with Leaflet and OSM.
I think it could be done by modifying the zoom box that appears when you shift click and drag in an OSM map, but I don't know how to do it.
Edit:
I rewrote the _onMouseUp function, as L. Sanna suggested and ended up with something like this:
_onMouseUp: function (e) {
this._finish();
var map = this._map,
layerPoint = map.mouseEventToLayerPoint(e);
if (this._startLayerPoint.equals(layerPoint)) { return; }
var bounds = new L.LatLngBounds(
map.layerPointToLatLng(this._startLayerPoint),
map.layerPointToLatLng(layerPoint));
var t=0;
var selected = new Array();
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
pt = new L.LatLng(a[0], a[1]);
if (bounds.contains(pt) == true) {
selected[t] = a[2];
t++;
}
}
alert(selected.join('\n'))
},
I think it could be easy modificating the zoom box that appears when
you shift clic and drag in an osm map, but I don't know how to do it
Good idea. The zoom Box is actually a functionality of leaflet.
Here is the code.
Just rewrite the _onMouseUp function to fit your needs.
Have you tried something like this?
markers is an array of L.latLng() coordinates
map.on("boxzoomend", function(e) {
for (var i = 0; i < markers.length; i++) {
if (e.boxZoomBounds.contains(markers[i].getLatLng())) {
console.log(markers[i]);
}
}
});
Not enough points to comment, but in order to override the _onMouseUp function like OP posted in their edit, the leaflet tutorial gives a good explanation. Additionally, this post was very helpful and walks you through every step.
A bit late to the party but it's also possible to achieve this using the leaflet-editable plugin.
// start drawing a rectangle
function startSelection() {
const rect = new L.Draw.Rectangle(this.map);
rect.enable();
this.map.on('draw:created', (e) => {
// the rectangle will not be added to the map unless you
// explicitly add it as a layer
// get the bounds of the rect and check if your points
// are contained in it
});
}
Benefits of using this method
Allow selection with any shape (polygon, circle, path, etc.)
Allow selection using a button/programmatically (does not require holding down the shift key, which may be unknown to some users).
Does not change the zoom box functionality
Recently I started working on HTML5 Canvas, I'm new to it.
I've a problem as follows:
I'm loading a Canvas with Body Chart Image (Predefined Image) and on that User will Draw some lines, shapes, etc.
After that I'll generate an image object as follows
var canvas = document.getElementById("MyCanvas");
var dataURL = canvas.toDataURL();
var image = new Image();
image.src = dataURL;
But, Here it generates only those elements which are drawn by users (lines, shapes) as PNG Image. It won't take that Predefined canvas background Image.
I need to generate a PNG image which should include both the Canvas background Image as well as User entered drawing elements.
How to do this?
Try to actually draw you image onto your canvas, utilizing these functions:
var canvas = document.getElementById("MyCanvas");
var img = new Image();
img.src = 'pathToYourImageHere';
canvas.drawImage(img,0,0); /* 0,0 is x and y from the top left */
When you now try to save it, it should also save your background image.
EDIT:
In response to your comment:
You can circument your layering problem by using two different canvases. One for the image, and one for your drawing. Then layer them on top of each other using absolute positioning.
You can read more here: Save many canvas element as image
EDIT2:
But actually you shouldn't have a layering problem, since the following code will first draw the image and then draw the arc, and the layering will be fine:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "somePathToAnImage";
context.drawImage(imageObj, 50, 50);
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "red";
context.stroke();
Even though the layering is fine, you will be better of by using two canvases, in case you would like to only save the drawing, without the background. You can always save both into a new canvas and save that, when you only use one canvas you'll have a hard time separating the drawing from the background.
This is because the image needs time to load, you have to use the onload function.
imgObj.onload = function() { context.drawImage(imageObj, 50, 50); imgLoaded = true;}
if (imgLoaded) { /*you draw shapes here */ }
I'm using Google maps api v3. In the middle of the map there is a (custom) flag marker with large transparent areas around the flag body. Under the flag icon there are another markers that are inaccessible because of dead transparent areas. Is there any way to set flag marker to be click-through? I cant find solution.
Yes, it is possible the Marker class has a shape property that takes a MarkerShape object. This describes the clickable region for the Marker.
Here is Google's Example. They have a custom flag image and adjusted the shape so that only the rectangular flag section is clickable. With the MarkerShape object you can draw a Circle, Retangle, or Polygon shape area.
Google example code segment:
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
Yes, set the clickable property to false. for example:
const newMarker = new google.maps.Marker(
position: {
lat: 10,
lng: -66
},
clickable: false // <------
)
Does Flot have an option that can be set to give the chart a title? I'm not seeing one for the overall chart, just for the axes.
But I might have missed something.
I do not think this option exists. It is pretty easy, though, to title the plot using regular HTML. Just wrap a div around your "placeholder" div and add the title text to that.
after drawing flot chart (plot function) fill canvas with text (jsFiddle). Advantage of my solution is that you can save chart as image containing title on it.
example:
var c=document.getElementsByTagName("canvas")[0];
var canvas=c.getContext("2d");
var cx = c.width / 2;
var text="Flot chart title";
canvas.font="bold 20px sans-serif";
canvas.textAlign = 'center';
canvas.fillText(text,cx,35);
You can use hooks for that. For instance use the overlay hook, and implement your overlay functionality in a separate OverlayHandler
Here is an example, where the chartElement, chartDataand chartOptions are your HTML element and flot data and flot options, respectively.:
var plotOverlayHandler = function(plot, cvs) {
if(!plot) { return; }
var cvsWidth = plot.width() / 2;
var text = 'Flot chart-title!';
cvs.font = "bold 16px Open Sans";
cvs.fillStyle = "#666666";
cvs.textAlign = 'center';
cvs.fillText(text, cvsWidth, 30);
return cvs;
};
var plot = $.plot(chartElement, chartData, chartOptions);
plot.hooks.drawOverlay.push( plotOverlayHandler );
When exporting the canvas via the native toDataURL method, simply apply the OverlayHandler first. This allows for greater flexibility.
var elCanvas = $('canvas.flot-base').first();
var canvas = plotCanvasOverlay(elCanvas, elCanvas.get(0).getContext('2d'))
var dataUrl = canvas.toDataURL('image/png');
Pioja's answer is indeed a great one. His jsFiddle shows the full details. It is important to have the following included in your options:
canvas: true,
grid: {
margin: { top:50 }
}
This will then insert a nice chart title which can be included in the image if you export it.
Building on pioja's answer, the title can be set directly after the plot has been made with:
var plot = $.plot($("#"+PlotPlaceholder), data, options);
By using the getCanvas function:
var c = plot.getCanvas();
Now, just follow pioja's code to get:
var canvas=c.getContext("2d");
var cx = c.width / 2;
var text="Flot chart title";
canvas.font="bold 20px sans-serif";
canvas.textAlign = 'center';
canvas.fillText(text,cx,35);