In V7 Bing map you have provided functionality of custmally add pushpin and infobox in clustering map on below link
https://www.bingmapsportal.com/isdk/ajaxv7#LoadingDynamicModule3
But in V8 bing map Microsoft didn't provided how can i set Pushpin and infobox in clustering map .
http://www.bing.com/api/maps/sdk/mapcontrol/isdk#clusteringMeanAverage+TS
Can you please provide sample code for pushpin and info box in clustering map ?
Thanks in advance
Here is an example of how to store data with a pushpin using the metadata property and add a click event to the pushpin that opens an infobox:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
async defer></script>
<script type='text/javascript'>
var map, infobox;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'Your Bing Maps Key'
});
//Create an infobox at the center of the map but don't show it.
infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
visible: false
});
//Assign the infobox to a map instance.
infobox.setMap(map);
//Create a pushpin in the at a random location in the map bounds.
var randomLocation = Microsoft.Maps.TestDataGenerator.getLocations(1, map.getBounds());
var pin = new Microsoft.Maps.Pushpin(randomLocation);
//Store some metadata with the pushpin.
pin.metadata = {
title: 'Pin Title',
description: 'Pin discription'
};
//Add an click event handler to the pushpin.
Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
//Add pushpin to the map.
map.entities.push(pin);
}
function pushpinClicked(e) {
//Make sure the infobox has metadata to display.
if (e.target.metadata) {
//Set the infobox options with the metadata of the pushpin.
infobox.setOptions({
location: e.target.getLocation(),
title: e.target.metadata.title,
description: e.target.metadata.description,
visible: true
});
}
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
For individual pushpins you can customize them before you add them to the clustering layer and the clustering layer will simply render them. No need for a callback like in the old v7 module. A callback is still used when customizing clustered pushpins.
For infoboxes simply add a click event to the pushpins and clusters and when the event fires you can load an infobox. This is really simply. Also, you only need one infobox in an app and simply update it's content based on what has been clicked.
Full documentation can also be found here: https://msdn.microsoft.com/en-us/library/mt712542.aspx
Related
I can't figure out how to make a draggable pushpin. I used this code that is similar to tutorial I can find everywhere:
<script type='text/javascript'>
function GetMap()
{
var loc = new Microsoft.Maps.Location(47.1, 2.20696);
var map = new Microsoft.Maps.Map('#myMap', {
credentials: 'XXXXXXXXXXXXX'
, center: loc,
zoom:16
});
var pin = new Microsoft.Maps.Pushpin(loc);
pin.setOptions( { draggable: true, text:'1' });
map.entities.push(pin);
}
</script>
<script type='text/javascript' src='//www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
<div id="myMap" class="bing"></div>
But it is not working.
What may be wrong?
Pushpins were not draggable in the initial release of V8, however this functionality has been added in the experimental branch of V8. Simply add "&branch=experimental" to the map script URL and your pushpin will be draggable. All new features and bug fixes that are currently in the experimental branch will be rolled into the main release branch at the end of the month.
creating a mobile website using PinchZoom.js plugin to zoom in and zoom out on a map. It also has a search feature that highlights areas on the map.
When the map is zoomed in, and someone searches, I want pinchzoom.js to reset back to the zoomed out view. I can achieve this by removing the style on the Zoom Container through jquery. but when I tap back on the map, it starts zooming from the original zoomed in location, before the search.
How would I go about resetting the pinchzoom.js plugin back to its original onload scale from a jQuery click function?
<script type="text/javascript">
jQuery(function ($) {
$(function reset() {
$('div.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {
maxZoom: 10
});
});
})
});
</script>
<script>
jQuery(function ($) {
$(document).ready(function() {
$('#contactlink').click(function(){
$('#formbox').slideToggle('fast');
$('.pinch-zoom .activeLocation').removeClass('activeLocation');
});
});
$(document).ready(function() {
$('#formbox').click(function(){
$('#formbox').slideToggle('fast');
});
});
})
</script>
<script type="text/javascript">
jQuery(document).ready(function (){
jQuery('#E1').click(function() {
jQuery('.pinch-zoom').empty();
jQuery('.E1').addClass("activeLocation");
});
});
</script>
In my case I need to reset zoom image.So save old image src of zoom image in one variable and create new html element i.e. image with same id and set old image src which we saved in temporary variable.With orientation change we can use same solution.
In your case save your value of zoom element and delete it and recreate html element and assign old value.
May be it is not proper solution.But it works for me.
this is my first post, so my deepest excuses if something went wrong :)
I have a little html-control to write and biggest problem is ie6-8 support. There are no alternatives to skip ie6-8 support at all :( So after searching a while, I did found Raphael and it allows me to create custom shapes defined in SVG file. I need to attach 'mouseover' event and select element on hover. Event working great but I did find BIG problems in VML hover behavior.
Code was simplified to RAW html with VML shape.
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>v\: * { behavior:url(#default#VML); antialias: false; }</style>
</head>
<body>
<div id="message">hovered: nope</div>
<v:oval id="oval" style="width:100px; height:75px" fillcolor="#bbb"></v:oval>
<script>
var messageElm = document.getElementById('message');
var ovalElm = document.getElementById('oval');
ovalElm.attachEvent('onmouseover', function () { messageElm.innerText = 'hovered: yep'; });
ovalElm.attachEvent('onmouseout', function () { messageElm.innerText = 'hovered: nope'; });
</script>
</body>
</html>
If you try to move mouse over oval element you can noticed that rendered shape is not same as hover shape. I mean, hover triggers 2-3px from rendered shape (not from each side).
So question is: how to disable that virtual area (if it is possible at all)?
i had the same issue and i tried usemap;
first i create a map on a transparent png8 which covered the vml
this.dom.insertAdjacentHTML("AfterBegin",'<map name="'+_id+'"></map><img id="'+_id+'" src="'+transparent.png+
'" style="position:absolute;width:'+dom.clientWidth+';height:'+dom.clientHeight+'" />');
var map = this.dom.getElementsByTagName('map')[0];
this.dom.appendChild(map);
this.map = map;
then get the shape attach to an area; map it;
i made poly demo only;
function _getMap(shape){
this._map = this._map || {};
if(this._map[shape.id]){
}else if(shape.nodeName == 'shape'){
var arrDots = shape.childNodes[0].v.match(/(\d+),(\d+)/g)
this._map[shape.id] = _polyMap(arrDots);
}
return this.map[shape.id]
}
function _polyMap(arrDots){
var map = this.map;
var area = document.createElement('area');
area.setAttribute('shape',"poly");
area.setAttribute('coords',arrDots.join(','));
area.setAttribute('href','##');
area.setAttribute('alt','##');
map.appendChild(area);
}
then you can bind event on it;
function _onIE(shape, evtname, fn){
this._getMap(shape).attachEvent('on'+evtname, fn);
}
I want to edit my country map so I first added Geoserver but I can't edit this map. I want to show openlayers using Geojson but for some reason I can't edit this either.
How i can edit this map? The following is my code with geoserver link:
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.zoomToMaxExtent();
new OpenLayers.Map("map");
var dm_wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://localhost:8080/geoserver/wms?",
{
layers: "trgm:iller",
format: "image/png"
},
{
isBaseLayer: false
}
);
map.addLayers([wms, dm_wms]);
map.zoomToMaxExtent();
</script>
To edit map data in geoserver, you need to use WFS Service.
Then using OpenLayers, you can set the layer editable.
see OpenLayers example
I'm trying to load a map as per the example in the Google documentation, but it's not loading. I tried using resize, but it's not loading correctly. This map is behind a tab rendered with the Prototype JavaScript Framework which magento uses. It loads correctly when not behind a tab.
<style type="text/css">
#map_container { height:500px; width:700px;margin:0;}
</style>
<div id="map_container">
<div id="map_canvas" style="width:500px;height:500px;"></div>
</div>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true">
</script>
<script type="text/javascript">
Event.observe( window, "load", function() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
;
google.maps.event.trigger(map, "resize");
});
</script>
The map is shown with grey parts that cover most of the map and the UI elements are not fully initialized. I tried using google.maps.event.trigger(map, "resize");, but it does not seem to do anything. This div is inside a lot of divs.
Example how to add new tab "GMaps" in Magento "Product Edit" (new tab "id" is 'product_info_tabs_GMaps')
PHP part
class My_Gmaps_Block_Adminhtml_Tabs_Gmaps extends Mage_Adminhtml_Block_Widget_Form
public function __construct() {
parent::__construct();
$this->setTemplate('my/gmaps/tabs/gmaps.phtml');
}
/............................./
}
Template part 'pwron/gmaps/tabs/gmaps.phtml':
<style>#map_canvas {width:100%; height:600px;}</style>
<div class="map" id="map_canvas"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var GMaps = Class.create();
GMaps.prototype = { .................... }
var gmaps = null;
function switchGMapsTab(tab){
if ( tab.tab.container.activeTab.id == 'product_info_tabs_GMaps'){
if (!gmaps){
gmaps = new GMaps({});
gmaps.update();
}
}
}
varienGlobalEvents.attachEventHandler('showTab', switchGMapsTab); <script>
trouble way
1. Created Map
2. Tab showed (not loads all tiles)
best way
1. Tab showed
2. Created Map
I had the same problem as you. But I managed to find the solution with this simple code.
First, go to the file where you put the tab template, search for the <li> tag that load your map tab and put this inside:
<li onclick="reloadmap()">
And in the map script right after the
google.maps.event.addDomListener(window, 'load', initialize);
put this:
function reloadmap(){
//when you resize the map, you lose your zoom and your center
//so you need to get them again here
z = map.getZoom();
c = map.getCenter();
google.maps.event.trigger(map, 'resize');
//and set them again here
map.setZoom(z);
map.setCenter(c);
}