ben_hollifield
Tera Guru

They say a picture is worth a thousand words, and ServiceNow offers a number of ways to visualize your data via reporting, Performance Analytics, Google Maps integrations, BSM Maps, and more.

However, the really imaginative stuff has always taken a lot of work. Getting a unique visualization idea out of your head and into ServiceNow takes time and development chops.

Starting today, we have an option on Share that makes it easier than ever to quickly take the picture in your head from concept to reality. Flexible Mapper provides a simple point-and-click interface for developing maps and interactive images, but also offers the power of scripting for your more complex needs.

Here are a few ideas you can build:

  • Data center floorplan that alerts error conditions and deep links into CIs
  • Office floorplan fed by data from your User and Incident tables
  • Geographical map that displays open tasks at your various locations
  • Promotional infographics fed by your ServiceNow data
  • Interactive event maps to guide conference attendees

If you have an idea for a cool visualization that you'd like to bring to life in ServiceNow, check out the video below to see if Flexible Mapper can help. The Share download is loaded up with all of the examples shown to help you quickly start creating your own content.

Flexible Mapper on Share

6 Comments
dwayne3
ServiceNow Employee

Very Nice Ben!


amangrulkar
Kilo Explorer

Agreed - this is very cool! Tons of potential uses for something so simple, yet elegant. Nice Ben!


Jay_Ford
Kilo Guru

Ben this is very nice! I have it running in my dev instance and was wondering if it's a simple code change to allow for custom marker images that we load into the instance rather than using the Maki icons? I wanted to do something like the below image for our building since this is our corporate standard. Some of ours are relatively close to the Maki ones but some there is nothing close.



Screen Shot 2015-04-07 at 3.44.04 PM.png


ben_hollifield
Tera Guru

Hey Jay - Unfortunately, changing out those icons is easier said than done. I initially went down the route of having custom uploaded icons as the only option, but consistency and appearance suffered, so I settled on Maki icons - they're easy, flexible, and lightweight. If you're set on the custom route, and if you're comfortable with some pretty dense coding, I can tell you where you'll need to customize:



1) UI script 'flexible_mapper_js': Specifically, there's a function called 'getMarkerIcon'. This takes the icon as listed on the Container Style and fetches it from Maki for display. You might be able to get away with just editing this script and passing back your custom icons based on some attribute of the Container or Style.



2) Script Include 'FlexibleMapperHelper': This is where the maps are built up server-side and sent over to the client. There's a labeled section in the 'loadCargo' function where the Container Styles are packaged up for shipment. Not sure if it'll be necessary, but you could add some additional data here to be parsed at the client (by the UI Script above).



There may be a simple way to accomplish what you need, but it isn't immediately apparent. When you start digging, you'll see that those scripts can get fairly involved.



Best of luck - I love the look that you're after - let us know if you are able to put it together!


Jay_Ford
Kilo Guru

Thanks Ben! I modified the 'getMarkerIcon' function and was able to get it working with uploaded images. It's a bit rudimentary at the moment since I was just trying to get it working, but basically I just added an if statement into the function to with and indexOf to see if the value in the icon field has a '.png', then call L.icon. I'll likely add attribute fields to the flexible_styles table before it's all over with. Thanks again!



if(returnIcon.indexOf('.png') > -1){


  returnMarker = L.icon({


  shadowAnchor: [14, 48],


  shadowSize: [48, 48],


  shadowUrl: 'marker-shadow.png',


  popupAnchor: [5, -45],


  iconAnchor: [14, 48],


  iconUrl: returnIcon


  });


  }


  else{


  returnMarker = L.MakiMarkers.icon({


  icon: returnIcon,


  color: returnColor,


  size: returnSize


  });


  }



Screen Shot 2015-04-08 at 1.44.59 AM.png


ben_hollifield
Tera Guru

Hey Jay,



Fantastic work - the results look great! Thanks for posting the code up here - it may be handy for others in the future.