I was looking at http://here.com/ and noticed that their controls navigation panel has a zoombar.
I was wondering if this is a map setting or is it something that needs to be custom built.
Posting it here due to lack of a better suited forum.
A zoombar can be added to a map using the HERE Maps API for JavaScript as shown:
var map = new nokia.maps.map.Display(mapContainer, {
// initial center and zoom level of the map
center: [52.51, 13.4],
zoomLevel: 10,
components: [
new nokia.maps.map.component.ZoomBar()
]
});
The zoombar looks like this:
The zoom control on here.com looks like this:
It is a custom map control and would need to be created with your own code using the UI library of your choice and creating a new class extending MapComponent.
An outline sketch of how to go about this can be found in the question here
Related
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.
This one has me stumped, and I'm hoping a second set of eyes will be able to point out the problem. I realize that my abstraction library adds a lot of additional complexity, but I was thinking that someone else may have seen something similar in their implementation. I've also tried to boil this down to as simple and targeted a case as possible.
The problem is that markers created and added to the map via the Google Maps API and set as draggable cannot be dragged. This used to work just fine, but a change I made somewhere in the library broke this functionality. To reproduce, go to http://www.nps.gov/npmap/support/library/examples/map-defaults.html?api=google and then paste the following code in the browser web development console:
var marker = new google.maps.Marker({
position: NPMap.Map.Google.map.getCenter(),
draggable: true,
map: NPMap.Map.Google.map
});
The marker should be draggable, but it is not.
A few notes:
Markers are still clickable, and it seems like all marker events (mouseover, etc.) are working properly
Lines and polygons added to the map as editable work fine
I have played around with the z-index of the map div and some of the other elements, but this doesn't seem to be causing the problem
I am loading the current release version of the Google Maps API, v3.11. I have tested with the frozen version, 3.10, and the experimental version, v3.12, but the problem persists no matter which version is loaded.
Any help is greatly appreciated!
UPDATE: Strange. Markers added with draggable: true don't appear to be clickable. But if a marker is added without specifying draggable: true, it does seem to be clickable. It seems like this is probably related.
UPDATE 2: A follow up to my first update: Events are not working on markers that are created with draggable: true and added to the map. You can run the following code after creating the marker to test this out:
google.maps.event.addListener(marker, 'click', function(e) {
console.log(e);
});
Figured it out. I was doing something like this to hack around some of the default Google Map controls:
var els = document.getElementsByClassName('gmnoprint');
for (var i = 0; i < els.length; i++) {
els[i].style.display = 'none';
}
This hasn't affected draggable markers in the past, but Google must have made a change in the Maps API and started adding the gmnoprint class to draggable markers. Oh well, that's what I get for going outside of the documented API.
I am developing a custom imagemap type map without geo referencing i.e. latlng of my map do not relate to acutal latlng of that place. Now i have also created custom streetview panoramas of certain buildings and places in that map.
The issue is am not able to integrate those custom streetview panoramas with my custom imagemap.
Following is the link to see whats going on:
http://cdi.astateweb.org/virtual_tour/
First Approach:
There are two markers on the map right now. When you click on them a small infobubble pops up. Now when you click on the virtual tour link a dialog comes up. I want to load the custom streetview panorama in that dialog. I tried several things but to no avail. I am trying to reuse the same dialog for both markers. I tried initializing the panorama in jquery ui dialog open function. It worked for the first one but when you close the dialog and open it again it fails with some cbk error from google apis.
SECOND APPROACH:
I tried to use the default streetview pegman such that when the pegman is dropped on a certain building or place which has a panorama the streetview comes up just like in normal google maps. This didn't work either.
Can somebody point me to the right direction. Any help will be highly appreciated.
Thanks
Ok, try like this:
Change at line 41
from
'Virtual Tour'
to
'Virtual Tour'
Change at line 96
$("#dialog").dialog({
autoOpen: false,
width: 650,
open: function() {
console.log($("#" + virtualTour.currentPano));
$("#" + virtualTour.currentPano).appendTo("#dialog").css("display", "block");
},
close: function() {
$("#" + virtualTour.currentPano).appendTo("body").css("display", "none");
}
});
And the below code to add into "createMarker" function.
//After this line.
virtualTour.hotspotArray.push(marker);
//Add this code.
setTimeout(function(){
document.getElementById(pano).style.display = "none";
}, 100);
I've finished my last project that uses GoogleMaps API v3 sucessfully.
But now, with no reasons the map is not being generated anymore.
The window with all map controls is opened correctly but the map
itself is not. It shown only a gray screen.
There is no errors on the script before calls google.maps function and
there is no errors after it too!
Can anyone try to help me with this issue?
Thx anyway.
I had a similar problem when I used GoogleMaps API in a Jquery UI Dialog, the map div would be gray. I corrected this problem by resizing the map when I opened the Dialog. I am also using the GMAP3 Jquery plugin.
Here is the resizing function:
function resizeMyMap() {
var mymap = $('#map_canvas').gmap3({ action: 'get', name: 'map' });
google.maps.event.trigger(mymap, "resize");
$('.gmap3').gmap3({
action: 'autofit'
});
}
If you do not use the GMAP3 Jquery plugin, you can try this to resize the map:
google.maps.event.trigger(map, 'resize')
I am attempting to create our college campus map for our mobile website that will be launching shortly.
I have followed google's map api v3 example for creating a simple image overlay (found here: http://code.google.com/apis/maps/documentation/javascript/examples/overlay-simple.html) which I have successfully created.
However, my question is and what I am struggling greatly with is, how to place markers that show on top of this image overlay?
I understand how to make a marker on google maps, and attempted to implement it with the simple code of:
var myLatLng = new google.maps.LatLng(xx.xxxxx,-xx.xxxxx);
var marker = new google.maps.Marker({
position: myLatLng,
map:map,
title:"testing"
});
however placing that in the initialize section, causes the marker to fall under my custom image overlay... I read that I need to place it in one of the map panes that is greater then the 3rd pane, but this is where I would need some help, where to place this and how?
Markers always render in the overlayImage pane, so rather than trying to move the marker, move the overlay you added so that it appears in a lower pane (beneath the markers).
Replace:
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
with:
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
That is, replace overlayImage with overlayLayer. The Maps API V3 Reference tells me is the pane that contains ground overlays, polygons and polylines (all of which appear below markers).