I recently received several questions about a google maps in webi mashup post i published some time ago. So, i decided to redo the example, using SAP Business Intelligence Platform 4.0 and the latest version of webi.
In the original post, i used server side code (.jsp file) to pass info from the webi report to the google maps. This time, i used client side code (javascript), which is better suited for this application and provides better flexibility.
The crux of this approach is as follow:
A webi report based on the e-Fashion sample universe was created, the report has store address info, and yearly sales numbers.
The webi report contains two blocks. The left block has hyperlinks with store addresses, and the right block contains the map. When you click a store on the left, the map updates with the address of that store and the map info window displays the store yearly revenues as a bar chart.
The map is created in webi using a small html code snippet that embeds the html file that contains the actual map parsing and creation code in an iframe inside a div.
The left block contains a formula that translates the store addresses and revenues to html hyperlink that targets the iframe, passing it different address and sales data so it reloads with the new store data as you click the hyperlinks.
That’s it in short. You can find the report .wid file, and the embedded html file in a zip here. Enjoy!
Hi Ron, great post. I have been trying to get masher for a while now. I will be setting up a demo environment in XI 4.0 and need to have a mapping tool.
Do you know where I can download it? I’ve looked all over the SAP site and can’t find it.
Is it a plugin or licensed software?
Doesn’t Google charge for the access to their API’s?
Many questions…sorry. Just excited because this may be the solution for a client need that we have been looking for.
thanks
David, feel free to download my source files and setup as you see fit. Please note that there are still limitations with printing/exporting to PDF, as webi will not render the html as html (the map image), but will actually display the html code in pdf format. BO Labs has a mashup plugin solution they published years ago, but i have not seen it for at least two years, don’t think there was a lot of interest… Google has some API they require payment and many that are free. Basic map API usage is free. You can also use the static google map image API, it’s easier to setup (basically just need to construct a URL), free and might work better with PDF, since it’s an image.
Hi Ron,
Can you please post a step by step video guide in YouTube which you help developers like me who are new to Webi and api related..thanks
Hi Ron,
I am new to webi, Your report is really nice and i wanted to try it so I downloaded your zip file. can you please let me know where to place file5.html file and also do we need to set the state field in your report to display as html?
Thanks
John
John, in my example, i created a directory called mashup on in the tomcat webapps dir. You do need to set the iframe field to be viewed as html to have webi render the html code and not just display it as text. Regards – Ron
Hi Ron,
I created a Webi report from eFashion with same objects, borrowed the same formula for gmapaddress and iframe variables. Block 1 has gmapaddress formatted as Hyperlink and Block 2 has iframe and formatted to HTML. I placed file5.html in my /Tomcat6/webapps/mashup/ folder.
Unfortunately, all i see in the iframe cell is and clicking hyperlink doesn’t do anything.
Can you advise?
all i see in the iframe cell is “<iframe id="mapFrame" name= …."
Jeff, make sure that the webi cell that contains the iFrame is set to be displayed as html. Sounds like it is displaying the html code, instead of rendering it…
Jeff, try to break down the problem into small pieces and solve one at a time… first of all, can you load the file5.html file in a web browser independent of webi? So, try to access it from a web browser (http://YOURHOST:YOURPORT/mashup/file5.html?address=some address, for example, boston ma]&2004=10&2005=20&2006=30. If you look at the html code, you will see this is the url format the js function expects, as it will parse the info from the url string and pass it to the map object. If that works, make sure your in webi the reference to the html file is correct, and also make sure you set the viewing options properly on the cell, so they render the html, not display the html code.
I get a google maps api disabled message when i try to access independent of webi. Obtain a valid key…
Nevermind, trying to get my own api key
Resolved. I can view map and graph pop up with http://:/mashup/file5.html?address=boston ma]&2004=10&2005=20&2006=30
Did not resolve my Webi report or help with the .wid you provided that I uploaded to my Enterprise from Rich Client.
The iframe still shows code and not google map, and when I click on hyperlink address on left block the whole column is selected and doesn’t seem to let me select just one.
hmm… Jeff are you viewing the report in the webi html viewer? Sounds like you might be using the java viewer, this mashup will only work in the html viewer. I posted a live example tonight, check it out..
Hi Jeff,
how did you resolve the issue with the api key?
Thanks
Thanks! that was all.
Hi,
Great example. I’ve been updating your report in the CMS, it works fine withe the Google API inside but when I click on the address I get this error message :
“140%20Wallace%20…”
Each blank is replaced by “%20″ so the API can’t find the right place. Any ideas to resolve this issue ?
Regards,
William, webi has a function to encode url (URLEncode), make sure you wrap the address with that, it will set the url encoding for the browser correctly.
It works ! The problem came from my browser..Works fine with IE but not with Chrome.
Good to know. Thanks !
Hi Ron,
Brilliant mate! Really loved the idea. But being new to Google APIs, I was wondering if I can have a list of postcodes mapped as pins on the map? How do I go about doing this? Any pointers would be deeply appreciated! Thanks in advance!
Thanks Som. I assume you can create a webi variable that will string together multiple values of addresses as an array and pass this to the google API embedded in the iFrame and then process from there.
Google has decided that its users of their well-liked Google Maps service will begin becoming charged a fee for utilizing their service. Websites that are going embedding a Google Map of their location will be charged a fee for usage.This new Google Maps fee is going to hit mostly the bigger companies, particularly the Travel industry. I suspect that certain websites that are the heaviest users would be websites like TripAdvisor and Expedia.”..
With kind thoughts
http://www.caramoantourpackage.com