I am currently working on Google Maps API V3 over here
If you zoom between 21 to 23, there will be an image overlay on the map. The image takes too long to load and I have decided to break it into different tiles for easier loading. I am using Automatic Tile Cutter to cut the image into tiles.
I have problems with the script;
var OrgX = 31551; // the Google Maps X value of the tile at the top left corner of your Photoshop document
var OrgY = 50899; // the Google Maps Y value of the tile at the top left corner of your Photoshop document
First question How do you find the values of X and Y from the photoshop document?
Let say if I manage to solve the first question.
Second question Is the below code correct to display the tiles depending on the zoom level? Or am I missing any codes?
var BuildingsLayer = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://search.missouristate.edu/map/tilesets/baselayer/" + zoom + "_" + coord.x + "_" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true
});
map.overlayMapTypes.push(BuildingsLayer);
Instead of using Automatic Tile Cutter, I used and recommended MapTiler.
Not only it slices the image into tiles and it also generates out a javascript tiles script to use it.
However, the script is written in v2. You can edit the codes according:
v3 tiles script
var maptiler = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return zoom + "/" + coord.x + "/" + (Math.pow(2,zoom)-coord.y-1) + ".png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true
});
var map;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"));
map.setCenter(new google.maps.LatLng(36.07, -112.19));
map.setZoom(11);
map.setMapTypeId('satellite');
map.overlayMapTypes.insertAt(0, maptiler);
}
Credits
Related
how can i space the Collapsible tree nodes in circles going around the root node?Example of picture below.second image what i currently have now.
i know it has something to do with the X and Y position in this method.But i just can't figure out how.
original code i got it from Original code here
function update(source) {
// Assigns the x and y position for the nodes
var treeData = treemap(root);
// Compute the new tree layout.
var nodes = treeData.descendants(),
links = treeData.descendants().slice(1);
debugger
// Normalize for fixed-depth.
nodes.forEach(function (d) {
//i know i have to do something here
d.y = d.depth * 180;
});
// Transition to the proper position for the node
//then it will update the transform and translate
enter code here
nodeUpdate.transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + d.y + "," + d.x + ")";
});
solved.this is my outcome.
instead of using translate for my rotating.i use rotate class with transform.
I was following the Google-maps overlay example and have modified it to fit my needs. This is my new draw prototype for USGSOverlay:
USGSOverlay.prototype.draw = function()
{
//need to use projection to get image position from latLng to Px
var overlayProjection = this.getProjection();
var mapPos = new google.maps.LatLng(this.y_, this.x_);
var posInPx = overlayProjection.fromLatLngToDivPixel(mapPos);
//calculate the size in current zoom
//imageScaleFactor is a global variable placed on top in document
var dx = Math.abs(this.img_.naturalWidth * Math.pow(2, map.getZoom()) * imageScaleFactor);
var dy = (dx / this.img_.naturalWidth) * this.img_.naturalHeight;
// Resize the image's div to fit the indicated dimensions.
//places the image so that the given input (x_, y_) is in the center
var div = this.div_;
div.style.left = posInPx.x - dx / 2 + 'px';
div.style.top = posInPx.y - dy / 2 + 'px';
div.style.width = dx + 'px';
div.style.height = dy + 'px';
};
When I load the page for the first time my overlays would not appear until I translated the map for a long enough distance or zoomed in/out.
The problem is that I the operations this.img_.naturalWidth and this.img_.naturalHeight was taking too long and didn't give a value in time for the map to be initiated where I assume it runs the draw function for each overlay once.
My solution was to add a listener for the image in the onAdd prototype for USGSOverlay:
var thisOverlay = this;
//draw country when image is finished loading
this.img_.onload = function(e){
thisOverlay.draw();
}
This will call the draw function of the overlay once it's image is loaded.
The thisOverlay variable is needed because the object itself cannot be accessed from the onload function as far as I can tell.
I have a map drawn using leaflet. In that map I have drawn several markers at different locations. On clicking the marker I am creating a popup div that shows some message.
I have the code:
markers.on("click", function(d) {
div.html("This is Some info").style(
"left", (d3.event.pageX) + "px").style(
"top", (d3.event.pageY - 80) + "px");
}
So the div appears in the location where I clicked i.e. at the location of the marker.
Now if I drag the map the markers move along with the map but the div remains at the same location.
How can I change the style of div with drag event so that the div also moves along with marker?
I was trying the following code in the drag event method:
if(d.code==clickedcode)
{
console.log((map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px , "
+(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px");
div.style["left"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px";
div.style["top"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px";
}
But it still shows the same pixel position as previous time.
You could try using the map 'drag' event to calculate the shift and then apply that to your div location. Something along these lines...
var startCoords;
var startLat;
var startLng;
var movedCoords;
var shiftLat;
var shiftLng;
map.on('dragstart', function() {
startCoords = map.getCenter();
startLat = startCoords.lat;
startLng = startCoords.lng;
console.log("STARTED FROM: " + startLat + "," +startLng);
});
map.on('drag', function() {
movedCoords = map.getCenter();
shiftLat = startLat - movedCoords.lat;
shiftLng = startLng - movedCoords.lng;
console.log("Shifted: " + shiftLat + "," + shiftLng);
//apply shift to custom div here...
});
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 have made a resizeable custom overlay with an image and it works, you can see it here,
debug. In the upper right hand corner and lower left corner there are some red corner icons that you can drag and resize the image and overlay. The problem is that when you make the image smaller, it leaves behind remnants of the lager scale images.
I then added a function to remove the overlay before drawing the new one, straight out of the example, overlay.onRemove(); It worked, but as soon as you un click the marker it gives the error "parentnode: object is null or undefined", you can see it here debug2
If you view the source on them, the drag listener in on line 173 and calls the overlay = new USGSOverlay(bounds, srcImage, map, 'yes'); on line 194.
The function is on line 71. and looks for ifDrag and then deletes the previous overlay, I am baffled as to why it works but as soon as you un click the marker it throws the error and breaks the script.
It would be awesome if someone could provide me with a fix or workaround to the error. This is a very nice feature to have and am too close to give up. Thanks.
I believe your problem is in the draw function:
var div;
USGSOverlay.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Size the image's DIV to fit the indicated dimensions.
div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
}
Don't you want to remove the external declaration of var div and make the references within the draw function reference this.div? I believe that is your problem.
Shouldn't the last lines of draw be implemented like this:
//Remove this line:
//div = this.div_;
this.div_.style.left = sw.x + 'px';
this.div_.style.top = ne.y + 'px';
this.div_.style.width = (ne.x - sw.x) + 'px';
this.div_.style.height = (sw.y - ne.y) + 'px';
You also have similar code in the add function. I suggest that you make the code in add similar - just work directly with this.div_; it looks like you might be getting a reference mixed around.
We came to the conclusion that too many events were fired and killed the script, 'dragend' was the solution (Not perfect but works), works in all browsers and have set opacity at 50% to get the perfect alignment to the location. Appreciate your help. Cheers.