Mud Map JavaScript API v1

Audience

This documentation is designed for people familiar with JavaScript programming and object-oriented programming concepts. You should also be familiar with Google Maps and Mud Map Map Store from a user's point of view. There are many JavaScript tutorials available on the Web.

This conceptual documentation is designed to let you quickly start exploring and showing raster maps from Mud Map using Google Maps API.

Obtaining an API Key

You need to obtain an API from us before you can display Mud Map Raster Maps on your website. Contact us to obtain and API key.

PLEASE NOTE: Each API key can be used for only one domain. When requesting an API key, please provide the domain. e.g. http://mydomain.com

Hello World

The easiest way to start learning about the Mud Map Maps API is to see a simple example. The following web page displays a raster map from Mud Map with id = 220313.

  1. The Mud Map JS API is based off Google Maps JS API v3 so make sure the Google Maps API JavaScript snippet is included first.

  2. Include the Mud Map API JavaScript block using a script tag. In this example, the Mud Map Maps API is initialised with the API key of = "MMRM-51108641-1". Then the Map ID is passed in to determine which raster map is displayed. In this example, Map ID = "220313"

  3. Now properties of the mudMaps object can be used to show the raster map using the Google Map API.

View Example

<html>
    <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <!-- MUD-MAPS Raster Map START -->
    <script>
       (function(w, d, u, v, f) {
        w[v] = w[v] || {};
            w[v].init = function(u){
                w[v].u = u;
            };
            w[v][f] = function(s){
                return encodeURIComponent(s).replace(/[!'()*]/g, function(c) {
                    return '%' + c.charCodeAt(0).toString(16);
                });
            };
            w[v].map = w[v].map || {};
            w[v].map.init = function(i){
                var src = u + '?m=' + i + '&u=' + w[v].u + '&r=' + w[v][f](w.location.href);
                d.write('<' + 'script src="' + src + '"><' + '/script>');
            };
        })(window, document, '//www.mud-maps.com/maps/api/v1/js', 'mudMaps', 'fixedEncodeURIComponent');
        mudMaps.init("MMRM-51108641-1");
        mudMaps.map.init(220313);
    </script>
    <!-- MUD-MAPS Raster Map END --> 

    <script> 
        var map;    
        function initialize() 
        {
            if(mudMaps.map.mudmapImageMapType){
                var mapOptions = {
                    center: mudMaps.map.boundary.getCenter(),
                    zoom: mudMaps.map.getMaxZoom(),
                    mapTypeControlOptions: {mapTypeIds: [mudMaps.mapTypeName]}
                };  
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                map.mapTypes.set(mudMaps.mapTypeName, mudMaps.map.mudmapImageMapType);
                map.setMapTypeId(mudMaps.mapTypeName);
            }
        }
        
    </script>

    <style>
        body {padding: 0px; margin: 0px; background: url(gridpattern.png) repeat;}
        #map_canvas {background: none!important;}
    </style>
    </head>
    <body onLoad="initialize();">
        <div id="map_canvas" style="width:100%; height:100%;"></div>
    </body>
</html>

Map ID

The Online Map store is an excellent tool for finding raster maps. Map IDs are contained in the URL.

Example
The ID of this map http://mud-maps.com/map-store/map-226457 is 226457.

The Mud Map Object

The most important property of this object is the map property. mudMaps.map is an object and contains all information about raster map displayed on page. It has the following properties.

• mudmapImageMapType is a instance of google.maps.ImageMapType class. We use this property as argument when setting the mapTypes. map.mapTypes.set(mapTypeID, mudMaps.map.mudmapImageMapType)

• boundary is a instance of google.maps.LatLngBounds class. This property contains info about boundary of raster map.

• getMaxZoom() is a function, that returns the max zoom of raster map.

• getMinZoom() is a function, that returns the min zoom of raster map.

PLEASE NOTE: Mud Map raster maps have only 3 zoom levels.