I'm interested in adding a textbox (and button) to the Default navigation bar in Bing Maps v7.
My intent is to add a place-name geocoder to help the user quickly zoom to a specific area on the map. (This is a service provided by Bing Maps API, I just need help adding the box to the control.) I can, but don't have to, use jQuery.
The website http://pietschsoft.com/post/2010/12/18/Bing-Maps-Ajax-7-Add-Custom-Navigation-Bar-Buttons-using-jQuery.aspx actually has some really great sample code showing how to add a button to the bar, though I can't seem to get a textbox to work properly. My suspicion is that Bing Maps is hijacking all of my key-presses to use for panning, etc., but I'm not positive.
Has anybody had any luck in doing this?
Thanks!
I solved the problem by putting an another div with the same background color and height, floating left at an x-offset of the width of the original navbar. The keypresses were being hijacked - it seems they've stolen all keyboard input for any elements that exist within the "Microsoft.Map" div. My div is one level higher up.
Here's how it turned out:
And if anyone's interested, the default height and color for the Bing Maps v7 navbar is 26px, #FAF7F5.
Related
On this link is a very much draft map with photo popups at the orange dots.
https://www.victoriasforestryheritage.org.au/maps/forestlocations/locationtest3/index.html#7/-36.719/146.133
The map is produced from QGIS and with the qgis2web plug in using the Leaflet option.
https://www.qgis.org/en/site/
https://qgis2web-docstests.readthedocs.io/en/testing/
https://leafletjs.com/
The popup should work on hover, which it does. But on first hover the bounding box, if that is the right term, does not expand to surround the photo. With a mouse click it does surround the picture.
Obviously I would like this to come together at hover rather than the process requiring a mouse click after hover.
I have been trying to solve this on the basis that it may be a z-index issue in the leaflet.css file but to no effect. I also thought it may be a maxWidth maxHeight issue but no joy there either.
I obviously need some assistance because my coding knowledge is limited with css and almost non-existent with javascript.
The coding package for the map is available here:
https://drive.google.com/drive/folders/1teRbeTRYjBJzaxNeGoi-90wfiFhO-B8e?usp=sharing
and the leaflet.css file with z-index etc is included.
Any advice that points me in the right direction would be appreciated.
Richard
I'm using a googlemap API.
And it always worked fine.
But now I am scaling the page in the website with the googleapi.
And it doesn't show the info near the marker anymore.
When I remove the scaling, it works like before.
Somebody who can help me?
The link to the script:
In the scaling, the mouse events doesn't work.
So I had to remove the 'click' function.
And now it shows the info again.
Another option could be to make a standalone webpage.
I am using Gmap on my website and I notice that i sets position:relative on the #map. How do I change this? I don't want any positioning on the #map div. I looked over the gmaps.js and couldn't find it.
Another problem is how to make the gmap load in satellite mode by default instead of map?
Also can I get rid of all the other things I get by default - zoomer, arrows, text at the bottom right etc. I just want a clean map in satellite mode.
I am trying to build an example to highlight multiple image map areas on an html page for the iPad. The idea is similar to the magnifier feature that you notice when you tap and hold the mobile safari address bar. You can pan the magnifier around to go to a particular character. I am trying to leverage the same user experience to highlight image map "poly" areas. When I pan the magnifying glass, I want to scroll through the areas by highlighting them and making them active.
I am thinking of using the Jquery Maphighlight plugin alongwith a CSS/JS magnifier sample
http://persistent.info/files/20040508.magnifier/
http://davidlynch.org/projects/maphilight/docs/
The place I'm stuck is the actual scrolling between the areas and highlighting them automatically.
I was wondering if anyone has done something similar to what I'm trying to achieve.
Cheers!
Sameer
I couldn't quite conceptualise what you were wanting, but this may help in any case.
use the pseudo class :active in your css and in the tag add
In this demo I've simply used CSS transform to simulate the zooming, but it could be replaced with whatever you want. I think you will find a pure css option faster then any javascript.
http://jsfiddle.net/thurstanh/QEudm/5/
<body ontouchstart="">
css
img:active {
-webkit-transform:scale(2,2);
}
I have the following problem;
I have a circle (square div made round with css3) where I want to put a clickable Google Maps map in it. So what I did is;
load the Google Maps element in my page
give the div where Google Maps is loaded in a mask
-webkit-mask-image: url(../images/maps_mask.png);
-webkit-mask-repeat: no-repeat;
looks great! but when i click in the corners (which are hided because of the mask) I can still drag the Google Maps map around !
And I don't want this!
Is there a simple solution for this?
kind regards,
Carl
You could try to catch all mouse-events that land onto the google map, calculate (by position) if the hit is outside of the visible area and cancel them if they do.