creating maps with mapstraction

Get rid of your dynamic map integration issues once and for all

Ok people, it’s 2014. Time to get over i-frame based maps if you ask me.

It is a post web 2.0 world with more Api’s and libraries than you can shake a stick at. Why then do I find that most sites I visit, including recently developed sites, still insist on using the standard google maps iframe plugin? My suspicions are two fold.

Is it that too many developers can’t be bothered to find a more attractive solution or is it that they simply don’t know how?

I will save calling you a lazy s.o.b and assume that you have never had the pleasure of learning a better way of including maps into your projects.

Now as you may or may not be aware each map provider (google maps, open maps to name a few) which you can embed on your site, have an API (application programming interface). With this you can manipulate and create your chosen providers map into your site / application.

The trouble is that firstly if and when you learn one mapping API, you seldom attempt to learn another, leaving your options very limited indeed. Secondly you cannot easily switch up your code if you wanted to change provider.

Luckily and unsurprisingly there is a j.s library which can help you cleanly manipulate and place maps from different providers using the same API. It is called mapstraction.

Mapstraction is great because of two reasons:

  1. It allows for custom maps to be added simply without the use of damn iframes.
  2. You can easily switch up a map to a different provider on the fly / when you feel like it.

If your a more seasoned web developer you will have seen some of the absolutely awesome things which can be done using map API’s, but sadly like a lot of things in the development world these are a rare commodity, even more rare is the opportunity to work on such a project. No most maps require very basic functionality; for example to showcase the location of an office.

For the following instructional I will show you how to firstly set up a map using mapstraction, set the map position and add a custom pin, all within a clean js function. So here goes.

Example
Download

1. The HTML

The html required to set up a map using mapstraction is nice and simple:

1
<div id="the_map"></div>

2. CSS

You only need a few lines of css to set the properties of your map area:

1
2
3
4
#the_map {
width: 100%;
height: 800px;
}

3. Include the library.

You obviously need to include the mapstraction library onto your page. You can either download a local copy or pull it strait from their svn. (Put your chosen map provider in the brackets, for this example we will be using open layers)

1
<script type="text/javascript" src="http://mapstraction.com/mxn/build/latest/mxn.js?(openlayers)"></script>

 3a. Include the provider library. Include your chosen map provider’s library. Like mapstraction you can either use a local or remote version.

1
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>

4. The JS

Ok wonderful, so your HTML and CSS are set up and you have included the mapstraction library onto your page. Now to bring it to life.

4a.

The first thing you want to do is create the map variable, which we will call in just a sec. The first parameter is the id of your newly created map div and the second is your chosen provider. So:

1
var map = new mxn.Mapstraction('the_map','openlayers');

4b. The next step is to set the location of the map. This needs to be in lat/long coordinates so take your address and quickly convert it to lat/long points.

My favorite tool to do this is: Latlong’s address converter.
Once you have those go ahead and create the location variable.

1
var latlon = new mxn.LatLonPoint(49.263263,-123.119557);

4c. You now want to create a new marker for you map. We will first create the object and set it to the office location then attach our custom icon.

Creating the marker

1
var office = new mxn.Marker(location);

Setting the custom pin

1
office.setIcon('images/map_pin.png',[150,150]);

*The setIcon functions parameters are 1) the location of your custom pin & 2) the size in pixels you want your pin to appear as.

 

4d. The final step is to bring it all together and create the map. So firstly bind your marker to the map:

1
map.addMarker(office);

and lastly set the centre of the map and zoom level.

1
map.setCenterAndZoom(center,16);

4e. The very last thing you need to do is obviously call the function. The now completed function should look as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function create_map() {

/* Set up the map */
map = new mxn.Mapstraction('the_map','openlayers');

/* Set up your location */
latlon = new mxn.LatLonPoint(49.263263,-123.119557);

/* Set up your marker */
office = new mxn.Marker(latlon);

/* Bind your custom pin to your marker */
office.setIcon('images/map_pin.png',[150,150]);

/* Bind your marker to the map */
map.addMarker(office);

/* Set the map center and zoom level */
map.setCenterAndZoom(latlon,16);

}

// call the function
create_map();

To make the code easier to use in the future add some variables with the key information which you can change out later. The modified function could should look as follows :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function create_map() {

/* Variables */
map_id = 'the_map'
provider = 'openlayers';

/* offices address translated into lat/long */
location_lat = 49.263263;
location_lon = -123.119557;

/* Set up the map */
map = new mxn.Mapstraction(map_id,'openlayers');

/* Set up your location */
latlon = new mxn.LatLonPoint(location_lat,location_lon);

/* Set up your marker */
office = new mxn.Marker(latlon);

/* Bind your custom pin to your marker */
office.setIcon('images/map_pin.png',[150,150]);

/* Bind your marker to the map */
map.addMarker(office);

/* Set the map center and zoom level */
map.setCenterAndZoom(latlon,16);

}

As I said this is a very basic example of what you can do with mapstraction and I advise you to explore it further on your own. It is a slightly older but still fantastic library that can be the springboard to many great ideas and applications. Have fun!

Stay dedicated.

Rory K

Rory Kermack is a professional programmer, interactive designer, and entrepreneur. Working with the #iot, #hybridapps, #webrtc & #reactjs. Senior dev & main contributor of codeanthology.