Bing to Mapbox

Chuck Han

Web Developer



SST Software

World's leader in agriculture

data management

Why This Topic



  • A guide for moving to Mapbox
  • Covers both Bing and Mapbox



  • Why
  • How I did it
  • The result
  • Setting things up
  • Pixel coordinate systems
  • Handling events
  • Comparable API classes
  • Q & A



  • Mostly $$ savings, pretty significant amount
  • An issue with loading custom tiles

How I Did It


  • Code migration process
  • Flip-a-switch solution

Code Migration Process


  • Understanding what the app does
  • Gained familiarity with Bing map API
  • Finding ALL the Bing map code
    • Prefix - Microsoft.Maps
    • Ctrl+F on "Microsoft.Maps" as a starting point
    • Eye-ing it
    • Look in JS files whose file names imply mapping-related features, such as pushpins.js
    • Manually trace call hierarchy to find all the rest
  • Replacing Bing map code
    • By class
    • By feature
  • Test UI iteratively

Flip-A-Switch Solution


  • All JS and CSS references were in one "Index.cshtml" file
    • ​It was really a SPA
  • Created a new JS file prefixed with "mapbox." for every old JS file that had Bing map code
  • Renamed old "Index.cshtml" file to "Bing-Index.cshtml"
  • Created a new "Index.cshtml" file with references to all the new JS and CSS references
  • ------------------------- VOILA -------------------------
  • Benefits of this "flip-a-switch" solution
    • Testing Mapbox against Bing
    • Pain-free to move back to Bing if needed

The Result


  • 100% of our app's functionality replaced
  • Improved custom tiles loading
  • About 12 man days, 100 man hours

Setting Things Up


  • Referencing JavaScript and CSS
  • Access key/token

 Referencing JavaScript and CSS




  • Bing Maps AJAX Control 7.0
  • One Base script
  • http: <script type="text/javascript" src=""></script>
  • https<script type="text/javascript" src=""></script>
  • "AdvancedShapes" module was required for complex shapes: rings, multipolygons, etc
  • Use "loadModule" method:
    • Microsoft.Maps.loadModule("AdvancedShapes");
    • Other modules: Directions, Search, Traffic, etc

Referencing JavaScript and CSS


  • Only https
  • Both JS and CSS, with version number
  • <script src=''></script>
  • <link href='' rel='stylesheet' />

Access Key/Token



  • Very similar process
  • Create an account on Bing map and Mapbox site
  • Include the key string in your code

 Pixel coordinate systems



  • Typical steps taken to calculate pixel location on map
  • Confusion due to different (0,0) location

Typical steps taken to calculate

pixel location on map


  • Get the lat and long of a point on the map
  • Convert the lat and long to pixel location
  • Do some math with the pixel location
  • Convert the new pixel location back to lat and long
  • Display the popup based on the new lat and long



(0,0) defaults to center of map











(0,0) defaults to upper left corner of map

Handling events



  • Pretty big difference compared to other comparable classes between Bing and Mapbox




  • Revolves around the "Events" object
  • var handlerId = addHandler(object, 'event', eventHandler) - code example
  • removeHandler(handlerId) - code example




  • No central object like "Events" object
  • Event-powered classes such as
    • "Map", "Marker", "Polygon", etc.
    • Use common sense.
  • Event methods:
    • on, off, once, fire - code example

Comparable API classes


  • Only list a few here with bigger differences. Go to my blog for the full list.
    • Map/Map
    • Switching map view types or layers
    • Polygon/Polygon, Multipolygon
    • Color class/<Path options> object
    • EntityCollection/LayerGroup
    • GeoLocationProvider class/map.locate() method
    • TileLayer/TileLayer, wrapper for Bing url template

Thank you!




Chuck Han

Web Developer

SST Software