I followed the Bing Maps API for Directions as outlined here and here. However, in my case the Directions Modules is not working after entering locations (which never seem to be resolved) I get the blue pointed progress bar indefintely:
I set up a fiddle at http://codepen.io/nachtigall/pen/PzEPEL (scroll down a bit, or open the full page at http://codepen.io/nachtigall/full/PzEPEL/) So it is fully reproducable. The important code is the same as in the documentation:
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function() {
_this.directionsManager = new Microsoft.Maps.Directions.DirectionsManager(_this.map);
_this.directionsManager.setRenderOptions({ itineraryContainer: $printoutPanel[0] });
_this.directionsManager.showInputPanel('directionsInputContainer');
});
Any ideas why it's not working?
Related
I've created a Bing Maps tool to view High Schools and Competitions in out state. The implementation works perfectly on the desktop. You can click on a map pin, and you see either the School information or the Competition information.
However, I noticed today that on my iPhone, the map pins do not respond, i.e. the Info Box does not open. I tried it in Chrome in Responsive mode, and I get the same thing.
I'm using the standard map pins on one and a FontAwesome map pin on the other, but neither is responsive. What am I missing?
https://www.mshsaa.org/Activities/ClassAndDistrictAssignments.aspx?alg=3&class=1
https://www.mshsaa.org/Activities/Scoreboard.aspx?alg=3&view=map
Well, I figured it out. I guess I didn't give enough details.
It turns out I had bound show and hide of the Infoboxes to mouseover and mouseout. I added binding to the "click" event, and that seems to work fine. I did also need to explicitly hide all previously opened boxes, but that was pretty easy to do:
Microsoft.Maps.Events.addHandler(thisPin, 'click', function () {
$(".Infobox").parent().hide(); /* This hides the other open Infoboxes */
infobox.setOptions({ visible: true })
});
I've seen a lot of posts that say v8 does not yet support viapointPushpinOptions and I was wondering if that was still the case. What I would like to do is make viapoints draggable, but have not yet figured out how. This is the code I have...
directionsManager.setRenderOptions({
viapointPushpinOptions: { visible: false },
viapointPushpinOptions: { draggable: true }
});
Any help is much appreciated. Thanks!
The viapointPushpinOptions property is deprecated and there are no plans to add it to V8. In V8 you can use the following for waypoint customizations:
waypointPushpinOptions
firstWaypointPushpinOptions
lastWaypointPushpinOptions
That said, we are planning to add a function soon to the directions manager to get all pushpins for the route which would make it easy to go through and customize each one as much as you want. That should be in the experimental branch soon if it isn't already there and will likely be in the main release branch in a few weeks.
If you can't wait, you can always hide all waypoints, then loop through the route data and create custom pushpins for each waypoint as you see fit. Here is a sample: http://bingmapsv8samples.azurewebsites.net/#Fully%20Custom%20Waypoint%20Pushpins
I have a problem with g-leaflet - it shows as a grey rectangle only (with a bit of the map at top left) until I resize the window (manually). Then it shows up. Sometimes parts of maps show when I hover over an area but this too is incomplete and problematic. Here:
The code that I use to add the G-Leaflet map to my GXT VerticalContainer (com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer) is as follows, taken from G-Leaflet example:
LeafletDrawResourceInjector.ensureInjected();
final MapWidget mapWidget = new MapWidget();
mapWidget.setSize("1000px", "750px"); // I added this myself to try to fix the issue
myVerticalLayout.add(mapWidget);
(I also set the size of the "myVerticalLayout" container).
Please help!
Leaflet is really finicky. Scheduling a defferred call to invalidateSize() was not enough. Had to make my own JavaScript call to its invalidateSize using setTimeout, also making sure that all the containers are attached before this happens. Only hen it would show.
My custom map which has been produced by using MapTiler 0-5 levels displays well
on leaflet 0.6.4 but is not shown on version 0.7.3. Sorry, but I'm really new in using leaflet and maps. I've googled and checked the documentation on leaflet.com but haven't got any clue of a solution. Please help.
This is a demo using 0.6.4 and html already prepared for 0.7.3.
Sorry folks, I've just found my solution after googling again with other search
criteria. So I've found thread #2776 from Jakoboud pointing me to a possible solution. This does the trick -> continuousWorld: true and my map shows up.
Here's another question: how can I keep this map centered in browser window if the shown map part is smaller in width/height than browser window? map.setMaxBounds() doesn't work, it's bouncing the small map endlessly.
I am actually looking for a way to customize my window popups like it is done on this website : http://www.nytimes.com/newsgraphics/2013/quiet/#/map/
I have been looking on all the web and no way to find it ...
Any ideas or website explaining it ?
Thanks guys
The javascript code uses a combination of JQuery, JQueryUI, qTip2, and a couple of other libraries for localization and media player abilities.
You can find the specific javascript code for those markers here: NYTimes Map - zoom.js
All the css is found here: NYTimes Map - quiet.css
The main tool used for the mouseover parts is qTip2. Tutorials and demos can be found on the website. That's probably the thing you're going to want to start with.
There is a Leaflet extention called Leaflet.Rrose. Description from Leaflet plugins page:
For use when you want popups on mouseover, not click, and you need popup tips to reorient as you get close to the edges of your map.
Check out examples on extensions' page.