I`m trying to get a screenshot of a div with google map vector. Trying the same using map type raster this worked. But i need to do this with google map vector v=beta
with option useCors: true the map stay blank.
The markers appear
My code:
html2canvas(document.querySelector("#map-area"),{useCORS: true,allowTaint:true}).then(function(canvas) {
imgData = canvas.toDataURL('image/jpg');
doc.addImage(imgData,'JPEG', 0, 0, 1790, 1260,'','FAST');
doc.save('map.pdf');
});
Thanks
Adding this before anything this worked ok:
HTMLCanvasElement.prototype.getContext = function(origFn) {
return function(type, attribs) {
attribs = attribs || {};
attribs.preserveDrawingBuffer = true;
return origFn.call(this, type, attribs);
};
}(HTMLCanvasElement.prototype.getContext);
Related
I have profile photo of users stored in Firebase and I want to know how I can create a marker with the user's profile photo with an orange border.
I tried some code from the internet and it works but the measurements seem to be wrong and I don't know what I'm doing wrong.
The code I used:
fun setMarkerPhoto(user:User, location: Location){
var bitmapFinal : Bitmap?
if(hasProfilePhoto){
/*val options = RequestOptions()
options.centerCrop()*/
Glide.with(this)
.asBitmap()
/*.apply(options)*/
.centerCrop()
.load(user.image)
.into(object : CustomTarget<Bitmap>(){
override fun onResourceReady(resource: Bitmap, transition: com.bumptech.glide.request.transition.Transition<in Bitmap>?) {
bitmapFinal = createUserBitmapFinal(resource)
markerOptions
.position(LatLng(location!!.latitude, location!!.longitude))
.title("Current Location")
.snippet(address)
.icon(BitmapDescriptorFactory.fromBitmap(bitmapFinal))
mCurrentMarker = googleMap.addMarker(markerOptions)
}
override fun onLoadCleared(placeholder: Drawable?) {
TODO("Not yet implemented")
}
})
}else{
markerOptions
.position(LatLng(mLastLocation!!.latitude, mLastLocation!!.longitude))
.title("Current Location")
.snippet(address)
.icon(BitmapDescriptorFactory.fromBitmap(smallMarker))
mCurrentMarker = googleMap.addMarker(markerOptions)
}
}
private fun createUserBitmapFinal(bitmapInicial: Bitmap?): Bitmap? {
var result: Bitmap? = null
try {
result = Bitmap.createBitmap(150,150, Bitmap.Config.ARGB_8888) //change the size of the placeholder
result.eraseColor(Color.TRANSPARENT)
val canvas = Canvas(result)
val drawable: Drawable = resources.getDrawable(R.drawable.ic_pickup)
drawable.setBounds(0, 0, 150,150) //change the size of the placeholder, but you need to maintain the same proportion of the first line
drawable.draw(canvas)
val roundPaint = Paint(Paint.ANTI_ALIAS_FLAG)
val bitmapRect = RectF()
canvas.save()
if (bitmapInicial != null) {
val shader =
BitmapShader(bitmapInicial, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
val matrix = Matrix()
val scale: Float = 200 / bitmapInicial.width.toFloat() //reduce or augment here change the size of the original bitmap inside the placehoder.
// But you need to adjust the line bitmapRect with the same proportion
matrix.postTranslate(5f, 5f)
matrix.postScale(scale, scale)
roundPaint.shader = shader
shader.setLocalMatrix(matrix)
bitmapRect[10f, 10f, 104f+10f]=104f+10f //change here too to change the size
canvas.drawRoundRect(bitmapRect, 56f, 56f, roundPaint)
}
I didn't really understand how to perfectly fit the bitmap image inside the placeholder. My marker looked like this:
also the image wasn't being center cropped even though I mentioned that it should be in the code, where it says Glide.centerCrop()
Also, I'm using GeoFire to display markers of users in a specified radius of the user and for now I can display a simple marker but I want the marker to have that user's profile photo too! How can I do it?
GeoFire Code:
val geoQuery: GeoQuery = geoFire.queryAtLocation(GeoLocation(location.latitude, location.longitude), 0.5)
geoQuery.addGeoQueryEventListener(object : GeoQueryEventListener {
override fun onKeyEntered(key: String, location: GeoLocation) {
println(String.format("Key %s entered the search area at [%f,%f]", key, location.latitude, location.longitude))
Log.i("key entered","User found around you")
val aroundYou = LatLng(location.latitude, location.longitude)
if (markerList != null) {
for (marker in markerList) {
marker.remove()
}
}
otherMarkerOptions
.position(aroundYou)
.title("Current Location")
//.snippet(address)
.icon(BitmapDescriptorFactory.fromBitmap(smallMarker)) //This is a simple marker but i want it to have the user's profile photo
markerList.add(googleMap.addMarker(otherMarkerOptions))
//}
}
Thank you in advance
Edit:
In the line: val drawable: Drawable = resources.getDrawable(R.drawable.ic_pickup)
It's this png:
I want to insert the profile photo of the user on that drawable file and if the user doesn't have a profile photo then only the drawable photo will be visible.
You get the code to transform the bitmap from my code in another question in StrackOverflow. As I mentioned there, I can´t teste the code because i´m only working with flutter right now.
But looking ate your code I might try this:
Add this function:
fun dp(value: Float): Int {
return if (value == 0f) {
0
} else Math.ceil(resources.displayMetrics.density * value.toDouble()).toInt()
}
in your lines:
result = Bitmap.createBitmap(150,150, Bitmap.Config.ARGB_8888);
drawable.setBounds(0, 0, 150,150);
change to:
result = Bitmap.createBitmap(dp(62f), dp(76f), Bitmap.Config.ARGB_8888);
drawable.setBounds(0, 0, dp(150f), dp(150f)) ;
let me know the results.
I have been trying to figure out how to pan/zoom using onMouseDrag, and onMouseDown in paperjs.
The only reference I have seen has been in coffescript, and does not use the paperjs tools.
This took me longer than it should have to figure out.
var toolZoomIn = new paper.Tool();
toolZoomIn.onMouseDrag = function (event) {
var a = event.downPoint.subtract(event.point);
a = a.add(paper.view.center);
paper.view.center = a;
}
you can simplify Sam P's method some more:
var toolPan = new paper.Tool();
toolPan.onMouseDrag = function (event) {
var offset = event.downPoint - event.point;
paper.view.center = paper.view.center + offset;
};
the event object already has a variable with the start point called downPoint.
i have put together a quick sketch to test this.
Unfortunately you can't rely on event.downPoint to get the previous point while you're changing the view transform. You have to save it yourself in view coordinates (as pointed out here by Jürg Lehni, developer of Paper.js).
Here's a version that works (also in this sketch):
let oldPointViewCoords;
function onMouseDown(e) {
oldPointViewCoords = view.projectToView(e.point);
}
function onMouseDrag(e) {
const delta = e.point.subtract(view.viewToProject(oldPointViewCoords));
oldPointViewCoords = view.projectToView(e.point);
view.translate(delta);
}
view.translate(view.center);
new Path.Circle({radius: 100, fillColor: 'red'});
I have a created a bing map and i have got success in adding and remove the pushpins but after removing the pins if i zoom in/zoom out or drag the map, the removed pushpins appears again
Here is my code
var arr = new Array();
arr = $('div[id*=Contractor]');
$.each(arr, function (index, value) {
var v = $(value).find("div[id^='distance']").text().substr(10, $(value).find("div[id^='distance']").text().indexOf('km') - 10);
if (v > 50) {
i = value.id.substr(10);
$.each(contractorPushpinObjectArray, function (index, value) {
if (contractorPushpinObjectArray[index][0] == i) {
map.entities.remove(contractorPushpinObjectArray[index][1]);
cid.push(i);
}
});
}
});
How are you adding the pushpins to the map? If you are using some sort of clustering tool you will need to remove the pins from the clustering tool otherwise the next time the clustering algorithm runs it will read the pushpins.
I'm looking for a way to use framecloud type popup with my current setup. Unfortunately all my attempts have either not worked or will only work on the most recently placed maker.
In the course of trying to get it to work I have converted my original script from using Markers to using Vectors to placing the marker points (as I've seen that it's easier to customize vectors than markers.)
Now which ever one I can get to work I'll use, but after working on this for a few days I'm at my wits end and need a helping hand in the right direction.
My points are pulled from a google spreadsheet using tabletop.js. The feature is working how I wish it to, with the markers being placed on their respective layer based on a field I called 'type'.
While I have a feeling that might have been the source of my problem with the Markers type layer, I'm not sure how to fix it.
You can view the coding through these pages
(Links removed due to location change.)
Thanks for all help in advance.
I finally got it to work. For anyone in a similar situation here's my final code for the layers. I did change the names of the layers from what they are originally and blacked out the spreadsheet I used, but the changes should be noticeable.
//
//// Set 'Markers'
//
var iconMarker = {externalGraphic: 'http://www.openlayers.org/dev/img/marker.png', graphicHeight: 21, graphicWidth: 16};
var iconGeo = {externalGraphic: './images/fortress.jpg', graphicHeight: 25, graphicWidth: 25};
var iconAero = {externalGraphic: './images/aeropolae.jpg', graphicHeight: 25, graphicWidth: 25}; // Image is the creation of DriveByArtist: http://drivebyartist.deviantart.com/
var vector1 = new OpenLayers.Layer.Vector("1");
var vector2 = new OpenLayers.Layer.Vector("2");
var vector3 = new OpenLayers.Layer.Vector("3");
// Pulls map info from Spreadsheet
//*
Tabletop.init({
key: 'http://xxxxxxxxxx', //Spreadsheet URL goes here
callback: function(data, tabletop) {
var i,
dataLength = data.length;
for (i=0; i<dataLength; i++) { //following are variables from the spreadsheet
locName = data[i].name;
locLon = data[i].long;
locLat = data[i].lat;
locInfo = data[i].info;
locType = data[i].type; // Contains the following string in the cell, which provides a pre-determined output based on provided information in the spreadsheet: =ARRAYFORMULA("<h2>"&B2:B&"</h2><b>"&G2:G&"</b><br /> "&C2:C&", "&D2:D&"<br />"&E2:E&if(ISTEXT(F2:F),"<br /><a target='_blank' href='"&F2:F&"'>Read More...</a>",""))
locLonLat= new OpenLayers.Geometry.Point(locLon, locLat);
switch(locType)
{
case "Geopolae":
feature = new OpenLayers.Feature.Vector(
locLonLat,
{description:locInfo},
iconGeo);
vector1.addFeatures(feature);
break;
case "POI":
feature = new OpenLayers.Feature.Vector(
locLonLat,
{description:locInfo},
iconMarker);
vector2.addFeatures(feature);
break;
case "Aeropolae":
feature = new OpenLayers.Feature.Vector(
locLonLat,
{description:locInfo},
iconAero);
vector3.addFeatures(feature);
break;
}
}
},
simpleSheet: true
});
map.addLayers([vector1, vector2, vector3]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
//Add a selector control to the vectorLayer with popup functions
var controls = {
selector: new OpenLayers.Control.SelectFeature(Array(vector1, vector2, vector3), { onSelect: createPopup, onUnselect: destroyPopup })
};
function createPopup(feature) {
feature.popup = new OpenLayers.Popup.FramedCloud("pop",
feature.geometry.getBounds().getCenterLonLat(),
null,
'<div class="markerContent">'+feature.attributes.description+'</div>',
null,
true,
function() { controls['selector'].unselectAll(); }
);
feature.popup.autoSize = true;
feature.popup.minSize = new OpenLayers.Size(400,100);
feature.popup.maxSize = new OpenLayers.Size(400,800);
feature.popup.fixedRelativePosition = true;
feature.popup.overflow ="auto";
//feature.popup.closeOnMove = true;
map.addPopup(feature.popup);
}
function destroyPopup(feature) {
feature.popup.destroy();
feature.popup = null;
}
map.addControl(controls['selector']);
controls['selector'].activate();
}
this is the first time i use OpenLayers and i don't understand what i'm doing wrong.
I try to display a simple point parsed from GeoJSON. The data seems to be parsed correctly (i checked with the console) but whatever point i give, it always displays at a position i guess to be LonLat(0,0) on my vector layer.
What am i doing wrong ?
var map, baseLayer, placesLayer, geojsonParser ;
// data below have been simplified and reformated to enhance readability
var geojsonData =
{
"type":"Feature",
"geometry":
{
"type":"Point",
"coordinates":[-4.0280599594116,5.3411102294922]
},
"properties":
{
"id":273,
"name":"ABIDJAN"
}
};
$(document).ready(function(){
map = new OpenLayers.Map('map');
baseLayer = new OpenLayers.Layer.OSM();
placesLayer = new OpenLayers.Layer.Vector();
geojsonParser = new OpenLayers.Format.GeoJSON();
placesLayer.addFeatures(geojsonParser.read(geojsonData));
map.addLayers([baseLayer,placesLayer]);
map.setCenter(
new OpenLayers.LonLat(-4, 5.3).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 5
);
}); // document ready
This is the right solution:
var geojson_format = new OpenLayers.Format.GeoJSON({
'internalProjection': new OpenLayers.Projection("EPSG:900913"),
'externalProjection': new OpenLayers.Projection("EPSG:4326")
});
source: https://gist.github.com/1118357
Hi it sounds like you need to transform the long/lat coordinaites into the correct display coordinates:
You can either declare the projections and then transform your geometry feature:
var projWGS84 = new OpenLayers.Projection("EPSG:4326");
var proj900913 = new OpenLayers.Projection("EPSG:900913");
feature.geometry.transform(projWGS84, proj900913);
Or get the map projection "on the fly" more like this:
var projWGS84 = new OpenLayers.Projection("EPSG:4326");
feature.geometry.transform(projWGS84, map.getProjectionObject());
Obviously if you are using a different input projection from me change "ESPG:4326" to whatever you require.
HTH
C
EDIT:
In your case you would need to write something like:
geojsonData.geometry.transform(projWGS84, map.getProjectionObject());