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
Related
This question already has an answer here:
maps markers with input sliders
(1 answer)
Closed 4 years ago.
i have a huge list of stores with addresses (longitude and latitude and codeclient ....). For each stores, a marker appears on the Google Map on the page.
my problem is, users must be able to filter these markers depending on one thing: CodeClient. So to be more specific. If the user sets the CodeClient in the input slider it is supposed to only show the client (the owner of the CodeClient who we put in the slider) Like this ; CodeClient = 12345 , so when we put the number 12345 in the the input slider , and click on the button it should display only the marker of this client , i mean the markers who refer to the place of this client.
the problem is solved by xomena , this is the path for the solution
Filter Google maps markers with input sliders based on one variable
Seems like you are partially asking about setting marker visibility? As touched on in this Stack post (among others)
Google Maps API Marker Visibility
Most likely, marker.setVisible(true/false) is the way to go.
And then basically you would be doing that in the change event handler for the slider input.
One idea is loop over the markers array and toggle it invisible while setting the marker matching selected coce-client visible.
Another idea is to make it a "marker dictionary" where the keys are the code client value, i.e.:
markers = {
12345: SomeMarkerInstance,
67890: SomeOtherMarkerInstance,
// ... etc
}
selectedMarker = '12345'
and in that way you could quickly just toggle off visibility on the current selected marker while toggling on the newly selected marker. The rest of the markers would be by default not visible.
I.e. (pseudo codey)
function someEventHandler (event) {
markers[selectedMarker].setVisible(false)
markers[selectedCodeClientValue].setVisible(true)
// and perhaps other stuff, e.g. recenter the map, etc
}
You are setting a title to your markers with this CodeClient and you are pushing your markers in an array. So what's the big issue here? Simply loop through your array and set the marker visibility based on the title (CodeClient).
for (var i=0; i<markerArray.length; i++) {
if (markerArray[i].title == '12345') {
markerArray[i].setMap(map);
} else {
markerArray[i].setMap(null);
}
}
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.
When I use the Fusion API to remove all rows from a table and then add new rows to it, the map markers show up as the default markers, not the ones I have defined.
For example, I have the map below:
https://www.google.com/fusiontables/embedviz?q=select+col2+from+1YPVj8gN3lBEDE9NHBSIXHqOyb9h8kqPviqG42Yo&viz=MAP&h=false&lat=48.04804748460389&lng=-97.86780852499999&t=1&z=4&l=col2&y=7&tmplt=6
It is set to use the Icon column in the fusion table for the map markers.
When I remove all the rows and add them back in through the API, all the markers show up as the default red dots.
If I go to Tools->Change Map Styles and set it to Fixed->red dot and save, the map updates and shows the red dots.
If I then repeat that and set it back to using the Icon column, then the map refreshes and the style is applied correctly.
If I do not do this, then no matter what happens or how long I wait or if I clear my cache, the markers use the incorrect style.
Has anyone run into this? Any google people reading this have some insight?
There is a two minute cache applied to embedded map tiles, so you could just be seeing that delay. If you give it some time and you still see the problem, then something else is going on. The HTTP request and response headers from one of the faulty tiles would be helpful in diagnosing the issue.
Example chart: http://www.highcharts.com/demo/area-stacked-percent
I want to be able to detect clicks on the different areas (blue Asia, navy Africa, etc) so that I can do some stuff with all the series I have for Asia or Africa. Note: I want to be able to detect clicks on the filled areas, not the area/series points.
I guess I could do it with area.events.click, look up the coordinates and figure out if the coordinates are inside a particular area, but that seems like and awful lot of work to achieve a simple thing like that. Is there perhaps a built-in way to listen to events like that?
Also, on a related note - is it possible to add hover and selected styles for the areas?
EDIT: It seems that it's possible to detect clicks on the areas by setting plotOptions.series.trackByArea to true, but it seems that this way I cannot distinguish between a click on the point vs a click on the area. Any ideas how I could reliably distinguish them?
You can detect it by click on area and display name of serie
http://jsfiddle.net/c2P63/5/
events: {
click: function(event) {
alert(this.name);
alert(event.x);
alert(event.y);
}
}
When user pans the map, I make and ajax request to the server and get all the markers that fall into the new bounds, something almost identical to what is described here: Dynamically load Google Maps Markers with gmaps4rails
My problem is that when I use replaceMarker all the markers on the map are recreated therefore each of them flickers onces. This really annoys me.
If I use addMarkers, I don't get the flicker effect, but my sidebar gets screwed because;
1) The markers which are left out of the bounds after pan, are not removed from my marker list.
2) Some duplicates are added to my marker list - markers that fall into intersection of old and new bounds.
I tried modifying the addmarkers function but nothing good came out of it.
This is how I changed the addMarkers function. Comparing the new_markers set to the old one to find out which ones to remove and leave the already existing ones alone.
addMarkers : (new_markers) ->
#update the list of markers to take into account
#resetSidebarContent()
added_markers = (marker for marker in new_markers when ($.grep(#markers, (a) -> a.id == marker.id).length == 0))
removed_markers = (marker for marker in #markers when ($.grep(new_markers, (a) -> a.id == marker.id).length == 0))
for marker in removed_markers
#clearMarker(marker)
#markers.remove(marker)
#markers = #markers.concat(added_markers)
#put markers on the map
#create_markers()
#adjustMapToBounds()