I'm using jQuery mobile alongside the Google Maps API. I am creating an Google Elevation Chart for a route but I am struggling to get this to display full screen - it renders in the top left corner at 32px x 32px after assigning width, height 100% to the elevation chart elements.
I had a similar problem with my Google map to begin with and solved this by adding -
$('#home').live('pagecreate',function(event) {
$("#btnSubmit").click( function (e) {
initialize();
$.mobile.changePage("#map-page");
});
});
Do I need to do something similar to get the Elevation chart to render correctly? I am unable to work out what to do.
Related
I construct three polygons in the google map using the help polygons in google Map API for developers site. They are look like one polygon inside an another polygon .When my page is loaded all three polygon are loaded.How can i get the inner polygon when the outer polygon is zoomed or clicked in google map?Image:polygon inside another polygon
Your polygon are just place in postion that appear as one is inside another
for google maps the way you place your polygon had not a topological meaning
A easy eay for avoid that a larger polygon is over a small one could be based on z-index
assignin z-index with higher value to the polygon over the others eg:
// the larger - at base
var polylgon1 = new google.maps.Polygon({
...
zIndex: 100
});
// the middle - at medium leve
var polylgon2 = new google.maps.Polygon({
...
zIndex: 200
});
// the smaller - at top leve
var polylgon3= new google.maps.Polygon({
...
zIndex: 300
});
Is there a way to get Mapbox.js tooltips to show when you're hovering over a marker without following the mouse around? I just want it to stay put when I hover.
I am using the following code on my map:
var map = L.map("impact-map")
.setView([20, 80], 3)
.addLayer(L.mapbox.tileLayer("hotchkissmade.in_impact", {
detectRetina: true
}));
var myGridLayer = L.mapbox.gridLayer('hotchkissmade.in_impact').addTo( map );
var myGridControl = L.mapbox.gridControl(myGridLayer, {
follow: true
}).addTo( map );
I am using the follow:true from the example here.
Disclaimer: I know there may be more flexibility outside of gridControl but I like having my tooltips from Tilemill as I don't want to load the data in the browser twice, since I'm basing the tooltip data off the layer making the markers on my map in Tilemill
This isn't possible with a gridControl - you can have tooltips either follow the mouse or stay in a specific location, but unlike L.mapbox.featureLayer, there is no actual marker, polygon, or feature you're hovering over - the geometry is not pushed to the client - so, there would be no 'anchor' for the tooltip to stay on.
In Highstock you have the navigator at the bottom which lets you zoom in and out of the chart.
But, is it also possible to click on the chart itself, drag to highlight a certain portion of the chart and zoom into that area?
I've seen this feature in some of the other charting tools.
Set chart.zoomType, see: http://jsfiddle.net/MKeWv/ - docs.
I have a line chart with markers disabled.
The legendSymbol is currently a line. I would like to show the symbol as a square. Any pointers?
With the latest Highcharts release you can also exchange the method that draws the legend icon from outside of Highcharts:
Highcharts.seriesTypes.line.prototype.drawLegendSymbol =
Highcharts.seriesTypes.area.prototype.drawLegendSymbol;
To use the element that is drawn for the area chart as an icon for a line graph.
(I have used this in Highcharts Stockcharts but this should be applicable in basic Highcharts as well)
You can use two series (one normal and one fake) with defined custom symbol. First should be hidden in legend. Then only what you need is use legendItemClick and call action.
http://jsfiddle.net/5m9JW/339/
You can change the stroke-width attribute on the path element.
We can provide functions to Highcharts that will be drawn whenever the chart is drawn. Since redraw is not called on the first drawing the load event is needed
chart: {
events: {
load: function () {
$(".highcharts-legend-item path").attr('stroke-width', 10);
},
redraw: function () {
$(".highcharts-legend-item path").attr('stroke-width', 10);
}
}
},
I like this as it's quicker than than the other two answers and adding a "fake series" feels like a hack.
If you need further customization Hendrik's would be great! The original question asked for a square, if all that's really needed is a rectangle (or a large square) this works great.
Also Hendrik's answer didn't work for me out of the box in HighStocks, this does.
http://rickgutierrez.bol.ucla.edu/map_mobile6.htm
I am working on a mobile map using google maps API and JQuery Mobile v1.2. I stored spatial data (the bikeway polyline layer and the bike rack point layer) in google fusion tables and displayed them on the map. I would like to toggle each layer on/off using the bike and park anchors in the JQuery navbar. I have exeperience toggling layers on/off with checkboxes on desktop maps but prefer the look and size of the navbar toggling for the mobile map.
My ideal functionality would be for the map to load with the bike layer on and the bike portion of the navbar darker to denote that it is selected, just like on other web apps. A user can use the map to find safer biking routes with bike layer then turn on the bike parking layer at their destination to find a place to lock their bike. Each layer can be toggled on and off independently.
I tried pasting the code in here but it was a mess. Please look review my source code at the above link. I am a novice at coding and would appreciate any help. Thanks in advance.
Update: I guess someone commented that if geolocation is denied the map does not work. here is the geolocation code:
// allow iPhone or Android to track movement
if ( useragent.indexOf('iPhone') !== -1 || useragent.indexOf('Android') !== -1 ) {
navigator.geolocation.watchPosition(
displayLocation,
handleError,
{
enableHighAccuracy: true,
maximumAge: 30000,
timeout: 27000
}
);
// or let other geolocation capable browsers to get their static position
} else if ( navigator.geolocation ) {
navigator.geolocation.getCurrentPosition( displayLocation, handleError );
}
How do I fix that? I am guessing that I need to put some backup coordinates into the else statement?
Add a google.maps.event.addDomListener listening for a click event to the elements that you want to perform the toggle. In the function associated with that listener add your code to toggle the layer.
I would suggest:
if (layer.getMap() == null) layer.setMap(map); else layer.setMap(null);
where "map" is a reference to your google.maps.Map object.
Working example