Hi is it possible to hide the traffic section in settings UI from Here map?
hide traffic
I do not need any traffic information on the map.
Is it also possible to change colors from the ui.
Thanks Othmar
Summary:
As of 8/2018, there does not appear to be any option in the API to create the default UI without the traffic views.
Youcan use the following code to clean up the default menu:
let mapsettings = ui.getControl('mapsettings');
let menuEntries = mapsettings.getChildren()[1].getChildren();
menuEntries[0].getElement().style.borderBottom = 'none';
for (let i=1; i<menuEntries.length; i++)
menuEntries[i].setVisibility(false);
Related
I am using a custom-created button on my HERE Map using the JS 3.0 library.
I followed a HERE support engineer's suggestion provided here: HERE Map UI JS - How to add custom buttons to the Map UI?
So far, I have been able to get it to work just fine, but I just found out that I need to be able to enable or disable the button depending on various business rules. But it looks like there is no "setDisabled" functionality for HERE Controls or Buttons?
https://developer.here.com/documentation/maps/api_reference/H.ui.Control.html
https://developer.here.com/documentation/maps/api_reference/H.ui.base.Button.html#.State (I saw that there was the option to initialize a button to be disabled, but not to change an existing one. Seems inefficient to create a new button every time I need to enable or disable it.)
Any suggestions?
Dont use the var ui = H.ui.UI.createDefault(map, maptypes, 'en-US'); line in order to disable buttons or find your self in an "if" statment to access this when a certain button is pressed or statement is passe
There is a setDisabled() method inherited from the parent class H.ui.base.Element which you can use:
// assume custom UI control exists
customControl.setDisabled(true) // <- disables the control
customControl.setDisabled(false) // <- enables the control
Here is jsfiddle working example of custom UI control which disables itself after click.
See H.ui.Control#setDisabled() for more details.
I have need for the virtual laser pointer in Google Slides' Presenter View (I require a pointer graphic that originates from within the presentation window so that it will register in an OBS recording).
However, when the pointer moves into the lower 1/3 of the Slides screen, the floating toolbar reappears, which I find distracting (in my application, it appears behind a disembodied torso that's been green-screened into my OBS recording). I have reasons not to use Powerpoint (on a Mac, in PPT present-in-a-window mode, the virtual laser pointer cannot be toggled with a keystroke as it can in Slides).
I have not been able to find a setting that would leave the floating toolbar permanently invisible. Any help would be appreciated. Thanks in advance. If this setting is not available, I will file a feature request
I don't think there's a built-in setting, so I just wrote this JavaScript to do it:
setInterval(() => {
const iframe = document.querySelector('.punch-present-iframe');
if (!iframe) return;
const innerDoc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document;
const nav = innerDoc.querySelector('.punch-viewer-nav');
if (nav) nav.style.display = 'none';
}, 1000);
Some notes:
Google changes their CSS class names every once in a while. To find the up-to-date classes, right-click the presentation bar and locate both its iframe ancestor and whichever element will hide the whole bar at the time.
This is in a setInterval so that you can exit and re-enter the presentation and still have it remove the bar.
Once the bar is gone, the only way I could find to enable the laser pointer is by pressing "L" on the keyboard (i.e. I couldn't figure out how to automate this).
I have a content type with geo data that I'd like to display on a map based on some contextual filters. There are multiple views on the site with different configs. I have defined my map, its behaviors, default layer, etc. and it works with an "all nodes of x type" view using an Openlayers data overlay and a map display.
A second view has it's own data overlay with a different set of points and a map display. I'd like to reuse the same Openlayers map so that any future changes to behaviors, zoom levels, etc. don't need to be made across multiple maps.
The problem I'm having is that whatever layer I define as activated in the Openlayers map is the default layer for all the views using that map. I need some way to define a default activated layer based on the view, url, or something else. Any ideas on how to achieve this?
First you have to create or clone and modify a view.
Second, you have to create another Openlayers map in /admin/structure/openlayers/maps/list/, and at the layers and styles/overlay layers you have to enable the layer of the newly created view.
Third, you have to edit the view and at the view format's settings you can select the new map.
Came up with a single view solution awhile back and forgot to post it. This allows you to create a single view using a single OpenLayers Map block with multiple data overlays within the same view, setting the active one based on URL. The benefits of this approach are that a change to one field populates across all of the displays and changing the map's styling, behavior, etc. only needs to be done once. This simplifies maintenance and changes for folks.
Here's what worked:
1. Create you OpenLayers map, layer definitions, etc. as you normally would.
2. Create a new view with the Format: OpenLayers Map. Configure it as you normally would.
3. To the OpenLayers Map view, add new OpenLayers Data Overlay displays for each source.
4. Edit the OpenLayers Map. Under Overlay Layers, check enabled and in switcher for each new Data Overlay. In my case, the Activated checkboxes are all unchecked.
5. Implement hook_openlayers_map_preprocess_alter(). Here's what mine looks like
function mymoduleortheme_openlayers_map_preprocess_alter(&$map = array()) {
//$displayLayer['URL param'] = "map_data_overlay_machine_name";
$displayLayer = array();
$displayLayer['first-page'] = "openlayers_maps_openlayers_first_page_data";
$displayLayer['another-page'] = "openlayers_maps_openlayers_another_page_data";
$currentURI = array();
$currentURI = explode("/", $_SERVER['REQUEST_URI']);
foreach ($map['layer_switcher'] as $idx => $val) {
//Map data found, activate the correct
if (isset($currentURI[2]) && isset($displayLayer[$currentURI[2]]) && $idx == $displayLayer[$currentURI[2]]) {
$map['layer_activated'][$displayLayer[$currentURI[2]]] = $displayLayer[$currentURI[2]];
}
else
$map['layer_switcher'][$idx] = 0;
}
}
Probably room for improvement, but it's working and does the trick. The switcher isn't used on this site so it's just CSS'd out.
I'm having trouble implementing history.js
I have a single page website that uses a jquery slider (royal slider) to slide full page divs that act as pages. The slider is operated using custom links. What I would like to do is have each link manipulate the browser history in order to 1. change the page URL. and 2. push states to the browser that are refreshable and can be navigated to and from via the browser's forward and back buttons.
What I'm not sure about is whether any pushstate will save the sliders current slide?
It's not essential if not, as the change in URL is the main thing.
Each link is controlled via a javascript click function that looks like this...
var workclick = document.getElementById('worklink');
workclick.onclick = function () {
thefooter.style.opacity = "1";
thefooter.style.filter = 'alpha(opacity=100)';
thefootdivide.style.opacity = "1";
thefootdivide.style.filter = 'alpha(opacity=100)';
$(".royalSlider").royalSlider('goTo', 1);
}
Can somebody help me with what I need to add to my page to get history.js to work with what I have here?
Thanks so much for any help
I am not an expert on History.js, but my understanding is that once it's installed, each time a slider value is changed you could call replaceState() with url parameters that reflect their values something like :
History.replaceState( null, 'My Title', '?slider1=' + $('#slider1').value );
And then, when your page loads have it read these request parameter values and (if present) set the sliders accordingly.
Again I'm not sure this is exactly what you need but I'm pretty sure it's on the right track.
As of Google Maps API v3.6, maps now include "points of interest", which are gray markers embedded into a map. When the user clicks on this icon, an InfoWindow appears with information about that business (or park, hospital, etc.)
These can be turned off by setting the Styling. (See "Style Array Example")
https://code.google.com/apis/maps/documentation/javascript/styling.html
Once they are turned off, the icons, names, and shaded regions (for parks and hospitals) go away.
Before Google Maps API v3.6, there were no icons; only the names and regions.
The question: is there a way to remove the "click icon to open info window" behavior of these points of interest? I still want to keep the icons, names, and regions; only want to remove the click behavior.
Alternate question: is there a way to download/save the JavaScript of the v3.5 of Google Maps API to store on my server? At present, v3.5 is working fine for what I need. In February, Google will no longer provide v3.5 of the code and will instead provide only v3.6, v3.7, v3.8.
Retiring of minor versions of Google Maps API v3, and using the "frozen" version of an API:
https://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning
Things I've tried and considered: Adding an event listener when the map is clicked does not work, because the embedded markers are clicked instead of the map. Adding "clickable: false" as a property was a shot in the dark, with no result. Setting "visiblility: off" removes it all, leaving the map with less content. Setting "visibility: simplified" removes the name of the location, though the onclick behavior is still present. Putting an invisible DIV overlaying the map might work, though it would remove the ability to pan/zoom/drag the map without increasing complexity.
Setting a style so that featureType: poi, elementType: labels, visibility: off will result in showing the pink/gray/green regions for hospitals/cemeteries/parks, without the marker or name. It returns more color to the map.
I'm not sure if this is still relevant to you, but Google did, indeed, solve the issue on April, 2016, all you need to do is clickableIcons to false in MapOptions
This issue has been logged with google at:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3866
Please star and comment your needs on this issue there.
I'm not sure this is not a violation of the Google Maps TOS, it's a bit hacky, and doesn't work on IE < 9, but you can listen on dom event,
to detect the creation of the window, using Mutation Observer
Here is a plunkr to demonstrate : http://plnkr.co/edit/pGep9OZFligLhRtHlhgk
You can check in the console, an event is fired (actually twice) when you click on a POI, and the window is hidden
By referencing this URL (https://stackoverflow.com/a/24234818/6160436), I somehow managed to hide the Info windows of POI and call the click event listener of map when the user clicks on the POI.
But I'm not sure whether this violates TOS or not, so use at your own risk.
//keep a reference to the original setPosition-function
var fx = google.maps.InfoWindow.prototype.setPosition;
//override the built-in setPosition-method
google.maps.InfoWindow.prototype.setPosition = function () {
//this property isn't documented, but as it seems
//it's only defined for InfoWindows opened on POI's
if (this.logAsInternal) {
if (this.getPosition()) {
console.log(this.getPosition());
google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
}
else{
google.maps.event.addListenerOnce(this, 'map_changed',function () {
console.log(this.getPosition());
google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
// var map = this.getMap();
// //the infoWindow will be opened, usually after a click on a POI
// if (map) {
//trigger the click
var removeInfoWindow = null;
removeInfoWindow = setInterval(function(){
if ($('.gm-style-iw').parent().length) {
$('.gm-style-iw').parent().hide();
clearInterval(removeInfoWindow);
};
},1);
// }
});
};
}
//call the original setPosition-method
fx.apply(this, arguments);
};
google.maps.event.addListener(map,'click',function(e){
alert('clicked #'+e.latLng.toString())
console.log('ok');
});
A couple of things to be aware of:
1)
If your map is high traffic, you may find yourself in violation of the Google Maps TOS. You're supposed to use an official version. If it's your own blog or something else low traffic, nobody will notice or care.
2)
This is only conjecture on my part, but I noticed these POI's myself and got annoyed by them. I am pretty sure these are paid-for "inline ads", so to speak. Some gas stations and diner chains have them, so you will soon see Google maps being spammed with these POI markers. If they allow those to be turned off in the API, it kind of goes against the business interests of those who paid for the POI icon... so I highly doubt that you will be able to remove them.
If you do find a way,please please DO POST the solution! Thanks.