Bing to Mapbox

Chuck Han

Web Developer

@chuck_peter_han

www.CourageousCoder.com

 

SST Software

World's leader in agriculture

data management

Why This Topic

 

 

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

Agenda

 

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

Why

 

  • 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

 

  • Bing Maps AJAX Control 7.0
  • One Base script
  • http: <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  • https: <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></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


Mapbox


  • Only https
  • Both JS and CSS, with version number
  • <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
  • <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' 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

Bing

 

(0,0) defaults to center of map

 

 

 

 

 

 

 

 

Mapbox

 

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

Handling events

 

 

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

Bing

 

 

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

Mapbox

 

 

  • 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!

 

Questions?

 

Chuck Han

Web Developer

SST Software

@chuck_peter_han

www.CourageousCoder.com