I have the following code which is a custom icon on Google Maps V3. I want to rotate it using the jQuery.Rotate plugin.
var image = new google.maps.MarkerImage(
"markers/test.png",
new google.maps.Size(52, 52), // size
new google.maps.Point(0, 0), // origin
new google.maps.Point(20, 0) // anchor
);
marker = new google.maps.Marker(
{
map: map,
draggable: false,
position: markerData[i].latLng,
visible: true,
icon: image,
optimized: false
});
The problem is jQuery.Rotate is wanting the DOM id to identify the element to rotate.. Markerimage doesn't have one and I can't specify it.
Eg.
<img src="img" id="image">
$("#image").rotate(15);
Can anyone show me some sample code that will allow me to either assign an id to the MarkerImage so that jQuery.Rotate can use it eg. #image assuming the id is id="image", or is there another way of telling jQuery.Rotate to use the MarkerImage rather than point to a DOM element?
Any help would be appreciated.. If I can't find an answer to this I'll need to create 360 versions of the same icon for every icon I use of which there are many. I prefer to use this particular plugin though. Hopefully there's an easy answer.
I can't provide an 'answer', just a hint and observation.
Assuming that your map is a DOM object called 'map', have a look at the DOM object map.l.innerContainer.outerHtml. (thats a lower case "l" - map.l)
In outerHtml, amongst many other divs, you should be able to find a div that contains the img file for your icon.
I've wanted to do the same thing as you, rotate icons on the fly, but I haven't yet found the time to see if I can organise a way to put an id on these divs to facilitate using jquery to rotate them. The divs are created by the api.
There are some DOM mutation events (like DOMNodeInsertedIntoDocument) described in the literature but evidently their implementation is unreliable / uneven and it sounds like they have been removed from the W3C spec. I haven't tried any of these yet so can't comment from personal experience.
In my case I just decided to create icon files for each cardinal direction, N NNE NE ENE etc. For my application that seems to get the icons aligned well enough to look ok.
If you succeed in your quest please share your solution here for others.
Related
I have a mapbox layer (created in studio) with different icons based on data conditions. Now I'm adding a toolbar to show and hide various icons based on the filter. This works great, but I want to adjust the transition to make it a bit smoother.
I've read some posts about icon-opacity-transition, but it didn't work for me.
map.setPaintProperty('layer-name', 'icon-opacity-transition', { "duration": 300 } );
results in cannot read property 'value' of undefined
Is it possible to change the icon-opacity transition or is it at least possible to show and hide a layer with some custom transition values?
Not sure if this will help you still, but it was very important for our project. Its a 'global map property' called 'fadeDuration'...
new mapboxgl.Map({
fadeDuration: 0,
...
})
I'm not sure about accessing by layer though...
https://github.com/mapbox/mapbox-gl-js/issues/6519#issuecomment-390001993
I'm using OpenSeaDragon for the first time and I'm trying to display to the console zoom level and Viewport center.
Now I found out how to display coordinates on click (Openseadragon image cordinates), but I'm having trouble w/ zoom and center. From looking at the API doc, I'm thinking that I need to use getCenter and getZoom of method Viewport, but syntactically I'm lost. Any help would be much appreciated. Thanks!
So after some help, here's the code I ended up using to get click coordinates as well as zoom and center (in image coordinates):
viewer.addHandler('canvas-click', function(target, info) {
var viewportPoint = viewer.viewport.pointFromPixel(info.position);
var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint.x, viewportPoint.y);
console.log(imagePoint.x, imagePoint.y);
console.log(viewer.viewport.getZoom());
var viewportCenter = viewer.viewport.getCenter();
var imageCenter = viewer.viewport.viewportToImageCoordinates(viewportCenter.x, viewportCenter.y);
console.log(imageCenter.x, imageCenter.y);
});
You're on the right track. If your viewer is called viewer, you would do viewer.viewport.getZoom() for instance.
The viewport has a number of other coordinate conversion methods:
http://openseadragon.github.io/docs/symbols/OpenSeadragon.Viewport.html
...and there's also a plugin that provides even more, if you need:
https://github.com/msalsbery/openseadragonimaginghelper
I am experiencing a strange positioning issue when placing an overlay in my home city (Syracuse, NY). First the test map:
http://hotsdg.com/~downtown/map.html
This map uses the example code to place my image over newark. No problem here. The image is skewed and distorted of course, by placement occurs as expected.
The second map:
http://hotsdg.com/~downtown/map_two.html
This map uses the example code with coords adjusted to place the image over Syracuse, NY. At first glance the overlay appears to be missing. However, upon inspection I discovered that the element which is used for the overlay has it's top set to 94px (at the initial zoom), instead of 0px. Adjusting this manually brings the image into view.
Any thoughts as to what might be happening here, or more importantly, why it's happening?
A google.maps.LatLngBounds takes SW, NE LatLngs for the constructor.
Your working map does that (SW, NE):
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216, -74.213393),
new google.maps.LatLng(40.765641, -74.139235));
the not working one is (NW, SE):
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(43.054340, -76.159101),
new google.maps.LatLng(43.042504, -76.142601));
I'd like to position my custom marker on MapQuest, because location is poiting at the middle of the icon, not at the bottom of the icon (icon is a image of "pin").
var icon=new MQA.Icon("/images/market.png",30,70);
locator.setIcon(icon);
map.addShape(locator);
Thanks a lot in advance
Disclaimer: I work for MapQuest.
You can position custom icons using the setIconOffset method on your POI. Here's a quick example:
var myIcon=new MQA.Poi( {lat:39.739217, lng:-104.984861} );
myIcon.setIcon(new MQA.Icon('img/arrowicon.png', 72, 87));
myIcon.setIconOffset(new MQA.Point(-43,-72));
The first number you pass into MQA.Point is essentially the CSS left offset of the icon, while the second is the top.
If you need help, don't hesitate to comment back or check out the Forums on the MapQuest Developer Network.
I am not a clean CSS coder, so this may be the crux of my problem... but...I've cobbled together an interactive map from this tutorial: http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/.
My solution: http://www.paideiaschool.org/testing/barb_map.htm
I think I have the initial "rollovers" of the map working-- (I've only coded the first two buildings in the upper left of the map) and am happy with that.
My problem is I want the legend of the map to do the same things as the rollovers of the map. I've come up with a clumsy solution that works (labeled '1509'), but not well in all browsers, and that tells me I have gone wrong somewhere.
I'm trying to avoid javascript as well.
What is the main problem?
Here's an updated jsFiddle for part one
Here's the basics:
<div id="city-map">
<div class="pop-up">...</div>
<div class="pop-up">...</div>
...
</div>
We use an image map with anchor tags as "hot spots". We use CSS to absolutely position these "hot spots" in the proper location and we do the basic background image sprite "trick", the same you did in your original code.
However, I updated your sprite image to have two "hover" images. When making an image hover map with none-square image spots (like buildings overlapping each-other), a single hover state runs into problems with a "neighbor" icon showing up in the hot spot slice. This is due to due HTML blocks being square and not being able to draw odd shapes. We solve this by having extra images states so you can make the neighbors still look un-highlighted.
Pop-up box
<div class="pop-up">
<h1 class="title">Mac</h1>
<div class="content">Some Content</div>
</div>
All the pop-up boxes have this HTML format. I position: absolute; them off to the side with the standard left:-999em; trick. I crafted the CSS to give them a standard pop-up location with a slight space between the hot-spot box and the pop-up box. This helps ensure your mouse will "hover out" of the hot-spot when reaching for a new hot-spot. Otherwise, you'll hover over the pop-up box and it won't go away until you over off both.
<div id="city-map-legend">
<div id="glamour-photo">
<img src="..." id="mac-img" />
<img src="..." id="admin-img"/>
...
</div>
<div id="cml-list">
<h2>Around Campus</h2>
<ul>
<li><a id="mac-list" href="#">Mac</a></li>
...
</ul>
</div>
</div>
For the "map legend", I have a group of "glamour images" and a list of links. Pretty standard stuff. The key is how they're all tied together with their ID's. JavaScript will use this to swap images and CSS states as we tie the three elements (map, glamour image, and list of links) together.
ID's in the map are the straight up ID name like "mac". ID's in the glamour images are "[id]-img" (ie. "mac-img"). And ID's in the list are "[id]-list" (ie. "mac-list").
<script type="text/javascript" src="*"></script>
* = http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
I recommend using jQuery to help do easy JavaScript-ing and loading it from Google API for easy Content Delivery Network benefits.
All that's really left is the JavaScript event.
$(document).ready(function() {
// highlight map when legend link is hovered
$('#cml-list a').hover(
// hover over
function(){
// get id code
var id = $(this).attr('id');
// tokenize string to get main id code
var tokens = id.split('-');
id = '#' + tokens[0];
// add active class to map id
$(id).addClass('active');
},
// hover out
function(){
// clear all .active classes from map
$('#city-map a').removeClass('active');
}
);
});
What happens above is we tell JavaScript to trigger anytime someone hovers a list link. There are two events when hovering, in and out.
When someone hovers into a link, we get the base ID value from it and all we do is apply a CSS class "active" to the map "hot spot".
".active" class will basically "turn on" the map item as if it was hovered (if you notice in the CSS, all the :hover selector styles are also shared with a '.active' class).
When we hover out, we simply tell jQuery to remove all 'active' classes. All that's left to do is swap also write some code that does the same thing for the "glamour" images. Simply turning them on (display:block) or off (display:none). The one catch is that there should probably be a default image that we always turn back on if nothing else is selected unless we just want the previously activated glamour image to stay active, that works too.
I've not gotten to that bit of code yet. I'll see I can update it later and maybe leave a little bit for you to play around with.
update
I developed it mostly in Chrome and a little Firefox. I just checked
it in IE7/8/9 and it seemed to work fine.
I updated the jsFiddle to include glamour image swapping. I also had a small CSS bug where I placed the float in the wrong spot. So, work off the latest one.
NOTE I did not do the CSS for all the locations. I did several with some examples, but left the rest for you. =)
Btw, I updated your map image and uploaded it on imgur.com => http://i.imgur.com/n7spM.png