none
Add handler for HtmlPushpinlayer module RRS feed

  • Question

  • I tried using the Htmlpushpinlayermodule.js to add html template to the pin, I found that I am not able to use the click addHandler

    pushpins = [new HtmlPushpin(location, template, {anchor: new Microsoft.Maps.Point(18,42)})];
    layer = new HtmlPushpinLayer(pushpins);

    Microsoft.events.addHandler(pushpins, 'click', function() { console.log('foo)}

     Microsoft.Maps.Events.addHandler(pushpins, 'click', function() {
         console.log('foo');
     })

    self.bingMap.layers.insert(layer);

    It throws error 

    edge-vendors-1.0.88.0.js:85 TypeError: Cannot read property 'add' of undefined
        at Function.n.addHandler (https://www.bing.com/rms/SDKPlugin/cj,nj/a8483a04/4d1324b4.js?bu=rms+answers+MapsSDKRelease+AnonymousBegin*SDKPluginStart*SDKInfoboxOverlay*Infobox*SDKColor*TileSource*TileLayer*Module*Layer*EntityCollection*Events*SDKPrimitiveTemplateSelector*UserMouseEventArgs*PixelReference*Pushpin*SDKPolygon*SDKPolyline*TestDataGenerator*CustomOverlay*GroundOverlay*AnimatedTileLayer*MapsTilePrimer*SDKMap*PointCompression*SDKPluginEnd*AnonymousEnd:1:25860)
        at http://localhost.choicehotels.com:8888/bundles/edge-app-1.0.88.0.js:6375:93
        at c (https://www.bing.com/rms/SDKPlugin/cj,nj/a8483a04/4d1324b4.js?bu=rms+answers+MapsSDKRelease+AnonymousBegin*SDKPluginStart*SDKInfoboxOverlay*Infobox*SDKColor*TileSource*TileLayer*Module*Layer*EntityCollection*Events*SDKPrimitiveTemplateSelector*UserMouseEventArgs*PixelReference*Pushpin*SDKPolygon*SDKPolyline*TestDataGenerator*CustomOverlay*GroundOverlay*AnimatedTileLayer*MapsTilePrimer*SDKMap*PointCompression*SDKPluginEnd*AnonymousEnd:1:17619)
        at Object.n.loadModule (https://www.bing.com/rms/SDKPlugin/cj,nj/a8483a04/4d1324b4.js?bu=rms+answers+MapsSDKRelease+AnonymousBegin*SDKPluginStart*SDKInfoboxOverlay*Infobox*SDKColor*TileSource*TileLayer*Module*Layer*EntityCollection*Events*SDKPrimitiveTemplateSelector*UserMouseEventArgs*PixelReference*Pushpin*SDKPolygon*SDKPolyline*TestDataGenerator*CustomOverlay*GroundOverlay*AnimatedTileLayer*MapsTilePrimer*SDKMap*PointCompression*SDKPluginEnd*AnonymousEnd:1:17961)
        at http://localhost.choicehotels.com:8888/bundles/edge-app-1.0.88.0.js:6372:36
        at arrayEach (http://localhost.choicehotels.com:8888/bundles/edge-app-1.0.88.0.js:232:85)
        at Function.<anonymous> (http://localhost.choicehotels.com:8888/bundles/edge-app-1.0.88.0.js:833:112)
        at module.exports.self.createPins (http://localhost.choicehotels.com:8888/bundles/edge-app-1.0.88.0.js:6366:19)
        at self.remakeMap (http://localhost.choicehotels.com:8888/bundles/edge-app-1.0.88.0.js:6411:88)
        at Scope.$emit (http://localhost.choicehotels.com:8888/bundles/edge-vendors-1.0.88.0.js:10:22937) undefined


    Wednesday, August 23, 2017 6:43 PM

Answers

  • That's correct. HtmlPushpin's are not standard pushpins, they are DOM elements that are rendered by using a Custom Overlay in Bing Maps V8. As such, a different event system was introduced in the HtmlPushpin sample, this is what was originally how events where added:

    pins[3].onMouseOver = function (e) {
        infobox.setOptions({
            location: e.target.getLocation(),
            title: 'Pin Hovered',
            visible: true
        });
    };
    
    pins[3].onMouseOut = function (e) {
        infobox.setOptions({ visible: false });
    };

    That said, I had plans to see if I could extend the standard event system to add support for HtmlPushpin's. I've just gone through and managed to update this sample to use the standard event system. With the new version you can add events like this:

    Microsoft.Maps.Events.addHandler(pins[3], 'mouseover', function (e) {
        infobox.setOptions({
            location: e.target.getLocation(),
            title: 'Pin Hovered',
            visible: true
        });
    });
    
    Microsoft.Maps.Events.addHandler(pins[3], 'mouseout', function (e) {
        infobox.setOptions({ visible: false });
    });

    Note this is only for attaching events to individual HtmlPushpins, and not for HtmlPushpinLayer's.


    [Blog] [twitter] [LinkedIn]



    Wednesday, August 23, 2017 7:57 PM
  • Loop through the pins in your layer and add a click event to each one.  

    In regards to "new version", I was referring to the updated version of the HtmlPushpin sample. Html pushpins are not supported by Bing Maps V8 out of the box, so you have to work around this if you want to have html based pushpins. The HtmlPushpin class comes from this code sample that shows how to do this workaround: 

    https://github.com/Microsoft/BingMapsV8CodeSamples/tree/master/Samples/Custom%20Overlays/HtmlPushpinLayer

    Make sure you are using the latest JavaScript file for the module. 


    [Blog] [twitter] [LinkedIn]

    Wednesday, August 23, 2017 8:45 PM
  • You are adding the event to an array, not to a pushpin, thus the error. Also, the module should be loaded outside of the forEach loop otherwise you end up loading it multiple times which isn't needed. The same goes for creating the layer. Here is a modified version of your code that should work:

    Microsoft.Maps.loadModule('HtmlPushpinLayerModule', function() {
    
    	var pushpins = [];
    	
        _.forEach(Search.hotelAvailabilities, function(availability) {
    		var hotel;
    		var layer;
    		var hotelLatitude = hotel.location.latitude;
    		var hotelLongitude = hotel.location.longitude;
    		var location = new Microsoft.Maps.Location(hotelLatitude, hotelLongitude);
    
    		var pinTemplate = self.pushpinHtmlSanitize(hotel);
    		
    		var pin = new HtmlPushpin(location, pinTemplate, {anchor: new Microsoft.Maps.Point(18,42)});
    		
    		Microsoft.Maps.Events.addHandler(pin, 'click', function(e) {
    			console.log('foo');
    		});
    		
    		pushpins.push(pin);
    	});
    	
    	console.log(pushpins);	
    	
    	layer = new HtmlPushpinLayer(pushpins);
    	self.bingMap.layers.insert(layer);
    });


    [Blog] [twitter] [LinkedIn]

    Wednesday, August 23, 2017 10:16 PM

All replies

  • That's correct. HtmlPushpin's are not standard pushpins, they are DOM elements that are rendered by using a Custom Overlay in Bing Maps V8. As such, a different event system was introduced in the HtmlPushpin sample, this is what was originally how events where added:

    pins[3].onMouseOver = function (e) {
        infobox.setOptions({
            location: e.target.getLocation(),
            title: 'Pin Hovered',
            visible: true
        });
    };
    
    pins[3].onMouseOut = function (e) {
        infobox.setOptions({ visible: false });
    };

    That said, I had plans to see if I could extend the standard event system to add support for HtmlPushpin's. I've just gone through and managed to update this sample to use the standard event system. With the new version you can add events like this:

    Microsoft.Maps.Events.addHandler(pins[3], 'mouseover', function (e) {
        infobox.setOptions({
            location: e.target.getLocation(),
            title: 'Pin Hovered',
            visible: true
        });
    });
    
    Microsoft.Maps.Events.addHandler(pins[3], 'mouseout', function (e) {
        infobox.setOptions({ visible: false });
    });

    Note this is only for attaching events to individual HtmlPushpins, and not for HtmlPushpinLayer's.


    [Blog] [twitter] [LinkedIn]



    Wednesday, August 23, 2017 7:57 PM
  • How do I do click events on layers? For instance,  if I have to click on a pin (all the pins are generated dynamically and pushed to the maps ), How would I go about doing this ?

     And the new version ? I am not sure what the new version is other than V8. And I am not sure if entities are supported instead of layers 


    Vignesh B Raj


    Wednesday, August 23, 2017 8:34 PM
  • Loop through the pins in your layer and add a click event to each one.  

    In regards to "new version", I was referring to the updated version of the HtmlPushpin sample. Html pushpins are not supported by Bing Maps V8 out of the box, so you have to work around this if you want to have html based pushpins. The HtmlPushpin class comes from this code sample that shows how to do this workaround: 

    https://github.com/Microsoft/BingMapsV8CodeSamples/tree/master/Samples/Custom%20Overlays/HtmlPushpinLayer

    Make sure you are using the latest JavaScript file for the module. 


    [Blog] [twitter] [LinkedIn]

    Wednesday, August 23, 2017 8:45 PM
  •      I did update the new HtmlPuhspinlayerModule and I still get the error for the event handler

     

         
    var pushpins = [];
        _.forEach(Search.hotelAvailabilities, function(availability) {
          var hotel;
          var layer;
          var hotelLatitude = hotel.location.latitude;
          var hotelLongitude = hotel.location.longitude;
          var location = new Microsoft.Maps.Location(hotelLatitude, hotelLongitude);
    
          var pinTemplate = self.pushpinHtmlSanitize(hotel);
    
          Microsoft.Maps.loadModule('HtmlPushpinLayerModule', function() {
            pushpins.push(new HtmlPushpin(location, pinTemplate, {anchor: new Microsoft.Maps.Point(18,42)}));
            console.log(pushpins);
    
            Microsoft.Maps.Events.addHandler(pushpins, 'click', function(e) {
              console.log('foo');
            });
    
            layer = new HtmlPushpinLayer(pushpins);
            self.bingMap.layers.insert(layer);
          });
        });

    I still get the error

    TypeError: Cannot read property 'add' of undefined
        at Function.n.addHandler (https://www.bing.com/rms/SDKPlugin/cj,nj/a8483a04/4d1324b4.js?bu=rms+answers+MapsSDKRelease+AnonymousBegin*SDKPluginStart*SDKInfoboxOverlay*Infobox*SDKColor*TileSource*TileLayer*Module*Layer*EntityCollection*Events*SDKPrimitiveTemplateSelector*UserMouseEventArgs*PixelReference*Pushpin*SDKPolygon*SDKPolyline*TestDataGenerator*CustomOverlay*GroundOverlay*AnimatedTileLayer*MapsTilePrimer*SDKMap*PointCompression*SDKPluginEnd*AnonymousEnd:1:25860)
        at http://localhost.choicehotels.com:8888/bundles/edge-app-1.0.88.0.js:6378:75
        at c (https://www.bing.com/rms/SDKPlugin/cj,nj/a8483a04/4d1324b4.js?bu=rms+answers+MapsSDKRelease+AnonymousBegin*SDKPluginStart*SDKInfoboxOverlay*Infobox*SDKColor*TileSource*TileLayer*Module*Layer*EntityCollection*Events*SDKPrimitiveTemplateSelector*UserMouseEventArgs*PixelReference*Pushpin*SDKPolygon*SDKPolyline*TestDataGenerator*CustomOverlay*GroundOverlay*AnimatedTileLayer*MapsTilePrimer*SDKMap*PointCompression*SDKPluginEnd*AnonymousEnd:1:17619)
        at Object.n.loadModule (https://www.bing.com/rms/SDKPlugin/cj,nj/a8483a04/4d1324b4.js?bu=rms+answers+MapsSDKRelease+AnonymousBegin*SDKPluginStart*SDKInfoboxOverlay*Infobox*SDKColor*TileSource*TileLayer*Module*Layer*EntityCollection*Events*SDKPrimitiveTemplateSelector*UserMouseEventArgs*PixelReference*Pushpin*SDKPolygon*SDKPolyline*TestDataGenerator*CustomOverlay*GroundOverlay*AnimatedTileLayer*MapsTilePrimer*SDKMap*PointCompression*SDKPluginEnd*AnonymousEnd:1:17961)
        at http://localhost.choicehotels.com:8888/bundles/edge-app-1.0.88.0.js:6375:36
        at arrayEach (http://localhost.choicehotels.com:8888/bundles/edge-app-1.0.88.0.js:232:85)
        at Function.<anonymous> (http://localhost.choicehotels.com:8888/bundles/edge-app-1.0.88.0.js:833:112)
        at module.exports.self.createPins (http://localhost.choicehotels.com:8888/bundles/edge-app-1.0.88.0.js:6371:19)
        at self.remakeMap (http://localhost.choicehotels.com:8888/bundles/edge-app-1.0.88.0.js:6414:88)
        at Scope.$emit (http://localhost.choicehotels.com:8888/bundles/edge-vendors-1.0.88.0.js:10:22937) undefined


    Vignesh B Raj




    • Edited by Vignesh B Raj Wednesday, August 23, 2017 9:28 PM Updated Context
    Wednesday, August 23, 2017 9:04 PM
  • You are adding the event to an array, not to a pushpin, thus the error. Also, the module should be loaded outside of the forEach loop otherwise you end up loading it multiple times which isn't needed. The same goes for creating the layer. Here is a modified version of your code that should work:

    Microsoft.Maps.loadModule('HtmlPushpinLayerModule', function() {
    
    	var pushpins = [];
    	
        _.forEach(Search.hotelAvailabilities, function(availability) {
    		var hotel;
    		var layer;
    		var hotelLatitude = hotel.location.latitude;
    		var hotelLongitude = hotel.location.longitude;
    		var location = new Microsoft.Maps.Location(hotelLatitude, hotelLongitude);
    
    		var pinTemplate = self.pushpinHtmlSanitize(hotel);
    		
    		var pin = new HtmlPushpin(location, pinTemplate, {anchor: new Microsoft.Maps.Point(18,42)});
    		
    		Microsoft.Maps.Events.addHandler(pin, 'click', function(e) {
    			console.log('foo');
    		});
    		
    		pushpins.push(pin);
    	});
    	
    	console.log(pushpins);	
    	
    	layer = new HtmlPushpinLayer(pushpins);
    	self.bingMap.layers.insert(layer);
    });


    [Blog] [twitter] [LinkedIn]

    Wednesday, August 23, 2017 10:16 PM
  • It still throws the same error, I updated the code the way you sent and also Htmlpushpinlayermodule with whatever was there at 

    https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Custom%20Overlays/HtmlPushpinLayer/HtmlPushpinLayerModule.js


    Vignesh B Raj

    Wednesday, August 23, 2017 10:47 PM
  • Try pressing F5 to clear your browser cache as that would still be loading the old version of the module.

    [Blog] [twitter] [LinkedIn]

    Wednesday, August 23, 2017 11:29 PM
  • Oh YEaaaaaa. I think it was the cache issue.. Thank you  :-)


    Vignesh B Raj

    Thursday, August 24, 2017 12:13 AM