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
Bing to Mapbox
By Chuck Han
