The goal
I have to add a PNG overlay over an open street map. The PNG is a drawn road and I need to possisionate it over the real road.
What I have now
I have my PNG draw and 2 coordinates to place it over my map. The bottom left corner and top right corner.
What I found
I already found the software MapTiler which can display an image and the map side by side or one over the other and place some point to possisionate it.
The problem is that it generates a folder that contains different splitted image and data. Is there a way with MapTiler to generate the png with the coordinate ?
Is there any other software that can do this ?
Its not clear on why you'd use MapTiler. Less is more. Keep it simple, make it easy. I did the same thing, but instead I played around with transparency to ensure I was able to align things up. Obviously, I'd do the line up by adjusting the lat/lon numbers in the code. It's very precise and easy to do.
final output:
and here are some code snippets:
// Overlay a map of Bootleg Canyon
// Constructs a rectangle from the points at its south-west and north-east corners.
var BootlegCanyonimageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(35.9691, -114.8824), // lower left
new google.maps.LatLng(36.01217, -114.8468)); // upper right
var BootlegCanyonMap = new google.maps.GroundOverlay(
"images/bcmap.png",
BootlegCanyonimageBounds);
BootlegCanyonMap.setMap(map);
BootlegCanyonMap.setOpacity(0.75);
Related
We have a web application where we let the users draw SVG shapes on top of the Autodesk Viewer. We can translate the on-screen coordinates to the drawing using the worldToClient and the clientToWorld functions and it works beautifully, the shapes scale and move around with the drawing.
We also let the users update update the drawing by uploading new versions of it, and this has turned into a problem where the center coordinate (0,0) will change when the drawing has changed. That means that the SVG shapes will have the wrong positions when used with the new version of the drawing. It seems to me like somewhere in the translation the original positions of the .dwg files are ignored and a new center coordinate is computed from the content.
Our current workaround is for the users to draw a square frame around the drawings that they wish to use in this way. If all changes happen within that square the center will not move with new versions.
Does anyone have any thoughts, ideas, or experiences on how to solve this without the users needing to edit the drawings?
When using viewer.clientToWorld and viewer.worldToClient with 2D drawings, the "world" typically means page dimensions. In your case, the two DXF files you provided had the same page dimensions, and the content in each DXF file was scaled to fit the entire page. That's why the "world" coordinates between the two DXF files didn't match.
Luckily, when converting DXF files, the Forge Model Derivative service also exports the "source to logical" transformation which I believe defines the conversion from the original coordinates to the page coordinates. When you compute the inverse of that transformation, you should be able to convert from page coordinates back to the source coordinates, and those are the ones you should store with your markups. The conversion into the source coordinates might look something like this:
const res = viewer.clientToWorld(ev.clientX, ev.clientY);
if (res && res.point) {
console.log('page coords', res.point);
const sourceToLogicalXform = viewer.model.getData().metadata?.page_dimensions?.source_to_logical_xform;
if (sourceToLogicalXform) {
const sourceToLogical = new THREE.Matrix4().fromArray(sourceToLogicalXform).transpose();
const logicalToSource = new THREE.Matrix4().getInverse(sourceToLogical);
console.log('source coords', res.point.clone().applyMatrix4(logicalToSource));
}
}
I need to select an rectangular area on a map and identify markers that fall within that area.
Ideally, rectangle should be draggable and resizeable.
I am not too particular about the mapping and Google or Mapbox or Leaflet would all work just fine.
I found location-filter for Leaflet (https://github.com/kajic/leaflet-locationfilter/), which does seem to do the job. However, I couldn't find simple example code that shows how to use it. It has been used on tripcode.com but it is hard to make anything out of what is going on.
Does anyone have any experience with location-filter? If so, can you please point me to simple example of how to use it?
Are there similar examples for other mapping services particularly google maps?
Thanks.
For my bbox page I've snatched two files: SimpleShape, Rectangle from Leaflet.draw plugin and fixed them for better usability. The code for the rectangle is simple:
var rect = L.rectangle([[59.9, 29.9], [60.1, 30.1]]);
map.addLayer(rect);
rect.editing.enable();
rect.on('edit', function() { console.log(rect.getBounds().getBBoxString()); });
For advanced things like centering the rectangle on screen, see source code for the page.
When you are drawing the markers onto the map you will need to add them to some kind of an array which will contain the lat/lng pair of each marker.
You can use Leaflet.draw to draw the rectangle and modify it to return top left and bottom right coordinates on mouse up. On mouse up you can go over the entire list and which elements fit inside that bounding box.
This solution is just an example, there are many ways you can do this.
I'd like to drag an object into my Google Map (API V3) from outside the map.
After some research, I found this very helpful post and I tried to adapt it to my project.
The main idea is to drag a .png image on the map and when the mouse button is down, get the actual coordinates and place a marker at that lat / lng.
But I noticed there is a difference between the point you drag your image and the point where your marker is placed. The difference is around 10 / 15 pixels on the sample linked above, regardless the zoom level. At max zoom, it's not very important, but the more you unzoom, the more the gap is important.
Illustration of the gap :
On my website, I'm trying to drag the green marker from outside the map to the South of Leman Lake, near to Geneva : (we are just BEFORE the mouse up, this is still my .png image)
And when I mouse up, the "real" marker is put here :
(we are at 100 kms / 60 miles of the wanted place...)
So, why such a gap ? In the sample I linked above, the gap is less important, but it also exists. There are no error in my browser's console, and it doesn't seem to be a tricky CSS problem.
Do someone knows how to correct this problem ?
Thank you
The calculation of the marker-position is not exact.
the offset of the map also must be used inside the calculation(when the map is not placed at the top left corner of the page)
the anchor of the marker by default is the bottom-center , but the script simply takes the position provided via the event-argument, what may give different results, depending on the point inside the image where you grip it.
Fixed function:
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e,ui) {
var mOffset=$($map.getDiv()).offset();
var point=new google.maps.Point(
ui.offset.left-mOffset.left+(ui.helper.width()/2),
ui.offset.top-mOffset.top+(ui.helper.height())
);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
placeMarker(ll);
}
});
});
I am trying achieve a map like the above image using google map. I made the map grayscale by giving saturation to -100 in StyledMapType object and drawn a radius around the marker using Circle object. Now the whole map is grayscle as i cannot set another saturation level inside the circle. Is there any way to achieve this ?
Another idea is to create second map, style it in another way via StyledMapType, make it absolutely positioned, and put it in front of first grayscaled map.
You can make it look round using -webkit-mask like described here
You should also synchronize events between maps, so that they would coincide, i.e. centered to the same position and always have same zoom level.
You need also to create some kind of blocker to avoid recursive calls
var block = false;
google.maps.event.addListener (thismap, 'center_changed', function(event) {
if (block) return;
block = true;
othermap.setCenter(thisMap.getCenter());
block=false;
});
The same should be done for 'center_changed' (to control maps centering) and for 'zoom_changed' (control maps zoom), for both maps
Here I've set up an example
If you will need to create more than one map that way, you'll need to do more work to make them stick to necessary points
As far as I am aware there is no way to accomplish this directly within the API. I have had to achieve a similar effect in the past and the way that I went about it was to create a 'donut' rather than a circle.
Effectively the idea is to create a large shape which excludes a circular area at it's center. This way you can set the opacity on the polygon fairly low in order to highlight the 'area of interest' in this case the central circle.
This is perhaps a good starting point: http://www.geocodezip.com/v3_polygon_example_donut.html
Though obviously in your case your going to want to alter the colors. Also be aware that the size is fixed so unless you limit the map bounds users will be able to zoom out far enough to see the edges (thus ruining the illusion), and polygons distort towards the poles (pesky spherical earth).
Hope this helps.
I'm having difficulty drawing lines on top of an uploaded "map.gif" image.
Basically I've upload a small outline map and use the "area" function to create defined areas (cities, roads, etc). When I click on a city a snall pop up gets displayed with the word "hey, you've just click on Dallas" (or where ever). All that works just fine.
My problem is that my map is actually just a blank outline with no actual cities or roads drawn on it.
Therefore I tried using the "canvas" function to draw the cities (circles) and roads (lines).
The only problem is that they appear below the map rather than on top of it.
Any ideas as to how I can get the lines to appear on the map?
Many thanks,
Pete
You might just have to try playing with the CSS z-index values of the image and canvas.
Do make sure you set the canvas to be transparent.
An other possibility is to replace the image with the canvas (or just load the image in the canvas to begin with).
For some hints on how to use images with canvas take a look here.
I would load the gif directly in the canvas memory, and then do all the rest inside the canvas itself.
The gif is not animated, right?
Some reference about loading: https://developer.mozilla.org/en/Canvas_tutorial/Using_images